The avatar for @hongtaoh
Hongtao Hao
Public
Edited
Dec 5, 2023
Fork of Input + Chart
4
Insert cell
Insert cell
raceData = FileAttachment("race_by_country@1.csv").csv({typed: true})
Insert cell
genderData = FileAttachment("gender_by_country.csv").csv({typed:true})
Insert cell
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
countries = raceData.map(d => d.country_full_name)
Insert cell
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
uniqueCountries = [...new Set(countries)];
Insert cell
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
viewof cntry = Inputs.select(uniqueCountries, {value: "United States", label: "Choose country here"})
Insert cell
filteredRaceData = raceData.filter(d => d.country_full_name === cntry)
Insert cell
Select a data source…
Type SQL, then Shift-Enter. Ctrl-space for more options.

Insert cell
filteredGenderData = genderData.filter(d => d.country_full_name === cntry)
Insert cell
Select a data source…
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
raceplot = Plot.barY(filteredRaceData, {x: "racepred", y: "freq", fill: "steelblue"}).plot()
Insert cell
genderplot = Plot.barY(filteredGenderData, {x: "genderpred", y: "freq", fill: "steelblue"}).plot()
Insert cell
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.

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