Published
Edited
May 1, 2020
md`# IPs on a Map`
chart = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
svg.append("rect").attr("width", width).attr("height", height).attr("fill", "#111");
svg
.append("path")
.attr("d", geoPath(d3.geoGraticule10()))
.attr("stroke", "#333")
.attr("fill", "none");
svg.append("path").attr("d", countriesPath).attr("stroke", "#555").attr("fill", "#333");
parsedData.forEach((d) => {
const [cx, cy] = projection([d.RemoteLongitude, d.RemoteLatitude]);
const g = svg.append("g").attr("transform", `translate(${cx},${cy})`);
g.append("circle")
.attr("cx", 0).attr("cy", 0)
.attr("r", 4)
.attr("fill-opacity", 0.5)
.attr("fill", "royalblue")
.append("title").text(d.DnsName || d.DestinationIp);
});
const [cx, cy] = projectedPosition;
svg.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 8).attr("fill-opacity", 0.4).attr("fill", "limegreen");
svg.append("circle").attr("cx", cx).attr("cy", cy).attr("r", 4).attr("fill", "limegreen");
return svg.node();
}
html`<style>
text {
text-align: center;
text-anchor: middle;
alignment-baseline: central;
fill: white;
font-size: 6pt;
}
</style>`
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.
