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 ColorschemesPattern Moire - Line & Circle GridsCustom 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 PurpleAirCMU 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
Deadline Timers 2
//endtime = new Date("2020-09-13T19:17:50.316")
setdeadline = d3.timeMinute.offset(new Date(), 9).toString()
deadline = new Date("2020-11-11T20:15:40.579") //("Sun Sep 27 2020 17:00:00 GMT-0700 (Pacific Daylight Time)")
height = 300
enjasize = 10
enjaseconds = {
let diffSeconds = moment(userdl).diff(now, "seconds");
let diffMinutes = moment(userdl).diff(now, "minutes");
let diffSecondHand = d3.max([0, diffSeconds - diffMinutes * 60]);
let count = diffMinutes + diffSecondHand;
let xbScale = d3
.scaleBand()
.domain(d3.range(count))
.range([0, width]);
// let x = d3.scaleLinear()
// .domain([])
// .range([])
let colorscale = d3.scaleSequential(d3.interpolateMagma).domain([0, 40]);
let size = enjasize + 5;
let w = enjaSecondWidth;
let n = Math.floor(w / size);
let mins = d3.range(count).map(i => {
let c = d3.color(colorscale(initialCircles[i].random * count));
c.opacity = 0.2;
return {
clock: clocks[i % 12],
i,
// x: 25 + (i % n) * size,
// y: 25 + Math.floor(i / n) * size,
xb: xbScale(i),
yb: height - size, // - (diffSeconds % 10) * 10,
w: xbScale.bandwidth(),
// phase: Math.random() * 10,
color: c.toString()
};
});
return mins;
}
viewof enjalot = {
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
let q5, el;
if (this) {
el = this;
q5 = this.value;
} else {
q5 = new Q5();
q5.createCanvas(width, height);
el = html`${q5.canvas}`;
el.value = q5;
}
yield el;
// invalidation.then(() => q5.clear());
q5.noStroke();
let x = width / 2;
let y = height / 2;
let px = x;
let py = y;
// q5.fill("rgba(255,255,255, 0.01)");
// q5.rect(0, 0, width, height);
while (true) {
// q5.tint(255, 0, 0, 100);
// q5.fill(colors[0]);
// q5.rect(-10, -10, width + 20, height + 20);
// q5.fill("rgba(255,255,255, 0.5)");
// q5.rect(0, 0, width, height);
// q5.rect(-10, -10, width + 20, height + 20);
// q5.clear();
enjaseconds.forEach(d => {
q5.fill(d.color);
q5.rect(d.xb, 0, d.w, d.yb);
});
yield el;
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
}
colors
enjaSecondWidth = width - 50
clocks[0]
circleStepMax = 0.2
circleRadius = 70
viewof ej_15minute_canvas = {
let alpha = 0.5;
const q5 = new Q5();
q5.createCanvas(width, height);
q5.randomSeed();
const el = html`${q5.canvas}`;
el.value = q5;
yield el;
q5.noStroke();
// q5.strokeWeight(0);
// q5.stroke(0, 190);
// Text here
invalidation.then(() => q5.clear());
let x = width / 2;
let y = height / 2;
let px = x;
let py = y;
let circles = [];
const addCircle = function(i) {
circles.push({
x: chance.floating({ min: 50, max: width - 50 }),
y: height / 4 + chance.floating({ min: 0, max: height / 2 }),
fill: chance.pick(colors),
r: circleRadius * (i * 0.001)
});
};
for (let c = 0; c < 1200; c++) {
addCircle(c);
}
const simulation = d3
.forceSimulation(circles)
.force("charge", d3.forceManyBody().strength(-0.1));
while (true) {
// q5.background(255);
// q5.clear();
// q5.fill(colors[0]);
q5.fill("rgba(255,255,255, 0.05)");
q5.rect(0, 0, width, height);
let now = moment(new Date());
let diffSeconds = moment(userdl).diff(now, "seconds");
let diffMinutes = moment(userdl).diff(now, "minutes");
let diffSecondHand = d3.max([0, diffSeconds - diffMinutes * 60]);
// for (let i = 0; i < diffMinutes; i++) {
// const rndX = chance.floating({ min: 0, max: width });
// const rndY = chance.floating({ min: 0, max: height });
// q5.circle(rndX, rndY, 30);
// q5.fill(colors[2]);
// }
// for (let i = 0; i < diffSecondHand; i++) {
// const rndX = chance.floating({ min: 0, max: width });
// const rndY = chance.floating({ min: 0, max: height });
// q5.circle(rndX, rndY, 10);
// q5.fill("black");
// }
// circles = circles.slice(0, +diffSecondHand);
circles = circles.slice(0, +diffSeconds);
for (let i = 0; i < circles.length; i++) {
// q5.fill = chance.pick(colors)
q5.fill(circles[i].fill);
q5.circle(circles[i].x, circles[i].y, circles[i].r);
if (chance.bool({ likelihood: i * 0.01 })) {
circles[i].x += chance.floating({
min: -circleStepMax,
max: circleStepMax
});
}
if (chance.bool()) {
// let yMax = _.max([i / 100, height]);
// circles[i].y += chance.floating({ min: -1, max: yMax });
circles[i].y += chance.floating({
min: -circleStepMax,
max: circleStepMax * 1.5
});
}
if (circles[i].y > height) {
circles[i].y -= circleRadius * 1.5;
}
if (circles[i].x > width) {
circles[i].x = 0;
}
}
q5.textSize(220);
// q5.fill(colors[0]);
// q5.text(`${diffMinutes}:${pad(diffSecondHand, 2)}`, 100, 250);
q5.textSize(48);
// q5.text("TIME LEFT", width * 0.28, 70);
// q5.text(circles.length, width * 0.28, 70);
// q5.text(diffSecondHand, 180, 140);
yield el;
}
}
initialCircles = {
let circles = [];
const addCircle = function(i) {
circles.push({
x: chance.floating({ min: 0, max: width }),
y: chance.floating({ min: 0, max: height / 2 }),
fill: chance.pick(colors),
random: Math.random(),
r: circleRadius * (i * 0.001)
});
};
for (let c = 0; c < 1200; c++) {
addCircle(c);
}
return circles;
}
//
//https://stackoverflow.com/questions/10073699/pad-a-number-with-leading-zeros-in-javascript
function pad(n, width, z) {
z = z || '0';
n = n + '';
return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}
md`## Firebase stuff`
import { colors } from '@codingwithfire/coding-with-doom-fire'
moment = require("moment")
Q5 = require("https://cdn.jsdelivr.net/gh/LingDong-/q5xjs/q5.min.js").catch(
() => window.Q5
)
d3 = require("d3@6")
_ = require("lodash")
Chance = require("chance")
chance = new Chance()
db = app.firestore()
firebaseConfig = ({
apiKey: "AIzaSyCXVpNv-wY1r8LIfvZjFsnB-rxo7wK7Csc",
authDomain: "cwf-ej-enj.firebaseapp.com",
databaseURL: "https://cwf-ej-enj.firebaseio.com",
projectId: "cwf-ej-enj",
storageBucket: "cwf-ej-enj.appspot.com",
messagingSenderId: "824648798292",
appId: "1:824648798292:web:70197a68c08e6f923dddc1",
measurementId: "G-0YF53DB757"
})
app = {
let app = firebase.initializeApp(firebaseConfig);
// firebase.analytics();
// firebase.auth().useDeviceLanguage();
return app;
}
firebase = require.alias({
"@firebase/app": "https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js",
// "@firebase/auth": "https://www.gstatic.com/firebasejs/7.2.3/firebase-auth.js",
// "@firebase/analytics":
// "https://www.gstatic.com/firebasejs/7.2.3/firebase-analytics.js",
"@firebase/firestore":
"https://www.gstatic.com/firebasejs/7.2.3/firebase-firestore.js"
})(
"@firebase/app",
// "@firebase/auth",
// "@firebase/analytics",
"@firebase/firestore"
)
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.
