Basic line chart
This basic line chart displays a time series of yearly values from a CSV file, with a single blue line tracing the data points. The visualization uses D3 v4 to parse the CSV columns, mapping the "year" field to a time-scaled x-axis and the "value" field to a linear y-axis. Axes are rendered with d3.axisBottom and d3.axisLeft, and the line path is drawn using d3.line with a stroke width of 2.5 pixels. The chart includes labeled axes and is designed as a reusable template, with customizable data file, column names, and labels in the script.
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
}
// **************************