25:["$","title",null,{"children":"Boston Music Scene Visualization | enrico-mi-workspace | Observable"}] 49:T8a4,## 1. Visualization goal The goal of the visualization is to provide the user with ready-to-use information about what genres of music are played where in the Boston metropolitan area. To make it easy-to-read we want to represent the data in two visualizations: a map to show where the venue is, and a radar plot to illustrate the share of each music genre at each venue. We will then need the coordinates of each venue and of the city it is in, and what concerts are hosted at each venue. #### Graphical needs Here's the list of features and characteristics that I'd like my viz to have: - Map with colored areas by municipality, with three colors: - gray for municipalities with no events - blue for municipalities with events - orange for the selected municipality - Map with colored markers for each venue (with blue and orange scheme as above, no gray needed) - Radar plot with as many dimensions as music genres, with following functionalities: - when a city (venue) is selected, it represents the city (venue)'s number of concerts per music genre - when a city (venue) is selected, it includes information on the distribution of genres of the overall Boston area - it displays a text indicating the genres that are played more at this venue, compared to the area's average #### Personal goals This project is my excuse to practice the following: - using D3.js to make an interactive georeferenced visualization - fetching and manipulating data from Ticketmaster API (not shown in this notebook) - using Observable ## 2. Data The data we need consists of information on genres of music played at each venue, and the location of each venue and the boundaries of each city. First we load the `.csv` file containing the concerts data. The file contains the number of concerts by genre per each venue in the Boston metropolitan area, plus some additional info for each venue (location, city, ZIP code, id in Ticketmaster database). The data has been pulled from Ticketmaster and it includes concerts happening in the next 12 months. It has already been cleaned for duplicates, etc. It has the obvious limitation that if a concert is not on Ticketmaster, it is not included in my dataset.4a:T45e,{ // Create SVG let svg = d3.select(DOM.svg(width, height)); // Append empty placeholder to the SVG // geomInfo will contain geometry elements let geomInfo = svg.append( "g" ); let concerts = svg.append( "g" ); function zoomed() { let t = d3 .event .transform ; geomInfo.attr( "transform","translate(" + [t.x, t.y] + ")scale(" + t.k + ")" ); } // Select non-existent elements, bind the data, append the elements, and apply attributes geomInfo.selectAll( "path" ) .data( greaterBostonBoundaries.features ) .enter() .append( "path" ) .attr( "fill", "#ccc" ) .attr( "stroke", "#0000ff") .attr( "d", bostonGeoPath ); concerts.selectAll( "circle" ) .data( concertsData ) .enter() .append( "circle" ) .attr("cx", function(d) { return bostonProjection([d.lon, d.lat])[0]; }) .attr("cy", function(d) { return bostonProjection([d.lon, d.lat])[1]; }) .attr("r", function(d) { return d.EventsNb/8; }) .attr( "fill", "#900" ) .attr( "stroke", "#999" ) .attr( "d", bostonGeoPath ); return svg.node(); }4b:T4cd,{ // Create SVG let svg = d3.select(DOM.svg(width, height)) // Append empty placeholder to the SVG // geomInfo will contain geometry elements let geomInfo = svg.append( "g" ); let concerts = svg.append( "g" ); // Applying zoom to all "g" elements function zoomed(event) { const {transform} = event; geomInfo.attr("transform", transform); concerts.attr("transform", transform); } // Defining zoom function var zoom = d3.zoom() .on("zoom", zoomed) ; svg.call(zoom); // Select non-existent elements, bind the data, append the elements, and apply attributes geomInfo.selectAll( "path" ) .data( greaterBostonBoundaries.features ) .enter() .append( "path" ) .attr( "fill", "#ccc" ) .attr( "stroke", "#0000ff") .attr( "d", bostonGeoPath ); concerts.selectAll( "circle" ) .data( concertsData ) .enter() .append( "circle" ) .attr("cx", function(d) { return bostonProjection([d.lon, d.lat])[0]; }) .attr("cy", function(d) { return bostonProjection([d.lon, d.lat])[1]; }) .attr("r", function(d) { return d.EventsNb/8; }) .attr( "fill", "#900" ) .attr( "stroke", "#999" ) .attr( "d", bostonGeoPath ); return svg.node(); }4c:T9ff,bostonMusicViz = { // Create SVG let container = d3.select(DOM.svg(width, height)) // importing google fonts container.append('defs') .append('style') .attr('type', 'text/css') .text("@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');"); // Append empty placeholders to the SVG // geomInfo will contain geometry elements const geomInfo = container.append( "g" ); const concerts = container.append( "g" ); // Applying zoom to all "g" elements function zoomed(event) { const {transform} = event; geomInfo.attr("transform", transform); concerts.attr("transform", transform); // Calculate the scale factor const scaleFactor = transform.k; // Scale the radius of the circles concerts.selectAll("circle") .attr("r", function(d) { return Math.max( (d.EventsNb / (8 * scaleFactor)), (5./scaleFactor)); }); geomInfo.selectAll( "path" ) .style("stroke-width", (1.5/scaleFactor)+"px"); } // Defining zoom function var zoom = d3.zoom() .on("zoom", zoomed) ; container.call(zoom); // Note: important to append the tooltip after geomInfo and concerts so that they are on the front of the viz const tooltipObj = container.append("foreignObject") .attr("width", 1000) // careful because this "covers" the map and mouse-events are not triggered within the foreignObject space .attr("height", 1000) .attr("class", "svg-tooltip") .style("display", "none") .style("background", "#fffff3") .style('font-family', '"Josefin Sans", sans-serif'); const tooltipDiv = tooltipObj.append("xhtml:div") .append("div") .attr("class", "tooltip") .style('font-family', '"Josefin Sans", sans-serif'); // Select non-existent elements, bind the data, append the elements, and apply attributes geomInfo.selectAll( "path" ) .data( greaterBostonBoundaries.features ) .enter() .append( "path" ) .attr( "fill", "#fff8c7" ) .attr( "stroke", "#a39a5d") .style("stroke-width", "1.5px") .attr( "d", bostonGeoPath ); concerts.selectAll( "circle" ) .data( concertsData ) .enter() .append( "circle" ) .attr("cx", function(d) { return bostonProjection([d.lon, d.lat])[0]; }) .attr("cy", function(d) { return bostonProjection([d.lon, d.lat])[1]; }) .attr("r", function(d) { return Math.max( (d.EventsNb / 8), 5.); }) .attr( "fill", "#1e81b0" ) .attr( "d", bostonGeoPath ) .call(tooltip, tooltipDiv, tooltipObj); ; return container.node(); }4d:T627,tooltip = (selectionGroup, tooltipDiv, tooltipObj) => { // Add event listeners to each selected group (e.g. concerts, geomInfo) selectionGroup.each(function () { d3.select(this) .on("mouseover.tooltip", handleMouseover) .on("mousemove.tooltip", handleMousemove) .on("mouseleave.tooltip", handleMouseleave); }); function handleMouseover() { // passing only the data for the venue the mouse is over setContents(d3.select(this).data(), tooltipObj, tooltipDiv); setStyle(d3.select(this)); // show/reveal the tooltip, set its contents, // style the element being hovered on showTooltip(); } 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(); resetContent(tooltipObj, tooltipDiv) resetStyle(d3.select(this)); } function showTooltip() { tooltipDiv.style("display", "block"); tooltipObj.style("display", "block"); } function hideTooltip() { tooltipDiv.style("display", "none"); tooltipObj.style("display", "none"); } function setPosition(mouseX, mouseY) { tooltipObj .attr("x", mouseX) .attr( "y", mouseY < height / 2 ? `${mouseY + MOUSE_POS_OFFSET}px` : "initial" ) } }4e:T887,function setContents(data, tooltipObj, tooltipDiv) { const nbGenres = 13; const genres = Object.keys(data).slice(4,4+nbGenres); const concerts = Object.values(data).slice(4,4+nbGenres); var maxNbConcerts = 0; for (let j = 0; j < nbGenres; j++) { if (concerts[j+4] > maxNbConcerts) { maxNbConcerts = concerts[j+4]; } } // Create a path element and set its d attribute const tooltipSvgWidth = 500; const tooltipSvgHeight = 500; const arcData = createArcs(data); const tooltipObjSVG = tooltipObj.append("svg") .attr("width", tooltipSvgWidth) .attr("height", tooltipSvgHeight); const arcsGroup = tooltipObjSVG.append("g") .attr("transform", `translate(170, 200)`); arcsGroup .selectAll("path") .data(arcData) .enter() // need this to access the "drawing" with the data .append("path") // need to append the svg first .attr("fill", "#1e81b0") .attr("d", function(d) { if (d.outerRadius - d.innerRadius < 0.1) { return null; } return d3.arc() .innerRadius(d.innerRadius) .outerRadius(d.outerRadius) .startAngle(d.startAngle) .endAngle(d.endAngle) (); }); arcsGroup .selectAll("g") .data(arcData) .enter() .append("g") .attr("text-anchor", function(d) { return ( (d.startAngle + d.endAngle)/2 + Math.PI) % (2 * Math.PI) < Math.PI ? "end" : "start"; }) .attr("transform", function(d) { return "rotate(" + (((d.startAngle + d.endAngle)/2) * 180 / Math.PI - 90) + ")"+"translate(" + (d.outerRadius+10) + ",0)"; }) .append("text") .text(function(d){ return(d.label) }) .attr("transform", function(d) { return ( (d.startAngle + d.endAngle)/2 + Math.PI) % (2 * Math.PI) < Math.PI ? "rotate(180)" : "rotate(0)"; }) .style("font-size", "11px") .attr("alignment-baseline", "middle"); tooltipDiv .data(data) .html( function(data) { return `${data.name}` }) }4f:T620, // defining arcs function createArcs(d) { const dataArray = Object.values(d[0]); const dataKeys = Object.keys(d[0]); const pi=Math.PI; const nbGenres = 13; // hardcoded it's fine, it won't change const thetaRef = 2*pi/nbGenres; const innerRadii = []; const outerRadii = []; const startAngles = []; const endAngles = []; const labels = []; let maxRadius = 0; for (let j = 0; j < nbGenres; j++) { let innerRadius = 5; let outerRadius = dataArray[j+4]; let startAngle = j*(2*pi)/nbGenres; let endAngle = (j+1)*(2*pi)/nbGenres; let label = dataKeys[j+4]; if (outerRadius < innerRadius) { outerRadius = innerRadius; } innerRadii.push(innerRadius); outerRadii.push(outerRadius); startAngles.push(startAngle); endAngles.push(endAngle); labels.push(label); if (outerRadius>maxRadius){ maxRadius = outerRadius; } } // scaling all; const maxRadiusFactor = 120/maxRadius; // translating away (x,y)=(0,0) is top left corner of local tooltip canva for (let j = 0; j < outerRadii.length; j++) { if (outerRadii[j] > innerRadii[j]){ outerRadii[j] *= maxRadiusFactor; } } // Combine data into an array of objects const arcs = []; for (let i = 0; i < nbGenres; i++) { arcs.push({ innerRadius: innerRadii[i], outerRadius: outerRadii[i], startAngle: startAngles[i], endAngle: endAngles[i], label: labels[i] }); } return arcs }50:[{"id":"070421f89fe5f1790e5a150c6c7922f6c97ceba93a23019a0e4ab984ffe5e77aa7b0a070921add1579f66bb8897e07e1981f99dddf96cb88b523429afed37364","href":"https://static.observableusercontent.com/files/070421f89fe5f1790e5a150c6c7922f6c97ceba93a23019a0e4ab984ffe5e77aa7b0a070921add1579f66bb8897e07e1981f99dddf96cb88b523429afed37364","name":"concertsBoston@1.csv","type":"text/csv","lastModified":1709522433970.446,"size":3573},{"id":"63c1f718cd0984245e3811891cba3bae838e05c06a926b2ccaff9df0fef114714d915888c92c2eaebd87cc509f7f50443e83460586082c9cfb027f70e17197f3","href":"https://static.observableusercontent.com/files/63c1f718cd0984245e3811891cba3bae838e05c06a926b2ccaff9df0fef114714d915888c92c2eaebd87cc509f7f50443e83460586082c9cfb027f70e17197f3","name":"greaterBostonBoundaries.json","type":"application/json","lastModified":1709522433970.446,"size":8276059}] 29:{"id":"0662d7c2f76df07a","slug":null,"title":"Boston Music Scene Visualization","thumbnail":"f1bae5557de2c9951b9a282fd05600e0f2b38cdd48c2d69f0cfa74fb81595c2a","access_level":"public","create_time":"$D2024-03-04T03:20:33.970Z","update_time":"$D2024-03-04T13:35:44.517Z","view_time":null,"first_public_time":"$D2024-03-04T03:20:33.970Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"913bc722447eb970","login":"enrico-mi-workspace","name":"enrico-mi-workspace","avatar_url":"https://avatars-next.observableusercontent.com/9898578e127a6f6b48d49e132ece075b240fd087fca8a0a7a40964c0297cd6a9","tier":"starter_2024","bio":"","following":false},"version":786,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"07ff4b0cffe7dbed","login":"enrico-mi","name":"Enrico","avatar_url":"https://avatars-next.observableusercontent.com/9b4ce9524524ac0bf92c311f5c6c16a171b0c299107d683e43059c7d083c3a1b","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"07ff4b0cffe7dbed","login":"enrico-mi","name":"Enrico","avatar_url":"https://avatars-next.observableusercontent.com/9b4ce9524524ac0bf92c311f5c6c16a171b0c299107d683e43059c7d083c3a1b","tier":null,"role":"editor"},{"type":"team","id":"913bc722447eb970","login":"enrico-mi-workspace","name":"enrico-mi-workspace","avatar_url":"https://avatars-next.observableusercontent.com/9898578e127a6f6b48d49e132ece075b240fd087fca8a0a7a40964c0297cd6a9","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Boston Music Scene Visualization","cells":[{"id":9,"value":"# Boston Music Scene Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"The goal of this project is to practice fetching data through an API, and manipulate them to then build a georeferenced visualization with D3.js in observable. This is the observable notebook. The other steps have been previously performed with a separate code.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"concertsboston = await FileAttachment(\"concertsBoston@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"concertsboston","database":"$undefined"},{"id":93,"value":"concertsData = d3.csvParse(\n await FileAttachment(\"concertsBoston@1.csv\").text(), // making sure the file is loaded\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"We then load the geojson with the boundaries of the 101 municipalities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"greaterBostonBoundaries = FileAttachment(\"greaterBostonBoundaries.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"## 3. Map setup\n\nBefore rendering any map, we need a canvas to host it, and to define some map properties (e.g. projection type). This happens \"behind the scenes\". We'll then draw the municipalities areas and venues markers (no non-geographical data is used at this point).\n\nNote: I have used [this](https://observablehq.com/@jk979/week-11-intro-to-d3-js-mapping-data-with-d3) notebook as reference for the mapping part.\n#### Canvas generation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"width = 800 ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"height = width;//*(9/16)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"{\n// Create SVG\nlet svg = d3.select( \"body\" )\n .append( \"svg\" )\n .attr( \"width\", width )\n .attr( \"height\", height );\n\n// Append empty placeholder to the SVG\n// geomInfo will contain geometry elements\nlet geomInfo = svg.append( \"g\" );\n \nreturn svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"#### Map projection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"bostonProjection = d3.geoEquirectangular()\n .scale( 40000 ) // 1 is least zoom; fiddle around until you like what you see\n .rotate( [71.057,0] ) //longitude\n .center( [0, 42.313] ) //latitude\n .translate( [width/2,height/2] );","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"#### Path generator\nThis bridges geographical coordinates to screen coordinates, within D3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"bostonGeoPath = d3.geoPath()\n .projection( bostonProjection );","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"#### Drawing municipalities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"{\n// Create SVG\nlet svg = d3.select(DOM.svg(width, height));\n\n// Append empty placeholder to the SVG\n// geomInfo will contain geometry elements\nlet geomInfo = svg.append( \"g\" );\n \n// Select non-existent elements, bind the data, append the elements, and apply attributes\ngeomInfo.selectAll( \"path\" )\n .data( greaterBostonBoundaries.features )\n .enter()\n .append( \"path\" )\n .attr( \"fill\", \"#ccc\" )\n .attr( \"stroke\", \"#0000ff\")\n .attr( \"d\", bostonGeoPath );\n \nreturn svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"Now let's add a marker for each venue, with the marker size proportional to the number of events hosted at the venue","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"Now let's add zoom and pan functionalities to the map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"Next we want to display the information about each venue when hovering over it.\n\nThis is quite complex and a more detailed guide on how I achieved it will come soon. The principle is to add another svg and html elements that appear/disappear when hovering over a venue. My implementation is based on Chris Henrick's tooltip version that you can find [here](https://observablehq.com/@clhenrick/tooltip-d3-convention).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"concertsData.columns","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"Assigning unique identifier to `tooltip`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"tooltipId = DOM.uid().id","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"Setting `tollTipTemplate`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":340,"value":"tooltipTemplate = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"Defining the `tooltip` function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":375,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"function resetContent(tooltipObj, tooltipDiv){\n tooltipObj.selectAll(\"svg\").remove();\n\n tooltipDiv.selectAll(\"*\").remove();//(\"\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"function setStyle(selection) {\n selection.attr(\"fill\", \"magenta\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"function resetStyle(selection) {\n selection.attr(\"fill\", \"#1e81b0\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"tooltipStyles = htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"// padding between the tooltip and mouse cursor\nMOUSE_POS_OFFSET = 8","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":400,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 24:null