Fascinated by data visualizations and data journalism, in the process of exploring and learning. Aspire to create mesmerizing, impactful, fun data visualizations in order to tell convincing stories, especially about issues I am strongly passionate about.
Published
Edited
May 22, 2021
d3 = require("d3@6")
datasets = require("vega-datasets")
gapminder = datasets["gapminder.json"]()
d3.extent(gapminder, d => d.year)
gapminder_1955 = gapminder.filter(d => d.year === 1955)
gapminder_2005 = gapminder.filter(d => d.year === 2005)
margin = ({top: 50, right: 20, bottom: 60, left: 100})
h = 900 - margin.top - margin.bottom
w = width - margin.right - margin.left
xScale = d3.scaleLinear()
.domain([0, d3.max(gapminder, d => d.pop)])
.range([0, w])
yScale = d3.scaleBand()
.domain(d3.map(gapminder_2005, d => d.country))
.range([0, h])
.padding(1)
viewof colour = Inputs.button([
["1955", value => lollipop_chart.update(gapminder_1955)],
["2005", value => lollipop_chart.update(gapminder_2005)]
])
viewof replay = html`<button>Replay`
lollipop_chart = {
replay;
const container = d3.create("svg")
.attr("height", h + margin.top + margin.bottom)
.attr("width", width)
// title
const title = container.append("text")
.text("Population by Countries in (please click the buttons above)")
.attr("fill", "grey")
.attr("font-family", "Helvetica Neue, Arial")
.attr("font-size", 30)
.attr("font-weight", "bold")
.attr("transform", "translate(" + (width/2) + ", 40)")
.style("text-anchor", "middle")
// to make sure the chart is within the margins
const chart = container.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
// call x-axis
chart.append("g")
.attr("transform", "translate(0," + h + ")")
.call(d3.axisBottom(xScale))
.selectAll("text")
.attr("transform", "rotate(-45)translate(-5,0)")
.attr("text-anchor", "end")
.style("font-size", "10px")
.style("font-family", "Helvetica Neue, Arial")
// call y-axis
chart.append("g")
.call(d3.axisLeft(yScale))
.selectAll("text")
.style("font-size", "12px")
.style("font-family", "Helvetica Neue, Arial")
// lines
const lines = chart.selectAll("myline")
.data(gapminder_2005)
.join("line")
.attr("x1", xScale(0))
.attr("x2", d => xScale(0))
.attr("y1", d => yScale(d.country))
.attr("y2", d => yScale(d.country))
.attr("stroke", "grey")
// circles
const circles = chart.selectAll("mycircle")
.data(gapminder_2005)
.join("circle")
.attr("cx", d => xScale(0))
.attr("cy", d => yScale(d.country))
.attr("r", "6")
.attr("fill", "grey")
// update function
function update(data) {
title
.text("Population by Countries in " + (data === gapminder_1955 ? "1955" : "2005"))
.transition()
.duration(1000)
.attr("fill", data === gapminder_1955 ? "yellowgreen" : "turquoise")
lines
.data(data)
.transition()
.duration(1000)
.attr("x2", d => xScale(d.pop))
.attr("stroke", data === gapminder_1955 ? "yellowgreen" : "turquoise")
circles
.data(data)
.transition()
.duration(1000)
.attr("cx", d => xScale(d.pop))
.attr("r", "6")
.attr("fill", data === gapminder_1955 ? "yellowgreen" : "turquoise")
}
return Object.assign(container.node(), { update }) // export the update function to be used in the buttons
}
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.
