Published
Edited
Mar 15, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
gdpCapitaData = await FileAttachment('gdpPerCapita.json').json();
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
simpleYearEntries.slice().sort((a,b) => d3.ascending(a.countryShort, b.countryShort)).map(d => d.countryShort)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
formValues
Insert cell
viewof boxWidth = Range([0, width], {value: 300, label: 'Box Width'});
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
selectedCountry
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
height = 300
Insert cell
MARGIN = ({ TOP: 10, RIGHT: 10, BOTTOM: 75, LEFT: 80 });
Insert cell
SIZE = ({ WIDTH: width, HEIGHT: 400 }); // note the responsive width variable
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require('d3');
Insert cell
Insert cell
import {Scrubber} from '@mbostock/scrubber'
Insert cell
import {form} from "@mbostock/form-input"
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