Public
Edited
May 16, 2024
function makeHexagon(x,y,r){
const PI = 3.141592653589793116;
const edges = [1, 3, 5, 7, 9, 11];
var points = [];
var outString = "";
for(let k = 0; k < 6; k++){
let v = edges[k];
let w = v + 2;
let px = x + r*Math.cos(v/6 * PI);
let py = y + r*Math.sin(v/6 * PI);
points.push({x: px, y: py});
outString = outString + px + "," + py + " ";
}
return(outString);
}
makeHexagon(0,0,1)
viewof hscale = Inputs.range([1, 1.2], {label: "Amount", step: .01})
testHexPath = {
const svg = d3.select(DOM.svg(800,800));
const size = 200;
const hexRadius = size;
const g = svg.append("g").attr("transform", `translate(${hexRadius},${hexRadius})`)
g.append("g")
.selectAll("polygon")
.data(hex_data_plot)
.join("polygon")
.attr("stroke",d => "red")
.attr("points", d => makeHexagon(100,400,hexRadius*hscale))
.style("fill", "transparent");
g.append("g")
.selectAll("polygon")
.data(hex_data_plot)
.join("polygon")
.attr("stroke",d => "red")
.attr("points", d => makeHexagon(100+SQRT3*size,400,hexRadius*hscale))
.style("fill", "transparent");
g.append("g")
.selectAll("polygon")
.data(hex_data_plot)
.join("polygon")
.attr("stroke",d => "red")
.attr("points", d => makeHexagon(100+(SQRT3*size/2),400-(3/2*size),hexRadius*hscale))
.style("fill", "transparent");
return svg.node()
}
hexbin = d3.hexbin()
.radius(hexRadius)
.x(d => d.x)
.y(d => d.y)
hex_data_plot[0].j
initialWidth = 900;
initialHeight = 900;
mapColumns = new Set(hex_data_plot.map(d => d.j)).size;
mapRows = new Set(hex_data_plot.map(d => d.i)).size;
width = Math.ceil(mapColumns * hexRadius * SQRT3 + hexRadius)
height = Math.ceil(mapRows * 1.5 * hexRadius + 0.5 * hexRadius)
hexRadius = Math.floor(
d3.min([initialWidth/((mapColumns + 0.5) * SQRT3), initialHeight/((mapRows + 1/3) * 1.5)])
);
points = {
let points = [];
let n = hex_data_plot.length;
for(var k = 0; k < n; k++){
var j = hex_data_plot[k].j;
var i = hex_data_plot[k].i;
var x = hexRadius * j * SQRT3;
if(i%2 === 1) x += (hexRadius * SQRT3)/2;
var y = height - hexRadius * i * 1.5;
points.push({x: x, y: y, i: i, j: j, k: k});
}
return points;
}
SQRT3 = Math.sqrt(3)
SQRT5 = Math.sqrt(5)
PI = 3.141592654
hexagon = (scale) => {
const hexaline = d3.line()(corners(scale))+"Z";
return hexaline
}
corners = (r) => {
const mag = Math.sqrt(r*r + (r/2)^(r/2))
//console.log(mag)
let v = new Vector(0,r)
//v = v.rotate(Math.PI / 2)
let resp = []
for(let i = 0; i < 6; i++){
//console.log(resp)
resp.push([v.x,v.y])
v = v.rotate(Math.PI * 2 / 6)
}
return resp
}
tmp = new Set(hex_data_plot.map(d => d.y))
import {Vector} from "@nestorandrespe/simple-vector-class"
Plot.plot({
width: 900,
height: 900,
margin: theRadius,
inset: theRadius,
//color: {
// scheme: "BuPu",
// range: [0, 0.8],
//},
x: {
label: null,
grid: false,
ticks: 0,
tickSize: 0
},
y: {
label: null,
grid: false,
ticks: 0,
tickSize: 0
},
marks: [
//Plot.hexgrid(),
Plot.hexagon(
hex_data_plot,
{
//binWidth: 2,
x: "x",
y: "y",
fill: (d) => colScale(d.p),
r: theRadius*1.8,
stroke: "transparent",
strokeWidth: 0
}
),
Plot.text(
hex_data_plot,
{
x: "x",
y: "y",
text: (d) => d3.format("d")(d.postcode),
fill: (d) => d.p > 0.35 ? "white" : "black",
//font: "Arial 8px",
fontSize: 8,
align: "center",
baseline: "middle"
}
)
]
})
theRadius = getRadius(hex_data_plot)
import {Legend, Swatches} from "@d3/color-legend"
d3 = require("d3@7", "d3-hexbin@0.2")
function getRadius(d){
const initialWidth = 900
const initialHeight = 900
const mapColumns = new Set(hex_data_plot.map(d => d.j)).size;
const mapRows = new Set(hex_data_plot.map(d => d.i)).size;
var hexRadius = Math.floor(
d3.min(
[
initialWidth/((mapColumns + 1.5) * SQRT3),
initialHeight/((mapRows + 1/3) * 1.5)
]
)
)
/* hexRadius = Math.floor(
d3.min(
[
initialWidth/((mapColumns/2)*(2*SQRT3)),
initialHeight/((mapRows/2)*(1.75*SQRT3))
]
)
);
*/
return hexRadius;
}
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.
