The avatar for @fhooe-infovis
FHOÖ Information Visualization
Public
IM_InfoVis_2024
Edited
Jun 5, 2024
Fork of Simple D3
1 star
23
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
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
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
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
Insert cell
Insert cell
Insert cell
fullscreenExample = fullscreen({
breakLayoutAtCell: 69,
hideAfter: 73,
hideBefore: 61,
left: 51,
right: 46,
button: html`<button style="background: steelblue; padding : 0.4em;border-radius: 0.2em; border-color: black;color: white; font-size: 16px; /*position:fixed;right:20px;top:0;*/">Fullscreen`
})
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
import { populationPyramidPlot } from "@categorise/population-pyramid-plot"
Insert cell
Insert cell
import { fullscreen } from "@pierreleripoll/vegasync"
Insert cell
Insert cell
Insert cell
color = ["#2166AC", "#B2182B"]
Insert cell
['#d73027','#f46d43','#fdae61','#fee090','#ffffbf','#e0f3f8','#abd9e9','#74add1','#4575b4']
Insert cell
location = uniqueValid(justCountries, d => d.Location)
Insert cell
dataset = FileAttachment("worldPopulation_1950_2100@1.csv").csv({typed: true})
Insert cell
year2024 = dataset.filter(d => d.Time === date)
Insert cell
justCountries2024 = year2024.filter(d => d.LocTypeID === 4)
Insert cell
compareTFR2 = justCountries2024.map(d => ({...d, TFR_Below2: (d.TotalFertilityRate < 2.0) }))
Insert cell
compareTFR2percent = compareTFR2.map(d => ({...d, TPopPercent: (d.TPopulation / totalPopulationBig) }))
Insert cell
continentsData = dataset.filter(d => d.LocTypeID === 2)
Insert cell
justCountries = dataset.filter(d => d.LocTypeID === 4)
Insert cell
worldPop = dataset.filter(d => d.Location == 'World' && d.Time % 5 == 0 ).map(d => ({...d, TPopulation: d.TPopulation / 1000000}))
Insert cell
totalPopulationBig = year2024.filter(d => d.LocTypeID === 1)[0].TPopulation
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
currentPopulation = Number((finalData.find(d => d.Time === date).TPopulation / 1000000).toFixed(2))
Insert cell
currentFertilityRate = Number(finalData.find(d => d.Time === date).TotalFertilityRate.toFixed(2))
Insert cell
totalPopulation = Number((world.find(d => d.Time === date).TPopulation/ 1000000).toFixed(2))
Insert cell
pieData = {
const percentage = Number((currentPopulation/totalPopulation*100).toFixed(2))
return [100-percentage, percentage]
}
Insert cell
world = dataset.filter(d => d.LocTypeID === 1).map(d => ({...d, TPopulation: d.TPopulation * 1000 }))
Insert cell
countries = uniqueValid(justCountries, d => d.Location)
Insert cell
justContinents = dataset.filter(d => d.LocTypeID === 2)
Insert cell
continents = uniqueValid(justContinents, d => d.Location)
Insert cell
finalData = dataset.filter(d => d.Location == selectLocation).map(d => ({...d, TPopulation: d.TPopulation * 1000 }))
Insert cell
historicalData = finalData.filter(d => d.Time <=2024)
Insert cell
futureData = finalData.filter(d => d.Time >= 2024)
Insert cell
Insert cell
Insert cell
<style>
body {
font-family: sans-serif;
}
</style>
Insert cell
pyodide = require("pyodide")

Insert cell
Insert cell
population_data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
population = FileAttachment("population_data.csv").csv({typed: true})
Insert cell
Insert cell
Select a data source…
Type Table, 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