plots = { const chartSize = width > 640 ? .45 * width : Math.min(500, width) const innerSize = chartSize - 40 const opacity = i => i % nth === 0 ? 1 : .3 const points = d3.range(0, N) const markProps = { x: i => fiblat.x(i), y: i => fiblat.y(i, N, E), fill: i => d3.interpolateTurbo(i / N), r: .45 * innerSize / Math.sqrt(N), // mixBlendMode: 'multiply', opacity, } function circleMark(options={}) { return Plot.circle(points, { ...markProps, ...options }) } function textMark(options={}) { return Plot.text(points /*.filter(({i}) => i < 10 || i % 5 === 0)*/, { x: i => fiblat.x(i), y: i => fiblat.y(i, N, E), text: i => i, fill: i => { const hcl = d3.hcl(d3.interpolateTurbo(i / N)) hcl.l = hcl.l / opacity(i) > 61.8 ? 0 : 100 return hcl.toString() }, opacity, fontWeight: '800', fontFamily: 'Arial Narrow, Arial, Helvetica, Sans Serif', ...options, }) } const layout = { marginLeft: 30, marginRight: 10, marginTop: 20, marginBottom: 20, width: chartSize, height: chartSize, } const cartesian = Plot.plot({ ...layout, caption: html`Cartesian Plot (x,y)`, x: { domain: [0, 1], ticks: 10, grid: true, label: '', }, y: { domain: [0, 1], ticks: 10, grid: true, label: '', }, marks: [ circleMark(), Plot.ruleY([points[0], points[points.length-1]], { y: i => fiblat.y(i, N, E), strokeDasharray: '5 3', opacity: .5 }), textMark(), ] }) const xy2polar = { x: i => Math.cos(fiblat.θ(i)) * fiblat.r(i, N, E), y: i => Math.sin(fiblat.θ(i)) * fiblat.r(i, N, E), } const polar = Plot.plot({ ...layout, caption: html`Polar Plot (θ,r)`, x: { domain: [-1, 1], ticks: 10, grid: false, }, y: { domain: [-1, 1], ticks: 10, grid: false, }, r: { domain: [0, 1], range: [0, innerSize/2], type: 'linear' }, marks: [ Plot.circle(d3.range(.2, 1.01, .2), { x: 0, y: 0, r: Plot.identity, stroke: '#ddd', strokeWidth: .65, }), Plot.ruleX([0], { stroke: '#ddd', }), Plot.ruleY([0], { stroke: '#ddd', }), circleMark(xy2polar), textMark(xy2polar) ] }) const toDegs = 180 / Math.PI const geo = Plot.plot({ ...layout, width, height: Math.min(640, width), projection: {type: "orthographic", rotate: [0, -35, 20]}, marks: [ Plot.graticule({strokeOpacity: 0.1}), Plot.sphere(), Plot.geo(points, { geometry: d3.geoCircle() .center(i => [fiblat.θ(i) * toDegs, fiblat.φ(i, N, E) * toDegs + 90]) .radius(100 / Math.sqrt(N)), stroke: '#555', ...markProps, mixBlendMode: 'multiply', }), textMark({ x: i => fiblat.θ(i) * toDegs, y: i => fiblat.φ(i, N, E) * toDegs + 90, }), ] }) return html`

${cartesian}

${polar}

${geo}

` }

Purpose-built for displays of data