25:["$","title",null,{"children":"Suicide Profiles | Stephen Nachtsheim | Observable"}] 4b:T7ff,chart = { let node = this; if (node === undefined) { node = DOM.svg(); d3.select(node) .append("rect") .attr("class", "background") .attr("width", "100%") .attr("height", "100%") .attr("fill", "white") .on("mousedown", () => { mutable selectedCountry = "Global"; mutable selectedYear = d3.max(data, d => d.Year); }); d3.select(node) .append("g") .attr("id", "plot") .append("g") .attr("id", "annotations"); d3.select(node) .append("svg") .attr("id", "map"); mutable mounted = false; } const root = d3.select(node); let titleString = "Suicides per Capita in "; if (mapShows == "firearms-per-capita") { titleString = "Suicides by Firearms in "; } titleString += selectedYear; // let mapColor = (d3.scaleThreshold([5, 10, 15], ["#ffffcc", "#a1dab4", "#41b6c4", "#225ea8"])) // if (mapShows == "firearms-per-capita") { // mapColor = (d3.scaleLinear([.1, .3, .4],["#fed98e", "#fe9929", "#d95f0e", "#993404"]))} // root // .append("g") // .attr("transform", "translate(610,0)") // .append(() => legend({ color: mapColor, title: activeTitle})) /* root .selectAll("text.title") .data([null]) .join("text") .attr("class", "title") .attr("x", 0) .attr("y", margin.top + 15) .attr("font-size", "32px") .attr("text-anchor", "left") .text(titleString); */ root .attr("width", width) .attr("height", width / aspectRatio) .attr("viewBox", `0 0 ${viewbox.width} ${viewbox.height}`) .attr("preserveAspectRatio", "none"); /* root.on("mouseleave", () => { mutable selectedCountry = "Global"; }); */ // plot(root.select("#plot")); map( root .select("#map") .attr("x", margin.left - 75) .attr("y", margin.top) .attr("width", viewbox.width) .attr("height", viewbox.height) .attr("font-size", d3.min([18, (18 * viewbox.height) / 600])) ); return node; }4c:Td82,viewof chart2 = { let node = this; const arcs = pie(firearmNonFirearmSelected); const arcs2 = pie(mentalYearPercent); const arcs3 = pie(MtoFSuicideSelected); const svg = d3.create("svg") .attr("viewBox", [-150, -100, width, height - 100]); svg.selectAll("path") .data(arcs) .join("path") .attr("fill", d => FirearmColor(d.data.name)) .attr("d", arc) .attr("transform", "translate(0,100)"); svg.selectAll("div") .data(arcs2) .join("path") .attr("fill", d => MentalColor(d.data.name)) .attr("d", arc) .attr("transform", "translate(300,100)"); svg.selectAll("div") .data(arcs3) .join("path") .attr("fill", d => MtoFColor(d.data.name)) .attr("d", arc) .attr("transform", "translate(600,100)"); svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 42) .attr("text-anchor", "middle") .append("text") .attr("y", 114) .text(firearmPercentText + "%"); svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 40) .attr("text-anchor", "middle") .attr("text-alignment", "center") .append("text") .attr("y", "240") .text("of suicides") svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 40) .attr("text-anchor", "middle") .attr("text-alignment", "center") .append("text") .attr("y", 280) .text("are by firearm") svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 42) .attr("text-anchor", "middle") .append("text") .attr("y", 114) .attr("x", 300) .text(mentalPercentText + "%"); svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 40) .attr("text-anchor", "middle") .attr("text-alignment", "center") .append("text") .attr("y", "240") .attr("x", 300) .text("of people have a") svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 40) .attr("text-anchor", "middle") .attr("text-alignment", "center") .append("text") .attr("y", "280") .attr("x", 300) .text("mental illness") svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 42) .attr("text-anchor", "middle") .append("text") .attr("y", 114) .attr("x", 600) .text(MtoFSuicidePercent + "%"); svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 40) .attr("text-anchor", "middle") .attr("text-alignment", "center") .append("text") .attr("y", "240") .attr("x", 600) .text("of suicides") svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 40) .attr("text-anchor", "middle") .attr("text-alignment", "center") .append("text") .attr("y", "280") .attr("x", 600) .text("are males") svg.append("g") .attr("font-family", "'Work sans', sans-serif") .attr("font-size", 40) .attr("text-anchor", "middle") .attr("text-alignment", "center") .append("text") .attr("y", "-50") .attr("x", 300) .text(selectedCountry) return svg.node(); }4d:T4b4,viewof a4 = { let sliderOut = (slider({ min: 2000, max: 2019, step: 1, value: a3, title: "Year for Scatterplot", description: "2000 - 2019"})) if (scatterShows == "TotalFacilities") { sliderOut = slider({ min: 2016, max: 2016, step: 1, value: 2016, title: "Year for Scatterplot", description: "2016 is the only year with mental facility data" })} else if (scatterShows == "PercentasHealthSpending") { sliderOut = slider({ min: 2000, max: 2014, step: 1, value: 2014, title: "Year for Scatterplot", description: "2014 is the most recent year with government spending data" })} else if (scatterShows == "Happiness") { sliderOut = slider({ min: 2005, max: 2017, step: 1, value: 2017, title: "Year for Scatterplot", description: "Happiness Data is only available from 2005 - 2017" })} return sliderOut }4e:T43e,md` # Acknowledgments I want to thank various people in helping me create this graphic. The first spot goes to my friend Colin, who helped me troubleshoot my various problems throughout the process. The second spot goes to my girlfriend for listening to my complaining about coding. Finally to the students and staff of my BMC program who are the reason that I made this as well as made it through it. I referenced the following observables and their codes throughout my work: * [COVID in Washington State](https://observablehq.com/@jake-low/covid-19-in-washington-state) * [Bubbles](https://observablehq.com/@stefanreifenberg/bubbles) * [Choropleth with Tooltip](https://observablehq.com/@duynguyen1678/choropleth-with-tooltip) * [Inputs](https://observablehq.com/@jashkenas/inputs) * [Basic Tooltips](https://observablehq.com/@jianan-li/basic-tooltip) * [Color Legend](https://observablehq.com/@d3/color-legend) All the data is from * [WHO](https://www.who.int/data/collections) * [IHME](http://www.healthdata.org/) * [World Happiness Report](https://worldhappiness.report/) `4f:T1a24,map = function(root) { const width = root.attr("width"); const height = root.attr("height"); world.objects.countries.geometries = worldwithoutantartica; const projection = d3 .geoNaturalEarth1() .fitSize([width,height], topojson.feature(world, world.objects.countries)); const path = d3.geoPath(projection); const STROKE_WEIGHT = 0.75; function joinDatatoFeature(feat) { const row = data .filter( row => row.Country === feat.properties.name && row.Year <= selectedYear ) .slice(-1)[0]; feat.properties.AllSuicide = row ? row.AllSuicide : 0; feat.properties.PercentFirearm = row ? row.PercentFirearm : 0; feat.properties.AllMental = row ? row.AllMental : 0; feat.properties.MtoFSuicide = row ? row.MtoFSuicide : 0; // add more stats here return feat; } const mapCountriesData = topojson .feature(world, world.objects.countries) .features.map(joinDatatoFeature); let color = d3.scaleThreshold() .domain([5, 10, 15]) .range(["#edf8fb", "#b3cde3", "#8c96c6", "#88419d"]) .unknown("#FEF0D9") if (mapShows == "firearms-per-capita") { color = (d3.scaleThreshold() .domain([.05, .1, .2, .3, .4, .5]) .range(["#ffeda0", "#fed976", "#feb24c", "#fd8d3c", "#fc4e2a", "#e31a1c", "#b10026"]) .unknown("#FEF0D9"))} else if (mapShows == "mental-per-capita") { color = (d3.scaleThreshold() .domain([8000,10000,12000,14000,16000,18000]) .range(["#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494"]))} else if (mapShows == "MtoF-ratio") { color = (d3.scaleThreshold() .domain([1,2,3,4,5,6,7,8]) .range(["#ffffe5", "#f7fcb9", "#d9f0a3", "#addd8e", "#78c679", "#41ab5d", "#238443", "#006837", "#004529"]))} function fillColor(d) { if (mapShows === "default") { if (d.properties.AllSuicide > 0) { return colors.suicide; } else if (d.properties.PercentFirearm > 0) { return colors.firearm; } else if (d.properties.AllMental > 0) { return colors.mental; } else if (d.properties.MtoFSuicide > 0) { return colors.mental; } else { return colors.grey2; } } else if (mapShows === "suicides-per-capita") { const count = d.properties.AllSuicide; return color(count); } else if (mapShows === "firearms-per-capita") { const count = d.properties.PercentFirearm; return color(count); } else if (mapShows === "mental-per-capita") { const count = d.properties.AllMental; return color(count); } else if (mapShows === "MtoF-ratio") { const count = d.properties.MtoFSuicide; return color(count); } else { return "black"} } const countries = root .selectAll("g.countries") .data([mapCountriesData]) .join("g") .attr("class", "countries") .selectAll("path") .data(d => d) .join("path") .attr("fill", fillColor) .attr("stroke", "none") .attr("stroke-width", STROKE_WEIGHT) .on("mousedown", function(d) { mutable selectedCountry = d.properties.name; }) .on("click", function(d) { const name = d.properties.name; const point = projection.invert(d3.mouse(this)); console.log( `{ name: "${name}", position: [${point[0].toFixed( 3 )}, ${point[1].toFixed(3)}] }` ); }) .attr("d", path); countries.selectAll("title").remove(); if(mapShows !== "default") { countries.append("title").text(d => { let type = "suicide" if(mapShows === "suicides-per-capita") { type = "suicides per capita" } else if (mapShows === "firearms-per-capita") { type = "suicides by firearm per capita" } else if (mapShows === "mental-per-capita") { type = "mental illnesses per capita" } else if (mapShows === "MtoF-ratio") { type = "times more likely to commit suicide" } let count = d.properties.AllSuicide if (type == "suicides per capita") { count = d.properties.AllSuicide } else if (type == "suicides by firearms per capita") { count = d.properties.PercentFirearm } else if (type == "mental illnesses per capita") { count = d.properties.AllMental } else if (type == "times more likely to commit suicide") { count = d.properties.MtoFSuicide } let countryString = d.properties.name + "\r\n" + `${count === "0.0" ? "0" : count.toFixed(2)} ${type}`; if (type == "times more likely to commit suicide") { countryString = d.properties.name + "\r\n" + "Men are " + `${count === "0.0" ? "0" : count.toFixed(2)} ${type}` } return countryString; }); } // add titles for tooltips to unlabeled counties if (mapShows === "default") { countries .filter(d => d.properties.AllSuicide == 0) .append("title") .text(d => d.properties.name); // ...and remove it from labeled counties countries .filter(d => d.properties.AllSuicide != 0) .selectAll("title") .remove(); } // draw intra-county borders root .selectAll("path.country-borders") .data([topojson.mesh(world, world.objects.countries, (a, b) => a !== b)]) .join("path") .attr("class", "country-borders") .attr("fill", "none") .attr("stroke", "white") .attr("stroke-width", STROKE_WEIGHT) .attr("stroke-linejoin", "round") .attr("d", path); // draw state outline root .selectAll("path.land-outline") .data([topojson.mesh(world, world.objects.countries, (a, b) => a === b)]) .join("path") .attr("class", "land-outline") .attr("fill", "none") .attr("stroke", "#999") .attr("stroke-width", STROKE_WEIGHT) .attr("stroke-linejoin", "round") .attr("pointer-events", "none") .attr("d", path); // draw county highlights (invisible by default) root .selectAll("g.country-highlights") .data([null]) .join("g") .attr("class", "country-highlights") .selectAll("path") .data(topojson.feature(world, world.objects.countries).features) .join("path") .attr("fill", "none") .attr("stroke", d => d.properties.name === selectedCountry ? colors.highlight : "none" ) .attr("stroke-width", STROKE_WEIGHT * 3) .attr("stroke-linejoin", "round") .attr("d", path); root .append("g") .attr("transform", "translate(610,0)") // .append("rect") // .attr("class", "background") // .attr("width", "5%") // .attr("height", "5%") // .attr("fill", "white") .append(() => legend({ color: color, title: activeTitle})) }50:T178b,async function drawBubbles() { const dimensions = ({ height:500, width:500, margin: { top: 40, right: 150, bottom: 60, left: 40, } }) // const data = await d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/4_ThreeNum.csv") // console.log(data) const svg = d3.select("#chart") .append("svg") .attr("width", width - 100) .attr("height", dimensions.height + dimensions.margin.top + dimensions.margin.bottom) .append("g") .attr("transform", "translate(" + dimensions.margin.left + "," + dimensions.margin.top + ")"); const x = d3.scaleLinear() .domain([0, 60]) .range([ 0, width]); svg.append("g") .attr("transform", "translate(0," + dimensions.height + ")") .call(d3.axisBottom(x)); // Add X axis label: svg.append("text") .attr("text-anchor", "end") .attr("x", width/2) .attr("y", dimensions.height + 50 ) .text("Suicides per Capita"); // Add Y axis const y = d3.scaleLinear() .domain([yMin, yMax]) .range([ dimensions.height, 0]); svg.append("g") .call(d3.axisLeft(y)); // Add Y axis label: svg.append("text") .attr("text-anchor", "end") .attr("x", 10) .attr("y", 5) .text(yLabel) .attr("text-anchor", "start") // Add a scale for bubble size // const z = d3.scaleSqrt() // .domain([200000, 1310000000]) // .range([ 4, 40]); // Add a scale for bubble color const myColor = d3.scaleOrdinal() .domain(["Asia", "Europe", "NorthAmerica", "SouthAmerica", "Africa", "Oceania"]) .range(d3.schemeTableau10); const tooltip = d3.select("#tooltip") .append("div") .style("opacity", 0) .attr("class", "tooltip") .style("background-color", "black") .style("border-radius", "5px") .style("padding", "10px") .style("color", "white") const showTooltip = function(d) { tooltip .transition() .duration(100) tooltip .style("opacity", 1) .html("Country: " + d.Country) .style("left", (d3.mouse(this)[0]+40) + "px") .style("top", (d3.mouse(this)[1]+40) + "px") } const moveTooltip = function(d) { tooltip .style("left", (d3.mouse(this)[0]+40) + "px") .style("top", (d3.mouse(this)[1]+40) + "px") } const hideTooltip = function(d) { tooltip .transition() .duration(200) .style("opacity", 0) } // Add dots svg.append('g') .selectAll("dot") .data(NullFilter) .enter() .append("circle") .attr("class", function(d) { return "bubbles " + d.Continent }) .attr("cx", function (d) { return x(d.AllSuicide); } ) .attr("cy", function (d) { return y(d[scatterShows]); } ) .attr("r", 5 ) .style("fill", function (d) { return myColor(d.Continent); } ) .on("mouseover", showTooltip ) .on("mousemove", moveTooltip ) .on("mouseleave", hideTooltip ) // Add legend: circles const valuesToShow = [10000000, 100000000, 1000000000] const xCircle = 600 const xLabel = 650 /* svg.selectAll("legend") .data(valuesToShow) .enter() .append("circle") .attr("cx", xCircle) .attr("cy", function(d){ return dimensions.height - 40 - z(d) } ) .attr("r", function(d){ return z(d) }) .style("fill", "none") .attr("stroke", "black") */ /* svg.selectAll("legend") .data(valuesToShow) .enter() .append("line") .attr('x1', function(d){ return xCircle + z(d) } ) .attr('x2', xLabel) .attr('y1', function(d){ return dimensions.height - 40 - z(d) } ) .attr('y2', function(d){ return dimensions.height - 40 - z(d) } ) .attr('stroke', 'black') .style('stroke-dasharray', ('2,2')) svg.selectAll("legend") .data(valuesToShow) .enter() .append("text") .attr('x', xLabel) .attr('y', function(d){ return dimensions.height - 40 - z(d) } ) .text( function(d){ return d/1000000 } ) .style("font-size", 10) .attr('alignment-baseline', 'middle') */ /* svg.append("text") .attr('x', 600) .attr("y", dimensions.height - 20) .text("Population (M)") .attr("text-anchor", "middle") */ // What to do when one group is hovered const highlight = function(d){ // reduce opacity of all groups d3.selectAll(".bubbles").style("opacity", .05) // expect the one that is hovered if(d === "North America") d3.selectAll(".NorthAmerica").style("opacity",1) else if (d === "South America") d3.selectAll(".SouthAmerica").style("opacity",1) else d3.selectAll("."+d).style("opacity", 1) } // And when it is not hovered anymore const noHighlight = function(d){ d3.selectAll(".bubbles").style("opacity", 1) } // Add one dot in the legend for each name. const size = 20 const allgroups = ["Asia", "Europe", "NorthAmerica", "SouthAmerica", "Africa", "Oceania"] svg.selectAll("myrect") .data(allgroups) .enter() .append("circle") .attr("cx", 650) .attr("cy", function(d,i){ return 0 + i*(size+5)}) .attr("r", 7) .style("fill", function(d){ return myColor(d)}) .on("mouseover", highlight) .on("mouseleave", noHighlight) // Add labels beside legend dots svg.selectAll("mylabels") .data(allgroups) .enter() .append("text") .attr("x", 650 + size*.8) .attr("y", function(d,i){ return 0 + i * (size + 5) + (size/2)}) .style("fill", function(d){ return myColor(d)}) .text(function(d){ if (d === "NorthAmerica") return "North America" else if (d === "SouthAmerica") return "South America" else return d }) .attr("text-anchor", "left") .style("alignment-baseline", "middle") .on("mouseover", highlight) .on("mouseleave", noHighlight) }51:Ta33,allCountries = new Set([ "Dominica", "Puerto Rico", "Switzerland", "Guinea", "Mali", "Philippines", "Armenia", "El Salvador", "Sri Lanka", "Croatia", "American Samoa", "Ireland", "Cook Islands", "Namibia", "Honduras", "Global", "Dominican Rep.", "South Korea", "Tokelau", "Saint Kitts and Nevis", "Romania", "Zimbabwe", "Lebanon", "Vietnam", "Mexico", "Greenland", "Iran", "Germany", "Macedonia", "Nigeria", "Bhutan", "Argentina", "Denmark", "Papua New Guinea", "Greece", "Kazakhstan", "Tuvalu", "Madagascar", "Peru", "Iraq", "Mauritania", "Costa Rica", "Chile", "Paraguay", "Eritrea", "North Korea", "Luxembourg", "Burundi", "Kiribati", "Guyana", "Haiti", "Saint Lucia", "Estonia", "Slovenia", "Saudi Arabia", "Malawi", "South Africa", "Andorra", "Palestine", "Tonga", "Algeria", "Malaysia", "Canada", "Venezuela", "Mozambique", "Tajikistan", "Burkina Faso", "Niue", "Vanuatu", "Sao Tome and Principe", "Russia", "Angola", "Pakistan", "Cambodia", "Israel", "Malta", "Barbados", "Rwanda", "Turkey", "Indonesia", "Samoa", "Somalia", "Myanmar", "Turkmenistan", "Yemen", "Australia", "Singapore", "Gabon", "Bulgaria", "Saint Vincent and the Grenadines", "Togo", "Syria", "Latvia", "Albania", "Ukraine", "Uganda", "Gambia", "United Kingdom", "Finland", "New Zealand", "Portugal", "Czechia", "Austria", "Tanzania", "Dem. Rep. Congo", "Cameroon", "Central African Rep.", "Maldives", "United Arab Emirates", "Afghanistan", "Brunei Darussalam", "Bahrain", "Guatemala", "Botswana", "Côte d'Ivoire", "Azerbaijan", "Comoros", "Equatorial Guinea", "Thailand", "Guam", "Jordan", "Guinea-Bissau", "India", "Taiwan", "Montenegro", "Nicaragua", "United States of America", "Ethiopia", "Kyrgyzstan", "Jamaica", "United States Virgin Islands", "Monaco", "Italy", "Libya", "S. Sudan", "Benin", "Marshall Islands", "Antigua and Barbuda", "Congo", "Netherlands", "Serbia", "Oman", "Suriname", "Northern Mariana Islands", "Cabo Verde", "Bolivia", "Senegal", "Belize", "Belgium", "Spain", "Belarus", "Bosnia and Herz.", "Egypt", "Hungary", "Seychelles", "Zambia", "Japan", "Uruguay", "Grenada", "France", "Ghana", "Poland", "Bermuda", "San Marino", "Bangladesh", "Sudan", "Timor-Leste", "Lithuania", "Georgia", "Djibouti", "Kuwait", "Iceland", "Lesotho", "Slovakia", "Liberia", "China", "Mongolia", "Fiji", "Kenya", "Nepal", "Panama", "eSwatini", "Niger", "Bahamas", "Trinidad and Tobago", "Morocco", "Mauritius", "Brazil", "Micronesia (Federated States of)", "Ecuador", "Moldova", "Cuba", "Uzbekistan", "Norway", "Nauru", "Sierra Leone", "Cyprus", "Qatar", "Colombia", "Laos", "Palau", "Sweden", "Solomon Is.", "Tunisia", "Chad" ])52:T10a4,function legend({ color, title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block") svg.append("rect") .attr("width", width) .attr("height", height) .style("fill", "white") let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height); let x; // Continuous if (color.interpolate) { const n = Math.min(color.domain().length, color.range().length); x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n)); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL()); } // Sequential else if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {range() { return [marginLeft, width - marginRight]; }}); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn’t implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Threshold else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } // Ordinal else { x = d3.scaleBand() .domain(color.domain()) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.domain()) .join("rect") .attr("x", x) .attr("y", marginTop) .attr("width", Math.max(0, x.bandwidth() - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", color); tickAdjust = () => {}; } svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(tickAdjust) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", marginLeft) .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .text(title)); return svg.node(); }53:[{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1606503670799.221,"size":756420},{"id":"586720f29683fe683b2cf5075e093e3a8f85f9861e0b1b42b7ee5fde4105886ff3008cc403ccb52f9e1134168c83fc10e8f53b3c1bb294a3a803f65d604857d7","href":"https://static.observableusercontent.com/files/586720f29683fe683b2cf5075e093e3a8f85f9861e0b1b42b7ee5fde4105886ff3008cc403ccb52f9e1134168c83fc10e8f53b3c1bb294a3a803f65d604857d7","name":"Observable Suicide Data.csv","type":"text/csv","lastModified":1606503736480.672,"size":994118},{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m@1.json","type":"application/json","lastModified":1607456390634.427,"size":756420},{"id":"d61b54b76e46e436a5fd7c2f6592f0bf8ec6966d52d09cc288703d4c4a238fcfa15e1132db20596ca6ee1c26b14aad9dc43f7f32339ff45c5eb7fd451c9c5cfc","href":"https://static.observableusercontent.com/files/d61b54b76e46e436a5fd7c2f6592f0bf8ec6966d52d09cc288703d4c4a238fcfa15e1132db20596ca6ee1c26b14aad9dc43f7f32339ff45c5eb7fd451c9c5cfc","name":"Observable Suicide Data with Continents.csv","type":"text/csv","lastModified":1607641746014.82,"size":1061718},{"id":"ac1176ec8425ff04088bec7742b672de2f3abd4db94554f979530a3fe16c7a32d9e0cebbb21039512962608254a0804baf6d4157d8914c2c02a7abaf93f88e87","href":"https://static.observableusercontent.com/files/ac1176ec8425ff04088bec7742b672de2f3abd4db94554f979530a3fe16c7a32d9e0cebbb21039512962608254a0804baf6d4157d8914c2c02a7abaf93f88e87","name":"Observable Suicide Data with Continents@1.csv","type":"text/csv","lastModified":1607646708133.851,"size":1060938}] 47:{"id":"9c576b4f27f8d926","slug":"suicide-profiles","title":"Suicide Profiles","thumbnail":"483cc69d3f1b5777a6a8772e66d439574a6c6e5e4aac71c36c177d31adda2c32","access_level":"public","create_time":"$D2020-11-27T19:00:40.682Z","update_time":"$D2020-12-11T03:13:14.406Z","view_time":null,"first_public_time":"$D2020-12-08T17:53:02.805Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"a1e0fa449df00fc3","login":"stnachts","name":"Stephen Nachtsheim","avatar_url":"https://avatars-next.observableusercontent.com/9692acc3ebba92b1f767dd69ddcde566170ab3562d70bd86007fbb3d2c54ae47","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1897,"publish_version":1897,"role":null,"authored":false,"authors":[{"type":"individual","id":"a9fa082a4a2afaee","login":"stnachts","name":"Stephen Nachtsheim","avatar_url":"https://avatars-next.observableusercontent.com/9692acc3ebba92b1f767dd69ddcde566170ab3562d70bd86007fbb3d2c54ae47","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"a9fa082a4a2afaee","login":"stnachts","name":"Stephen Nachtsheim","avatar_url":"https://avatars-next.observableusercontent.com/9692acc3ebba92b1f767dd69ddcde566170ab3562d70bd86007fbb3d2c54ae47","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Suicide Profiles","cells":[{"id":0,"value":"md`# Suicide Profiles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"md`## Figures `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1817,"value":"md`\nI made this interactive visualization to look at general data concerning suicide throughout the world. \nEach visualization has a bubble option that changes the data presented in the graph. In order to look at the data in the graph, hover over the interested element. \n\nYou can also adjust the year selected using the sliders.\n\nClick on a country in order to select it for more statistics. Click on the white to reset to global.\nScroll down for more data about your selected country.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"viewof mapShows = radio({\n title: 'Map shows the following',\n options: [\n { label: 'Suicides per capita', value: 'suicides-per-capita'},\n { label: 'Suicides by Firearms per capita', value: 'firearms-per-capita'},\n { label: 'Mental Illness per capita', value: 'mental-per-capita'},\n { label: 'Male to Female Suicide Ratio', value: 'MtoF-ratio'}\n ],\n value: 'suicides-per-capita'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"viewof a3 = slider({\n min: 2000, \n max: 2019, \n step: 1, \n value: 2019, \n title: \"Year\", \n description: \"2000 - 2019\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":197,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1855,"value":"md ` ### Bar Chart\n\nThis shows statistics as male vs female for the country selected above. The data can be changed by clicking the bubbles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1197,"value":"viewof barShows = radio({\n title: 'The Bar Graph shows the following:',\n options: [\n { label: 'Suicides by Sex', value: 'suicides-by-sex'},\n { label: 'Suicides by Firearms by Sex', value: 'firearms-by-sex'},\n { label: 'Mental Illness by Sex', value: 'mental-by-sex'}\n ],\n value: 'suicides-by-sex'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"chart3 = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-10, 0, width, height]);\n\n svg.append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\")\n .data(BarSelected)\n .join(\"rect\")\n .attr(\"x\", (d, i) => x(i))\n .attr(\"y\", d => y(d.value))\n .attr(\"fill\", (d, i) => d.color)\n .attr(\"height\", d => y(0) - y(d.value))\n .attr(\"width\", x.bandwidth())\n .attr(\"id\", \"rect\")\n .on('mouseover', function(){\n d3.select(this)\n })\n .on('mouseout', function(){\n d3.select(this)\n .transition()\n .attr('fill', (d, i) => d.color)})\n .append('title')\n .text(d => ((d.value).toFixed(2)) + \" suicides per capita\")\n\n svg.append(\"g\")\n .call(barTitle);\n \n svg.append(\"g\")\n .call(xAxis);\n \n svg.selectAll(\"text\")\n .attr(\"font-size\", \"25px\")\n\n svg.append(\"g\")\n .call(yAxis);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1849,"value":"md ` ### Scatterplot\n\nThis scatterplot can be interacted with by hovering over the continents on the right and changing the data and year`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1680,"value":"viewof scatterShows = radio({\n title: 'The compares the following against suicides per capita:',\n options: [\n { label: 'Happiness Ladder', value: 'Happiness'},\n { label: 'Mental Illness per capita', value: 'AllMental'},\n { label: 'Percent of Total Government Budget as Health Spending', value: 'PercentasHealthSpending'}\n ],\n value: 'Happiness'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1256,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1618,"value":"{\n yield html`\n

`;\n drawBubbles();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1833,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"md`\n# Code\n\nBelow is the code that the above charts reference.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"md`## Mutables`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"mutable selectedCountry = \"Global\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"mutable selectedYear = a3 // d3.max(data, d => d.Year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"mutable mounted = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"md`## Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"activeTitle = {\n let titleString = \"Suicides per Capita in \";\n \n if (mapShows == \"firearms-per-capita\") {\n titleString = \"Suicides by Firearms in \"; }\n else if (mapShows == \"mental-per-capita\") {\n titleString = \"Mental Illness per Capita in \"; }\n else if (mapShows == \"MtoF-ratio\") {\n titleString = \"Male to Female Ratio of Suicides in \"}\n \n \n titleString += selectedYear;\n \n return titleString;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"md`## Pies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"md`### Firearm Pie`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"firearmSelected = filterSelected(FirearmCache)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"firearmNonFirearmSelected = firearmSelected.concat(nonFirearmSelected)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"nonFirearmSelected = filterSelected(nonFirearmCache)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"firearmPercentSelected = filterSelected(percentCache)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"firearmPercentText = (firearmPercentSelected[0].value * 100).toFixed(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"FirearmColor = d3.scaleOrdinal()\n .domain([\"firearm\", \"nonfirearm\"])\n .range([\"#E31A1C\", \"gray\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1373,"value":"MtoFColor = d3.scaleOrdinal()\n .domain([\"male\", \"female\"])\n .range([\"#41ab5d\", \"gray\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"md`### Mental Disorder Pie`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"mentalSelected = filterSelected(mentalCache)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"MentalColor = d3.scaleOrdinal()\n .domain([\"mental\", \"nomental\"])\n .range([\"#46B1C9\", \"gray\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1037,"value":"filterSelected = \n cache => (cache.get(selectedCountry).filter(d => d.year == selectedYear))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"yearData = data.filter(d => d.Year == barYear)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1675,"value":"NullFilter = yearData.filter(d => d[scatterShows] != null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1688,"value":"yMax = Math.round((d3.max(NullFilter, d => d[scatterShows]))*1.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1737,"value":"yMin = {if (scatterShows == \"Happiness\") {return 2}\n else if (scatterShows == \"AllMental\") {return 8000}\n else {return 0}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1708,"value":"yLabel = {\n if (scatterShows == \"Happiness\") {return \"Happiness Ladder\"}\n else if (scatterShows == \"AllMental\") {return \"Mental Illnesses per Capita\"}\n else if (scatterShows == \"PercentasHealthSpending\") {return \"Percent of Budget as Health\"}}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"noMentalSelected = filterSelected(noMentalCache)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"mentalPercentText = (mentalSelected[0].value / 100000 * 100).toFixed(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":862,"value":"mentalYearPercent = mentalSelected.concat(noMentalSelected)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1366,"value":"MSuicideSelected = filterSelected(MSuicideCache)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1368,"value":"FSuicideSelected = filterSelected(FSuicideCache)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1370,"value":"MtoFSuicideSelected = MSuicideSelected.concat(FSuicideSelected)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1380,"value":"MtoFSuicidePercent = ((MSuicideSelected[0].value / (MSuicideSelected[0].value + FSuicideSelected[0].value))*100).toFixed(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1787,"value":"md`### Male to Female Pie`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"md`### General Pie`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"arc = {\n const radius = Math.min(width, height) / 5;\n return d3.arc().innerRadius(radius * 0.67).outerRadius(radius - 1);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"pie = d3.pie()\n .padAngle(0.005)\n .sort(null)\n .value(d => d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"height = Math.min(width, 500)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":958,"value":"md `## Bar Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"x = d3.scaleBand()\n .domain(d3.range(BarSelected.length))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(BarSelected, d => d.value)]).nice()\n .range([height - margin.bottom, margin.top + 25])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickFormat(i => BarSelected[i].name).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":961,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, BarSelected.format))\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(yTitle))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1230,"value":"barTitle = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(g => g.append(\"text\")\n .attr(\"x\", (width / 2))\n .attr(\"y\", margin.top)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"middle\")\n .text(barTitleText))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1234,"value":"barTitleText = {\n let title = (\"Suicides per Capita by Sex in \" + selectedCountry + \" in \" + selectedYear);\n \n if (barShows == \"firearms-by-sex\") {\n title = (\"Firearm Suicides per Capita by Sex in \" + selectedCountry + \" in \" + selectedYear); }\n else if (barShows == \"mental-by-sex\") {\n title = (\"Mental Illness per Capita by Sex in \" + selectedCountry + \" in \" + selectedYear);}\n \n return title;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"mutable barYear = a4 // d3.max(data, d => d.Year)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"barcolor = \"steelblue\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"yTitle = {\n let title = \"Suicides per Capita\";\n \n if (barShows == \"firearms-by-sex\") {\n title = \"Firearm Suicides per Capita\"; }\n else if (barShows == \"mental-by-sex\") {\n title = \"Mental Illness per capita\";}\n \n return title;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"MFSuicideSelected = concatSelected(MSuicideCache,FSuicideCache)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1209,"value":"MFFirearmSelected = concatSelected(MFirearmCache,FFirearmCache)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1211,"value":"MFMentalSelected = concatSelected(MMentalCache, FMentalCache)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1213,"value":"BarSelected = {\n let selected = MFSuicideSelected;\n \n if (barShows == \"firearms-by-sex\") {\n selected = MFFirearmSelected; }\n else if (barShows == \"mental-by-sex\") {\n selected = MFMentalSelected;}\n \n return selected;\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"concatSelected = \n (selected1, selected2) => (selected1.get(selectedCountry).filter(d => d.year == barYear)).concat((selected2.get(selectedCountry).filter(d => d.year == barYear)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1828,"value":"md`## Scatterplot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1614,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"md`## Caches`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"SuicideCache = {\n const cache = new Map();\n \n for (const country of allCountries) {\n cache.set(\n country,\n data\n .filter(row => row.Country === country)\n .map(row => ({ year: row.Year, value: row.AllSuicide }))\n );\n }\n \n return cache;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1313,"value":"SuicideYearCache = {\n const cache = new Map();\n \n for (const country of allCountries) {\n cache.set(\n country,\n data\n .filter(row => row.Country === country)\n .map(row => ({ year: row.Year, value: row.AllSuicide }))\n );\n }\n \n return cache;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"yearFilter = \n y => (y.get(barYear))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"FirearmCache = {\n const cache = new Map();\n \n for (const country of allCountries) {\n cache.set(\n country,\n data\n .filter(row => row.Country === country)\n .map(row => ({ year: row.Year, name: \"firearm\", value: row.AllFirearm}))\n );\n }\n \n return cache;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"nonFirearmCache = {\n const cache = new Map();\n \n for (const country of allCountries) {\n cache.set(\n country,\n data\n .filter(row => row.Country === country)\n .map(row => ({ year: row.Year, name: \"nonfirearm\", value: (row.AllSuicide - row.AllFirearm)}))\n );\n }\n \n return cache;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"percentCache = {\n const cache = new Map();\n \n for (const country of allCountries) {\n cache.set(\n country,\n data\n .filter(row => row.Country === country)\n .map(row => ({ year: row.Year, name: \"PercentFirearm\", value: row.PercentFirearm}))\n );\n }\n \n return cache;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"mentalCache = {\n const cache = new Map();\n \n for (const country of allCountries) {\n cache.set(\n country,\n data\n .filter(row => row.Country === country)\n .map(row => ({ year: row.Year, name: \"MentalDisorder\", value: row.AllMental}))\n );\n }\n \n return cache;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"noMentalCache = {\n const cache = new Map();\n \n for (const country of allCountries) {\n cache.set(\n country,\n data\n .filter(row => row.Country === country)\n .map(row => ({ year: row.Year, name: \"NoMentalDisorder\", value: (100000 - row.AllMental)}))\n );\n }\n \n return cache;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"MSuicideCache = {\n const cache = new Map();\n \n for (const country of allCountries) {\n cache.set(\n country,\n data\n .filter(row => row.Country === country)\n .map(row => ({ year: row.Year, name: \"Male\", value: (row.MSuicide), color: MColor}))\n );\n }\n \n return cache;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1006,"value":"MFirearmCache = {\n const cache = new Map();\n \n for (const country of allCountries) {\n cache.set(\n country,\n data\n .filter(row => row.Country === country)\n .map(row => ({ year: row.Year, name: \"Male\", value: (row.MFirearm), color: MColor}))\n );\n }\n \n return cache;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"MMentalCache = {\n const cache = new Map();\n \n for (const country of allCountries) {\n cache.set(\n country,\n data\n .filter(row => row.Country === country)\n .map(row => ({ year: row.Year, name: \"Male\", value: (row.MMental), color: MColor}))\n );\n }\n \n return cache;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"value":"FSuicideCache = {\n const cache = new Map();\n \n for (const country of allCountries) {\n cache.set(\n country,\n data\n .filter(row => row.Country === country)\n .map(row => ({ year: row.Year, name: \"Female\", value: (row.FSuicide), color: FColor}))\n );\n }\n \n return cache;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1016,"value":"FFirearmCache = {\n const cache = new Map();\n \n for (const country of allCountries) {\n cache.set(\n country,\n data\n .filter(row => row.Country === country)\n .map(row => ({ year: row.Year, name: \"Female\", value: (row.FFirearm), color: FColor}))\n );\n }\n \n return cache;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1020,"value":"FMentalCache = {\n const cache = new Map();\n \n for (const country of allCountries) {\n cache.set(\n country,\n data\n .filter(row => row.Country === country)\n .map(row => ({ year: row.Year, name: \"Female\", value: (row.FMental), color: FColor}))\n );\n }\n \n return cache;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1653,"value":"HappinessCache = {\n const cache = new Map();\n \n for (const country of allCountries) {\n cache.set(\n country,\n data\n .filter(row => row.Country === country)\n .map(row => ({ year: row.Year, name: \"Life Ladder\", value: (row.Happiness), Continent: (row.Continent)}))\n );\n }\n \n return cache;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"MColor = \"#94C9A9\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1013,"value":"FColor = \"#E9D2F4\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"md`## Selected Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = d3.csvParse(await FileAttachment(\"Observable Suicide Data with Continents@1.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1320,"value":"barData = data.filter(d => d.Year == barYear)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"world = FileAttachment(\"countries-50m@1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"worldwithoutantartica = world.objects.countries.geometries.filter(country => country.properties.name != \"Antarctica\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"colors = ({\n suicide: \"#ffaaa5\",\n firearm: \"#ff4d4d\",\n mental: \"#081d58\",\n casesFaded: \"#ffd5d2\",\n deathsFaded: \"#ffa6a6\",\n highlight: \"black\",\n grey1: \"#f5f5f5\",\n grey2: \"#e8e8e8\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"viewbox = ({ x: 0, y: 0, width:1000, height: 550})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"viewbox1 = ({ x: 0, y: 0, width:1000, height: 550})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"viewbox2 = ({ x: 500, y: 0, width:500, height: 500})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"margin = ({ top: 20, right: 50, bottom: 60, left: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"aspectRatio = viewbox.width / viewbox.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\", \"d3-array@2\", \"d3-random@2\", \"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"topojson = require(\"topojson@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"import {radio, slider, autoSelect, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1517,"value":"function ramp(color, n = 256) {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n for (let i = 0; i < n; ++i) {\n context.fillStyle = color(i / (n - 1));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"isTouchCapableDevice = 'ontouchstart' in window","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"md`## Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1621,"value":"html``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W53","stdlib":"1"}} 24:null