Published
Edited
Oct 3, 2019
md`# d3 understanding`
d3 = require('d3')
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
canvas = html``
container = d3
.create('svg')
.attr('width', w)
.attr('height', h)
cont = container.node()
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)
cont2 = d3
.create('svg')
.attr('width', w)
.attr('height', h)
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
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 + ")";
})
cont4 = d3
.create('svg')
.attr('width', w)
.attr('height', h)
cont5 = cont4.node()
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))
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)
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.
