David Ramos is a designer and researcher, working in Washington, D.C. He uses visual tools—maps, images, websites, and events—to help us understand landscapes, past and future.
Public
Edited
Mar 19, 2023
1 fork
1 star
simplemap = bertin.draw({
params: {
background: "#fff",
margin: 10,
projection: d3.geoConicConformal().parallels([38, 39]).rotate([77, 0]),
width: 500
},
layers: [
{
type: "bubble",
geojson: census,
values: "race_black",
k: 13,
fill: "#e368c0",
fillOpacity: 0.85,
tooltip: [
(d) => d.properties.race_black + "%",
(d) => "Tract " + d.properties.NAME
]
},
{
type: "layer",
geojson: census,
stroke: "#fff",
fill: "#eee",
strokeWidth: 1
}
]
})
bertin.draw({
params: {
background: "#fff",
margin: 10,
projection: d3.geoConicConformal().parallels([38, 39]).rotate([77, 0]),
width: 500
},
layers: [
{
type: "layer",
geojson: census,
fill: {
type: "choro",
values: "race_hispanic",
nbreaks: 6,
method: "quantile",
colors: "Blues"
},
tooltip: [
(d) => d.properties.race_hispanic + "%",
(d) => "Tract " + d.properties.NAME
]
}
]
})
bertin.draw({
params: {
background: "#fff",
margin: 10,
projection: d3.geoConicConformal().parallels([38, 39]).rotate([77, 0]),
width: 500
},
layers: [
{
type: "layer",
geojson: census,
fill: {
type: "choro",
values: "race_black",
nbreaks: 6,
method: "quantile",
colors: "Blues"
},
tooltip: [
(d) => d.properties.race_black + "%",
(d) => "Tract " + d.properties.NAME
]
}
]
})
bertin.draw({
params: {
background: "#fff",
margin: 10,
projection: d3.geoConicConformal().parallels([38, 39]).rotate([77, 0]),
width: 500
},
layers: [
{
type: "ridge",
geojson: census,
values: "race_hispanic",
step: 8,
blur: 0.1,
k: 30
}
]
})
bertin.draw({
params: {
background: "#fff",
margin: 10,
projection: d3.geoConicConformal().parallels([38, 39]).rotate([77, 0]),
width: 500
},
layers: [
{
type: "ridge",
geojson: census,
values: "race_black",
step: 8,
blur: 0.1,
k: 30
}
]
})
bertin.draw({
params: {
background: "#fff",
margin: 40,
projection: d3.geoConicConformal().parallels([38, 39]).rotate([77, 0]),
width: 500
},
layers: [
{
type: "waterlines",
geojson: census,
dist: 3,
nb: 10,
strokeWidth: 1,
stroke: "#000"
}
]
})
d3 = require("d3@7", "d3-geo-projection@4")
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.
