31:T4b5,terms = Object ({ "General Terms": [ "global warming", "climate change", "rising temperatures", "global temperature", "climate crisis", "sustainable development", "sustainability", "energy consumption", "warming temperatures", "climate system" ], "Causes": [ "fossil fuel", "oil & gas", "greenhouse gas", "greenhouse effect", "pollution", "co2 emission", "carbon dioxide emission", "non-renewable", "atmosphere near carbon dioxide, co2, methane, nitrous oxide", "human near global warming, climate change, climate system" ], "Impact": [ "sea level", "rising temperatures", "global temperature", "ozone layer", "warming effects", "greenhouse effect", "extreme weather event", "polar ice caps", "melting ice", "arctic sea ice", "heat wave", "climate impact" ], "Solutions": [ "renewable energy", "sustainability", "sustainable development", "carbon footprint", "carbon tax", "carbon cutting", "reducing emissions", "cutting emissions", "clean energy", "energy efficiency", "energy efficient", "climate action" ] } )32:[] 2f:{"title":"Newspaper Contour Maps","cells":[{"id":0,"value":"md`# Newspaper Contour Maps`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"md`This chart illustrates the \"media landscape\" around the issue of climate change. The data was scraped from [pressreader.com](https://www.pressreader.com/). The site not only includes the front page of major newspapers, but ties that data to the location on the front page. We gathered data on 15 major newspapers, focusing on obtaining a national perspective:\n* The Washington Post\n* USA Today\n* The Los Angeles Times\n* Houston Chronicle\n* The Denver Post\n* Tampa Bay Times\n* The Philadelphia Inquirer\n* The Baltimore Sun\n* Albuquerque Journal\n* San Francisco Chronicle\n* The Dallas Morning News\n* The Columbus Dispatch\n* Arkansas Democrat-Gazette\n* Atlanta Journal-Constitution\n* Arizona Republic\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"md`We went on to pull as much (front page only) data as possible from the pressreader endpoint for each paper. Once we had this data, cleaned and re-organized the data to allow us to run some crude analysis. Using python, we searched for each of the following terms, rolled up to a certain category. Categories included \"General Terms\", which would just flag climate change discussion, \"Causes\" of the climate crisis, terms associated with the \"Impact\" of the climate crisis, and potential \"Solutions\" of the crisis:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"md`We then cross referenced the results of that search with the location data, to create a dataset that includes the location of climate crisis flagged articles as a proxy for discussion of the crisis in our nation.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"md`Visuals created with observable help from:\n* https://observablehq.com/@d3/density-contours\n* https://observablehq.com/@martgnz/distance-limited-interaction-with-d3-delaunay`","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"md`## Resulting Visual`","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"viewof paper_selection = select({\n title: \"Paper Selection\",\n description: \"select a paper to view\",\n options: Array.from(data.keys()),\n value: \"The Washington Post\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"viewof year_selection = select({\n title: \"Year Selection\",\n description: \"select a year to populate the contour map\",\n options: [...Object.keys(paper_data['dates']), \"all years\"],\n value: \"all years\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"container = html`\n

\n ${paper_mast}\n ${chart}\n ${tooltip}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"md`## Approach and Process`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"chart = {\n const svg = d3.select(DOM.svg(view_width, view_height))\n .attr('class', 'contour_svg')\n .style('max-width', '100%')\n .style('height', 'auto')\n \n const g = svg\n .append('g')\n \n const contour_g = g.append(\"g\")\n .attr(\"fill\", \"none\")\n .selectAll(\".contour\")\n .data(contours)\n .join(\"g\");\n \n contour_g.append(\"path\")\n .attr(\"class\", \"contour\")\n .attr(\"d\", d3.geoPath())\n .attr(\"stroke-width\", (d, i) => i % 5 ? 0.25 : 1)\n .style(\"stroke\", \"black\") \n .attr(\"fill\", d => colorScale(d.value))\n \n const circle_g = g.append(\"g\")\n .data([contour_data])\n .selectAll(\"circle\")\n .data(d => d)\n .join(\"circle\")\n .attr('class', d => hover && hover.title === d.title ? \"hovered\" : null)\n .attr(\"cx\", d => x(d.x))\n .attr(\"cy\", d => y(d.y))\n .attr(\"r\", 1)\n \n g.append('g').call(rect);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"paper_mast = {\n const div = d3.create('div')\n .attr('class','mast')\n .html(mast_code)\n \n return div.node()\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"x = d3.scaleLinear()\n .domain([0, paper_data.width])\n .range([0, view_width])","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"y = d3.scaleLinear()\n .domain([0, paper_data.height])\n .range([0, view_height])","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"contour = d3.contourDensity()\n .x(d => x(d.x))\n .y(d => y(d.y))\n .size([view_width, view_height])","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"contour_data = {\n if (year_selection === \"all years\") {\n return Object.values(paper_data['dates']).flat()\n }\n return paper_data['dates'][year_selection]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"paper_data = data.get(paper_selection)","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"mast_code = masthead_mapping.get(paper_selection).catch(() => console.log(`no masthead for ${paper_selection}`))","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"contours = contour(contour_data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"md`## Helpful Definitions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"// paper_height = (paper_data.height / paper_data.width) * width\nview_height = paper_data.height / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"// paper_width = (window.innerHeight - 100) * (paper_data.width / paper_data.height)\nview_width = paper_data.width / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"colors = [\"#fff\", \"#fed976\", \"#feb24c\", \"#fd8d3c\", \"#fc4e2a\", \"#e31a1c\", \"#bd0026\", \"#800026\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":568,"value":"linearColorScale = d3.scaleLinear()\n .domain(d3.range(0,1,1/colors.length))\n .range(colors)\n .interpolate(d3.interpolateLab);","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"ramp(linearColorScale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"colorScale = d3.scaleOrdinal()\n .domain(contours.map(d => d.value))\n .range(d3.quantize(linearColorScale, (contours.map(d => d.value).length)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`## Tooltip Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":609,"value":"import { tooltip, moveTooltip } from '@auchers/tooltip-with-tail'","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"voronoi = d3.voronoi()\n .x(d => x(d.x))\n .y(d => y(d.y))\n .extent([[0,0], [view_width, view_height]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"delaunay = d3.Delaunay.from(contour_data, d => x(d.x), d => y(d.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"rect = g =>\n g\n .append('rect')\n .attr('fill', 'transparent')\n .attr('width', view_width)\n .attr('height', view_height)\n .on('mousemove', mousemoved)\n .on('mouseleave', mouseleft)","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"distance = (px, py, mx, my) => {\n const a = px - mx;\n const b = py - my;\n\n return Math.sqrt(a * a + b * b);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"mutable hover = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"mouseleft = () => {\n d3.select(tooltip).style('display', 'none');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"find = (mx, my) => {\n const idx = delaunay.find(mx, my);\n\n if (idx !== null) {\n const datum = contour_data[idx];\n const d = distance(x(datum.x), y(datum.y), mx, my);\n\n return d < 50 ? datum : null;\n }\n\n return null;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"function mousemoved() {\n const [mx, my] = d3.mouse(d3.select(this).node());\n\n // the mutable keyword is an Observable thing, don't reference it on a normal browser\n // https://observablehq.com/@observablehq/introduction-to-mutable-state\n mutable hover = find(mx, my);\n\n\n if (!hover) return mouseleft();\n\n // quick trick for avoiding the edges in the tooltip\n const xRatio = mx / view_width;\n const yRatio = my / view_height;\n const contentGen = ()=> `