Lines, colors, scales and stuff
Drawing noise
They say noise is random.
chart1 = {
// this is a nifty feature that lets you add an SVG element inline,
// rather than adding an HTML code block
const svg = d3.select(DOM.svg(width*(6/7), 120));
svg
.append('path')
.attr('d', lineGen(points))
.style('fill', 'none')
.style('stroke', 'black');
svg
.append('path')
.attr('d', lineGen([[0,50], [width,50]]))
.style('stroke', 'red')
.style('stroke-dasharray', (8,2))
.style('stroke-width', '2.5px');
return svg.node();
}
lineGen = d3.line();
points = {
var points = [];
for (var i = 0; i < width; i++) {
points.push([i, Math.random() * 100]);
}
return points
}
Playing with scales
scale1 = d3.scaleLinear()
.domain([0,50])
.range([0, 5]);
scale1(5)
scale1(100)
// this function squares input values
scale2 = d3.scalePow().exponent(2).domain([0, 50]).range([0, 1])
scale2(15)
scale2(12.5)
scale3 = d3.scaleSqrt()
.domain([0,100])
.range([10, 20]);
scale3(49)
scale3(81)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
scale4 = d3.scaleTime()
.domain([new Date(2016, 1, 1), new Date(2020, 12, 31)])
.range([0, 100]);
scale4(new Date(2018, 7, 1))
scale4(new Date(2019, 9, 26))
scale5 = d3.scaleSqrt()
.domain([0, 10])
.range([0, 60]);
scale5(0.46)
Playing with scales, arrays, and circles
vals = {
var vals = [];
for (var i = 0; i < 5; i++) {
vals.push([Math.random() * 10]);
}
return vals
}
chart2 = {
const svg = d3.select(DOM.svg(width*(6/7), 140));
svg
.selectAll('circle')
.data(vals)
.enter()
.append('circle')
.attr('cx', function(d, i) {
return i*100 + 65;
})
.attr('cy', 66)
.attr('r', function(d) {
return scale5(d);
})
.style('fill', '#cc0000');
return svg.node();
}
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.
