Basic line chart
This line chart shows the relationship between two numerical values and time, plotting two series from a CSV file across the years 2010–2015. It uses d3.csv to load the data, then applies d3.scaleTime and d3.scaleLinear for axes, while d3.line constructs the paths. The chart renders in SVG, with each line styled via a separate stroke color. Axis labels are added using d3.axisBottom and d3.axisLeft, and the code includes configurable column names for easy reuse as a template.
AI-generated descriptionBasic line chart
Link
bl.ocks.org/Eleonore9/c1648f9e143ae451a2dd6f044334c31f
Content
This simple bar chart forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3883245'>Line Chart</a>
Changes from the original chart
Aim: I'm hoping to create a reusable template for my data viz needs
Idea: I'm expecting data as CSV file and I'm reusing most of mbostock's original project.
How to use as a template?
Note: The template is still being tested and updated to make it more generic
Fork the project
Upload your CSV file
In
index.html, update the top section:
// *** EDIT TO CUSTOMISE ***
var dataFile = "test-data.csv",
xName = "year", // column name for x-axis in the csv
xAxisLabel = "Years",
xLabelxPosition = 0, xLabelyPosition = 40,
yName = "value", // column name for y-axis in the csv
yAxisLabel = "Value"
yLabelxPosition = -5, yLabelyPosition = -17;
function transformXdata(data) {
var parseTime = d3.timeParse("%Y");
return parseTime(data);
}
function transformYdata(data) {
return +data; // '+' converts to numbers
}
// **************************
forked from <a href='http://bl.ocks.org/Eleonore9/'>Eleonore9</a>'s block: <a href='http://bl.ocks.org/Eleonore9/c1648f9e143ae451a2dd6f044334c31f'>Basic line Chart</a>