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">`
//_2PI = 2*Math.PI
tribeColor = function(tribes) {
var colors = {
"American Indian tribes": "#70b3c1",
"Alaska native tribes": "#c7d6ee"
};
return colors[tribes];
}
function colorHierarchy(hierarchy) {
if(hierarchy.depth === 0) {
hierarchy.color = 'black';
} else if(hierarchy.depth === 1){
hierarchy.color = tribeColor(hierarchy.data.key);
} else {
hierarchy.color = hierarchy.parent.color;
}
if(hierarchy.children) {
hierarchy.children.forEach( child => colorHierarchy(child))
}
}
data = FileAttachment("native2.csv").csv()
data_nested = {
let tribe_nest = d3.nest()
.key(d => d.tribe)
.entries(data)
return {key: "tribe_nest", values: tribe_nest}
}
population_hierarchy = d3.hierarchy(data_nested, d => d.values)
.sum(d => d.num)
//population_hierarchy = d3.hierarchy(data_nested, d => d.values)
//.sum(d => d.population)
d3 = require("d3@5", "d3-weighted-voronoi", "d3-voronoi-map", "d3-voronoi-treemap")
//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.
