firstName = "Mike"
lastName = "Moore"
handle = "mjmoore52"
// Your D3 code goes here.
// The function badgeCode gets called below to generate the previews.
function badgeCode(g, context, frameNumber) {
// g: a <g>, i.e. d3.select(... the node)
// context: a canvas context, useful for doing canvas drawing
// frameNumber: a number that represents the frame (1, 2, … 10) for psuedo-animation.
// width & height are available via the environment, as is d3
// Note: the <g> is drawn on top of the <canvas>
context.fillStyle = "#2c3e50";
context.fillRect(0, 0, width, height);
const data = d3.range(1000).map(d => [Math.random()*width, Math.random()*1150])
const color = d3.scaleOrdinal(d3.schemeBlues[9])
const svg = d3.select("body").append("g")
.attr("width", width)
.attr("height", 1050);
g.selectAll("ellipse")
.data(data)
.enter()
.append("ellipse")
.attr("cy", d => d[1])
.attr("cx", d => d[0])
.attr("rx", 30)
.attr("ry", 50)
.style("fill", d => color(d[0]))
.style("stroke", "gold")
.style("stroke-width", 2)
}
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.
