Published
Edited
Oct 31, 2019
2 forks
23 stars
d3 = require('d3@5')
chapter1_11 = {
// Create the HTML from this example.
let div = html`<div id="someDiv" style="width:200px;height:100px;border:black 1px solid;">
<input id="someCheckbox" type="checkbox" />
</div>`
// Run the JavaScript from this example.
d3.select(div).style("border", "5px darkgray dashed");
d3.select(div).attr("id", "newID");
d3.select(div).select("#someCheckbox").property("checked", true);
// Return the HTML
return div;
}
worldcup = d3.csv(await FileAttachment("worldcup.csv").url())
{
let svg = html`<svg style="width:500px;height:500px;border:1px lightgray solid;"></svg>`
let element = html`<style>
text {
font-size: 10px;
text-anchor: middle;
fill: #4f442b;
}
g > text.active {
font-size: 30px;
}
circle {
fill: #75739F;
stroke: black;
stroke-width: 1px;
}
circle.active {
fill: #FE9922;
}
circle.inactive {
fill: #C4B9AC;
}
</style>
<div id="viz">${svg}</div>
<div id="controls"></div>`;
d3.select(svg)
.append("g")
.attr("id", "teamsG")
.attr("transform", "translate(50,300)")
.selectAll("g")
.data(worldcup)
.enter()
.append("g")
.attr("class", "overallG")
.attr("transform", (d, i) =>`translate(${(i * 50)}, 0)`);
let teamG = d3.select(svg).selectAll("g.overallG");
teamG
.append("circle")
.attr("r", 20);
teamG
.append("text")
.style("text-anchor", "middle")
.attr("y", 30)
.text(d => d.team);
return element;
}
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.
