Steps to D3JS a line graph:
- Scale Functions: To make a scale function, you have to know the maximum and minimum data (domain) and output(range).
- Use this to Position in following manner:
var width = 500;
var xScale = d3.scale.linear().domain([0, 100]).range([0, width]);
- Use it for Reversing the Y-axis:
var height = 400;
var yScale = d3.scale.linear().domain([0, 10]).range([height, 0]);
- Selection Functions: select() selects the first matching element whilst the d3.selectAll() is ‘greedy’ in that it’ll select everything that matches. Once we’ve made a selection we can manipulate the elements using functions such as
style()- Add/modify CSS style declaration
attr() – Add/modify element attributes;
- Data Joins: In our example, we are plotting a line graph. Plotting in line graph is different from others that we learnt in class because data is continuous unlike other discrete idioms that we learnt in class. To make it continuous use ‘Data Joins’.
In our example, We are appending the path to our group for each data point. Then, datum() joins a single entity to a selection. Attr(“fill”) should be none as it is a line graph and no fill is required Attr(“stroke”) will be the color of the stroke and you can set the width by attr(“stroke-width”).
Reference: https://bl.ocks.org/mbostock/3883245