Notebooks 2.0 is here.
Published
Edited
Nov 2, 2021
Socializing Visualization Exercise
d3 = require("d3@7")
md`### Step 1. Define the graph dimension`
width = 960
height = 500
margin = ({ top: 20, right: 20, bottom: 30, left: 40 })
md`### Step 2. Prepare the data`
years = d3.range(2009, 2019)
data = FileAttachment("eating-drinking.csv").csv()
smallDetails = {
const timeSpent = [
{ year: 2009, Estimate: 1.11 },
{ year: 2010, Estimate: 1.13 },
{ year: 2011, Estimate: 1.12 },
{ year: 2012, Estimate: 1.12 },
{ year: 2013, Estimate: 1.11 },
{ year: 2014, Estimate: 1.07 },
{ year: 2015, Estimate: 1.07 },
{ year: 2016, Estimate: 1.06 },
{ year: 2017, Estimate: 1.06 },
{ year: 2018, Estimate: 1.07 },
{ year: 2019, Estimate: 1.06 }
];
//svg variables
let height = 400;
let margin = 75;
//create SVG artboard
let svg = d3.create("svg").attr("width", width).attr("height", height);
//create svg background color
svg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "#23395D");
//create text in the corner
svg
.append("text")
.attr("x", width - margin / 2)
.attr("y", margin / 2)
.attr("fill", "white")
.style("text-anchor", "end")
.attr("font-size", "12")
.attr("font-family", "courier")
.attr("id", "infoText")
.text("Click on a red bar!");
//visualization utilities
const barWidth = (height - margin * 2) / timeSpent.length;
const popExtents = d3.extent(timeSpent, (d) => d.Estimate);
const popScale = d3
.scaleLinear()
.domain(popExtents)
.range([100, width - margin * 2]);
//draw bars
svg
.selectAll(".yearBars")
.data(timeSpent)
.enter()
.append("rect")
.attr("x", margin)
.attr("y", (d, i) => i * barWidth + margin)
.attr("width", (d) => popScale(d.Estimate))
.attr("height", barWidth)
.attr("fill", "#9370D8")
.on("mouseover", (e) => {
d3.select(e.target).attr("stroke", "white").attr("stroke-width", "2");
})
.on("mouseout", (e) => {
d3.select(e.target).attr("stroke", "none").attr("stroke-width", "0");
})
.on("click", (e, d, i) => {
d3.select("#infoText").text(
"In the year " +
d.year +
", people spent " +
// i +
//toLocaleString() takes a long number and adds commas/periods to separate thousands
d.Estimate.toLocaleString() +
" hour" +
" in eating and drinking."
);
});
// draw labels
svg
.selectAll(".yearLabels")
.data(timeSpent)
.enter()
.append("text")
.attr("x", margin - 5)
.attr("y", (d, i) => i * barWidth + margin + barWidth / 1.5)
.attr("fill", "white")
.style("text-anchor", "end")
.text((d) => d.year)
.attr("font-family", "courier")
.on("mouseover", (e, d, i) => {
d3.select(e.target).attr("stroke", "white").attr("stroke-width", "1");
})
.on("mouseout", (e, d, i) => {
d3.select(this).attr("stroke", "none").attr("stroke-width", "0");
});
return svg.node();
}
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.
