2e:null 2f:["$","title",null,{"children":"Volcanoes Re-Viz-ited: Volcanoes That Have Erupted Since 1880 | Rachael | Observable"}] 34:Tea4,viz = { const tooltip = initTooltip(); //create div first, instead of an svg. This is going to help with ordering and wrapping the volcanoes //because I'm going to use flex grid styling to deal with where the volcanoes are in the frame const div = d3.create('div') .classed('container-div', true) .style('display', 'flex') .style('width', '80%') .style('margin', '0 auto') .style('flex-direction', 'row') .style('flex-wrap', 'wrap') .style('padding', '50px 0'); makeKeys(div); const divSVGs = div.append('div') .style('display', 'flex') .style('width', '100%') .style('margin', '0 auto') .style('flex-direction', 'row') .style('flex-wrap', 'wrap') .style('padding', '50px 0'); //I'm just using a for loop for now to loop through each of my 415 volcanoes, and appending a div for each //into that div I'm adding an svg, one for each volcano for (var i = sortedVolcanoes.length - 1; i >= 0; i--) { //a variable so I can refer to the volcanoes data in the loop let thisVolcano = sortedVolcanoes[i]; //added an svg container div let svgDIV = divSVGs.append('div') .classed('volcano-div', true) .style('vertical-align', 'bottom') //I'm scaling the container size based on the size of the volcano, which is a convoluted lil calculation .style('width',`${300*volcanoSize(thisVolcano.elevation)/3 +5}px`) .style('height', `${300*volcanoSize(thisVolcano.elevation)/2.5}px `) .attr('data-val', thisVolcano.vol_number); //svg per volcano let svg = svgDIV .append('svg') .attr('height', `${30*volcanoSize(thisVolcano.elevation)/2}px`) .attr('height', '30px') .attr('width','30px') .style('overflow', 'visible') //defs for the gradient pattern let defs = defineFillDefs(svg, thisVolcano); //defs for the gradient pattern let strokeDefs = defineStrokeDef(svg); //add a g, and the volcano path. The paths are predrawn in Illustrator, four different ones, and depending // on the type of volcano, i use the given path svg.append('g') .style('overflow', 'visible') .selectAll('path') .classed('volcano-path', true) .data(sortedVolcanoes.filter(d => d.vol_number == thisVolcano.vol_number)) .enter() .append('path') //depending on type of volcano, use path .attr('d', d => whichVolcano(d.type)) .style('fill', `url(#linearGradient-${thisVolcano.vol_number})`) .style('stroke', '#ffffff') .style('stroke-width', '2px') //arrange the volcano based on it's size, scale it based on its elevation .attr('transform', d => `translate(-${(300*volcanoSize(d.elevation))/2}, 0) scale(${volcanoSize(d.elevation)})`) .on("mouseover", (d, i, els) => { d3.select(els[i]).style('stroke', 'url(#linearGradient-stroke)'); tooltip.select('.name').text(thisVolcano.vol_name) tooltip.select('.td-country-2').text(thisVolcano.country) tooltip.select('.td-elevation-2').text(`${thisVolcano.elevation}m`) tooltip.select('.td-eruption-2').text(thisVolcano.eruption_date) tooltip.select('.td-type-2').text(thisVolcano.type) return tooltip.transition().duration(500).style('opacity', '1') }) .on('mousemove', d => { return tooltip.style('top', `${d3.event.pageY-200}px`).style('left', `${d3.event.pageX-125}px`); }) .on('mouseout', (d, i, els) => { d3.select(els[i]).style('stroke', '#ffffff'); return tooltip.transition().duration(500).style('opacity', '0').style('pointer-events', 'none'); }); } return div.node(); }35:T6fb,makeKeys = (div) => { const key = div.append('div') .classed('key', true).style('width', '400px'); key.append('div') .style('width', '200px') .style('height', '20px') .style('background-image', 'linear-gradient(to right, #73b1ef , #ef26bb)'); key.append('span').html('1').style('font-family', 'monospace').style('padding-right', '170px').style('font-size', '13px') key.append('span').style('font-family', 'monospace').html('50+ eruptions').style('font-size', '13px') const volcanoKey = div.append('div') .classed('volcanoKey', true) .style('height', '50px') .style('flex-direction', 'row') .style('flex-wrap', 'wrap') .style('display', 'flex') .style('justify-content', 'space-evenly') .style('width', '300px'); const volcanoKeySVG = volcanoKey.append('svg').attr('height', '30px'); volcanoKeySVG .append('path').attr('d', stratoVolcano) .attr('transform', 'translate(50,0) scale(0.09)').append('text'); volcanoKeySVG.append('path') .attr('d', calderaVolcano) .attr('transform', 'translate(130,6) scale(0.09)'); volcanoKeySVG .append('path') .attr('d', shieldVolcanoes) .attr('transform', 'translate(190,6) scale(0.09)'); volcanoKeySVG.append('path') .attr('d', otherVolcanoes) .attr('transform', 'translate(250,5) scale(0.09)'); volcanoKey.append('span').html('Stratovolcano').style('font-family', 'monospace').style('font-size', '13px') volcanoKey.append('span').html('Caldera').style('font-family', 'monospace').style('font-size', '13px') volcanoKey.append('span').html('Shield').style('font-family', 'monospace').style('font-size', '13px') volcanoKey.append('span').html('Other').style('font-family', 'monospace').style('font-size', '13px') }36:[{"id":"601fd8efc018bacd01abc559ab51c75ec64d7e9c9bf30b98cebfa34d9e4533614c9f8b484ce1373da0c645f19ca50ddec5e44a29dcb33018554d2682bf0bcd6b","href":"https://static.observableusercontent.com/files/601fd8efc018bacd01abc559ab51c75ec64d7e9c9bf30b98cebfa34d9e4533614c9f8b484ce1373da0c645f19ca50ddec5e44a29dcb33018554d2682bf0bcd6b","name":"eruptions_volcanoes@2.json","type":"application/json","lastModified":1586253132433.315,"size":106837},{"id":"89a919489fb78acd457464ccf2f7efb1342ac3ea63a796b6e3969c99b22787770ca1aebf278c14c69427005b26f449d9eae371197ff28abb80df8aaf167268f8","href":"https://static.observableusercontent.com/files/89a919489fb78acd457464ccf2f7efb1342ac3ea63a796b6e3969c99b22787770ca1aebf278c14c69427005b26f449d9eae371197ff28abb80df8aaf167268f8","name":"eruptions_volcanoes@3.json","type":"application/json","lastModified":1586263820790.467,"size":106311}] 32:{"id":"8dee0aacc4f59cbf","slug":"volcano-re-vizzed","title":"Volcanoes Re-Viz-ited: Volcanoes That Have Erupted Since 1880","thumbnail":"42126d0d5e6516708dbf738157f7cc59a9b584f1a867b2ed6252d7df100e6948","access_level":"public","create_time":"$D2020-04-06T11:39:29.984Z","update_time":"$D2020-04-20T13:47:51.684Z","view_time":null,"first_public_time":"$D2020-04-07T12:11:52.934Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"a8c8f77a94f5571b","login":"rdottle","name":"Rachael","avatar_url":"https://avatars-next.observableusercontent.com/e14ccbe77849680dacf2da22b9325eae1e4b6969b47e4279801d7e7d4e4f3e96","tier":"starter_2024"},"version":750,"publish_version":750,"role":null,"authored":false,"authors":[{"type":"individual","id":"abfb049081d72879","login":"rdottle","name":"Rachael","avatar_url":"https://avatars-next.observableusercontent.com/e14ccbe77849680dacf2da22b9325eae1e4b6969b47e4279801d7e7d4e4f3e96","tier":null}],"members":[{"type":"individual","id":"abfb049081d72879","login":"rdottle","name":"Rachael","avatar_url":"https://avatars-next.observableusercontent.com/e14ccbe77849680dacf2da22b9325eae1e4b6969b47e4279801d7e7d4e4f3e96","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"40a69f40f75637fd","slug":"remakes","title":"Re-viz-ited","owner":{"id":"a8c8f77a94f5571b","login":"rdottle","name":"Rachael"}},"type":"notebook","body":{"title":"Volcanoes Re-Viz-ited: Volcanoes That Have Erupted Since 1880","cells":[{"id":0,"value":"md`# Volcanoes Re-Viz-ited: Volcanoes That Have Erupted Since 1880`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"md`An attempt at re-making [this](https://www.axios.com/chart-every-volcano-that-erupted-since-krakatoa-467da621-41ba-4efc-99c6-34ff3cb27709.html) super cool Axios visual made by Lazaro Gamio in 2018. The visual below shows all volcanoes that have erupted since 1880, using data from The Smithsonian [Global Volcanism Program](https://volcano.si.edu/gvp_votw.cfm#).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"md`I add a tooltip method to set up my tooltip since it will live outside my main visual div, and it will always have a certain table structure.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"initTooltip = () => {\n d3.selectAll('.svg-tooltip').remove();\n \n let tooltip = d3.select('body')\n .append('div')\n .attr('class', 'svg-tooltip')\n .style('position', 'absolute')\n .style('height', 'auto')\n .style('padding', '20px')\n .style('min-width', '200px')\n .style('background-color', '#fefefe')\n .style('box-shadow', '10px 10px 34px -8px rgba(34,34,34,0.14)')\n .style('font-family', 'monospace')\n .style('opacity', '0');\n \n tooltip.html('

Country
Elevation
Type
Last Eruption

')\n\n return tooltip;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"md`Had to also add keys to explain the color gradient and volcano types.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"md`For the ethereal, fun, cool, hip gradients, I define some linear gradients for the svgs. Both for the fill and for the stroke. The stroke gradient is needed so that you don't see the whole stroke of the volcano shapes, which would look emphasize the flat triangle shape of the volcano illustrations.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"defineStrokeDef = (svg) => {\n let strokeDefs = svg.append('defs')\n .append('linearGradient')\n .attr('id', `linearGradient-stroke`)\n .attr('gradientUnits', 'userSpaceOnUse')\n .attr('x1', '172')\n .attr('y1', '50.2143')\n .attr('y2', '141')\n .attr('x2', '172')\n strokeDefs.append('stop')\n .attr('offset', '0%')\n .style('stop-color', \"#222222\")\n strokeDefs.append('stop')\n .attr('offset', '100%')\n .style('stop-color', '#f0f0f0')\n .style('stop-opacity', 0.1)\n \n return strokeDefs;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"defineFillDefs = (svg, data) => {\n let defs = svg.append('defs')\n .append('linearGradient')\n .attr('id', `linearGradient-${data.vol_number}`)\n .attr('gradientUnits', 'userSpaceOnUse')\n .attr('x1', '172')\n .attr('y1', '50.2143')\n .attr('y2', '141')\n .attr('x2', '172')\n defs.append('stop')\n .attr('offset', 0)\n .style('stop-color', colorScale(data.sum))\n defs.append('stop')\n .attr('offset', 0.2446)\n .style('stop-color', colorScale(data.sum))\n .style('stop-opacity', 0.7554)\n defs.append('stop')\n .attr('offset', 0.7577)\n .style('stop-color', colorScale(data.sum))\n .style('stop-opacity', 0.2423)\n defs.append('stop')\n .attr('offset', 1)\n .style('stop-color', colorScale(data.sum))\n .style('stop-opacity', 0);\n \n return defs;\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"md`This color scale is to shade the gradient based on a volcano's eruptiveness. Eruptivity. Amount of eruptions in the recent past.`\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"colorScale = d3.scaleLinear()\n .domain([0, 25, 50])\n .range(['#73b1ef', '#d369c5', '#ef26bb'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":646,"value":"md`Scale the volcano size. Since I'm using pre-drawn Illustrator paths for my volcanoes, I scale their...scale... based on their elevation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"volcanoSize = d3.scaleLinear()\n .domain([0, 6142])\n .range([0.08, 0.8])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"md`Sort volcano data by elevation so I can draw them by ascending elevation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"sortedVolcanoes = volcano_eruption.slice().sort((a, b) => d3.ascending(a.elevation, b.elevation))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"md`I've drawn four different paths in Illustrator and exported them as SVGs. I took the actual string paths from the svgs and defined them here, so I can use them depending on the type of volcano in the data.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"calderaVolcano = 'M68.3,130c9.2-16.7,18.3-33.3,27.5-50c4.4-8,8.8-16,13.2-24c2.4-4.4,4.1-8.9,8.3-2c2.3,3.8,3.5,3.9,4.4,8.5 c1.2,5.9,3,10.2,7.7,12.2c8.7,3.6,21.3,1,29.1-4c11.2-7.1,21.2,1.4,32.4,5.6c12.6,4.8,24.3-8.1,37.4-4.5c9.9,2.7,20.8,3.7,30.9,1.6 c11.6-2.4,3.7-15.8,10.1-22.3c6.9-7.1,22.4,34.5,25.4,41.7c3.6,8.7,6.7,17.7,11.6,25.4c5.4,8.3,11.9,15.2,17.7,22.9 c-88,0-176,0-264,0C62.8,137.3,65.6,133.6,68.3,130z';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"stratoVolcano = \"M38.7,210l261.5,0.9c4,0,5.4-5.2,2.1-7.3c-2.8-1.7-5.4-3.8-7.8-6.7c-5.6-6.7-10-14.4-15.2-21.4 c-11.8-15.7-17.5-33.8-35.5-43.2c-18.9-9.9-25.5-30.6-31.4-50.3c-6.5-21.8-14.7-38.5-18.7-60.4c-0.4-2-2.2-3.4-4.2-3.2 c-6.3,0.5-10.5-0.5-15-2.3c-4.8-1.9-10.2,0.9-11.1,6c-3.3,17.4-8.3,34.1-13.7,51.1c-6.6,20.9-19.6,36.2-34.7,51.7 c-14.8,15.3-33.2,24.1-49.9,36.8c-7.9,6-12.5,12.3-17.2,21c-3.8,7.2-9.2,14.1-12.7,21.7C33.9,207.1,35.8,210,38.7,210z\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"shieldVolcanoes = 'M28.8,133.8c20.3-14.9,44-28.5,61.7-46.3C103.6,74.3,116.8,61,130,47.8c9.1-9.2,18.1-14.3,32.1-15.5 c5.4-0.5,11.1,2.1,16.4,3.5c6.1,1.7,16.2,6.8,22.6,6.3c6.1-0.5,12.6-8.4,18.5-10.4c4.9-1.6,4.8-0.4,9.6,3.1 c23.2,16.8,47.4,32.3,68.1,52.1c13.5,12.9,26.7,29.2,41.9,40.1c11.2,8,27.1,12.4,39.8,18c-108.4,0-216.8,0-325.1,0 c-15.5,0-30.9,0-46.4,0C14.6,141.3,21.7,137.5,28.8,133.8z';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"otherVolcanoes = 'M13,156c39.6-40.5,79.1-81,118.7-121.5c8.2-8.4,6.7-8.4,18.7-5.9c2.1,0.4,4.2,1.4,6.2,1.1 c2.2-0.3,5.3-4,7.4-3.7c1.3,0.2,4.1,4.1,5,5c21.8,21.8,43.5,43.5,65.3,65.3c19.9,19.9,39.8,39.8,59.7,59.7c-82,0-164.1,0-246.1,0 C36.3,156,24.6,156,13,156';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"md`This method determines which of the string paths to use for the volcano. If it's a stratovolcano, use a stratovolcano drawing, etc.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"whichVolcano = (type) => {\n if(type=='Stratovolcano' || type == 'Stratovolcano(es)') {\n return stratoVolcano;\n }\n else if(type == 'Shield') {\n return shieldVolcanoes;\n }\n else if(type == 'Caldera') {\n return calderaVolcano;\n }\n else {\n return otherVolcanoes;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":" volcano_eruption = FileAttachment(\"eruptions_volcanoes@3.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"margin = ({\n top: 20,\n left: 70,\n right: 10,\n bottom: 50\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height = 880","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"d3@5.9\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"