27:null 28:["$","title",null,{"children":"Connecting multiple visuals in one space | Eric Field | Observable"}] 2d:T5ef,# Connecting multiple visuals in one space ### through dynamics and data This notebook illustrates how to pass data between several different visuals on one canvas to link and connect their readings. Note that even though this example uses a geographic map, the concept illustrated here can be used by any visual order in D3. Since we can draw pretty much anything we want in D3, and we can layer things on top of one another, we can also connect different visual groups and visual approaches together all right in one drawing space. You might call this a "dashboard", though that would be far too nice to most dashboards (most dashboards are terrible collections of disconnected random plots). Here we seek to use visual structures to filter and expand on other visual structures, connecting them by passing data using dynamic mouse events. For a somewhat simple example here, the world map is a (simple) visual of its own, but orienting. Mouse-over countries, and it will reveal a new visual with sparkline detail over time. The sparkline is one visual - it's own layer in the SVG - and there is only one of them. Its draw is dynamically changing based on input of which country and year is selected, and it updates dynamically as those change in the base visual. The treemap adds another dimension, and is also liked to both the geographic map and the sparkline. Notice how this cross-highlights them, and mousing over either map updates the sparkline. Both are also connected to the current year.2e:[{"id":"8acc342258e60e047253ab255322dd21dcdcb20eec4d78e57fdb115258f11cb6f3b487f2aeaf589e4312aeb206b1933cf77437501d3ca5c247fc6d4c6a094d79","href":"https://static.observableusercontent.com/files/8acc342258e60e047253ab255322dd21dcdcb20eec4d78e57fdb115258f11cb6f3b487f2aeaf589e4312aeb206b1933cf77437501d3ca5c247fc6d4c6a094d79","name":"world-gdp-growth.csv","type":"text/csv","lastModified":1713631422277.727,"size":166416},{"id":"58982a811e51b98cd8722570cab91793202f8b61f9306c700c7c657b3108500eb4b4f4a3720dada15b4cd4e5013c4ccc359bd5d907c5354a90b2e216422a4e1c","href":"https://static.observableusercontent.com/files/58982a811e51b98cd8722570cab91793202f8b61f9306c700c7c657b3108500eb4b4f4a3720dada15b4cd4e5013c4ccc359bd5d907c5354a90b2e216422a4e1c","name":"world-gdp-growth_pivot.csv","type":"text/csv","lastModified":1713631422277.727,"size":112769}] 2b:{"id":"ae5c1582a29467c2","slug":null,"title":"Connecting multiple visuals in one space","thumbnail":"f2d647f88f1064b21e300d7c60f53b5233ab4702efc9f95490eef77b1086cf97","access_level":"public","create_time":"$D2024-04-20T16:43:42.277Z","update_time":"$D2025-04-22T19:25:56.988Z","view_time":null,"first_public_time":"$D2024-04-21T23:03:11.330Z","has_unpublished_edits":null,"fork":{"id":"d31d4eebcc2c4e8a","slug":"maps-sparklines-at-centroids","title":"Maps - Sparklines at centroids","owner":{"id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field"}},"stars":1,"starred":false,"owner":{"type":"team","id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":"starter_2024"},"version":946,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null}],"members":[{"type":"individual","id":"4971b358617edbb7","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":null,"role":"editor"},{"type":"team","id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field","avatar_url":"https://avatars-next.observableusercontent.com/88cdaa8f20f4c520d4d918eadeb46799e252770787ad10228ef9166f891192fd","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a9e9f7027a40da9e","slug":"d3-layout-and-lib-examples","title":"d3 layout and lib examples","owner":{"id":"58dc22f5e2929ad2","login":"emfielduva","name":"Eric Field"}},"type":"notebook","body":{"title":"Connecting multiple visuals in one space","cells":[{"id":0,"value":"$2d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"mapContainer","database":"$undefined"},{"id":561,"value":"viewof year = Inputs.range([1961, 2011], {label: \"Year\", step:1, value:1994})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"Watch this log value to see the data being passed into the sparkline. Normally you would not show this, but it's here for demonstration.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":815,"value":"mutable log = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"### the base map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"map = d3.select(mapContainer)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"projection = d3.geoNaturalEarth1()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"mapLayers = {\n let mapLayers = [];\n mapLayers[\"countries\"] = drawMapLayer(map,\"countries\",world.features,world.idField);\n return mapLayers;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"### choropleth by GDP data\nsame as [Maps - Choropleth](https://observablehq.com/@emfielduva/maps_choropleth?collection=@emfielduva/maps) example. This gives us the base visual \"menu\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":567,"value":"colorScale = d3.scaleLinear().domain([-25,0,25]).range([\"red\",\"gray\",\"green\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":569,"value":"colorByID(mapLayers[\"countries\"],gdp,\"id\",\"Country Code\",year,'',colorScale)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"### add the sparkline and generator to draw from country\nusing the `sparkline` `` layer in the svg. Notice it is translated to a floating location on top of the map layer. \nUsing `(evt,d)` makes this component happen dynamically based on a passed in `event` of a mouseover that contains data `d`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":714,"value":"sparkline = map.select(\"#sparkline\").selectAll(\"line\")\n .data(gdp_pivot)\n .join(\"line\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"drawSparkline = (evt,d) => {\n let thisCountryCode = d.id; // get the country code from the data of the moused-over item\n let thisCountryName = \"\";\n if (d.properties != null) {thisCountryName = d.properties.name} else {thisCountryName = d.name;}\n \n sparkline.transition().duration(1000)\n .attr(\"x1\", d=>scaleX(+d.Year)).attr(\"y1\",scaleY(0)) // 0 baseline of sparkline\n .attr(\"x2\", d=>scaleX(+d.Year)).attr(\"y2\",d=>scaleY(+d[thisCountryCode])) // data value, up or down, from country\n .style(\"stroke\", d => +d[thisCountryCode] > 0 ? \"green\" : \"red\"); // color on positive or negative growth\n\n map.select(\"#countryname\")\n .text(thisCountryName) // from the country object data passed in through the mouseover\n .attr(\"x\",10)\n .attr(\"y\",40);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"### attach dynamics instructions\n- mouseover on countries, so the mouse over a country updates the sparkline.\n- opacity change to the active year of the sparkline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":611,"value":"{\n mapLayers[\"countries\"].on(\"mouseover\",updateVisual);\n treemap.selectAll(\"rect\").on(\"mouseover\", (evt,d) => updateVisual(evt,d.data))\n sparkline.style(\"opacity\", d => d.Year == year ? 1 : 0.25);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":898,"value":"updateVisual = (evt,d) => {\n mutable log = d; // this puts the data (d) value into the log above so we can watch it (useful for debugging too)\n let countryID = d.id;\n drawSparkline(evt,d);\n mapLayers[\"countries\"].style(\"stroke-width\",\"\");\n mapLayers[\"countries\"].filter(d => d.id == countryID).style(\"stroke-width\",\"3px\");\n treemap.selectAll(\"rect\").style(\"stroke-width\",\"\");\n treemap.selectAll(\"rect\").filter(d => d.data.id == countryID).style(\"stroke-width\",\"3px\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"-------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":380,"value":"### Scales to fit the sparklines:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":387,"value":"scaleX = d3.scaleLinear().domain([1960,2011]).range([10,200]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"scaleY = d3.scaleLinear().domain([-20,20]).range([50,-50]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":738,"value":"### Add a treemap too, just to show that we can.\nand that we can cross-integrate it dynamically also.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":740,"value":"treemapLayer = map.select(\"#treemap\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"import {dvTreemap,layoutChildren} from \"@emfielduva/dvlib_layout\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":800,"value":"Build a new data array from the original that is more targeted to what we need for the treemap. Specifically this adds an absolute value of the selected year, because treemap areas cannot be negative. We'll color them to indicate (+/-) direction.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":746,"value":"gdp_year = {\n let newdata = [];\n gdp.forEach(d => {\n newdata.push({id:d[\"Country Code\"],name: d[\"Country Name\"],selYear:Number(d[year]),selYearABS:Math.abs(d[year])});\n })\n newdata.sort((a,b) => d3.descending(a.selYear,b.selYear));\n return newdata;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"Build a Treemap and color them by data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":778,"value":"treemap = {\n let tmLayoutData = layoutChildren(\"gdp\", gdp_year);\n let treemap = dvTreemap(treemapLayer,tmLayoutData,150,250,\"selYearABS\");\n treemap.selectAll(\"rect\").style(\"fill\", d => colorScale(d.data.selYear));\n return treemap;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"---\n### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"world = getMapData(\"world110m\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"gdp = FileAttachment(\"world-gdp-growth.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"gdp_pivot = FileAttachment(\"world-gdp-growth_pivot.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":945,"value":"### imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"import {getMapData, drawMapLayer} with {projection} from \"@emfielduva/dvlib_maps\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"import {colorByID, toNum} from \"@emfielduva/dvlib\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"