EJ Fox & Ian Johnson
streaming data, code, acid, design
Coding With Fire - Crowd Control Color PaletteCMU COVIDcast APICMU COVIDcast API: Map makerMap Maker Dot Density: Cumulative Covid CasesPattern Moire - Line & Circle Grids with ColorschemesCustom Cluster Force LayoutCMU COVIDcast API: Map maker Bubbles CanvasCMU COVIDcast API: Map maker BubblesCMU COVIDcast API: Map maker Bubbles IICMU COVIDcast API: Map maker TimelapseCoding With Fire: Mind MapGraphene MoiréGraphene Moiré FirebaseGraphene Moiré 3DCoding With Fire: Paths as PointsCoding With Fire: 3D PathsFreaky Dot PatternsCoding With Fire: NYPD CCRBWhere are votes at risk?Voronoi PurpleAirDeadline Timers 2CMU COVIDcast API: Bubbles ExportEmojisEmoji Treemap Small MultiplesCounties with DatasetteAmerican Community Survey 2018 by CountyRegistered Voters by County 2016-2018Population Change by County 2016-2018: Bubble LinesRegistered Voters by County 2016-2018: Bubble LinesCMU COVIDcast API: Bubbles Dark ModeUS Bubble Choropleth: Travel From CentroidUS Bubble Choropleth: Travel From CentroidCMU COVIDcast API: Bubbles Textures Interactive TimelapseChoropleth with Textures.jsForce Bubble Map with Textures.jsWhere Are Votes Outstanding? (Data Simulation)Where Are Votes Outstanding? Visualization IdeasElectoral College Unit ChartsElectoral College Unit Charts With TextElectoral College Unit Shuffle
Pattern Moire - Line & Circle Grids
sketch = p5(sketch => {
let canvas;
let div;
sketch.setup = function() {
canvas = sketch.createCanvas(width, height);
sketch.noLoop();
sketch.pixelDensity(2);
};
function drawElements(points) {
points.forEach(d => {
if (d.r) {
// reset the stroke
sketch.strokeWeight(0);
sketch.fill(d.fill);
sketch.ellipse(Math.round(d.x), Math.round(d.y), d.r, d.r);
}
if (d.x0) {
sketch.stroke(d.fill);
sketch.strokeWeight(d.lineWidth);
sketch.line(d.x0, d.y, d.x1, d.y);
}
});
}
sketch.draw = function() {
// sketch.background('#F7F7F7');
sketch.background(colors[0]);
sketch.noStroke();
// drawPoints(testPoints);
patterns.forEach(points => {
drawElements(points);
});
// qr.toCanvas(`${document.baseURI}${hashPath}`);
var img = new Image();
let ctx = canvas.canvas.getContext("2d");
img.onload = function() {
ctx.drawImage(img, 10, height - 250); // Or at whatever offset you like
};
let datauri = qrcode;
img.src = datauri;
};
})
// qr.toCanvas(`${document.baseURI}${hashPath}`)
patterns = {
let chance = new Chance(seed);
function pattern1(i) {
let rndx0 = chance.floating({ min: 0, max: width / 2 });
let rndx1 = chance.floating({ min: rndx0, max: width });
let rndy0 = chance.floating({ min: height / 2, max: height });
let rndy1 = chance.floating({ min: rndy0, max: height });
// let r = chance.floating({ min: 0.25, max: height * 0.02 });
let r = chance.floating({ min: radiusRange[0], max: radiusRange[1] });
let offset = r * chance.floating({ min: 0.95, max: 3.5 });
let fill = chance.pick(colors);
if (i !== 0 && chance.bool({ likelihood: 33 })) fill = colors[0];
// drawPattern1(rndx0, rndx1, rndy0, rndy1, r, offset, fill);
return generatePattern1(
chance,
rndx0,
rndx1,
rndy0,
rndy1,
r,
offset,
fill
);
}
function pattern2(i) {
let rndx0 = chance.floating({ min: 0, max: width / 2 });
let rndx1 = chance.floating({ min: rndx0 + 25, max: width / 2 + rndx0 });
let rndy0 = chance.floating({ min: 0, max: height / 2 });
let rndy1 = chance.floating({ min: rndy0 + 25, max: height / 2 + rndy0 });
let lineWidth = chance.floating({ min: 0.2, max: 2 });
let offset = lineWidth * chance.floating({ min: 0.9, max: 5 });
let fill = chance.pick(colors);
if (i !== 0 && chance.bool({ likelihood: 33 })) fill = colors[0];
// drawPattern2(rndx0, rndx1, rndy0, rndy1, offset, lineWidth, fill);
return generatePattern2(
chance,
rndx0,
rndx1,
rndy0,
rndy1,
offset,
lineWidth,
fill
);
}
let patterns = [];
let circles = Math.round(patternCount * .7);
let lines = Math.round(patternCount * .3);
for (let i = 0; i < circles; i++) {
patterns.push(pattern1(i));
}
for (let i = 0; i < lines; i++) {
patterns.push(pattern2(i));
}
return patterns;
}
generatePattern1 = function(
chance,
x0,
x1,
y0,
y1,
circleRadius = 4,
circleOffset = 10,
fill = "black",
margin = 25,
) {
let nodes = [];
let sizeChange = chance.bool({ likelihood: 20 });
let skipCircles = chance.bool({ likelihood: 10 });
let sizeChangeSmaller = chance.bool({ likelihood: 80 });
let sizeChangeAmount = chance.floating({ min: 0.001, max: 0.004 });
x0 += margin;
x1 -= margin;
y0 += margin;
y1 -= margin;
if (chance.bool({ likelihood: 10 })) x0 = margin;
if (chance.bool({ likelihood: 10 })) x1 = width - margin;
if (chance.bool({ likelihood: 10 })) y0 = margin;
if (chance.bool({ likelihood: 10 })) y1 = height - margin;
let r = circleRadius;
for (let x = x0; x <= x1; x += circleOffset) {
for (let y = y0; y <= y1; y += circleOffset) {
if (chance.bool({ likelihood: 25 }) && sizeChange && sizeChangeSmaller)
r -= r * sizeChangeAmount;
else if (chance.bool({ likelihood: 25 }) && sizeChange) {
r += r * sizeChangeAmount;
if (chance.bool({ likelihood: 25 }))
circleOffset += r * sizeChangeAmount;
}
nodes.push({
x: x,
y: y,
r: r,
fill: fill
});
// sketch.fill(fill);
// if (!skipCircles) {
// sketch.ellipse(Math.round(x), Math.round(y), r, r);
// } else if (chance.bool({ likelihood: 99 }) && skipCircles) {
// sketch.ellipse(Math.round(x), Math.round(y), r, r);
// }
}
}
return nodes;
}
generatePattern2 = function(
chance,
x0,
x1,
y0,
y1,
lineOffset = 10,
lineWidth = 0.5,
fill = "black",
margin = 10
) {
let nodes = [];
x0 += margin;
x1 -= margin;
y0 += margin;
y1 -= margin;
let lineStretch = chance.bool({ likelihood: 10 });
for (let y = y0; y <= y1; y += lineOffset + lineWidth) {
if (lineStretch)
lineOffset += lineWidth * chance.floating({ min: 0.1, max: 1.2 });
nodes.push({
x0: x0,
x1: x1,
y: y,
fill: fill,
lineWidth: lineWidth,
lineOffset: lineOffset
});
}
return nodes;
}
testPoints = generatePattern1(new Chance(seed), 100, 500, 100, 700)
seed = urlVariables["seed"] || 42
import { colors } from '@codingwithfire/coding-with-doom-fire'
qr = require('https://unpkg.com/qrcode@1.4.4/build/qrcode.min.js')
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.