Basic bar chart
This basic bar chart displays categorical year-based values as vertical bars, with each bar’s height encoding the numeric value from a CSV file. The chart loads data from `test-data.csv` using `d3.csv`, then renders SVG rectangles via `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and the code includes configurable labels and margins. The design emphasizes simplicity and reusability, adapting a prior block by mbostock into a customizable template.
AI-generated descriptionBasic bar chart
Link
bl.ocks.org/Eleonore9/978e35ff4bbdf53de90c896e2afdc879
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/3885304'>Bar 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 = 0, yLabelyPosition = -15;
function transformXdata(data) {
return data;
}
function transformYdata(data) {
return +data; // '+' converts to numbers
}
// **************************