EJ Fox & Ian Johnson
streaming data, code, acid, design
canvas = {
let canvas = d3
.create("canvas")
.attr("width", width)
.attr("height", height)
.node();
let ctx = canvas.getContext("2d");
scaleCanvas(canvas, ctx);
let scaleFactor = 10;
var line = d3
.line()
.x(function(d) {
return -scaleFactor + d.x / scaleFactor;
})
.y(function(d) {
return -scaleFactor + d.y / scaleFactor;
})
.curve(d3.curveBasis)
.context(ctx); // <-- so convenient!
ctx.lineCap = "round";
simulation.on("tick", tick => {
ctx.fillStyle = "rgba(255,255,255,0.7)";
ctx.fillRect(0, 0, width, height);
ctx.save();
ctx.translate(width / 2, height / 2);
simulation.nodes().forEach(paint);
ctx.restore();
});
invalidation.then(() => simulation.stop());
function paint(d, i) {
ctx.save();
ctx.translate(d.x, d.y);
ctx.strokeStyle = "#ccc";
ctx.beginPath();
ctx.arc(0, 0, d.r, 0, Math.PI * 2);
ctx.stroke();
d.face.strokes.forEach(function(s) {
ctx.strokeStyle = "#111";
ctx.lineWidth = 1;
ctx.beginPath();
line(s);
ctx.stroke();
});
ctx.restore();
}
ctx.save();
ctx.translate(width / 2, height / 2);
simulation.nodes().forEach(paint);
ctx.restore();
return canvas;
}
import { scaleCanvas } from "@john-guerra/canvas-retina-display"
faces
facesByCountry = d3.group(faces, d => d.countrycode)
simulation.nodes().map(d => coatRadius(coats.get(d.data["Coat length"]) || 0))
coatRadius = d3
.scaleSqrt()
.domain(d3.extent(coats.values()))
.range([5, 30])
d3.extent(coats.values())
simulation = {
let data = circles.map(d => ({ ...d }));
return (
d3
.forceSimulation(data)
// .force("x", d3.forceX(width / 2).strength(0.001))
// .force("y", d3.forceY(height / 2).strength(0.001))
.force('charge', d3.forceManyBody().strength(0.1))
// .force('center', d3.forceCenter(width / 2, height / 2).strength(0.000001))
.force('collision', d3.forceCollide().radius(d => d.r * 1.25))
);
}
simulation.nodes()
updateForces = {
simulation;
// .force("x", d3.forceX(forceX).strength(0.08))
// .force("y", d3.forceY(forceY).strength(0.08));
simulation.alphaDecay(0.03);
simulation.alphaTarget(0.5);
simulation.restart();
}
faces = d3
.json(
"https://storage.googleapis.com/quickdraw-data/words/grid-cat/cat_1_21.22_1.25.json"
// "https://storage.googleapis.com/quickdraw-data/words/grid-cat/cat_-19_-3.78_1.25.json"
)
.then(data => {
return data.map(strokify);
})
function strokify(d) {
var drawing = JSON.parse(JSON.stringify(d)) //well that's one way to copy
var strokes = d.drawing.map(function(s) {
var points = []
s[0].forEach(function(x,i) {
points.push({x: x, y: s[1][i] })
})
return points;
})
drawing.strokes = strokes;
return drawing
}
table = aq.from(cats)
table.view()
table
.groupby("Location of origin")
.rollup({ count: op.count() })
.orderby(aq.desc("count"))
.view()
table
.groupby("Body type")
.rollup({ count: op.count() })
.orderby(aq.desc("count"))
.view()
table
.groupby("Type")
.rollup({ count: op.count() })
.orderby(aq.desc("count"))
.view()
table
.groupby("Coat length")
.rollup({ count: op.count() })
.orderby(aq.desc("count"))
.view()
coats = new Map([
["Hairless", 0],
["Rex", 0],
["Short", 3],
["Short/long", 6],
["Semi-long", 7],
["Long", 10]
])
table
.groupby("Pattern")
.rollup({ count: op.count() })
.orderby(aq.desc("count"))
.view()
d3.group(cats, d => d["Location of origin"])
import { aq, op } from '@uwdata/arquero'
d3 = require("d3@6")
Chance = require("chance")
chance = new Chance()
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.
