Published
Edited
Dec 21, 2021
Pentagon plot
plot = {
// add extra point to close loop
let pentaData = data;
pentaData.push(data[0]);
const margin = {top: 50, right: 50, bottom: 50, left: 50},
width = 300,
height = 300;
const y = d3.scaleLinear()
.range([ margin.top + height, margin.top ])
.domain([d3.min(data, d=>d[1]), d3.max(data, d=>d[1])]);
const x = d3.scaleLinear()
.range([ margin.left, margin.left + width ])
.domain([d3.min(data, d=>d[0]), d3.max(data, d=>d[0])]);
const line = d3.line()
.x(d => x(d[0]))
.y(d => y(d[1]));
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("stroke-linecap", "round")
.attr("stroke-linejoin", "round");
svg.append("g")
.selectAll("penta")
.data([pentaData])
.enter()
.append("path")
.attr("d", d => line(d))
.attr("stroke", "#dddddd")
.attr("fill", "none")
.attr("stroke-width", 1);
svg.append("g")
.selectAll("diag")
.data(diag)
.enter()
.append("path")
.attr("d", d => line(d))
.attr("stroke", "#dddddd")
.attr("fill", "none")
.attr("stroke-dasharray", 5)
.attr("stroke-width", 1);
svg.append('g')
.selectAll("dot1")
.data(data)
.enter()
.append("circle")
.attr("cx", function (d) { return x(d[0]); } )
.attr("cy", function (d) { return y(d[1]); } )
.attr("r", 1);
// svg.append('g')
// .selectAll("dot2")
// .data(opp)
// .enter()
// .append("circle")
// .attr("cx", function (d) { return x(d[0]); } )
// .attr("cy", function (d) { return y(d[1]); } )
// .attr("r", 1)
// .style("fill", "red");
return svg.node();
}
line = d3.line()
.x(d => x(d[0]))
.y(d => y(d[1]));
data.map(d => [x(d[0]), y(d[1])]);
data.map(d => x(d[0]));
x = d3.scaleLinear()
.range([ 0, 100 ])
.domain([d3.min(data, d=>d[0]), d3.max(data, d=>d[0])]);
y = d3.scaleLinear()
.range([ 0, 100 ])
.domain([d3.min(data, d=>d[1]), d3.max(data, d=>d[1])]);
d3.max(data, d => d[1])
opp = opposites(100);
data = createPentagon(100);
diag = diagonals(100);
function diagonals(radius=1) {
let height = 1.809 * radius;
let points = Array([]);
let opposites = Array([]);
let diag = Array([]);
let angle = Math.PI/2;
let angle2 = angle + Math.PI;
for(let i=0; i<5; i++) {
angle += (2*Math.PI) / 5;
angle2 = angle + Math.PI;
points[i] = [radius * Math.cos(angle), radius * Math.sin(angle)];
opposites[i] = [points[i][0] + (height * Math.cos(angle2)), points[i][1] + (height * Math.sin(angle2))];
diag[i] = [points[i], opposites[i]];
}
return diag;
}
function opposites(radius=1) {
let height = 1.809 * radius;
let points = Array([]);
let opposites = Array([]);
let angle = Math.PI/2;
let angle2 = angle + Math.PI;
for(let i=0; i<5; i++) {
angle += (2*Math.PI) / 5;
angle2 = angle + Math.PI;
points[i] = [radius * Math.cos(angle), radius * Math.sin(angle)];
opposites[i] = [points[i][0] + (height * Math.cos(angle2)), points[i][1] + (height * Math.sin(angle2))];
}
return opposites;
}
function createPentagon(radius=1) {
let points = Array([]);
let angle = Math.PI/2;
for(let i=0; i<5; i++) {
angle += (2*Math.PI) / 5;
points[i] = [radius * Math.cos(angle), radius * Math.sin(angle)];
}
return points;
}
(2*Math.PI)/5;
var p[5];
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.
