Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
dc_chrs = d3.csv("https://raw.githubusercontent.com/fivethirtyeight/data/master/comic-characters/dc-wikia-data.csv", row_conv)
{
const ul = d3.select(html`<ul class=""></ul>`);
ul.append("li").text(dc_chrs[0].name);
ul.append("li").text(dc_chrs[1].name);
ul.append("li").text(dc_chrs[2].name);
return ul.node(); // We can get the html element from a single item selection using .node()
}
top_ten = dc_chrs.filter(function (d) {
return d.appearances >= 1000
});
chart = {
const data = top_ten.map(d => d.appearances)
let svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
svg.selectAll("rect")
.data(data)
.enter()
.append('rect')
.attr("x", function(d, i) {
return i * (width / data.length);
})
.attr("y", function(d) {
return height - d / 12;
})
.attr("width", width / data.length - barPadding)
.attr("height", function(d) {
return d;
})
.attr("fill", "teal");
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return i * (width / data.length) + (width / data.length - barPadding) / 2;
})
.attr("y", function(d) {
return (height - d / 12) + 20;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
return html`${svg.node()}`;
}
row_conv = function(d) {
return {
page_id: parseFloat(d.page_id),
name: d.name,
id: d.ID,
align: d.ALIGN,
eyes: d.EYE,
hair: d.HAIR,
gender: d.SEX,
alive: d.ALIVE,
appearances: parseFloat(d.APPEARANCES),
first_app: d["FIRST APPEARANCE"],
year: parseFloat(d.YEAR)
};
}
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.
