The avatar for @julesblm
Jules Blom
Interested in data visualisation, maps, JavasScript, and geology
Public
Edited
Apr 9
6 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
defaultSymbol = d3.symbol() // circle with size 64. Equivalent to d3.symbol(d3.symbolCircle, 64)
Insert cell
Insert cell
Insert cell
d3.symbolAsterisk
Insert cell
Insert cell
wyeSymbol = d3.symbol(d3.symbolWye) // wye with default size of 64
Insert cell
Insert cell
wyeSymbol2 = d3.symbol().type(d3.symbolWye)
Insert cell
Insert cell
wyeSymbol2.size(72) // wye with size of 72
Insert cell
Insert cell
wyePath = wyeSymbol()
Insert cell
wyeSymbol2()
Insert cell
wyeSymbol() === wyeSymbol2()
Insert cell
Insert cell
svg`<svg height="20" >
<path transform="translate(10,10)" d="${wyePath}" fill="black" />
</svg>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3.symbolsFill
Insert cell
Insert cell
// Exactly the same!
d3.symbols === d3.symbolsFill
Insert cell
Insert cell
Insert cell
Insert cell
d3.symbolsStroke
Insert cell
svg`<svg width="${width}" height="50"><path x="20" d=${asteriskPath} fill="black" /></svg>`
Insert cell
Insert cell
Insert cell
Insert cell
// ⚠️ Invisible!
invisbleAsterisk = svg`<svg height="20" >
<path transform="translate(10,10)" d="${asteriskPath}" fill="black" />
</svg>`
Insert cell
// Visible with stroke="black"
blackAsterisk = svg`<svg height="20" >
<path transform="translate(10,10)" d="${asteriskPath}" stroke="black" />
</svg>`
Insert cell
Insert cell
import { symbolEcks } from "@jarrettmeyer/d3-symbols"
Insert cell
customSymbol = d3.symbol(symbolEcks, shapeSize)
Insert cell
svg`<svg height="30" >
<path transform="translate(15,15)" d="${customSymbol()}" stroke="black" />
</svg>`
Insert cell
Insert cell
filledSymbols = d3.zip(symbolNames, symbolTypes)
Insert cell
// filledSymbolsObject = filledSymbols.reduce((symbolsObject, symbol, i) => {
// console.log(i, { symbolsObject });
// const [name, fn] = symbol;
// symbolsObject[name] = fn.draw;

// return symbolsObject;
// }, {})
Insert cell
filledSymbolsNames = builtInSymbols.filter((d) => d.variant.includes("filled"))
Insert cell
strokedSymbolsNames = builtInSymbols
.filter((d) => d.variant.includes("stroked"))
Insert cell
strokedSymbolsNames.map((d) => d.method.split(".")[1])
Insert cell
symbolTypes = d3.symbolsFill
Insert cell
symbolNames = "circle cross diamond square star triangle wye".split(/ /)
Insert cell
Insert cell
import { freelanceBanner } from "@julesblm/freelance-banner"
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