31:T9da,{ test_count; 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(data) .join('g') .attr("data-name", (d, i) => device(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(); }32:[] 2f:{"title":"Web latency - Radar Chart","cells":[{"id":0,"value":"md`# Web latency - Radar Chart\n\nHow close is your browser to servers located in your region?\n\nClick the Start ▶︎ button below to find out!\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":340,"value":"viewof button = html`

${Object.assign(\n html`