Published
Edited
Sep 16, 2019
Also listed in…
uncertainty: identity
chart = {
const colors = ["#3f4e68", "#8aa496", "#aae5b7", "#e4ffa1", "#a7ca64", "#3e3a1d", "#22040a", "#530911", "#6c060e", "#b31919"]
const lines = [line, line2, line3, line4, line5];
const colorNow = colors[getRandomIntInclusive(1, colors.length-1)];
let animTime = 1000;
const svg = d3.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto");
for (let i = 0; i < data.length; i++) {
svg.selectAll("g")
.data([data[i]])
.enter()
.append("path")
.attr("class", "letterPart" + i)
.attr("fill", function () {
if (i==4 | i==8) return "white"
else return colorNow
})
.attr("fill-opacity", 1)
.attr("d", line);
}
function animateIt () {
for (let j = 0; j < data.length; j++) {
let thisClass = ".letterPart" + j;
svg.selectAll(thisClass)
.data([data[j]])
.transition()
.duration(2000)
.attr("d", d => {
let fn = lines[getRandomIntInclusive(0, lines.length-1)]
return fn(d)
})
}}
for (let k=0; k<20; k++) {
setTimeout(animateIt, animTime)
animTime += 2100;
}
return svg.node();
}
line = d3.line()
.curve(d3.curveStep)
.x(function(d) { return d[0]; })
.y(function(d) { return d[1]; });
line2 = d3.line()
.curve(d3.curveStep)
.x(function(d) { return d[0] + randn_bm() * 2; })
.y(function(d) { return d[1] + randn_bm() * 2; });
line3 = d3.line()
.curve(d3.curveStep)
.x(function(d) { return d[0] + randn_bm() * 3; })
.y(function(d) { return d[1] + randn_bm() * 3; });
line4 = d3.line()
.curve(d3.curveStep)
.x(function(d) { return d[0] + randn_bm() * 4; })
.y(function(d) { return d[1] + randn_bm() * 4; });
line5 = d3.line()
// .curve(d3.curveLinear)
.curve(d3.curveStep)
// .curve(d3.curveStepBefore)
// .curve(d3.curveStepAfter)
// .curve(d3.curveBasis)
// .curve(d3.curveCardinal)
// .curve(d3.curveMonotoneX)
// .curve(d3.curveCatmullRomOpen)
// .x(function(d) { return d[0];})
// .y(function(d) { return d[1]; });
.x(function(d) { return d[0] + randn_bm() * 5; })
.y(function(d) { return d[1] + randn_bm() * 5; });
movementFactor = 1
width = 1024
height = 256
gist = "https://gist.github.com/aaronxhill/2c4a504f846dfe3084b4e585909fe028/raw/143e5fa1bbfbabe1bc747fd2914a0152927b7ae0/area_letters.json"
gistUrl = gist.replace("gist.github.com", "gist.githubusercontent.com")
function getRandomIntInclusive(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
}
randn_bm = function () {
var u = 0, v = 0;
while(u === 0) u = Math.random(); //Converting [0,1) to (0,1)
while(v === 0) v = Math.random();
return Math.sqrt( -2.0 * Math.log( u ) ) * Math.cos( 2.0 * Math.PI * v );
}
data = d3.json(gistUrl)
d3 = require("d3@5")
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.
