Creative coder working at the intersection of computation and creativity.
goodgraphics(
{
height: 800,
width: 800,
attributes: {
fill: "#fff",
style: "background: #eee",
stroke: "none"
}
},
(svg) => {
const numberOfHorizontalLayers = 40;
svg.times(numberOfHorizontalLayers, (index) => {
const y = svg.map(index, 0, numberOfHorizontalLayers, 0, svg.height);
const barHeight = svg.height / numberOfHorizontalLayers;
svg.rect(0, y, svg.width / 2, barHeight, {
fill: index % 2 === 0 ? "blue" : "white"
});
});
const numberOfVerticalLayers = 20;
svg.times(numberOfVerticalLayers, (index) => {
const x = svg.map(
index,
0,
numberOfVerticalLayers,
svg.width / 2,
svg.width
);
const barWidth = svg.width / numberOfVerticalLayers;
svg.rect(x, 0, barWidth, svg.height, {
fill: index % 2 === 0 ? "yellow" : "white"
});
});
const numberOfTriangles = 20;
svg.times(
numberOfTriangles,
(index) => {
const size =
svg.width * 1.1 - svg.map(index, 0, numberOfTriangles, 0, svg.width);
const y = -size / 2.5 + svg.height;
svg.triangle(svg.width / 2, y, size, {
fill: index % 2 === 0 ? "white" : "red"
});
},
{ transform: `rotate(180 ${svg.width / 2} ${svg.height / 2})` }
);
svg.draw();
}
)
import { tweet } from "@mbostock/tweet"
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.
