10DEC2020 - Update branch from master to main.

---

D3.js is a JavaScript library (created by Mike Bostock)

If you plan on making a data dashboard, you should consider the following steps:

• OBTAIN DATA
  • Kaggle is great source of free data!
• FILTER DATA [optional]
  • If desired and/or permitted, remove any unnecessary columns+rows from your data.
• ASSIGN CHARTS
  • Decide which charts your data will best portray to users. (examples below)
• CONVERT DATA [optional]
  • Sometimes it's easier to use .json versus using .csv
  • Suggested free online csv to json converter
• DESIGN PROJECT
  • This is where your artistic abilities create your dashboard wireframes!
• < C O D E >
  • The moment you've been waiting for - building your dashboard!

EXAMPLE DC.JS CHART TYPES

barChart	barChart (stack)	chloropleth
dataCount	dataTable	donutChart
heatMap	lineChart	pieChart
rowChart	scatterPlot	selectMenu

full list of dc.js examples

INSPIRATION

Still stuck for ideas and want some inspiration?

Here are a few examples of data dashboard projects from other Code Institute students that I thoroughly enjoyed!

• Chris Quinn | Exoplanets and how to find them
• Dave Laffan | Super Hero Dashboard
• Matt Bush | London Dashboard

! IMPORTANT NOTES !

UPDATED VERSIONS

dc.js (version 3.0+) and D3 (version 5+) do not work with queue.js

Newer versions of dc.js and D3 do not work with queue.js, which is what was displayed in the course videos. Be careful when searching for help online with problems on your project. Check which version(s) of dc.js and D3 are being used.

COLORS

With the newer versions, color for charts has been expanded. You can select a default color scheme for all charts, or select a scheme for each chart individually.

D3 Scale Chromatic Color Schemes

To set a default color for all charts, you could use the schemeSpectral[11]

dc.config.defaultColors(d3.schemeSpectral[11]);

This will assign a color palette with 11 options (value must be minimum of 3).

Further color options can be seen on ColorBrewer2.org

DEMO

Now for a demo I've created using the new D3 | dc.js versions, just to highlight a few examples of charts in action.

Sample Project:

• Deployed Link
• https://traveltimn.github.io/dc-d3-top-eu-restaurants/