Public
Edited
Sep 21, 2023
grid([({x:20,y:5}), ({x:13,y:-14}), ({x:-13,y:-14})], 5, ({vectext: false}))
grid = (data, scale=5, options=({vectext: true})) => {
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("max-width", "100%")
.attr("height", "auto")
.attr("height", "intrinsic");
var xRange = margin.left + (height - margin.bottom)/2;
var yRange = margin.top + (height - margin.bottom - margin.top)/2;
// var gridData = ;
var yOffset = `translate(${xRange}, 0)`;
var xOffset = `translate(0, ${yRange})`;
var xyOffset = `translate(${xRange},${yRange})`;
var yAxis = svg.append("g").attr("transform", yOffset)
.call(d3.axisLeft(y).tickValues([]).tickSizeOuter(0));
var xAxis = svg.append("g").attr("transform", xOffset)
.call(d3.axisBottom(x).tickValues([]).tickSizeOuter(0));
svg.append("svg:defs").append("svg:marker")
.attr("id", "triangle")
.attr("refX", 10)
.attr("refY", 4)
.attr("markerWidth", 10)
.attr("markerHeight", 10)
.attr("markerUnits","userSpaceOnUse")
.attr("orient", "auto")
.append("path")
.attr("d", "M 0 0 L 0 8 L 10 4 L 0 0")
.style("fill", "black");
var vec = svg.append("g").attr("transform", xyOffset)
.selectAll("path").data(data).enter().append("path")
.attr("id", function(d, i) { return "r" + i; })
.attr("fill", "black")
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("d", function(d) { return pathString(0, 0, d.x*scale, d.y*scale) })
.attr("marker-end", "url(#triangle)");
// var gridLines = svg.append("g")
// .selectAll("path").data(gridData).enter().append("path")
// .attr("fill", "grey")
// .attr("stroke", "grey")
// .attr("stroke-width", 1)
// .attr("d", function(d) { return pathString(0, 0, d.x*scale, d.y*scale) })
if(options.vectext == true) {
var vecText = svg.append("g").attr("transform", xyOffset)
.selectAll("text").data(data).enter().append("text")
.attr("text-anchor", "middle")
.attr("dy", "1em")
.attr("font-size", "10")
.append("textPath")
.attr("xlink:href", function(d, i) { return "#r" + i; })
.attr("startOffset", "45%")
.text(function(d, i) { return "r" + i; });
}
return svg.node();
}
x = d3.scaleLinear()
.domain([-(height - margin.bottom)/2, (height - margin.bottom)/2])
.range([margin.left, margin.left + (height - margin.bottom)])
y = d3.scaleLinear()
.domain([-(height - margin.bottom)/2, (height - margin.bottom)/2])
.range([height - margin.bottom, margin.top])
distance = (loc_string0="17772W21312S", loc_string1="17771W21313S") => {
var loc0 = string2coords(loc_string0);
var loc1 = string2coords(loc_string1);
var rel = {x: loc1.x - loc0.x,
y: loc1.y - loc0.y}
var d = Math.sqrt(rel.x**2 + rel.y**2)
return({loc0, loc1, rel, d})
}
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.
