html`
<div class="row">
<div class="col">
<div class="chart">
<div style="width: 40px;">4</div>
<div style="width: 80px;">8</div>
<div style="width: 150px;">15</div>
<div style="width: 160px;">16</div>
<div style="width: 230px;">23</div>
<div style="width: 420px;">42</div>
</div>
</div>
</div>
`
html`
<div class="row">
<div class="col">
<div class="chart">
<div style="width: 8px;">4</div>
<div style="width: 16px;">8</div>
<div style="width: 30px;">15</div>
<div style="width: 32px;">16</div>
<div style="width: 46px;">23</div>
<div style="width: 84px;">42</div>
</div>
</div>
</div>
`
html`
<svg width="450" height="100">
<rect x="0" y="0" width="40" height="15" fill="darkred" />
<rect x="0" y="16" width="80" height="15" fill="darkred" />
<rect x="0" y="32" width="150" height="15" fill="darkred" />
<rect x="0" y="48" width="160" height="15" fill="darkred" />
<rect x="0" y="64" width="230" height="15" fill="darkred" />
<rect x="0" y="80" width="420" height="15" fill="darkred" />
</svg>
`
html`
<svg width="450" height="100">
<g fill="salmon">
<rect x="0" y="0" width="40" height="15" />
<rect x="0" y="16" width="80" height="15" />
<rect x="0" y="32" width="150" height="15" />
<rect x="0" y="48" width="160" height="15" />
<rect x="0" y="64" width="230" height="15" />
<rect x="0" y="80" width="420" height="15" />
</g>
</svg>
`
html`
<svg width="450" height="120">
<circle cx="40" cy="8" r="7" fill="steelblue" />
<circle cx="80" cy="24" r="7" fill="steelblue" />
<circle cx="150" cy="40" r="7" fill="steelblue" />
<circle cx="160" cy="56" r="7" fill="steelblue" />
<circle cx="230" cy="72" r="7" fill="steelblue" />
<circle cx="420" cy="88" r="7" fill="steelblue" />
</svg>
`
html`
<svg width="450" height="120">
<polygon points="0,0 40,8 80,24 150,40 160,56 230,72 420,88 0,88" fill="brown" />
</svg>
`
html`
<style>
.sol {
fill: yellow;
stroke: orange;
stroke-width: 2;
fill-opacity: 0.5;
}
.sol circle:hover { /* Isso é um seletor dinâmico em css */
fill: orange;
fill-opacity: 1;
}
</style>
<svg width="450" height="36">
<g class="sol">
<circle cx="40" cy="18" r="12"/>
<circle cx="80" cy="18" r="2"/>
<circle cx="150" cy="18" r="6"/>
<circle cx="160" cy="18" r="11"/>
<circle cx="230" cy="18" r="9"/>
<circle cx="420" cy="18" r="12"/>
</g>
</svg>
`
html`
<svg width="150" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"
stroke="black" fill="transparent" stroke-width="5"/>
<circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
<ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
<line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
<polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
stroke="orange" fill="transparent" stroke-width="5"/>
<polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
stroke="green" fill="transparent" stroke-width="5"/>
</svg>
`
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.
