Published
Edited
Oct 8, 2022
13 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
title = ["Park Tree Rings 2012-2020", "each ring is a year and the color are the points"]
Insert cell
cities = new Set(parkData.map(d => d.city))
Insert cell
ind = d3.scaleOrdinal(cities).range(Array.from(Array(cities.size).keys()))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
parkCsv=Promise.all(["https://raw.githubusercontent.com/rfordatascience/tidytuesday/master/data/2021/2021-06-22/parks.csv"].map(file => d3.csv(file)))
Insert cell
max_r = (space-elements*padding)/(2*elements)
Insert cell
padding = 10
Insert cell
space = width - margin.left - margin.right
Insert cell
elements = 10 // sqrt of 100
Insert cell
height = width+margin.bottom+margin.top-margin.left-margin.right
Insert cell
backgroundColor = "#FAEFD1"
Insert cell
margin = ({top: 100, right: 20, bottom: 50, left: 20})
Insert cell
Insert cell
html`<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono&display=swap" rel="stylesheet">`
Insert cell
import {legend, swatches} from "@d3/color-legend"
Insert cell
import {wrap_text_nchar} from "@ben-tanen/svg-text-and-tspan-word-wrapping"
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