chart = {
const width = 928;
const height = 500;
const marginTop = 20;
const marginRight = 30;
const marginBottom = 30;
const marginLeft = 30;
// Create scales.
const x = d3.scaleBand()
.domain(data.map(d => d.year))
.rangeRound([marginLeft, width - marginRight]);
const y = d3.scaleLinear()
.domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice()
.range([height - marginBottom, marginTop]);
const color = d3.scaleOrdinal()
.domain(colors.keys())
.range(colors.values());
// Create the SVG container.
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("width", width)
.attr("height", height)
.attr("style", "max-width: 100%; height: auto;");
// Create the bars.
const formatRevenue = x => (+(x / 1e9).toFixed(2) >= 1)
? `${(x / 1e9).toFixed(2)}B`
: `${(x / 1e6).toFixed(0)}M`;
svg.append("g")
.selectAll("g")
.data(series)
.join("g")
.attr("fill", ({key}) => color(key))
.call(g => g.selectAll("rect")
.data(d => d)
.join("rect")
.attr("x", d => x(d.data?.year))
.attr("y", d => y(d[1]))
.attr("width", x.bandwidth() - 1)
.attr("height", d => y(d[0]) - y(d[1]))
.append("title")
.text(d => `${d.data?.name ?? 'No-name'}, ${d.data?.year ?? 'no-year'}
${formatRevenue(d.data?.value ?? 0)}`));
// Create axes.
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x)
.tickValues(d3.ticks(...d3.extent(x.domain()), width / 80))
.tickSizeOuter(0));
svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y)
.tickFormat(x => (x / 1e9).toFixed(0)))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text("Revenue (billions, adj.)"));
return Object.assign(svg.node(), {scales: {color}});
}
data = FileAttachment("events_data_with_points.csv").csv()
.then((data) =>
data.map(({ ["Event type"]: EventType, Date, Points }) => ({
name: EventType,
year: Date,
value: +Points
}))
)
colors = new Map([
["Task/Item added to capture list", "#2A5784"], // LP/EP
["Task/Item Sorted", "#43719F"], // Vinyl Single
["Task Competed", "#5B8DB8"], // 8 - Track
["Adding a deadline", "#7AAAD0"], // Cassette
["Clearing Today's Deadlines", "#9BC7E4"], // Cassette Single
["Sorting capture list to zero", "#BADDF1"], // Other Tapes
["Emotions/Thoughts added to capture list", "#E1575A"], // Kiosk
["Declaring Morning Intention", "#EE7423"], // CD
["Completing the day with a teammate", "#F59D3D"], // CD Single
["System improved", "#FFC686"], // SACD
["Flow Block Completed", "#9D7760"], // DVD Audio
["Active Recovery Completed", "#F1CF63"], // Music Video (Physical)
["Vitamins/Minerals Taken", "#7C4D79"], // Download Album
["Coaching received one or more emotions", "#9B6A97"], // Download Single
["Dinner Party Hosted", "#24693D"], // Paid Subscription
["Annual Revenue Goal Achieved", "#E1575A"] // Kiosk (repeated for emphasis on significance)
])
series = d3.stack()
.keys(colors.keys())
.value((group, key) => group.get(key)?.value ?? 0)
.order(d3.stackOrderReverse)
(d3.rollup(data, ([d]) => d, d => d.year, d => d.name).values())
.map(s => (s.forEach(d => d.data = d.data.get(s.key)), s))
import {swatches} from "@d3/color-legend"
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.
