Introducing d3-geo-scale-barRidiculously Rapid Software-as-a-Service (SaaS) development with Observable, Firebase and StripeColor by numberWalkers Animated PictogramMapping Air Quality Data with D3 - VORONOIOperations research in ObservablesThe Long Tail of Dog NamesNavio037 Shapes on a QuadTreeWebGL GlobeGetting Started with p5.jsTime distance by road to Paris (France)Penrose QuiltWordle, 15 Million Tweets LaterTemplate for exploring a German data set... e allora esportiamo!Mapping the Berkshires | Environmental Conservation Areas06 | autonomous ink agentsPresidentes vivos.Randomuser.meWhat is your four-digit PIN?Alaska quakesFlight Information Regions
Circle Studies 07
make_circles = (svg, height) => {
const rect = [100, height - 100]
let arr = [...Array(d3.randomInt(20, 35)())];
let forceStrength = .3
let center = { x: height, y: height };
let colors = [color1, color2, color3, color4]
// create new array with semi-random x & ys
const nodes = arr.map(a => {
const r = 20
return {
x:d3.randomUniform(rect[0], rect[1])(),
y:d3.randomUniform(rect[0], rect[1])(),
r: r,
// color: colors[Math.floor(Math.random()*colors.length)] //another way to get rangom colors
};
});
// let simulation = d3.forceSimulation(nodes)
// simulation
// .force("collide", d3.forceCollide(d => d.r + 3).iterations(12))
// .force("charge", d3.forceManyBody())
// .velocityDecay(0.75) //akin to atmosphere friction
// .alphaDecay(0.006) //if at 0 simulation runs forever
// .force('x', d3.forceX().strength(forceStrength).x(center.x))
// .force('y', d3.forceY().strength(forceStrength).y(center.y))
const circleGroup = svg.append("g");
// Append circles to the SVG element
circleGroup
.selectAll('circle')
.data(nodes)
.join('circle')
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('r', d => d.r)
.attr('fill', (d, i) => colors[i % 4])
//.attr('opacity', .9)
// .attr('fill', d => d.color)
.call(drag)
}
// square_grid = (s=100, n=10, go=[0.5, 0.5], co=[0.5, 0.5]) => {
// const cs = s / n;
// const x = i => (i % n) * cs - (cs * n * go[0]) + (cs * co[0]);
// const y = i => Math.floor(i / n) * cs - (cs * n * go[1]) + (cs * co[1]);
// const grid = [...Array(n * n).keys()];
// grid.forEach((v, i) => { grid[i] = {i: i, x: x(i), y: y(i), r: cs } });
// return grid;
// }
// line_grid = (svg, s, n) => {
// // Create a group container for the squares
// const g = svg.append("g");
// // Create the grid data and join to group
// let squares = g.selectAll("rect")
// .data(square_grid(s, n, [0.5, 0.5], [0, 0]));
// // Map the data to create a matrix of squares
// squares.enter()
// .append("rect")
// .attr("x", d => d.x)
// .attr("y", d => d.y)
// .attr("width", d => d.r)
// .attr("height", d => d.r)
// .attr("fill", "none")
// .attr("stroke-width", 1.6)
// .attr("stroke", "#212121");
// squares.exit().remove();
// return g;
// }
background = svg => {
const rect = svg.append("image")
.attr("width", "100%")
.attr("height", "100%")
.attr("xlink:href", `${cardboardBackground}`)
return rect;
}
cardboardBackground = FileAttachment("cardboard.png").url()
import {colorPicker} from "@shaunlebron/color-picker"
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.
