Public
Edited
Mar 30, 2023
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
return html`
<div style="--hash-stroke: rgba(0,240,240,1);">
<svg width=${width}>
<rect width="100px" height="100px" fill="url(#hatch3)" />
</svg>
<svg style="position: absolute;">
<defs>
<pattern
id="hatch3"
width="100px"
height="5px"
patternUnits="userSpaceOnUse"
patternContentUnits="userSpaceOnUse"
viewBox="0 0 100 100"
preserveAspectRatio="none"
patternTransform="rotate(45)"
>
<line
x1="0"
x2="100"
y1="25"
y2="25"
stroke-width="10"
style="stroke: var(--hash-stroke, black)"
/>
</pattern>
</defs>
</svg>
</div>`;
}
Insert cell
Insert cell
simplemap = bertin.draw({
params: {
background: "#fff",
margin: 10,
projection: d3.geoConicConformal().parallels([38, 39]).rotate([77, 0]),
width: 500
},
layers: [
{
type: "layer",
geojson: census,
stroke: "#ddf",
fill: "none",
strokeWidth: 1
},
{
type: "layer",
geojson: hispanic_high,
stroke: "#fff",
fill: "url(#hatch1)",
strokeWidth: 0
},
{
type: "layer",
geojson: black_high,
stroke: "#fff",
fill: "url(#hatch3)",
strokeWidth: 0
}
]
})
Insert cell
hatches = ["#fff", "#ccc", "#000"]
Insert cell
doublemap = 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: "url(#hatch2)",
tooltip: [
(d) => d.properties.race_black + "%",
(d) => "Tract " + d.properties.NAME
]
},
{
type: "layer",
geojson: census,
stroke: "#fff",
fill: "url(#hatch1)",
strokeWidth: 1
}
]
})
Insert cell
Insert cell
Insert cell
d3 = require("d3@7", "d3-geo-projection@4")
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