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 arrays.
When mouse over the bar which will change the background color displayed separately.
The next step is to add a label to each bar.
The same processing with select rect as text here.
Add the text content derived from the 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
👉Follow me for more useful web development content! love sharing🥰
