Historian of early America, Indigenous history, and material culture
md`# Basic bar chart in D3`
chart = {
// draw the svg box with our specified height and width
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
// grab the svg and draw rectangles
// format the dates nicely for the x axis
// use the values for the y axis
// each rectangle should be the height specified in the value column
// each rectangle should be the width calculated based on how many there are (this will be done automatically!)
svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(dateFormat(dateParse(d.date))))
.attr("y", d => y(d.value))
.attr("height", d => y(0) - y(d.value))
.attr("width", x.bandwidth());
// draw the y axis
svg.append("g")
.call(yAxis);
// draw the x axis
// label it with rotated text
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(60)")
.style("text-anchor", "start");
// draw the chart!
return svg.node();
}
md `#### Read the date from the csv and tell d3 what format it's in`
dateParse = d3.timeParse("%Y-%m")
md `#### Take the parsed date and format it differently`
dateFormat = d3.timeFormat("%B %Y")
daterange = {
return data.map(d => dateFormat(dateParse(d.date)))
}
md `### X axis
This tells d3 that the X axis will be a scale made up of equal bands (good for categorical data).
\`\`.domain()\`\` gets the nicely formatted dates from our transformations above.
\`\`.range()\`\` tells d3 the "physical" space to draw the x axis.
\`\`.padding()\`\` tells d3 to add a little padding between each bar.
`
x = d3.scaleBand()
.domain(daterange)
.range([margin.left, width - margin.right])
.padding(0.1)
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
md `### Y Axis
This tells d3 that the Y axis will be a continuous, linear scale.
\`\`.domain()\`\` tells d3 that the y axis will be labeled starting at 0 and go up to the maximum of the values in the dataset. \`\`d3.max()\`\` tells d3 you're looking for the maximum of whatever is inside the parentheses. \`\`(data, d => +d.value)\`\` gets the dataset, then reads it to find the value column. Our values are formatted as strings rather than numbers, so \`\`+d.value\`\` converts those strings to numbers.
\`\`.range()\`\` tells d3 the "physical" space to draw the y axis.`
y = d3.scaleLinear()
.domain([0, d3.max(data, d => +d.value)])
.range([height - margin.bottom, margin.top])
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.append("text")
.attr("x", -margin.left)
.text(data.y))
md `## Appendix
### Set the variables`
margin = ({top: 30, right: 0, bottom: 80, left: 40})
width = 600 - margin.left - margin.right
height = 500 - margin.top - margin.bottom
md `### Get the data`
data = FileAttachment("data.csv").csv()
md `### Get D3`
d3 = require("d3@6")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
