Published
Edited
Apr 17, 2021
Fork of Arc Diagram
8 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
width = 1024
Insert cell
height = 800
Insert cell
baseHeight = 500
Insert cell
margin = 10//radius.max * 2 + 20
Insert cell
radius = ({min: 10, max: 50})
Insert cell
Insert cell
md`** filter for selecting years and percentile** `
Insert cell
threshold = d3.quantile(forestArea[0].map(d => d.forest_area),0.9);
Insert cell
forestData = forestArea[0].filter(function(d){return ((d.year == "1990" || d.year == "2000"|| d.year == "2020") & d.forest_area > threshold & d.entity != "World")})
Insert cell
Insert cell
Insert cell
yearsDeforest = Array.from(d3.rollup(forestData, v => d3.sum(v, d => d.forest_area), d => d.year),([name, total]) => ({name, total}))
Insert cell
entityDeforest = Array.from(d3.rollup(forestData, v => d3.sum(v, d => d.forest_area), d => d.entity),([name, total]) => ({name, total}))
Insert cell
linksDeforest = forestData.map(d=> ({source: yearsDeforest.filter(function(p){return (p.name == d.year)})[0], target:entityDeforest.filter(function(p){return (p.name == d.entity)})[0], value:d.forest_area}))
Insert cell
nodesDeforest = yearsDeforest.concat(entityDeforest)
Insert cell
entityYear = d3.group(forestData,d => d.entity, d =>d.year)
Insert cell
Insert cell
forestArea=Promise.all(["https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2021/2021-04-06/forest_area.csv"].map(file => d3.csv(file, d3.autoType)))
Insert cell
Insert cell
d3 = require("d3@6","d3-array@2")
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