Basic bar chart
This basic bar chart displays yearly values from a CSV file, with bars colored blue and highlighted on hover. It uses D3 v4 to load the data via `d3.csv`, scales with `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles. The chart is configured as a reusable template, where users can edit column names, axis labels, and colors in a designated section. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with labels positioned manually. The example is a fork of Mike Bostock’s original bar chart block, adapted for CSV input.
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
}
// **************************
forked from <a href='http://bl.ocks.org/Eleonore9/'>Eleonore9</a>'s block: <a href='http://bl.ocks.org/Eleonore9/978e35ff4bbdf53de90c896e2afdc879'>Basic bar chart</a>