viewof boxWidth = Inputs.range([0, 1], {label: "Box width"})
<svg width=${width} height=${height}>
<rect width=${width} height=${height} fill="hsl(216deg 20% 90%)"/>
<rect width=${boxWidth * width} height=${height} fill="hsl(216deg 100% 13%)"/>
</svg>
import { bs19cell, bslocations } from "@wiless/itu-r-m-2101"
bslocations=
{
var points = d3.map(bs19cell, (loc) => [xscale(loc.X), yscale(loc.Y)]);
var hull = d3.polygonHull(points);
var line = d3.line().curve(d3.curveLinearClosed);
var svg = d3.create("svg").attr("width", 500).attr("height", 500);
var selection = svg.append("g").attr("fill", "grey").attr("stroke", "green");
// var selection = d3
// .select("#demo5")
// .attr("stroke", "white")
// .attr("fill", "green");
selection
.append("polyline")
.attr("points", ...hull)
.attr("stroke", "white");
selection
.append("text")
.attr("x", xscale(100))
.attr("y", yscale(100))
.attr("stroke", "")
.attr("fill", "green")
.attr("stroke-width", 1)
// .attr("fill", "green")
.text("Area: sq pixels");
bslocations.forEach((d) =>
selection
.append("circle")
.attr("cx", xscale(d.X))
.attr("cy", yscale(d.Y))
.attr("stroke", "red")
.attr("r", 2)
);
selection
.append("polygon")
.attr("points", hull)
.attr("stroke", "red")
.attr("fill", "grey")
.attr("opacity", 0.2);
selection
.append("text")
.text("Hello sendil")
.attr("x", xscale(0))
.attr("y", yscale(0))
.attr("fill", "blue")
.attr("stroke", "green");
// selection.append("path").attr("d", line(hull)).attr("stroke", "red");
return svg.node();
}
xscale = d3
.scaleLinear()
.domain(d3.extent(bs19cell, (d) => d.X))
.range([0, 500])
yscale = d3
.scaleLinear()
.domain(d3.extent(bs19cell, (d) => d.X))
.range([0, 500])
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.
