d3.js examples---bar chart,pie chart and line chart
D3.js is a Javascript library for visualizing data with different charts.I think it's useful to business data analysis.
The most frequent used charts are three types:bar chart, pie chart and line chart.
First,Bar chart.
Remember to link the d3.js library in html.
JS Code:
Data displayed in Array.
Set the svg size and add the svg in the html.
After built the svg, it's an order to select the rectangular and data,through enter() to add it. Then there is the same to set attributes to rect.
The bar filled color is calculated with the number of array.
When mouseover the bar which will change the background color displayed separately.
Next step is to add label to each bar.
The same processing with select rect as text here.
Add the text content which derived from array and give it attributes.
Try to scale the chart acoording to the svg size, there is a way to scale it with scaleLinear().
I'll just put the pie chart and line chart here for reference.
These two codes from Scrimba.com
The most frequent used charts are three types:bar chart, pie chart and line chart.
First,Bar chart.
Remember to link the d3.js library in html.
JS Code:
Data displayed in Array.
Set the svg size and add the svg in the html.
After built the svg, it's an order to select the rectangular and data,through enter() to add it. Then there is the same to set attributes to rect.
The bar filled color is calculated with the number of array.
When mouseover the bar which will change the background color displayed separately.
Next step is to add label to each bar.
The same processing with select rect as text here.
Add the text content which derived from array and give it attributes.
Try to scale the chart acoording to the svg size, there is a way to scale it with scaleLinear().
I'll just put the pie chart and line chart here for reference.
These two codes from Scrimba.com
