News and graphics at @ClimateLab, a project of @PostGraphics.
path = shape2path.polygon()
.attr("points", d => d);
array = [[40, 0], [80, 20], [80, 60], [40, 80], [0, 60], [0, 20]]
string = array.join(",")
{
const svg = d3.select(DOM.svg(width, height));
// Works with an array...
svg.append("path")
.datum(array)
.attr("transform", `translate(${width / 2 - 100}, ${height / 2 - 40})`)
.attr("d", path)
.style("fill", "none")
.style("stroke", "black");
// ...or with a string.
svg.append("path")
.datum(string)
.attr("transform", `translate(${width / 2}, ${height / 2 - 40})`)
.attr("d", path)
.style("fill", "none")
.style("stroke", "black");
return svg.node();
}
geometric = require("geometric@2")
// Array of regular polygon points
regular = geometric.polygonRegular(vertices, area, [ width / 2, height / 2])
// Remember that it accepts both arrays and strings
smallerString = geometric.polygonScale(regular, 0.5).join(",")
{
const svg = d3.select(DOM.svg(width, height)).style("overflow", "visible")
svg.append("path")
.datum(regular)
.attr("d", path)
.style("fill", "none")
.style("stroke", "black");
svg.append("path")
.datum(smallerString)
.attr("d", path)
.style("fill", "tomato")
.style("stroke", "maroon");
return svg.node();
}
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.
