Public
Edited
Jan 8, 2024
chart = {
let y = d3.scaleBand()
.domain(stationData.map(d => d.station))
.range([0, height - margin.top - margin.bottom])
.padding(0.1);
let yAxis = d3.axisLeft(y).tickSize(0);
let yAxisFct = g => g
.attr("transform", `translate(${margin.left}, ${margin.top})`)
.call(yAxis)
.call(g => g.selectAll(".domain").remove())
.call(g => g
.selectAll(".tick")
.remove()
);
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height + 40]);
svg.append(() => style);
svg.append('rect')
.attr('fill', '#eee')
.attr('x', 0)
.attr('y', 0)
.attr('width', width)
.attr('height', height)
// create group for each shuttle stop
let rects = svg.selectAll('.shuttle-stop')
.data(stationData)
.join('g')
.attr('class', 'shuttle-stop')
.attr("transform", d => `translate(0, ${margin.top + y(d.station)})`);
// add elements for each station
rects.append('text')
.attr('class', 'greek-label')
.attr('x', x(0) - 10)
.attr('y', d => y.bandwidth() / 2)
.attr('dy', '0.35em')
.attr('text-anchor', 'end')
.style('font-size', '0.9em')
.text(d => d.station);
rects.append('rect')
.attr('class', 'pickup')
.attr('x', x(0))
.attr('y', 0)
.attr('width', d => x(d.pickup) - x(0))
.attr('height', y.bandwidth())
.attr("data-tippy-content", d => `${d.station}: ${d.pickup} pickups`)
.attr('fill', 'darkorange');
rects.append('text')
.attr('class', 'pickup-label')
.attr('x', d => x(d.pickup) - labeloffset)
.attr('y', d => y.bandwidth() / 2)
.attr('dy', '0.35em')
.attr('text-anchor', 'end')
.style('font-size', '0.9em')
.text(d => d.pickup);
// add axes
svg.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0,${margin.top})`)
.call(xAxisFct);
svg.append("g")
.attr("class", "y-axis")
.call(yAxisFct);
// headers
let headers = svg.append('g')
.attr('class', 'header')
.attr("transform", `translate(0,${margin.top})`);
// total
headers.append('text')
.attr('id', 'total')
.attr('transform', `translate(${x(0)}, -35)`)
.text(`N = ${d3.sum(stationData, d => d.pickup)}`)
.style('font-size', '2.0em');
function updateChart(sortColumn, isAscending) {
// update total
headers.select('#total')
.text(`${d3.sum(stationData, d => d.pickup)} riders`)
let newData;
if (isAscending) {
newData = stationData.sort((a, b) => d3.ascending(a[sortColumn], b[sortColumn]));
} else {
newData = stationData.sort((a, b) => d3.descending(a[sortColumn], b[sortColumn]));
}
// update pickup
y.domain(newData.map(d => d.station))
svg.selectAll('.shuttle-stop').data(newData)
.transition().duration(750)
.call(g => g.attr("transform", d => `translate(0, ${margin.top + y(d.station)})`))
.call(g => g.select('rect.pickup')
.attr('x', d => x(0))
.attr('width', d => x(d.pickup) - x(0))
)
.call(g => g.select('rect.pickup')
.attr('x', d => x(0))
.attr('width', d => x(d.pickup) - x(0))
)
.call(g => g.select('.pickup-label')
.attr('x', d => x(d.pickup) - labeloffset)
.text(d => d.pickup)
)
}
return Object.assign(svg.node(), { updateChart });
}
greek_pickup@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
