31:T5fa,graph = { const myData = [...data].map((d, i) => { // Here we are setting the initial d.x = (i%4 < 2 ? 0 : width) + Math.random(); d.y = ((i%4)%2 ? 0 : height) + Math.random(); return d; }); const container = d3.select( html`

${tooltipTemplate}

` ); const tooltipDiv = container.select(".tooltip"); const svg = container.append("svg").attr("viewBox", `0 0 ${width} ${height}`); // d3.select(DOM.svg(width, height)); // const radius = 5; const radius = (d) => d.count/30; const rBand = d3.scaleBand() .domain(genres) .range(networkSpread); const colorScale = d3.scaleOrdinal(genres).range(d3.schemeCategory10) //d3.scaleBand() //.domain(genres.sort(() => (Math.random() -1))); const force = d3.forceSimulation(myData) .force('many', d3.forceManyBody().strength(charge)) .force("charge", d3.forceCollide().radius(radius)) .force('r', d3.forceRadial(d => { return rBand(d.genre) }, width/2, height/2).strength(1)) console.log(tooltip); console.log(tooltipDiv); const node = svg.selectAll('.node') .data(myData) .enter().append('circle') .attr('class', 'node') .attr('r', radius) .attr('fill', d => colorScale(d.genre)) .call(tooltip, tooltipDiv); const tick = () => { node .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); } force.on('tick', tick); return container.node(); }32:T928,tooltip = (selectionGroup, tooltipDiv) => { // padding between the tooltip and mouse cursor const MOUSE_POS_OFFSET = 8; selectionGroup.each(function () { d3.select(this) .on("mouseover.tooltip", handleMouseover) .on("mousemove.tooltip", handleMousemove) .on("mouseleave.tooltip", handleMouseleave); }); function handleMouseover() { // show/reveal the tooltip, set its contents, // style the element being hovered on showTooltip(); setContents(d3.select(this).datum()); setStyle(d3.select(this)); } function handleMousemove(event) { // update the tooltip's position const [mouseX, mouseY] = d3.pointer(event, this); // add the left & top margin values to account for the SVG g element transform setPosition(mouseX + margin.left, mouseY + margin.top); } function handleMouseleave() { // do things like hide the tooltip // reset the style of the element being hovered on hideTooltip(); resetStyle(d3.select(this)); } function showTooltip() { tooltipDiv.style("display", "block"); } function hideTooltip() { tooltipDiv.style("display", "none"); } function setPosition(mouseX, mouseY) { tooltipDiv .style( "top", mouseY < height / 2 ? `${mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "right", mouseX > width / 2 ? `${width - mouseX + MOUSE_POS_OFFSET}px` : "initial" ) .style( "bottom", mouseY > height / 2 ? `${height - mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "left", mouseX < width / 2 ? `${mouseX + MOUSE_POS_OFFSET}px` : "initial" ); } function setContents(datum) { // customize this function to set the tooltip's contents however you see fit tooltipDiv .selectAll("p") .data(Object.entries(datum)) .join("p") .filter(([key, value]) => value !== null && value !== undefined) .html( ([key, value]) => { console.log(key, value); if (key === 'country' || key ==='genre'){ console.log('!!!'); return `${key}: ${ typeof value === "object" ? value.toLocaleString("en-US") : value }` } } ); } }33:[] 2f:{"title":"Discogs Radial II.2","cells":[{"id":0,"value":"md`# Discogs Radial II.2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"import {rangeSlider} from '@mootari/range-slider'","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"viewof networkSpread = rangeSlider({\n min: 1,\n max: 1000,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [50, 400],\n // Custom slider CSS, replaces all styles.\n // theme: themes[theme],\n // Overrides the range color. Support for range colors is up to the theme.\n title: 'Network circumference',\n description: 'Control minimum and maximum radius',\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"viewof charge = Inputs.range([-100, 10], { value: -30, step: 1, label: \"Charge strength\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"genres","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"tooltipId = DOM.uid().id","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"tooltipTemplate = html`

\n \n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"function resetStyle(selection) {\n console.log('___', Object.entries(selection.datum));\n selection.attr(\"fill\", \"#333\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"function setStyle(selection) {\n selection.attr(\"fill\", \"magenta\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"d3 = require(\"https://d3js.org/d3.v6.min.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {data, genres, height} from '@lsei/more-discogs-country-stuff'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}