Published
Edited
Sep 21, 2019
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function drawNet( labeler )
{
const svg = DOM.svg(1000, 700);

const container = d3.select(svg)
.attr( "viewBox", "-250 -250 500 500")
.append( "g" );

tripletPair( container, 0, labeler );
const offset = vsub( vadd( vertices[2] .map( x => -2*x ), vertices[4] ), vertices[3] );
const g = container.append( "g" )
.attr( "transform", "translate(" + offset.join(" ") +")" );
tripletPair( g, 2, labeler );

return svg
}
Insert cell
Insert cell
Insert cell
Insert cell
function wedge( container, blue, yellow, red, labeler )
{
const edgeMid = centroid( [ vertices[0], vertices[4] ] );
container .append("polygon")
.attr( "fill", labeler .color )
.attr( "stroke", "black" )
.attr( "stroke-width", "1" )
.attr( "points", [ vertices[0], center, edgeMid ] .map( d => d.join(",") ).join(" ") );

labeler .labelWedge( container, blue, yellow, red );
}
Insert cell
Insert cell
Insert cell
Insert cell
vertices = [
[0,0], [1,0], [PHI,1], [1,PHI], [0,1]
] .map( ([x,y]) => [
Math.sin( (2/5) * Math.PI ) * x,
Math.cos( (2/5) * Math.PI ) * x - y + 1/2 // plus 1/2 to move the origin to the 0-4 midpoint
] ) .map( v => v.map( x => x * edgeSize ) )
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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