Public
Edited
Apr 19, 2023
richmond_data_organized_pop.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
df = FileAttachment("richmond_data_organized_pop.csv").csv({typed: true})
// my code, made possible by referencing the following code
//https://observablehq.com/d/97acec4dd635e759
//https://observablehq.com/d/0eebe461ba1e9603
//https://observablehq.com/@sjengle/interactivity
//the animation is small, but I promise it is there!
//making my chart
// referenced from https://observablehq.com/d/dba55a188e1544b6
vis = {
const width = 800;
const height = 200;
const margin = { top: 0, right: 20, bottom: 20, left: 40 };
const axisColor = "#404040";
// my container
const svg = d3
.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
// x scale
const x = d3
.scaleBand()
.domain(df.map((d) => d.year))
.range([margin.left, width])
.padding(0.2);
// y scale
const y = d3
.scaleLinear()
.domain([0, d3.max(df, (d) => d.population)])
.range([height, margin.top]);
// x axis
const xAxisGroup = svg
.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).tickSize(0));
// y axis
const yAxisGroup = svg
.append("g")
.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(y).tickSize(0));
//making the duration time
//https://observablehq.com/d/0eebe461ba1e9603 is what I referenced for the animation
const dur = 450
// adding my bars
//https://observablehq.com/d/dba55a188e1544b6 helped me do this
svg
.append("g")
.attr("id", "bars")
.selectAll("rect")
.data(df)
.join("rect")
.attr("width", x.bandwidth())
.attr("height", (d) => height - y(d.population))
.attr("y", (d) => y(d.population))
.attr("x", (d) => x(d.year))
.attr("fill", "lightgray")
// animation code!
.transition()
.duration(dur)
.delay((d, i) => i * dur)
.ease(d3.easeBounceOut)
.attr("y", d => barY(d.population))
.attr("height", d => barHeight - barY(d.population));
// Adding x-axis label
xAxisGroup
.append("text")
.attr("x", (width - margin.left) / 2)
.attr("y", margin.bottom - 0)
.attr("text-anchor", "middle")
.attr("font-size", 10)
.attr("font-family", "sans-serif")
.attr("fill", axisColor)
.text("Year");
return svg.node();
}
//defining things in the following cells
// I referenced https://observablehq.com/d/0eebe461ba1e9603 to make this!
barWidth = 800
barHeight = 200
barMargin = ({top: 15, right: 15, bottom: 20, left: 20})
barX = d3.scaleBand()
.domain(df.map(d => d.year))
.range([barMargin.left, barWidth])
.padding(0.1)
barY = d3.scaleLinear()
.domain([0, d3.max(df, d => d.population) + 15])
.range([barHeight, barMargin.top])
rects = d3.select(vis).select("g#bars").selectAll("rect");
//interactions!!!!
//this was made possible by referencing //https://observablehq.com/@sjengle/interactivity and https://observablehq.com/d/0eebe461ba1e9603
int_hov= {
const svg = d3.select(vis);
// tooltip div
const tooltip = d3
.select("body")
.append("div")
.style("position", "absolute")
.style("visibility", "hidden")
.style("background", "white")
.style("padding", "5px")
.style("border", "1px solid #ccc");
// hovering function!
//making the tooltip call the population and making the color change when you hover
rects.on("mouseover", function (event, d) {
d3.select(this).attr("fill", "steelblue");
tooltip
.style("visibility", "visible")
.text(`Population: ${d.population}`)
.style("left", `${event.pageX + 10}px`)
.style("top", `${event.pageY - 10}px`);
})
rects .on("mouseout", function (event, d) {
d3.select(this).attr("fill", "lightgray");
tooltip.style("visibility", "hidden");
});
}
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.
