viewof sortSelection = {
const sortForm = radio({
title: 'Sort By',
description: 'Select value to sort by (descending)',
options: [
{ label: 'Average Acceptance', value: 'avgAcceptance' },
{ label: 'Acceptance by the Relgious', value: 'religious' },
{ label: 'Acceptance by the non-Religious', value: 'nonReligious' },
],
value: 'nonReligious'
});
return sortForm;
}
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
// add x axis
buildXAxis(svg);
// add y axis
buildYAxis(svg)
// add group for chart area
createChartGroup(svg)
// create group for bars
plotBars(svg)
// create group for 'Very Important' dots
plotDotsImportant(svg)
// create group for dot 'Not Very Important' dots
plotDotsNotImportant(svg)
// create legend at top
buildLegend(svg);
let updateYAxis = () => {
yScale.domain(sortedData.map(d => d.country)).transition().duration(100)
}
viewof sortSelection.addEventListener("input", updateYAxis)
return svg.node();
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
