htl.svg`<svg class="chart" width="300" height="200">
<path d="M 10 190 66 175 122 130 178 160 234 10 290 50" stroke="black" fill="none">
</svg>`
d3.selectAll("svg.chart").style("border", "2px solid green")
import {chart} from "507f2e71a0ffc623"
chart
chart1 = htl.svg`<svg width="300" height="200">
<path d="M 10 190 66 175 122 130 178 160 234 10 290 50" stroke="black" fill="none">
</svg>`
d3.select(chart1).style("border", "2px solid green")
d3.select(chart1).select("path").style("stroke-width", "2")
[1, 2, 3]
// d3.selectAll("path").attr("fill", "red")
{
return htl.html`<table>
<tr><th>Country</th><th>Population</th></tr>
<tr><td>United States</td><td>330 million</td></tr>
</table>`
}
{
htl.html`<table>
<tr><th>Country</th><th>Population</th></tr>
<tr><td>United States</td><td>329.5 million</td></tr>
</table>`
}
{
const node = htl.html`<table>
<tr><th>Country</th><th>Population</th></tr>
<tr><td class="highlight">United States</td><td>330 million</td></tr>
</table>`;
d3.selectAll("td.highlight").style("color", "red");
return node;
}
{
const node = htl.html`<table>
<tr><th>Country</th><th>Population</th></tr>
<tr><td class="highlight">United States</td><td>330 million</td></tr>
</table>`;
d3.select(node).selectAll("td.highlight").style("color", "red");
return node;
}
viewof country = Inputs.radio(["United States", "China"], {label: "Country", value: "United States"})
htl.html`<table class="table-picker">
<tr><th>Country</th><th>Population</th></tr>
<tr><td class=${country === "United States" && "highlight"}>United States</td><td>330 million</td></tr>
<tr><td class=${country === "China" && "highlight"}>China</td><td>1,402 million</td></tr>
</table>`
d3.selectAll(".table-picker").select(".highlight").style("color", "red")
table = htl.html`<table class="table-picker">
<tr><th>Country</th><th>Population</th></tr>
<tr><td class=${country === "United States" && "highlight"}>United States</td><td>330 million</td></tr>
<tr><td class=${country === "China" && "highlight"}>China</td><td>1,402 million</td></tr>
</table>`
d3.select(table).select(".highlight").style("color", "red")
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.
