25:["$","title",null,{"children":"Spotify 2000 - D3 glyph scatterplot and star chart | Mandy Keck | Observable"}] 49:T698,

${data[selectedGlyphIndex].title}

by ${data[selectedGlyphIndex].artist}

Genre group: ${data[selectedGlyphIndex].category}

Genre: ${data[selectedGlyphIndex].genre}

Year: ${data[selectedGlyphIndex].year}

${Object.keys(data[selectedGlyphIndex].attributes).map((attribute, i) => html`

mutable selectedAttribute = attribute } /> (${attribute.charAt(0)}) ${attribute} ${data[selectedGlyphIndex].attributes[attribute]}% ${data[selectedGlyphIndex].originalAttributes[attribute + 'Orig']} ${attributeUnits[attribute]}

`)}

4a:T744,radarChart = { const svg = d3.create("svg") .attr("width", radarChartWidth) .attr("height", radarChartHeight); // circular grid ticks.forEach(t => svg.append("circle") .attr("cx", radarChartOffsets.x) .attr("cy", radarChartOffsets.y) .attr("fill", "none") .attr("stroke", "gray") .attr("r", radialScale(t)) ); // circular grid labels ticks.forEach(t => svg.append("text") .attr("x", radarChartOffsets.x * 1.02) .attr("y", radarChartOffsets.y - radialScale(t)) .style("font-size", "10px") .style("font-family", "Roboto, Arial, sans-serif") .text(t.toString() + '%') ); for (var i = 0; i < features.length; i++) { let ft_name = features[i]; let angle = (Math.PI / 2) + (2 * Math.PI * i / features.length); let line_coordinate = angleToCoordinate(angle, 100, radarChartOffsets); let label_coordinate = angleToCoordinate(angle, 110, radarChartOffsets); //draw axis line svg.append("line") .attr("x1", radarChartOffsets.x) .attr("y1", radarChartOffsets.y) .attr("x2", line_coordinate.x) .attr("y2", line_coordinate.y) .attr("stroke","black"); //draw axis label svg.append("text") .attr("x", label_coordinate.x) .attr("y", label_coordinate.y) .style("font-size", "10px") .style("font-family", "Roboto, Arial, sans-serif") .text(ft_name.toUpperCase().charAt(0)); } let d = data[selectedGlyphIndex].attributes; let color_radar = color(data[selectedGlyphIndex].category); let coordinates = getPathCoordinates(d, radarChartOffsets); const t = svg.transition().duration(1000); //draw the path element svg.append("path") .data([coordinates]) .transition(t) .attr("d", line) .attr("fill", color_radar) .attr("stroke-opacity", 1) .attr("opacity", 0.5); return svg.node(); }4b:T9cf,chart2 = { let svg, t, x, y, yAxis; // used to store the glyphs indexes in the data array const index = d3.local(); const tooltip = makeToolTip(); // setup svg, scales, axes and grid svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); x = makeXScale(); y = makeYScale(mutable selectedAttribute); makeXAxis(svg, x); yAxis = makeYAxis(svg, y); makeGrid(svg, x, y); t = svg.transition().duration(500); let glyphs = svg.selectAll("path") .data(data, d => d.title) .join( enter => enter.append("path") .attr("transform", d =>`translate(${x(+d.year)},${y(+d.attributes[mutable selectedAttribute])})`) .attr("class", "glyph-small") .attr("fill", d => color(d.category)) .datum(d => getPathCoordinates(d.attributes, {x: 0, y: 0}, 0.25)) .attr("d", d => line(d) + 'Z') // Z ensures that the path will be closed .each(function(d, i) { index.set(this, i); // Store index in local variable. }) .on("click", function (event, d) { const previouslySelected = d3.select(".selected"); if(previouslySelected) previouslySelected.classed("selected", false); const selected = d3.select(this); if(selected) selected.classed("selected", true); mutable selectedGlyphIndex = index.get(this); }) .on("mouseover", function (event) { d3.selectAll(".glyph-small:not(.selected)").style("opacity", 0.4); const currentGlyph = d3.select(this); currentGlyph.style("opacity", "1"); tooltip.style("visibility", "visible"); tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px"); tooltip.text(currentGlyph.datum().title + ' - ' + currentGlyph.datum().artist); }) .on("mouseout", function (event) { d3.selectAll(".glyph-small").style("opacity", 1); tooltip.style("visibility", "hidden"); }), ); return Object.assign(svg.node(), { update(selectedAttr) { t = svg.transition().duration(500); y = makeYScale(selectedAttr); d3.select(".yaxis").remove(); yAxis = makeYAxis(svg, y); glyphs = glyphs.data(data) .call(glyphs => glyphs .transition(t) .attr("transform", d=>`translate(${x(+d.year)},${y(+d.attributes[selectedAttr])})`)); } }); }4c:Tf50,function fullscreen({ className = 'custom-fullscreen', style = null, breakLayoutAtCell = 2, hideAfter = 9999, hideBefore = 0, left = 66, right = 33, button } = {}) { //WORK INITIALLY FROM @mootari/fullscreen-layout-demo //THEN ADAPTED IN @severo/two-columns-layout-in-fullscreen-mode function hide({ hideAfter = Infinity, hideBefore = 0, reset = false } = {}) { let cells = document.getElementsByClassName('observablehq'); for (let i = 0; i < cells.length; i++) { if ((i < hideBefore || i > hideAfter) && !reset) cells[i].style.display = "none"; else cells[i].style.display = "block"; } // console.log("Hide", cells); return cells; } // Superfluous bling. const buttonStyle = style != null ? style : 'font-size:1rem;font-weight:bold;padding:8px;background:hsl(50,100%,90%);border:5px solid hsl(40,100%,50%); border-radius:4px;box-shadow:0 .5px 2px 1px rgba(0,0,0,.2);cursor: pointer'; button = button || html`