Published
Edited
Apr 4, 2019
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
yAxis = g =>
g
.attr("transform", `translate(${margin.left - 1},${0})`)
.call(d3.axisLeft(y))
Insert cell
epicsLocation = Array.from(epics)
.map(e => [e, d3.extent(data.filter(d => d.epic === e), dx => x(dx.id))])
.map(a => [a[0], a[1][0] + (a[1][1] - a[1][0]) / 2])
Insert cell
colors = d3
.scaleOrdinal()
.domain(Array.from(data.reduce((a, v) => a.add(v.epic), new Set())))
.range(d3[colorScheme])
Insert cell
Insert cell
Insert cell
Insert cell
x = d3
.scaleBand()
.domain(data.map(d => d.id))
.range([margin.left, width - margin.right])
.padding(0.1)
Insert cell
y = d3
.scaleLinear()
.domain([0, d3.max(data, d => d.votes)])
//.nice()
.range([height - margin.top, margin.bottom])
Insert cell
Insert cell
Insert cell
data = d3
.dsv(
"\t",
`https://docs.google.com/spreadsheets/d/e/2PACX-1vTd4GLm1UO6IfIxxe-90ddwIcHmeQa0ZwKIxsfzNSQEjG6lkcfc_dx31imvW9l7B2kPGlraydgHc10t/pub?gid=0&single=true&output=tsv`,
d3.autoType
)
.then(a =>
a.map((d, i) => ({
i,
epic: d.Epic,
votes: d["Votes when locked"],
gif: d["Gif Link"],
id: i
}))
)
Insert cell
Insert cell
xX = d3
.scaleLinear()
.domain([0, d3.max(data, d => d.votes)])
.nice()
.range([margin.left, width - margin.right])
Insert cell
yX = d3
.scaleBand()
.domain(data.map(d => d.id))
.range([margin.top, heightX - margin.bottom])
.padding(0.1)
Insert cell
heightX = 2000
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more