D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
enjalot
Full window
Github gist
circle to hexagon
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style> </head> <body> <script> var width = 960; var height = 500; var svg = d3.select("body").append("svg") .attr("width", 960) .attr("height", 500) var n = 100; var data = d3.range(n).map(function(d) { return { angle: d/n * 360, index: d, radius: 200 } }) var color = d3.scaleLinear() .domain([0, n]) .range(["red", "blue"]) .interpolate(d3.interpolateLab) function project(x, y) { var angle = (x) / 180 * Math.PI, radius = y; return [radius * Math.cos(angle) + width/2, radius * Math.sin(angle) + height/2]; } function radians(deg) { return deg / 180 * Math.PI; } function hexProject(x, y) { var radius = y; var angle = radians(x); var startAngle = Math.floor(x / 60) * 60; var endAngle = startAngle + 60; var startX = radius * Math.cos(radians(startAngle)); var startY = radius * Math.sin(radians(startAngle)); var endX = radius * Math.cos(radians(endAngle)); var endY = radius * Math.sin(radians(endAngle)); var centerX = 0; var centerY = 0; var posX = radius * Math.cos(angle); var posY = radius * Math.sin(angle); var intersection = line_intersects(startX, startY, endX, endY, centerX, centerY, posX, posY) var t = intersection[0]; var hX = posX * t; var hY = posY * t; return [ hX + width/2, hY + height/2 ] } svg.selectAll("circle.circle") .data(data) .enter().append("circle").classed("circle", true) .attr("cx", function(d) { return project(d.angle, d.radius)[0]}) .attr("cy", function(d) { return project(d.angle, d.radius)[1]}) .attr("r", 5) .attr("stroke", function(d) { return color(d.index)}) .attr("fill", "none") svg.selectAll("circle.hex") .data(data) .enter().append("circle").classed("circle", true) .attr("cx", function(d) { return hexProject(d.angle, d.radius)[0]}) .attr("cy", function(d) { return hexProject(d.angle, d.radius)[1]}) .attr("r", 3) .attr("fill", function(d) { return color(d.index)}) function line_intersects(p0_x, p0_y, p1_x, p1_y, p2_x, p2_y, p3_x, p3_y) { //https://gist.github.com/Joncom/e8e8d18ebe7fe55c3894 var s1_x, s1_y, s2_x, s2_y; s1_x = p1_x - p0_x; s1_y = p1_y - p0_y; s2_x = p3_x - p2_x; s2_y = p3_y - p2_y; var s, t; s = (-s1_y * (p0_x - p2_x) + s1_x * (p0_y - p2_y)) / (-s2_x * s1_y + s1_x * s2_y); t = ( s2_x * (p0_y - p2_y) - s2_y * (p0_x - p2_x)) / (-s2_x * s1_y + s1_x * s2_y); if (s >= 0 && s <= 1 && t >= 0 && t <= 1) { // Collision detected return [s,t]; } return []; // No collision } </script> </body>
https://d3js.org/d3.v4.min.js