Notebooks 2.0 is here.

Published
Edited
May 11, 2019
1 star
Insert cell
md`# d3 shape tests`
Insert cell
md`Notebook of d3 v5 shapes examples from https://chewett.co.uk/blog/1485/drawing-shapes-in-d3-js-version-5/`
Insert cell
graphic = {
let w = 500;
let svg = d3.select(DOM.svg(w, w))
.attr('width', w)
.attr('height', w)
// d3 shapes example from https://chewett.co.uk/blog/1485/drawing-shapes-in-d3-js-version-5/
var data = [
{"title": "Circle", "shape": d3.symbolCircle},
{"title": "Cross", "shape": d3.symbolCross},
{"title": "Diamond", "shape": d3.symbolDiamond},
{"title": "Square", "shape": d3.symbolSquare},
{"title": "Star", "shape": d3.symbolStar},
{"title": "Triangle", "shape": d3.symbolTriangle},
{"title": "Wye", "shape": d3.symbolWye}
]
var s = svg.selectAll(".shapes")
.data(data)
var sg = s.enter()
.append("g")
.attr("class", "shapes")
.attr("transform", function(d,i) {
return "translate(20, "+ (20 + (i * 30)) + ")"
})
.attr("fill", "black")
.attr("stroke-width", 1)
sg.append("path")
.attr("d", function(d) {return d3.symbol().type(d.shape).size("300")()})
.attr("stroke", "white")
sg.append("text")
.text(function(d) {return d.title; })
.attr("x", 20)
.attr("y", 8)
yield svg.node();
}
Insert cell
style = html`<style>
svg {
background:#e1e1e1;
}
}</style>`
Insert cell
d3 = require("d3@5")
Insert cell

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.
Learn more