Published
Edited
Jan 31, 2022
1 fork
3 stars
Radar Plot
chart = {
const svg = d3.select(DOM.svg(width, height+(margin*2)));
const containerWidth = width-(margin*2);
const containerHeight = height-(margin*2);
const container = svg.append('g')
.attr("width", containerWidth)
.attr("height", containerHeight)
.attr('transform', `translate(${(width/2)+margin}, ${(height/2)+margin})`);
var axisGrid = container.append("g")
.attr("class", "axisWrapper");
axisGrid.selectAll(".levels")
.data(d3.range(1,(axisCircles+1)).reverse())
.enter()
.append("circle")
.attr("class", "gridCircle")
.attr("r", (d, i) => radius/axisCircles*d)
.style("fill", "#CDCDCD")
.style("stroke", "#CDCDCD")
.style("fill-opacity", 0.1);
const axis = axisGrid.selectAll(".axis")
.data(axesDomain)
.enter()
.append("g")
.attr("class", "axis");
axis.append("line")
.attr("x1", 0)
.attr("y1", 0)
.attr("x2", (d, i) => rScale(maxValue*1.1) * Math.cos(angleSlice*i - Math.PI/2))
.attr("y2", (d, i) => rScale(maxValue*1.1) * Math.sin(angleSlice*i - Math.PI/2))
.attr("class", "line")
.style("stroke", "white")
.style("stroke-width", "2px");
axis.append("text")
.attr("class", "legend")
.style("font-size", "11px")
.attr("text-anchor", "middle")
.attr("font-family", "monospace")
.attr("dy", "0.35em")
.attr("x", (d, i) => rScale(maxValue * axisLabelFactor) * Math.cos(angleSlice*i - Math.PI/2))
.attr("y", (d, i) => rScale(maxValue * axisLabelFactor) * Math.sin(angleSlice*i - Math.PI/2))
.text(d => d);
const plots = container.append('g')
.selectAll('g')
.data(formattedData)
.join('g')
.attr("data-name", (d, i) => type(i))
.attr("fill", "none")
.attr("stroke", "steelblue");
plots.append('path')
.attr("d", d => radarLine(d.map(v => v.value)))
.attr("fill", (d, i) => color(i))
.attr("fill-opacity", 0.1)
.attr("stroke", (d, i) => color(i))
.attr("stroke-width", 2);
plots.selectAll("circle")
.data(d => d)
.join("circle")
.attr("r", dotRadius)
.attr("cx", (d,i) => rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2))
.attr("cy", (d,i) => rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2))
.style("fill-opacity", 0.8);
return svg.node();
}
axesDomain = [
"AS_rank_source",
"AS_rank_iso",
"AS_rank_continent",
"AS_rank_numberAsns",
"AS_rank_numberPrefixes",
"AS_rank_numberAddresses",
"AS_hegemony",
"AS_rank_total",
"AS_rank_peer",
"AS_rank_customer",
"AS_rank_provider",
"peeringDB_ix_count",
"peeringDB_fac_count",
"peeringDB_policy_general",
"peeringDB_info_type",
"peeringDB_info_ratio",
"peeringDB_info_traffic",
"peeringDB_info_scope",
"is_personal_AS"
]
axesLength = 19
formatPercent = d3.format(',.0%')
wrapWidth = 60
axisLabelFactor = 1.12
axisCircles = 2
dotRadius = 4
radius = 270
margin = 30
height = 600
maxValue = 0.6
angleSlice = 0.33052631578
data = FileAttachment("Test_bias_values_for_radar@1.csv").csv({typed:true})
type = d => ["RIPE Atlas","RIPE RIS"][d]
ripeRisData = data.map((datum)=> {
return {axis: datum.tag, value: datum["RIPE RIS"]}
});
ripeAtlasData = data.map((datum)=> {
return {axis: datum.tag, value: datum["RIPE Atlas"]}
});
formattedData = [ripeAtlasData, ripeRisData]
radarLine = d3.lineRadial()
.curve(d3["curveLinear"])
.radius(d => rScale(d))
.angle((d, i) => i * angleSlice)
rScale = d3.scaleLinear()
.domain([0, maxValue])
.range([0, radius])
color = d3.scaleOrdinal()
.range(["#EDC951","#00A0B0"])
import {select} from "@jashkenas/inputs"
import {curveTypes} from "@palewire/d3-curves-inputs"
_ = require("underscore")
d3 = require("d3@5")
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.
