Published
Edited
Mar 14, 2021
5 stars
Insert cell
Insert cell
html`
<div id="container">
<h1>
<span class="crisis-tag">Crisis Pregnancy Centres</span> vs.
<span class="medical-tag">Medical Abortion Providers</span> in Canada
</h1>
<main class="grid">
<svg
id="legend"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200"
>
<defs>
<style>
.cls-1 {
fill: none;
stroke: #000;
stroke-miterlimit: 10;
stroke-width: 0.5px;
}
.cls-2 {
font-size: 12px;
font-family: Helvetica, sans-serif
}
</style>
</defs>
<!-- <line class="cls-1" x1="0.25" y1="6.09" x2="0.25" y2="197.09" /> -->
<text class="cls-2" transform="translate(8 12)">100%</text>
<text class="cls-2" transform="translate(8 103)">50%</text>
<line class="cls-1" x1="1" y1="7" x2="8" y2="7" />
<line class="cls-1" x1="1" y1="99" x2="8" y2="99" />
</svg>
</main>
</div>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3@5")
Insert cell
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