Web Datavis researcher by day, Indie Game designer by night
Published
Edited
Nov 3, 2020
Importers
margin = ({top: 20, right: 0, bottom: 40, left: 40})
function zoom(svg) {
const extent = [[margin.left, margin.top], [width - margin.right, height - margin.top]]
svg.call(d3.zoom()
.scaleExtent([1, 8])
.translateExtent(extent)
.extent(extent)
.on("zoom", zoomed))
.on("wheel", event => event.preventDefault()) // always prevent scrolling on wheel input regardless of the scale extent
function zoomed(event) {
x.range([margin.left, width - margin.right].map(d => event.transform.applyX(d)))
svg.selectAll(".bars rect").attr("x", d => x(d.combo)).attr("width", x.bandwidth())
svg.selectAll(".x-axis").call(xAxis)
svg.selectAll(".x-axis .tick text").style('font-size', Math.min(event.transform.k*xAxisTickMultiplier, 12))
}
}
x = d3.scaleBand()
.domain(data.map(d => d.combo))
.range([margin.left, width - margin.right])
.padding(0)
y = d3.scaleLinear()
.domain([0, d3.max(data, d => Math.max(d.equity, d.pot_share ))]).nice()
.range([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
.call(g => {
g.selectAll(".tick text")
.attr('x', -8)
.attr('y', 0)
.attr('dy', '0.35em')
.attr('transform', 'rotate(-90)')
.style('text-anchor', 'end')
.style('font-size', xAxisTickMultiplier)
})
xAxisTickMultiplier = 4
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(10, '%'))
.call(g => g.select(".domain").remove())
grid = g => g
.attr("stroke", "currentColor")
.attr("stroke-opacity", 0.1)
.call(g => g.append("g")
.selectAll("line")
.data(y.ticks())
.join("line")
.attr("y1", d => 0.5 + y(d))
.attr("y2", d => 0.5 + y(d))
.attr("x1", margin.left)
.attr("x2", width - margin.right))
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.
