Software engineer, available for freelance work! • he/him/his
Published
Edited
Feb 20, 2021
31 stars
2021 Pride Month and LGBTQIA+ EqualityWomen in the German Bundestag by PartyAnti-Trans Legislation TrackerHow much money does MTC owe Mississippi for vacant guard jobs?George Floyd Protests:
Press Freedom Violations Per DayRacial demographic dot-density mapA Growing Threat to Life: Taser usage by Greater Manchester PoliceThe Woman Citizen's Wheel of Progress, 1917Rejected Mail Ballots in North CarolinaPride Month and LGBTQIA+ EqualityBlack Lives Matter and Anti-RacismJuneteenth: History and ResourcesBlack Lives Matter and Racial Equality Resources
The Racial Wealth Gap
Also listed in…
Black History
bg = "#eee3d7"
yellow = '#f6b119'
green = '#5e926e'
red = '#e11f47'
clicked = title =>
Object.assign(
html`<div><button onClick=${e => {
e.target.parentElement.value = true;
e.target.parentElement.dispatchEvent(new CustomEvent('input'));
}}>${title}`,
{ value: false }
)
dotLabel = d => `$${d}`
area = d3
.area()
.curve(d3.curveLinear)
.x(d => x(d[0]))
.y0(d => y(d[1]))
.y1(y(0))
line = d3
.line()
.x(d => x(d[0]))
.y(d => y(d[1]))
x = d3
.scaleLinear()
.domain(d3.extent(years))
.range([margin.left, width - margin.right])
xAxis = g =>
g
.call(
d3
.axisBottom(x)
.tickValues(years)
.tickFormat(d => `${d}`)
)
.call(g =>
g
.selectAll('.tick text')
.attr('font-size', mobile ? '.9rem' : '1.2rem')
.attr('font-weight', 800)
)
.call(g =>
g
.selectAll('.tick text')
.attr('paint-order', 'stroke')
.attr('stroke-width', '3px')
.attr('stroke', 'white')
.each((text, i, nodes) =>
d3
.select(nodes[i])
.attr(
'text-anchor',
i === nodes.length - 1 ? 'end' : i === 0 ? "start" : "middle"
)
)
)
.attr('transform', `translate(${0}, ${height - margin.bottom})`)
y = d3
.scaleLinear()
.domain([100, 0])
.range([margin.top, height - margin.bottom])
.clamp(true)
yAxis = g =>
g
.attr('transform', `translate(${margin.left - 4}, 0)`)
.call(
d3
.axisLeft(y)
.ticks(4)
.tickFormat(dotLabel)
)
.call(g => g.selectAll('.domain').remove())
.call(g => g.attr('font-size', '.8rem').attr('font-weight', 600))
.call(g =>
g
.selectAll('text')
.attr('paint-order', 'stroke')
.attr('stroke-width', '3px')
.attr('stroke', 'white')
)
.call(g =>
g
.selectAll("line")
.clone()
.attr('x2', width - margin.right - margin.left)
.attr('stroke', '#999')
.attr('stroke-dasharray', "2 6")
)
drag = updateGuess => {
const guesses = new Map(years.map(year => [year, 50]));
function dragstarted() {
d3.select(this).attr("fill", "#333");
}
function dragged(event, d) {
const yVal = Math.round(y.invert(event.y));
d3.select(this)
.raise()
.call(g => g.select('text').text(dotLabel(Math.round(yVal))))
.call(g => g.attr('transform', d => `translate(${x(d)}, ${y(yVal)})`));
updateGuess(d, yVal);
}
function dragended() {
d3.select(this).attr("fill", 'black');
}
return d3
.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
margin = ({ top: 30, right: 25, bottom: 40, left: 45 })
mobile = width < 640
height = mobile ? (width * 16) / 9 : (width * 9) / 16
d3 = require('d3@6')
import { html } from "@observablehq/htl"
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.
