Published
Edited
Sep 16, 2019
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")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.