height = 600 - margin.top - margin.bottom
width = 600 - margin.left - margin.right
margin = ({top: 20, right: 20, bottom: 50, left: 50})
bigFormat = d3.format(".2s")
html`<link href="https://store.typenetwork.com/foundry/fontbureau/series/benton-sans?family=benton-sans-re" rel="stylesheet">`
ellipse = d3
.range(100)
.map(i => [
(width * (1 + 0.99 * Math.cos((i / 50) * Math.PI))) / 2,
(height * (1 + 0.99 * Math.sin((i / 50) * Math.PI))) / 2
])
typeColor = function(types) {
var colors = {
"Hispanic/Latino": "#c7d6ee"
};
return colors[types];
}
function colorHierarchy(hierarchy) {
if(hierarchy.depth === 0) {
hierarchy.color = 'black';
} else if(hierarchy.depth === 1){
hierarchy.color = typeColor(hierarchy.data.key);
} else {
hierarchy.color = hierarchy.parent.color;
}
if(hierarchy.children) {
hierarchy.children.forEach( child => colorHierarchy(child))
}
}
data = FileAttachment("hispanicgroup.csv").csv()
data_nested = {
let type_nest = d3.nest()
.key(d => d.type)
.entries(data)
return {key: "type_nest", values: type_nest}
}
population_hierarchy = d3.hierarchy(data_nested, d => d.values)
.sum(d => d.num)
d3 = require("d3@5", "d3-weighted-voronoi", "d3-voronoi-map", "d3-voronoi-treemap", 'seedrandom@2.4.3/seedrandom.min.js')
//import {serialize} from "@ladataviz/saving-csv"
import { slider, radio, text } from '@jashkenas/inputs'
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.
