2e:null 2f:["$","title",null,{"children":"Volcanic Event Casualties After 1980 | Francesca Loiodice | Observable"}] 34:T102e,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .selectAll("rect") .data(chartData) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", margin.top) .attr("fill", d => colorScaleVEI(d.VEI)) .attr("height", d => y(d['Total Deaths'])) .attr("width", x.bandwidth()) .on("mouseover", function(event, d) { tooltip .html( `

Volcano Name: ${d.Name}

VEI: ${d.VEI}

Location: ${d.Location}

Eruption Date: ${d.Mo}/${d.Dy}/${d.Year}

Deaths: ${d["Total Deaths"]}

Volcano Name: ${d.Name}

VEI: ${d.VEI}

Location: ${d.Location}

Eruption Date: ${d.Mo}/${d.Dy}/${d.Year}

Deaths: ${d["Total Deaths"]}

` ) .style('visibility', 'visible') .style("font-size", "12px"); }) .on('mousemove', function (event) { if(event.pageX <= width/2) { tooltip .style('top', event.pageY - 10 + 'px') .style('left', event.pageX + 10 + 'px'); } else { tooltip .style('top', event.pageY - 10 + 'px') .style('left', event.pageX - 160 + 'px'); } }) .on('mouseout', function (event) { tooltip .html(``) .style('visibility', 'hidden'); }); svg.append("g") .call(yAxis); const VEIColors = svg.append("g").selectAll("rect") .data(VEI) // 5 instances of 'undefined' .enter().append("rect") .attr("fill", (d, i) => colorScaleVEI(i)) .attr("x", margin.left + VEILegendX) .attr("y", (d,i) => margin.top + 30*i+VEILegendY + 20) .attr("width", 200) .attr("height",30) .attr("font-size", "1em"); const VEIexplained = svg.append("g") .selectAll("text") .data(VEI) .enter().append("text") .attr("fill", "black") .attr("x", margin.left + VEILegendX + 5) .attr("y", (d,i) => margin.top + 30*(i+0.8)+VEILegendY + 20) .attr("font-size", "1em") .style("text-anchor", "start") .text(d => d.VEI+": "+d.Description); const VEITitle = svg.append("text").attr("x", margin.left + VEILegendX ) .attr("font-size", "1.5em") .attr("font-weight", "bold") .attr("y", margin.top + VEILegendY).text("VEI Color Scale"); const VEIBlurb = svg.append("g") .selectAll("text") .data(veiblurb) .enter().append("text") .attr("fill", "black") .attr("x", margin.left + VEILegendX ) .attr("y", (d,i) => margin.top + VEILegendY + 320 + 20*i) .attr("font-size", "1em") .text(d => d); const ruizTitle = svg.append("g") .append("text") .text("Nevado del Ruiz Eruption, 1985") .attr("font-size","1.5em") .attr("x", margin.left + ruizInfoX) .attr("y", margin.top + ruizInfoY) .attr("font-weight", "bold"); const ruizInfo = svg.append("g") .selectAll("text") .data(wrappedText) .enter().append("text") .attr("fill", "black") .attr("x", margin.left + ruizInfoX) .attr("y", (d,i) => margin.top + 20*i+ruizInfoY + 30) .attr("font-size", "1em") .text(d => d); return svg.node(); }35:Tc2d,md`# Writeup: Initially, we wanted to take advantage of the geographical data in our dataset and make a map to convey spatial patterns of volcanoes. While drafting this map, we noticed the asymmetry between VEI and casualties. We followed up by doing EDA in tableau and found a significant outlier, the Nevado del Ruiz (low VEI and high casualties). Through research, we learned that volcanoes, regardless of VEI, result in a large loss of life when people are not properly evacuated. We decided to use a quote from our research as our main data insight, "There is no such thing as a natural disaster", and to focus on Ruiz. Since the geographical aspects of the data did not contribute to the insight we wanted to convey, we ditched the map for a bar chart, which was simpler but more effective. All team members researched different insights from the dataset and sketched potential visualizations. Once a design was decided on, the team members split up the work between implementing the bar chart, filtering, and text. When designing the bar chart, we decided to use text to tell the story of Ruiz. Since text elements do not automatically wrap in d3, the process was more involved than expected and we ended up manually wrapping the words by splitting our text into lines. The Ruiz explosion was a major outlier and when we graphed it alongside other volcano explosions, it made the other bars less distinguishable. We experimented with using logarithmic scales to make all the bars visible but it made the y-axis appear extremely distorted. Another design decision we made was to use an ordinal color scale to graph the VEI. While the VEI is logarithmic, we decided to use an ordinal color scale so that people could distinguish between the colors. We also added text for the definition of the VEI. In user testing, we learned new perspectives on our visualization and identified confusing elements that we had overlooked. One of our users expressed confusion about the x-axis labels and we improved our viz by including additional information. Another user was confused by the wording of the “Armero Tragedy'' which we changed to the “Ruiz Volcano Explosion” to better connect it to the x-axis values. Another user found it difficult to distinguish between the volcanoes with 0 deaths and few deaths, which led us to expirementing with logarithmic scale for the y-axis. Lastly, a user felt the chart was sparse and wished there were more data points or volcano events to look at. If we had another week, we would create an option for users to explore volcanoes that are constantly monitored by agencies designed to prevent tragedies such as Ruiz in the future. # Resources: Word wrapping: https://stackoverflow.com/questions/14484787/wrap-text-in-javascript Research: https://www.popsci.com/no-such-thing-as-natural-disaster/ https://items.ssrc.org/understanding-katrina/theres-no-such-thing-as-a-natural-disaster/ https://en.wikipedia.org/wiki/Volcano_Disaster_Assistance_Program https://en.wikipedia.org/wiki/Armero_tragedy https://en.wikipedia.org/wiki/1991_eruption_of_Mount_Pinatubo ` 36:T430,paragraphs = ['“Hazards are natural; disasters are manmade. There’s actually no such thing as a natural disaster” - Kendra Pierre Louis', 'If you look at volcano eruptions since 1980, you can see that no matter how you slice the data, the most explosive volcanoes were not necessarily the most deadly. The most deadly explosions were those where people were not evacuated in time.', 'Despite only having a VEI of 3, the 1985 eruption of the Nevado del Ruiz stratovolcano in Tolima, Colombia resulted in tragedy. The government had received warnings from volcanological organizations to evacuate the area but they were ignored. A banner at a mass funeral in Ibagué read, "The volcano didn\'t kill 22,000 people. The government killed them."', 'In response to the tragedy, the international Volcano Disaster Assistance Program was created to track and respond to active volcanoes. They were able to avoid the potentially disastrous eruption of Mount Pinatubo in 1991 by evacuating over 20,000 people from surrounding areas.']37:[{"id":"6316a61ca3ab5fed9764a64a790c94f901637cbdc5cd003437398a17c45f7dddf73efa8427f0ab0114d2142a02074dbe0896898e510d3100012d642dd90807fc","href":"https://static.observableusercontent.com/files/6316a61ca3ab5fed9764a64a790c94f901637cbdc5cd003437398a17c45f7dddf73efa8427f0ab0114d2142a02074dbe0896898e510d3100012d642dd90807fc","name":"volcano-boxplots.png","type":"image/png","lastModified":1615229092809.218,"size":54150},{"id":"02c69ee43b66e48d1575fea6da7f118c8d5d8b0f584d5619a49ef23649001a554cb26d294d071db98882576df2d630516bf1ac0543770920c5a51cd64585f5bd","href":"https://static.observableusercontent.com/files/02c69ee43b66e48d1575fea6da7f118c8d5d8b0f584d5619a49ef23649001a554cb26d294d071db98882576df2d630516bf1ac0543770920c5a51cd64585f5bd","name":"sketch-tiara.png","type":"image/png","lastModified":1615229092809.218,"size":107806},{"id":"df95a7aa6df91632abde24664868f3a389bf83472281283a77a922ae0793847d968a44afaf9709b93cba5b7aa5f7a3d275c706095dc95868474fac37b0cef8ab","href":"https://static.observableusercontent.com/files/df95a7aa6df91632abde24664868f3a389bf83472281283a77a922ae0793847d968a44afaf9709b93cba5b7aa5f7a3d275c706095dc95868474fac37b0cef8ab","name":"spikemap_screenshot.png","type":"image/png","lastModified":1615229092809.218,"size":586732},{"id":"d60405bb72b8ed0108bf475d6538de50abf376169f654b121d0baf655257d8c43f418f6113dbf201286f0462bd3a88d31ea330906f7e7044abe6c6fb7e45e657","href":"https://static.observableusercontent.com/files/d60405bb72b8ed0108bf475d6538de50abf376169f654b121d0baf655257d8c43f418f6113dbf201286f0462bd3a88d31ea330906f7e7044abe6c6fb7e45e657","name":"VEI.csv","type":"text/csv","lastModified":1615229092809.218,"size":784},{"id":"6ca97bf0e9b3a6b962f9ed5e4960e0a702770e78859676fb63e63e54c24e2bb08e1ee8b73a7a2b82ff821097f6143f86e9a53132c6437622d617462c8ecc47f4","href":"https://static.observableusercontent.com/files/6ca97bf0e9b3a6b962f9ed5e4960e0a702770e78859676fb63e63e54c24e2bb08e1ee8b73a7a2b82ff821097f6143f86e9a53132c6437622d617462c8ecc47f4","name":"volcano-events.csv","type":"text/csv","lastModified":1615229092809.218,"size":87935},{"id":"a0ab5d0f54105cb3586b584f6a5bc1856533d45d5ce2588465835c4a556c6440abe425b3bfdfdc06fa586fa134d0243141f34897847c0fb92ed2c02c42724932","href":"https://static.observableusercontent.com/files/a0ab5d0f54105cb3586b584f6a5bc1856533d45d5ce2588465835c4a556c6440abe425b3bfdfdc06fa586fa134d0243141f34897847c0fb92ed2c02c42724932","name":"image.png","type":"image/png","lastModified":1615229089501.42,"size":226013},{"id":"6d9f163a8c2f101c6fd6cd84cd08fe6759deac2e665dad58caf13dbec1ee062a5d8d5353e705a08095d9150240c4a0522fd6b8f87d4d46bf514da6d08302a5a0","href":"https://static.observableusercontent.com/files/6d9f163a8c2f101c6fd6cd84cd08fe6759deac2e665dad58caf13dbec1ee062a5d8d5353e705a08095d9150240c4a0522fd6b8f87d4d46bf514da6d08302a5a0","name":"Ava-s Sketch.png","type":"image/png","lastModified":1615229089446.218,"size":82648}] 32:{"id":"1b2c632859ab102b","slug":"theres-actually-no-such-thing-as-a-natural-disaster","title":"Volcanic Event Casualties After 1980","thumbnail":"0af321bd8438928df6f5652c8f2617cc3c964f94ae4cf35f4a0f1971891d11e1","access_level":"public","create_time":"$D2021-03-08T18:44:52.809Z","update_time":"$D2021-03-08T22:04:16.583Z","view_time":null,"first_public_time":"$D2021-03-08T18:45:46.977Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"5f384fddc025727b","login":"fl2508","name":"Francesca Loiodice","avatar_url":"https://avatars-next.observableusercontent.com/b67b5b388a353f5eddcb80f9d7a07f16a48f7a98d00b266b3385d98b9b3d9ddb","tier":"starter_2024"},"version":1050,"publish_version":1050,"role":null,"authored":false,"authors":[{"type":"individual","id":"5ce1ed969c550024","login":"fl2508","name":"Francesca Loiodice","avatar_url":"https://avatars-next.observableusercontent.com/b67b5b388a353f5eddcb80f9d7a07f16a48f7a98d00b266b3385d98b9b3d9ddb","tier":null}],"members":[{"type":"individual","id":"5ce1ed969c550024","login":"fl2508","name":"Francesca Loiodice","avatar_url":"https://avatars-next.observableusercontent.com/b67b5b388a353f5eddcb80f9d7a07f16a48f7a98d00b266b3385d98b9b3d9ddb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Volcanic Event Casualties After 1980","cells":[{"id":1,"value":"md`# Volcanic Event Casualties After 1980`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"viewof veis = Inputs.Checkbox([0, 1, 2, 3, 4, 5, 6, 7, 8], {label: \"VEI\", value: [0,1,2,3,4,5,6,7,8]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"viewof numberDeaths = Inputs.Range(\n [0, 2000],\n {\n step: 10,\n label: \"Minimum Number of Deaths\",\n value: 0\n }\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"md`## Sketches and EDA:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"image = FileAttachment(\"spikemap_screenshot.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":907,"value":"tiara_sketch = FileAttachment(\"sketch-tiara.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"volcano_boxplots = FileAttachment(\"volcano-boxplots.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1014,"value":"eda = FileAttachment(\"image.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"sketch = FileAttachment(\"Ava-s Sketch.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":876,"value":"md`## Choose parameters for the chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"chartData = filterData(rawdata)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"colorScaleVEI = d3.scaleOrdinal(d3.schemeYlOrRd[VEI.length]);\n// You can change this but for some reason when I change it it gets confused? Not sure if its an observable issue?","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"minDeaths = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"height = 1500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"minYear = 1980","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"VEILegendX = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"VEILegendY = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"ruizInfoX = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"ruizInfoY = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"md`## Text about Ruiz, VEI.\nWrap this text...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"function getWrappedTextFromParagraphs(paragraphs) {\n var wrappedText = [];\n var paragraph;\n var i;\n for (i = 0; i < paragraphs.length; i++) {\n paragraph = paragraphs[i];\n var wrapped = wordWrap(paragraph,50);\n wrappedText = wrappedText.concat(wrapped);\n wrappedText.push(\"\");\n }\n return wrappedText\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":657,"value":"wrappedText = getWrappedTextFromParagraphs(paragraphs)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"veiblurb = wordWrap('The Volcanic Explosivity Index (VEI) is a relative measure of the explosiveness of volcanic eruptions. The scale is logarithmic, with each interval on the scale representing a tenfold increase in observed ejecta criteria, with the exception of between VEI-0, VEI-1 and VEI-2.',25);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"md`## Import Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"data = FileAttachment(\"volcano-events.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"md`## Setup Axes, scale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"scaleChoice = true","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"x = d3.scaleBand()\n .domain(d3.range(chartData.length))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(x).tickFormat(i => chartData[i].Name+\", \"+chartData[i].Year).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":981,"value":"y = scaleChoice ? linearScale : logScale;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"logScale = d3.scaleLog()\n .base(10)\n .domain([16, 22000]).nice()\n.range([0,height]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"linearScale = d3.scaleLinear()\n .domain([0, d3.max(chartData, d => d['Total Deaths'])]).nice()\n .range([0, height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},${margin.top})`)\n .call(d3.axisLeft(y).tickFormat((d,i) => d.toLocaleString() + ' lives lost'))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", margin.top)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\"))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"margin = ({top: 140, right: 0, bottom: 130, left: 100})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md`## Preprocess Data\n- Filter data by year\n- Remove null VEIs\n- Make Ruiz leftmost bar`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"function filterData(data) {\n var filteredData = data.filter(d => (veis.includes(d.VEI) && d[\"Total Deaths\"] >= numberDeaths) || d.Name == \"Ruiz\")\n var sortedData = filteredData.sort(function (a, b) {\n return -a['Total Deaths'] + b['Total Deaths'];\n});\n return filteredData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":526,"value":"function filterYear(value) {\n return value.Year >= minYear\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"function preprocessData(data) {\n var timeFilteredData = data.filter(filterYear);\n var ruiz = timeFilteredData.find( ({ Name }) => Name === 'Ruiz' );\n var ruizIndex = timeFilteredData.findIndex( ({ Name }) => Name === 'Ruiz' );\n var withoutRuiz = timeFilteredData.filter(item => item.Name !== 'Ruiz');\n var withRuiz = [...withoutRuiz];\n withRuiz.unshift(ruiz);\n var removeNullVEIs = withRuiz.filter(item => item.VEI != null);\n return removeNullVEIs;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"preprocessedData = preprocessData(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"md`## more filters...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"function filterMinDeaths(value) {\n return value['Total Deaths'] >= minDeaths\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"rawdata = preprocessedData.filter(filterMinDeaths)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"md`## Choose a VEI color scale.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"colored_circles = {\n const svg = d3.select(DOM.svg(500, 130));\n\n svg.selectAll(\"circle\")\n .data(VEI) // 5 instances of 'undefined'\n .enter().append(\"circle\")\n .attr(\"fill\", d => colorScaleVEI(d.VEI))\n .attr(\"cx\", (d, i) => (i+1)*50 )\n .attr(\"cy\", 50)\n .attr(\"r\", 15);\n \n svg.selectAll(\"text\")\n .data(VEI)\n .enter().append(\"text\")\n .attr(\"font-size\", \"2em\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", d => colorScaleVEI(d.VEI))\n .attr(\"x\", (d, i) => (i+1)*50 )\n .attr(\"y\", 90)\n .attr(\"dy\", \"0.35em\")\n .style(\"text-anchor\", \"middle\")\n .text((d,i) => i);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"VEI =FileAttachment(\"VEI.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"md`## Set up Tooltips`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'd3-tooltip')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('border-radius', '4px')\n .style('color', '#fff')\n .text('a simple tooltip');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"md`## Code for Word Wrapping`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":653,"value":"function testWhite(x) {\n var white = new RegExp(/^\\s$/);\n return white.test(x.charAt(0));\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"function wordWrap(long_string, max_char){\n\n var sum_length_of_words = function(word_array){\n var out = 0;\n if (word_array.length!=0){\n for (var i=0; i max_char){\n split_out = split_out.concat([[]]);\n }\n \n split_out[split_out.length-1] = split_out[split_out.length-1].concat(word);\n }\n \n for (var i=0; i