2f:T11b3,viewof map = { // Set up empty value, used to store the value of the item clicked (e.g. state/province name, id) let value = null; const reverseOpacity = 0.2; // Define a projection const projection = d3.geoAlbers() .rotate([96, 0]) .center([-.6, 54.5]) .scale(1200) .translate([487.5, 305]); // Create a path generator with the projection const path = d3.geoPath().projection(projection); // Create the SVG element const svg = d3.create("svg") .attr("viewBox", [0, 350, 1000, 570]); const states = svg.append("g").attr("class", "states") // Outline of the United States states .attr("fill", "#DFDFDF") .attr("stroke", "white") .selectAll("path") .data(usGeo.features) .enter().append("path") .attr("d", path) .attr("z-index", 0) .on("mouseover", (event, d) => { // Highlight the hovered circle d3.select(event.currentTarget).attr("fill", "#D3D3D3"); city.selectAll("text").style("visibility","hidden") const state = d.properties.name tooltip.style("visibility", "visible") .html(createStateTooltip(state, guns)) circleGroup .selectAll("circle") .filter(x => x.state != state) .attr("opacity", reverseOpacity); }) .on("mouseout", () => { // Restore opacity of all circles tooltip.style("visibility", "hidden") states.selectAll("path").attr("fill", "#DFDFDF"); city.selectAll("text").style("visibility","visible") circleGroup .selectAll("circle") .attr("opacity", 0.8); }) .on('mousemove', (event) => { tooltip.style("top", (event.pageY - 10) + "px").style("left", (event.pageX + 10) + "px")} ); const colorData = guns.map((d) => d[inputs.selectColor]); const minColor = Math.min(...colorData); const maxColor = Math.max(...colorData); // Define the number of thresholds (breaks) you want on the log scale const numThresholds = 6; // Create a color scale with a logarithmic domain const colorScale = d3.scaleThreshold() .domain(d3.range(0, numThresholds + 1).map(i => { return Math.exp((i / numThresholds) * Math.log(maxColor - minColor + 1)) + minColor - 1; })) .range(d3.schemeOranges[7]); // Get the list of data points for incidents value and find the max and min const radiusData = guns.map((d) => d[inputs.selectRadius]); const maxRadius = Math.max(...radiusData); const minRadius = Math.min(...radiusData); // Create a scale for size const radiusScale = d3.scaleLinear() .domain([minRadius, maxRadius]) .range([5, 25]); // Define the desired range of circle sizes // Create a group for the circles const circleGroup = svg.append("g").attr("class", "circles"); const tooltip = d3.select("body").append("div") .attr("class", "toolTip") .style("position", "absolute") .style("visibility", "hidden") .text("Placeholder"); // Add circles to the circle group circleGroup .selectAll("circle") .data(guns) .enter() .append("circle") .attr("cx", (d) => projection([d.long, d.lat])[0]) .attr("cy", (d) => projection([d.long, d.lat])[1]) .attr("r", (d) => radiusScale(d.incidents)) .attr("fill", d => colorScale(d.victims_killed)) .attr("opacity", 0.8) .attr("stroke", "white") .attr("stroke-width", 1) .attr("z-index", -1) .on("mouseover", (event, d) => { circleGroup.selectAll("circle").attr("opacity", reverseOpacity); d3.select(event.currentTarget).attr("opacity", 0.85); d3.select(event.currentTarget).raise(); city.selectAll("text").style("visibility","hidden") tooltip .style("visibility", "visible") .html(createTooltipText(d.city_state, guns)) }) .on("mouseout", (event, d) => { circleGroup.selectAll("circle").attr("opacity", 0.85); city.selectAll("text").style("visibility","visible") tooltip.style("visibility", "hidden") d3.select(event.currentTarget).lower(); }) .on('mousemove', (event) => { tooltip.style("top", (event.pageY - 10) + "px").style("left", (event.pageX + 10) + "px")} ); const city = svg.append("g").attr("class", "city") city .selectAll("text") .data(worst_cities) .enter() .append("text") .attr("x", (d) => projection([d.long, d.lat])[0]+5) .attr("y", (d) => projection([d.long, d.lat])[1]-3) .text(d => d.city_or_county) .style("visibility",inputs.showCities) return svg.node(); } 30:[{"id":"95ed7cc13c8b0116671719bfca66bcc3646d4d958dec9386bf5157abcce4a740e57f57a74d50c8c3b5969b77af99b224faf6de76296ede419b0690cb3e7d53b9","href":"https://static.observableusercontent.com/files/95ed7cc13c8b0116671719bfca66bcc3646d4d958dec9386bf5157abcce4a740e57f57a74d50c8c3b5969b77af99b224faf6de76296ede419b0690cb3e7d53b9","name":"gun_violence_city_geo.csv","type":"text/csv","lastModified":1699104361170.85,"size":25168},{"id":"da62d18fb431a0365aed29ce5727053478afcc0054403e17445fcc045f25e893954fdf18d6196a9b1fc2e57cb06d61d78c0381a15970ef969f35fbf635913274","href":"https://static.observableusercontent.com/files/da62d18fb431a0365aed29ce5727053478afcc0054403e17445fcc045f25e893954fdf18d6196a9b1fc2e57cb06d61d78c0381a15970ef969f35fbf635913274","name":"us-geo (1).json","type":"application/json","lastModified":1699104556311.837,"size":467838}] 2d:{"title":"D1: Mass Shootings United States 2023","cells":[{"id":0,"value":"

D1: Mass Shootings United States 2023

\nData from Gun Violence Archive as of November 1st, 2023. Casualties includes injuries and fatalities.","pinned":false,"hidden":false,"mode":"md"},{"id":172,"value":"viewof inputs = (Inputs.form({\n selectRadius: Inputs.select(new Map([[\"Incidents\", \"incidents\"],[\"Victims Killed\", \"victims_killed\"],[\"Victims Injured\", \"victims_injured\"]]), {label: \"Radius\", value: \"incidents\"}),\n selectColor: Inputs.select(new Map([[\"Incidents\", \"incidents\"],[\"Casualties\", \"victims_harmed\"],[\"Victims Injured\", \"victims_injured\"]]), {label: \"Color\", value: \"victims_harmed\"}),\n showCities: Inputs.radio(new Map([[\"Show\",\"visible\"],[\"Hide\",\"hidden\"]]), {label:\"Show Cities\", value:\"visible\"})\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"## Tooltip Functions","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"Custom tooltip functions for city hover and state hover.","pinned":false,"hidden":false,"mode":"md"},{"id":254,"value":"function createTooltipText(x, data) {\n const ref = data.filter(d => d.city_state === x)[0];\n\n return `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

${ref.city_or_county}
Incidents	${ref.incidents}
Injured	${ref.victims_injured}
Killed	${ref.victims_killed}

\n `;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"function createStateTooltip(state, data) {\n\n const ref = guns.filter(d=>d.state === state)\n\n const victims_killed = d3.sum(ref, d=>d.victims_killed)\n const incidents = d3.sum(ref, d=>d.incidents)\n const victims_injured = d3.sum(ref, d=>d.victims_injured)\n \n return `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

${state}
Incidents	${incidents}
Injured	${victims_injured}
Killed	${victims_killed}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"## Upload Data\n\n### Gun Violence CSV\nGun violence incidents in the United States by city. Data from the Gun Violence Archive. I used R to get lat long coordinates by city with {tidygeocoder}.","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"gun_violence = await FileAttachment(\"gun_violence_city_geo.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"Subsetting data set to remove Hawaii. Not included in geospatial file.","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"guns = gun_violence.filter(d => d.state !== 'Hawaii')","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"Here I'm subsetting data to get the worst cities based on number of incidents. I'll use this for plotting city text labels.","pinned":false,"hidden":false,"mode":"md"},{"id":69,"value":"worst_cities = guns.sort((a, b) => b.incidents - a.incidents).slice(0,10).filter(d=> d.city_or_county !== 'Washington')","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"Reading in geospatial data.","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"usGeo = FileAttachment(\"us-geo (1).json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":189,"value":"import {Legend, Swatches} from \"@d3/color-legend\"\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}