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 14, 2021
d3 = require("d3@6")
_ = require("lodash")
datasets = require("vega-datasets")
gapminder = datasets['gapminder.json']()
// Range of years
d3.extent(gapminder, d => d.year)
gapminder1955 = gapminder.filter(d => d.year === 1955)
gapminder2005 = gapminder.filter(d => d.year === 2005)
gapminder1955_pop = gapminder1955.map(d => d.pop)
gapminder2005_pop = gapminder2005.map(d => d.pop)
pop = []
combined_pop = [gapminder1955_pop, gapminder2005_pop]
combined_pop.map(function (data) {
data.map((d, i) => pop.push(d[i]))
})
pop
margin = ({top: 10, right: 10, bottom: 50, left: 100})
// Just the height of the chart (excluding the margin)
h = 900 - margin.top - margin.bottom
// Width of the chart (excluding the margin)
w = width - margin.left - margin.right
xScale = d3.scaleLinear()
.domain([0, d3.max((gapminder1955, gapminder2005) , d => d.pop)])
.range([0, w])
yScale = d3.scaleBand()
.domain(d3.map(gapminder1955, d => d.country))
.range([0, h])
.padding(2)
{
// create a container that includes the margin
const container = d3.create("svg")
.attr("height", h + margin.top + margin.bottom)
.attr("width", width)
// to make sure the chart is within the margin
const chart = container.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
// title
chart.append("text")
.text("Not finished! Still need to figure out how to merge the data from different years into one object to draw the lines correctly")
.style("font-size", "15px")
.style("font-weight", "bold")
.attr("fill", "red")
.attr("transform", "translate(-10, 10)")
// call x-axis
chart.append("g")
.attr("transform", "translate(0," + h + ")")
.call(d3.axisBottom(xScale))
.selectAll("text")
.attr("transform", "translate(-10,0)rotate(-45)")
.attr("text-anchor", "end")
// call y-axis
chart.append("g")
.call(d3.axisLeft(yScale))
// lines
chart.selectAll("myline")
.data((gapminder1955, gapminder2005))
.enter()
.append("line")
.attr("x1", (d => (d.year === 2005) ? xScale(d.pop) : 0)) // problem
.attr("x2", (d => (d.year === 1955) ? xScale(d.pop) : 0)) // problem
.attr("y1", d => yScale(d.country))
.attr("y2", d => yScale(d.country))
.attr("stroke", "grey")
// year 1955 circles
chart.append("g")
.selectAll("mycircle")
.data(gapminder1955)
.enter()
.append("circle")
.attr("cx", d => xScale(d.pop))
.attr("cy", d => yScale(d.country))
.attr("r", 4)
.attr("fill", "cadetblue")
// year 2005 circles
chart.append("g")
.selectAll("mycircle")
.data(gapminder2005)
.enter()
.append("circle")
.attr("cx", d => xScale(d.pop))
.attr("cy", d => yScale(d.country))
.attr("r", 4)
.attr("fill", "pink")
return container.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.
