dataviz, R obsessed, learning D3 with #100daysofD3
Twitter: @W_R_Chase
Published
Edited
Apr 4, 2019
d3 = require("d3@5")
html`<p>I am a paragraph!</p> <div>And I am a div</div>`
{
let mydiv = html`<div></div>`
d3.select(mydiv).append("p").text("I made this with d3")
return(mydiv);
}
{
let mydiv = html`<div><p>This shouldn't change</p></div>`;
d3.select(mydiv)
.append("p")
.text("This should be red")
.classed("fun-class", true);
d3.select(mydiv)
.select(".fun-class")
.style("color", "red");
return(mydiv);
}
{
const dat = [10, 30];
const height = 100;
const width = 300;
const svg = DOM.svg(width, height);
d3.select(svg)
.selectAll("circle")
.data(dat)
.enter()
.append("circle")
.attr("cx", d => d * 4)
.attr("cy", 50)
.attr("r", d => d)
.attr("fill", "orange");
return(svg);
}
{
//this is mostly copied from Mike's intro to HTML notebook
const height = 200;
const width = 1000;
const svg = DOM.svg(width, height);
const dots = d3.range(100, 0, -10);
const color = d3.scaleSequential(d3.interpolateMagma).domain([0, 100]);
d3.select(svg)
.selectAll("circle")
.data(dots)
.enter()
.append("circle")
.attr("cx", d => d * d/dots.length)
.attr("cy", 100)
.attr("r", d => d)
.attr("fill", d => color(d));
return svg;
}
freedom = d3.csv("https://gist.githubusercontent.com/will-r-chase/3f4503ccfe9d7a559023ce62cfafbe6c/raw/b45c9cc5b512a36f7a4ae2755b03a6acb39be489/human_freedom_index_2018.csv")
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.
