Visualization toolmaker. Founder @observablehq. Creator @d3. Former @nytgraphics. Pronounced BOSS-tock.
md`# d3 understanding`
Changed in fork
-d3 = require('d3')+d3 = require('d3@5')
data = d3.csv(
"https://gist.githubusercontent.com/seankross/a412dfbd88b3db70b74b/raw/5f23f993cd87c283ce766e7ac6b329ee7cc2e1d1/mtcars.csv"
)
data2 = {
const x = [];
for (let i = 0; i < data.length; i++) {
x.push({
mpg: parseFloat(data[i].mpg),
disp: parseFloat(data[i].disp),
cyl: parseFloat(data[i].cyl)
});
}
return x;
}
w = 650
h = 500
margin = 50
Removed in fork
canvas = html``
Changed in fork
-container = d3 .create('svg') .attr('width', w) .attr('height', h)+container = { const container = d3 .create('svg') .attr('width', w) .attr('height', h) container .selectAll('circle') .data(data2) .join('circle') .attr('cx', d => { return d.disp; }) .attr('cy', d => { return d.mpg; }) .attr('r', 5) return container.node(); }
Removed in fork
cont = container.node()
Removed in fork
d3
.select(cont)
.append('svg')
.attr('width', w)
.attr('height', h)
.selectAll('circle')
.data(data2)
.enter()
.append('circle')
.attr('cx', d => {
return d.disp;
})
.attr('cy', d => {
return d.mpg;
})
.attr('r', 5)Changed in fork
-cont2 = d3 .create('svg') .attr('width', w) .attr('height', h)+cont2 = { const container = d3 .create('svg') .attr('width', w) .attr('height', h) container .selectAll("rect") .data(data3) .join('rect') .attr('x', (d, i) => { return i * (w / data3.length); }) .attr('y', d => { return h - d; }) .attr('width', w / data3.length - bar_padding) .attr('height', d => { return d * 10; }) .attr('fill', d => { return "rgb(0,0, " + d * 10 + ")"; }) return container.node(); }
Removed in fork
cont3 = cont2.node()
data3 = [
5,
10,
13,
19,
21,
25,
22,
18,
15,
13,
11,
12,
15,
20,
18,
17,
16,
18,
23,
25
]
bar_padding = 1
Removed in fork
svg_bar = d3
.select(cont3)
.append('svg')
.selectAll("rect")
.data(data3)
.enter()
.append('rect')
.attr('x', (d, i) => {
return i * (w / data3.length);
})
.attr('y', d => {
return h - d;
})
.attr('width', w / data3.length - bar_padding)
.attr('height', d => {
return d * 10;
})
.attr('fill', d => {
return "rgb(0,0, " + d * 10 + ")";
})Changed in fork
-cont4 = d3 .create('svg') .attr('width', w) .attr('height', h)+cont4 = { const container = d3 .create('svg') .attr('width', w) .attr('height', h) .style('overflow', 'visible') container .selectAll('circle') .data(data2) .join('circle') .attr('cx', d => { return d.disp; }) .attr('cy', d => { return d.mpg; }) .attr('r', 10) .attr('fill', 'black') container .append('g') .call(d3.axisBottom(x_scale)) container .append('g') .call(d3.axisLeft(y_scale)) return container.node(); }
Removed in fork
cont5 = cont4.node()
Removed in fork
svg_scatter = d3
.select(cont5)
.append('svg')
.selectAll('circle')
.data(data2)
.enter()
.append('circle')
.attr('cx', d => {
return d.disp;
})
.attr('cy', d => {
return d.mpg;
})
.attr('r', 10)
.attr('fill', 'black')
.append('g')
.call(d3.axisBottom(x_scale))
.call(d3.axisLeft(y_scale))Removed in fork
svg_scatter
md`
> Scales are functions that map from an input domain to an output range
`
mpg_domain = d3.extent(data2[1])
x = [1, 2, 3, 4]
mpg_extent = d3.extent(data2, d => {
return d.mpg;
})
disp_ext = d3.extent(data2, d => {
return d.disp;
})
x_scale = d3
.scaleLinear()
.domain([60, 400])
.range([0, w]) // creates a linear scale
y_scale = d3
.scaleLinear()
.domain([10, 30])
.range([h, 0])
x_axis = d3.axisBottom(x_scale)
y_axis = d3.axisLeft(y_scale)