Published
Edited
Nov 5, 2020
2 stars
md`# Gradient approach to bonus.com presidential race chart
Data: https://www.bonus.com/election/`
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width+10, height])
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("stroke-miterlimit", 1);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("g")
.call(yAxisRight);
svg.append('line')
.attr('x1', d => x(data[0].date))
.attr('x2', d => x(data[data.length-1].date))
.attr('y1', d => y(50))
.attr('y2', d => y(50))
.attr('stroke-width', 0.8)
.attr('stroke', 'lightgrey')
svg.append('path')
.style("fill", "url(#linear-gradient)")
.attr('opacity', 0.4)
.attr('d', area(data))
svg.append('path')
// .attr('stroke', 'black')
.style("stroke", "url(#linear-gradient)")
.attr('stroke-width', 1)
.attr('fill', 'none')
.attr('d', line(data))
var defs = svg.append("defs");
var linearGradient = defs.append("linearGradient").attr("id", "linear-gradient");
linearGradient
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "0%")
.attr("y2", "100%");
linearGradient.append("stop")
.attr("offset", "0%")
.attr("stop-color", "blue");
linearGradient.append("stop")
.attr("offset", "60%")
.attr("stop-color", "white");
linearGradient.append("stop")
.attr("offset", "100%")
.attr("stop-color", "red");
return svg.node();
}
area = d3.area()
.x(d => x(d.date))
.y0(d => y(50))
.y1(d => y(d.odds))
line = d3.line()
.x(d => x(d.date))
.y(d => y(d.odds))
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80))
.call(g => g.select(".domain").remove())
yAxisRight = g => g
.attr("transform", `translate(${width - margin.right+5},0)`)
.call(d3.axisRight(y).ticks(null, ",d").tickFormat((d)=>d % 50 == 0 ? `${d}%` : d ))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(data.y))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, ",d").tickFormat((d)=>d == 100 ? `${d}%` : d ))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(data.y))
y = d3.scaleLinear()
.domain([0,100])
.rangeRound([height - margin.bottom, margin.top])
.clamp(true)
data = {
let odds = JSON.parse(await FileAttachment("odds.json").text())
return odds.data['Joe Biden'].map(d => {
return {
date:new Date(d[0]),
odds:d[1]
}
})
}
margin = ({top: 20, right: 30, bottom: 30, left: 40})
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.
