Public
Edited
Sep 4, 2020
drawConstructors = (selector) => {
const poly = regularPolygon.regularPolygon()
.center(50,50)
.radius(45)
.edges(4)
.rotation(Math.PI / 4);
const drawConstructor = (polyId, newPolygon) => {
const polyPath = selector.select(`#${polyId}`);
polyPath.append("path")
.attr("d", poly.path())
.attr("class", "polygon");
polyPath.append("path")
.attr("d", newPolygon.path())
.attr("fill", "maroon");
}
drawConstructor("radius", poly.radius(30));
drawConstructor("center", poly.center(45,55));
drawConstructor("edges", poly.edges(3));
drawConstructor("rotation", poly.rotation(0));
}
pathMethod = {
const poly = regularPolygon.regularPolygon()
.center(50,50).radius(45).edges(6);
const svg = d3.create("svg").attr("width", 100).attr("height", 100);
svg.append("path").attr("d", poly.path()).attr("class", "polygon");
return svg.node();
}
polygonMethod = {
const poly = regularPolygon.regularPolygon()
.center(50,50).radius(45).edges(6);
const svg = d3.create("svg").attr("width", 100).attr("height", 100);
svg.append("polygon").attr("points", poly.polygon()).attr("class", "polygon");
return svg.node();
}
canvasMethod = {
const canvas = d3.create("canvas").attr("id", "canvas-polygon");
const poly = regularPolygon.regularPolygon()
.center(50,50).radius(45).edges(6);
var ctx = canvas.node().getContext("2d");
// copy settings from style
ctx.fillStyle = "rgba(59,66,159,0.3)";
ctx.strokeStyle = "#3B429F";
ctx.lineWidth = 1.5;
poly.canvas(ctx);
ctx.stroke();
ctx.fill();
return canvas.node();
}
coordsMethod = {
const svg = d3.create("svg").attr("width", 150).attr("height", 150);
const poly = regularPolygon.regularPolygon()
.center(70,50).radius(45).edges(6);
svg.selectAll("circle")
.data(poly.coords()).enter()
.append("circle")
.attr("class", "polygon")
.attr("cx", d => d[0]).attr("cy", d => d[1])
.attr("r", (_, i) => (i * 4) + 1);
return svg.node();
}
apothemMethod = {
const svg = d3.create("svg").attr("width", width).attr("height", 150);
const poly = regularPolygon.regularPolygon()
.radius(35).edges(6).rotation(Math.PI / 2);
const hexagons = [...Array(10)].map((_, i) => poly.center(50 + (i * (2 * poly.apothem())), 50));
const nextRow = [...Array(10)].map((_, i) => poly.center(50 + (i * (2 * poly.apothem())) + poly.apothem(), 50 + ((poly.sideLength() / 2) + poly._r)));
svg.selectAll("path")
.data([...hexagons, ...nextRow]).enter()
.append("path").attr("class", "polygon")
.attr("d", d => d.path());
return svg.node()
}
sideLengthMethod = {
const svg = d3.create("svg").attr("width", 200).attr("height", 150);
let poly = regularPolygon.regularPolygon()
.center(50,75).radius(45).edges(8);
// turns octagon into stop sign shape
poly = poly.rotation(poly.apothem() / 2);
svg.append("path")
.attr("class", "polygon")
.attr("d", poly.path());
svg.append("path").attr("fill", "maroon")
.attr("d", poly.radius(poly.sideLength() / 2).path());
return svg.node()
}
arcAngleMethod = {
const svg = d3.create("svg").attr("width", 100).attr("height", 100);
const poly = regularPolygon.regularPolygon()
.center(50,50).radius(45).edges(7);
svg.append("path").attr("class", "polygon")
.attr("d", poly.path());
svg.append("path").attr("fill", "maroon")
.attr("d", poly.radius(poly.apothem()).rotation(poly.arcAngle(1) / 2).path());
return svg.node()
}
perimterMethod = {
const svg = d3.create("svg").attr("width", width)
.attr("height", 100);
let poly = regularPolygon.regularPolygon()
.center(50,50).radius(45).edges(5);
poly = poly.rotation((Math.PI / 2) - poly.arcAngle(1));
svg.append("path").attr("class", "polygon")
.attr("d", poly.path());
svg.append("path")
.attr("class", "polygon")
.attr("d", () => {
const start = poly.coords()[0];
const end = poly.coords()[4];
return `M ${start[0]} ${start[1]} L ${start[0] + poly.perimeter()} ${start[1]} L ${end[0]} ${end[1]}`;
});
return svg.node();
}
drawPolygonPath = (selection, xScale, yScale) => {
let polyPath = `M ${xScale(3)} ${yScale(0)}`;
const basePoly = regularPolygon.regularPolygon()
.radius(2);
const circleArea = Math.PI * 4;
for (var i=3; i < 50; i++) {
const polyArea = basePoly.edges(i).area();
const pctArea = (polyArea / circleArea) * 100.;
polyPath += `L ${xScale(i)} ${yScale(pctArea)} L ${xScale(i+1)} ${yScale(pctArea)}`;
}
polyPath += `L ${xScale(50)} ${yScale(0)} L ${xScale(3)} ${yScale(0)}`;
selection.append("path")
.attr("class", "polygon")
.attr("d", polyPath);
}
d3 = require("d3@v5")
regularPolygon = require("d3-regular-polygon@0.0.4");
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.
