Public
Edited
Jul 10, 2024
Fork of Untitled
Importers
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof cellStroke = Inputs.color({label: "Cell color", value: "#1f303d"})
Insert cell
pointCount = 380
Insert cell
data
Insert cell
viz.update(backgroundColor, lineColor, cellColor, cellStroke)
Insert cell
Insert cell
height = 400
Insert cell
Insert cell
flubber = require("flubber@0.4")
Insert cell
import {ukPath} from "7ade30630079ae0f"
Insert cell
Insert cell
Insert cell
brownTroutCoE
Insert cell
brownTroutCoE = FileAttachment("brownTroutCoE.json").json()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// earcut = require("https://unpkg.com/earcut@2.1.1/dist/earcut.min.js")
Insert cell
Insert cell
triangulatedTrout.drawPoints
Insert cell
Insert cell
Insert cell
centroid = d3.polygonCentroid(adjustedFishPathCoords)
Insert cell
adjustedFishPathCoords
Insert cell
centeredAdjustedFishPathCoords = {
const canvasWidth = width;
const canvasHeight = height;

// Calculate the translation needed to center the polygon
const translateX = canvasWidth / 2 - centroid[0];
const translateY = canvasHeight / 2 - centroid[1];

// Translate all the coordinates by the calculated translation
const centeredAdjustedFishPathCoords = adjustedFishPathCoords.map(([x, y]) => [x + translateX, y + translateY]);

return centeredAdjustedFishPathCoords

}
Insert cell
strokeWidth = 1
Insert cell
buffer = 1 + strokeWidth
Insert cell
line = d3.radialLine().curve(d3.curveCatmullRomClosed)
Insert cell
triangulatedTrout["data"]
Insert cell
randomPoints = _(triangles).flatMap(({a, b, c, area}) => {
const points = Math.round(pointCount * area / totalArea);
return d3.range(points).map(() => {
// Generate a random point within the triangle and return it as an object
const point = random_point(a, b, c);
return { x: point[0], y: point[1] };
});
}).value();
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function polygon_to_triangles(polygon) {
// Actually perform the earcut work on a polygon.
const el_pos = []
const coords = polygon.flat(2)
const vertices = earcut(...Object.values(earcut.flatten(polygon)))
return { coords, vertices }
}
Insert cell
earcut = require("earcut@2")
Insert cell
function drawTriangles(triangleCoords, selector, className) {
selector.selectAll(`.${className}`)
.data(triangleCoords)
.join(enter => enter
.append('path')
.attr("class", className)
.attr("d", function(d){
var coords = [d[0], d[1], d[2]];
return d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveLinear)(coords);
})
.attr("stroke", "black")
.attr("fill", function(d, i) {
return i % 2 === 0 ? "yellow" : "lightblue"; // alternate fill colors
})
)
}
Insert cell
import {adjustedFishPath} from "7ade30630079ae0f"
Insert cell
import {projection} from "7ade30630079ae0f"
Insert cell
adjustedFishPathCoords = parsePathData(adjustedFishPath)
Insert cell
Insert cell
{
const width=1500, height=400;
const svg = d3.select(DOM.svg(width, height))

const initialPath = svg.append("path")
.attr("d", testPathAbs)
// .attr("transform", "translate(50, 50)")
.attr("stroke", "blue");

return svg.node()
}
Insert cell
Insert cell
geometric = require("geometric@2");
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