Public
Edited
Dec 27, 2022
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
y = d3.scaleBand()
.domain(groups)
.range([height, height/2.2])
Insert cell
x = d3.scaleLinear()
.domain([0,100])
.nice()
.range([margin.left, width - margin.right])
Insert cell
xAxis = g => g
.attr('transform', `translate(0,${height +30 - margin.top})`)
.call(d3.axisBottom(x))
Insert cell
popExtent = {
const bounds = data.map((d) => d.percentage).sort(d3.ascending);
return [bounds[0], bounds[bounds.length - 1]];
}
Insert cell
size = d3.scaleSqrt()
.domain(popExtent)
.nice()
.range([0.5, 5])
Insert cell
dataExtent = {
const bounds = data.map((d) => d.percentage).sort(d3.ascending);
return [bounds[0], bounds[bounds.length - 1]];
}
Insert cell
color = d3.scaleOrdinal()
.domain(countries) .range(colors)
.unknown('black')
Insert cell
radius = 1
Insert cell
padding = 0.5
Insert cell
height = 700
Insert cell
rmargin = width/6
Insert cell
margin = ({
left: 90,
right: rmargin,
top: 100,
bottom: 0
})
Insert cell
Insert cell
colors2 = ['#E8ECFB', '#DDD8EF', '#D1C1E1', '#C3A8D1', '#B58FC2',
'#A778B4', '#9B62A7', '#8C4E99', '#6F4C9B', '#6059A9',
'#5568B8', '#4E79C5', '#4D8AC6', '#4E96BC', '#549EB3',
'#59A5A9', '#60AB9E', '#69B190', '#77B77D', '#8CBC68',
'#A6BE54', '#BEBC48', '#D1B541', '#DDAA3C', '#E49C39',
'#E78C35', '#E67932', '#E4632D', '#DF4828', '#DA2222',
'#B8221E', '#95211B', '#721E17', '#521A13']
Insert cell
colors = ['#4477AA', '#EE6677', '#228833', '#CCBB44', '#66CCEE',
'#AA3377', '#BBBBBB', '#000000']
Insert cell
Insert cell
groups = Array.from(new Set(data.map(d => d.gender)))
Insert cell
countries = Array.from(new Set(data.map(d => d.CountryName)))
Insert cell
data = data_raw[0].sort((a, b) => d3.ascending(a.percentage, b.percentage))
Insert cell
data_ci = data_raw_ci[0]
Insert cell
data_raw=Promise.all([csvs['all']].map(file => d3.csv(file, d3.autoType)))
Insert cell
csvs["ci"]
Insert cell
data_raw_ci = Promise.all([csvs["ci"]].map((file) => d3.csv(file, d3.autoType)))
Insert cell
d3 = require("d3@5")
Insert cell
import {form} from "@mbostock/form-input"
Insert cell
Insert cell
html`<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap" rel="stylesheet">`
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