2b:null 2c:["$","title",null,{"children":"Did smartphones kill Bigfoot? | Jake B | Observable"}] 31:T498,Plot.plot({ projection: "albers-usa", width: 975, height: 610, title: "Bigfoot Sightings (1960-2020)", subtitle: view === "Points" ? "Hover over points to see sighting details" : "Density of Bigfoot sightings", style: { backgroundColor: "#f0f4f8", }, color: { scheme: "plasma", type: "log", legend: view === "Heatmap", // only show legend when in heatmap mode label: "Sighting Density →" }, marks: [ // base US map layer, always visible Plot.geo(topojson.feature(us, us.objects.states), { fill: "#ddd", stroke: "#fff", strokeWidth: 0.5 }), // render either points or a heatmap based on the value of `view` view === "Points" ? Plot.dot(bf_data, { x: "longitude", y: "latitude", r: 2, fill: "green", fillOpacity: 0.3, title: d => `${d.title}\nState: ${d.state}\nYear: ${d.year}` }) : Plot.density(bf_data, { x: "longitude", y: "latitude", fill: "density", stroke: null, fillOpacity: 0.6, bandwidth: 15, thresholds: 20 }) ] })32:Tc94, chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const x = d3.scaleBand() .range([margin.left, width - margin.right]) .padding(0.1); const y = d3.scaleLinear() .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .call(g => g.selectAll(".tick text") .attr("transform", "rotate(-45)") .style("text-anchor", "end")); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()); function update(data, yValue) { // Sort the data data.sort((a, b) => d3.descending(a[yValue], b[yValue])); // Update domains x.domain(data.map(d => d.state)); y.domain([0, d3.max(data, d => d[yValue])]).nice(); // Update axes svg.select(".x-axis").transition().duration(1000).call(xAxis); svg.select(".y-axis").transition().duration(1000).call(yAxis); // Update bars const bars = svg.selectAll(".bar") .data(data, d => d.state) .join( enter => enter.append("rect") .attr("class", "bar") .attr("y", height - margin.bottom) .attr("height", 0), update => update, exit => exit.remove() ) .attr("fill", "steelblue"); bars.transition() .duration(1000) .attr("x", d => x(d.state)) .attr("width", x.bandwidth()) .attr("y", d => y(d[yValue])) .attr("height", d => y(0) - y(d[yValue])); // Update labels const labels = svg.selectAll(".label") .data(data, d => d.state) .join( enter => enter.append("text") .attr("class", "label") .attr("y", height - margin.bottom), update => update, exit => exit.remove() ) .attr("text-anchor", "middle") .attr("fill", "black") .attr("font-size", "10px") .attr("font-weight", "bold"); labels.transition() .duration(1000) .attr("x", d => x(d.state) + x.bandwidth() / 2) .attr("y", d => y(d[yValue]) - 5) .text(d => d[yValue].toFixed(yValue === "sightingsPerCapita" ? 2 : 0)) .attr("font-size", yValue === "sightingsPerCapita" ? "8px" : "10px"); // Smaller font for per capita // Update y-axis label and chart title svg.select(".y-axis-label") .text(yValue === "sightingsPerCapita" ? "Sightings per 100k" : "Number of Sightings"); svg.select(".chart-title") .text(yValue === "sightingsPerCapita" ? "Bigfoot Sightings per State (per 100,000 population)" : "Bigfoot Sightings per State"); } svg.append("g") .attr("class", "x-axis"); svg.append("g") .attr("class", "y-axis"); svg.append("text") .attr("class", "y-axis-label") .attr("transform", "rotate(-90)") .attr("y", 0) .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle"); svg.append("text") .attr("class", "chart-title") .attr("x", width / 2) .attr("y", 20) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold"); // Initial update update(sightingsPerState, "count"); return Object.assign(svg.node(), { update }); } 33:T91e,Plot.plot({ marginLeft: 50, marginRight: 40, marginTop: 30, marginBottom: 40, width: 1200, height: 500, style: { backgroundColor: "#f0f4f8", fontSize: 12, }, title: "Bigfoot Sightings per Year", subtitle: "Hover over points for precise value", x: { label: null, tickFormat: "d", ticks: d3.range(1960, 2030, 10), grid: true, line: true, }, y: { label: null, grid: true, }, marks: [ Plot.ruleY([0]), Plot.lineY(sightingsPerYearArray, { x: "year", y: "count", stroke: "#8B4513", strokeWidth: 1.5, }), Plot.dot(sightingsPerYearArray, { x: "year", y: "count", fill: "#8B4513", r: 5, title: d => `Year: ${d.year}\nSightings: ${d.count}`, // Add this line for tooltip }), // Add vertical lines and labels for events Plot.ruleX([1967], {stroke: "#4169E1", strokeWidth: 1, strokeDasharray: "5,5", y2: d => maxCount}), Plot.text([{year: 1967, count: maxCount, text: "The Patterson-Gimlin Film gains popularity (1967)"}], { x: "year", y: "count", text: "text", fill: "#4169E1", fontSize: 10, dy: -10, dx: -70, textAnchor: "start" }), Plot.ruleX([1976], {stroke: "#228B22", strokeWidth: 1, strokeDasharray: "5,5", y2: d => maxCount * 0.75}), Plot.text([{year: 1976, count: maxCount * 0.75, text: "Sasquatch, the Legend of Bigfoot released (1976)"}], { x: "year", y: "count", text: "text", fill: "#228B22", fontSize: 10, dy: -10, textAnchor: "middle" }), Plot.ruleX([1995], {stroke: "#FF8C00", strokeWidth: 1, strokeDasharray: "5,5", y2: d => maxCount * 0.5}), Plot.text([{year: 1995, count: maxCount * 0.5, text: "Widespread internet usage takes off"}], { x: "year", y: "count", text: "text", fill: "#FF8C00", fontSize: 10, dy: -10, textAnchor: "end" }), Plot.ruleX([2004], {stroke: "#FF4500", strokeWidth: 1, strokeDasharray: "5,5", y2: d => maxCount * 1.0}), Plot.text([{year: 2004, count: maxCount * 1.01, text: ">50% phone sales with camera (2004)"}], { x: "year", y: "count", text: "text", fill: "#FF4500", fontSize: 10, dy: -10, dx: 120, textAnchor: "end" }), ] })34:[{"id":"1e22150c8854ff0603a1c2377c6a90c501038221bf29fe05532897b88b5f58b246072e18a2e88a1a013c642f2fde89bfb52da7c84601c2e5a710163d84bf5eb1","href":"https://static.observableusercontent.com/files/1e22150c8854ff0603a1c2377c6a90c501038221bf29fe05532897b88b5f58b246072e18a2e88a1a013c642f2fde89bfb52da7c84601c2e5a710163d84bf5eb1","name":"bf_data_main.csv","type":"text/csv","lastModified":1724882490551.529,"size":609766},{"id":"e48bb0d2a1c0100dd1c6ddc630ab180cd5ec49868ce719ebdc12961fa8198aaa30e3bbca1855bd6fc0a1d7741e5ddf49c3a674427ae46bc2c414ce984ffef911","href":"https://static.observableusercontent.com/files/e48bb0d2a1c0100dd1c6ddc630ab180cd5ec49868ce719ebdc12961fa8198aaa30e3bbca1855bd6fc0a1d7741e5ddf49c3a674427ae46bc2c414ce984ffef911","name":"us-state-populations.csv","type":"text/csv","lastModified":1724884700608.979,"size":1074},{"id":"40721a716ba086b538f159f9f4983069c9e4619e32d705780e5631b243c4f99b0bd03f79f6572a5a569192e4c57e04af032d52e256f2da8711a6b7ea13bd655f","href":"https://static.observableusercontent.com/files/40721a716ba086b538f159f9f4983069c9e4619e32d705780e5631b243c4f99b0bd03f79f6572a5a569192e4c57e04af032d52e256f2da8711a6b7ea13bd655f","name":"states_pop_2000.csv","type":"text/csv","lastModified":1724890434708.841,"size":967}] 2f:{"id":"c02d49ec518a0d91","slug":null,"title":"Did smartphones kill Bigfoot?","thumbnail":"11252077c59427a7343b35064b419ca78bd96e0304ad7578289c9b4b29239239","access_level":"public","create_time":"$D2024-08-28T22:01:03.729Z","update_time":"$D2025-09-17T17:38:07.635Z","view_time":null,"first_public_time":"$D2024-08-28T22:28:49.149Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"5a9ac850accc0178","login":"cake-dev","name":"Jake B","avatar_url":"https://avatars-next.observableusercontent.com/a7d47fb45c877841ea48659aeb46d11bbe909d07d4d6be4a45fe99b33ecc6398","tier":"starter_2024"},"version":368,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"02f28052cc95d87e","login":"cake-dev","name":"Jake B","avatar_url":"https://avatars-next.observableusercontent.com/a7d47fb45c877841ea48659aeb46d11bbe909d07d4d6be4a45fe99b33ecc6398","tier":null}],"members":[{"type":"individual","id":"02f28052cc95d87e","login":"cake-dev","name":"Jake B","avatar_url":"https://avatars-next.observableusercontent.com/a7d47fb45c877841ea48659aeb46d11bbe909d07d4d6be4a45fe99b33ecc6398","tier":null,"role":"editor"},{"type":"team","id":"5a9ac850accc0178","login":"cake-dev","name":"Jake B","avatar_url":"https://avatars-next.observableusercontent.com/a7d47fb45c877841ea48659aeb46d11bbe909d07d4d6be4a45fe99b33ecc6398","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Did smartphones kill Bigfoot?","cells":[{"id":0,"value":"# Did smartphones kill Bigfoot?\n\nAn exploration of how the ubiquity of smartphone cameras and internet usage has impacted reported Bigfoot sightings.\n\nIn this notebook, we'll analyze:\n\n1. Historical Bigfoot sighting data\n2. Smartphone adoption rates\n3. Changes in reported sightings over time\n\nLet's dive in and see if we can uncover any correlations between these technological changes and our elusive forest friend.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":165,"value":"\n \n Sources\n \n \n \n \n \n \n \n \n \n \n

BFRO Sightings Data
Americans\n Going Online...Explosive Growth, Uncertain Destinations
A complete history of the camera\n phone

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":262,"value":"### First we take a look at all reported sightings from 1960 to 2020","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":354,"value":"viewof view = Inputs.radio([\"Points\", \"Heatmap\"], {\n label: \"Display Mode\",\n value: \"Points\" // default view when the notebook loads\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"

Now here's a look at total sightings per state.

\nYou can sort by total sightings or by sightings per capita (uses 2000 population data so not 100% accurate, I'm lazy)","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":104,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"#### Check below to change views","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"viewof showPerCapita = Inputs.toggle({\n label: \"Show sightings per 100k population\", \n value: false,\n fontSize: 60, // Increased font size,\n id: \"showPerCapitaLabel\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"

Finally, we chart Bigfoot sightings over time

\nThe annotations mark events relevant to the question \"Did smartphones kill Bigfoot?\"\n
\nFrom this view, one may conclude that the answer is ... yes! (kind of)","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"// this enables hover tooltips when title is set\nimport {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"// Update chart when toggle changes\n{\n chart.update(showPerCapita ? sightingsPerCapita : sightingsPerState, \n showPerCapita ? \"sightingsPerCapita\" : \"count\");\n return chart;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"import { delay } from '@observablehq/stdlib'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"// Assuming sightingsPerState and sightingsPerCapita are already defined\nwidth = 1000\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"margin = ({top: 60, right: 40, bottom: 70, left: 120})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"// Plot configuration\nplotConfig = ({\n marginLeft: 120,\n marginBottom: 70,\n marginTop: 60,\n marginRight: 40,\n width: 1000,\n height: 600,\n x: {\n label: \"State\",\n tickRotate: -45,\n labelAnchor: \"center\",\n padding: 0.5\n },\n y: {\n grid: true\n },\n color: {\n range: [\"#3b82f6\"]\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"maxCount = Math.max(...sightingsPerYearArray.map(d => d.count));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"// First, load the USA GeoJSON data\nus = await d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json\");\n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"// Convert the GeoJSON to features\nstates = topojson.feature(us, us.objects.states);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"bf_data_main = await FileAttachment(\"bf_data_main.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"bf_data_main","database":"$undefined"},{"id":6,"value":"bf_data = bf_data_main","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"sightingsPerYear = bf_data\n // 1. Map: Extract the year from each sighting\n .map(bf_data => bf_data.year)\n // 2. Reduce: Count occurrences of each year\n .reduce((acc, year) => {\n acc[year] = (acc[year] || 0) + 1;\n return acc;\n }, {});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"sightingsPerState = Object.entries(\n bf_data\n .map(item => item.state)\n .reduce((acc, state) => {\n acc[state] = (acc[state] || 0) + 1;\n return acc;\n }, {})\n)\n .map(([state, count]) => ({state, count}))\n .sort((a, b) => b.count - a.count);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"sightingsPerYearArray = Object.entries(sightingsPerYear)\n .map(([year, count]) => ({year: +year, count}))\n .sort((a, b) => a.year - b.year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"usStatePopulations = await FileAttachment(\"us-state-populations.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"usStatePopulations","database":"$undefined"},{"id":270,"value":"states_pop_2000 = await FileAttachment(\"states_pop_2000.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"states_pop_2000","database":"$undefined"},{"id":90,"value":"state_populations = states_pop_2000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"populationMap = state_populations.reduce((acc, { State, Population }) => {\n acc[State] = Population;\n return acc;\n}, {});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"sightingsPerCapita = Object.entries(\n bf_data\n .map(item => item.state)\n .reduce((acc, state) => {\n acc[state] = (acc[state] || 0) + 1;\n return acc;\n }, {})\n)\n .map(([state, sightings]) => {\n const population = populationMap[state];\n if (!population) {\n console.warn(`No population data for ${state}`);\n }\n return {\n state,\n sightings,\n population: population || 1, // Use 1 if population data is missing to avoid division by zero\n sightingsPerCapita: (sightings / (population || 1)) * 100000 // Per 100,000 people\n };\n })\n .sort((a, b) => b.sightingsPerCapita - a.sightingsPerCapita);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"Below is the first draft of the Sightings per Year chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"Plot.plot({\n marginLeft: 50,\n marginRight: 40,\n marginTop: 30,\n marginBottom: 40,\n width: 1200,\n height: 500,\n style: {\n },\n title: \"Bigfoot Sightings per Year\",\n x: {\n label: null,\n grid: true,\n line: true,\n },\n y: {\n label: null,\n grid: true,\n },\n marks: [\n // Plot.ruleY([0]),\n Plot.lineY(sightingsPerYearArray, {\n x: \"year\", \n y: \"count\",\n }),\n // Plot.dot(sightingsPerYearArray, {\n // x: \"year\", \n // y: \"count\",\n // // title: d => `Year: ${d.year}\\nSightings: ${d.count}`, // Add this line for tooltip\n // }),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"Here we have a first attempt at a sightings per state chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"Plot.plot({\n marginLeft: 50,\n marginRight: 40,\n marginTop: 30,\n marginBottom: 80, // Increased to accommodate rotated labels\n width: 1200,\n height: 500,\n style: {\n fontSize: 10 // Adjust font size if needed\n },\n title: \"Bigfoot Sightings per State\",\n x: {\n label: null,\n tickRotate: -45, // Rotate labels for better readability\n tickSize: 5,\n domain: sightingsPerState.map(d => d.state), // Ensure all states are included\n padding: 0.2 // Add padding between bars\n },\n y: {\n label: \"Number of Sightings\",\n grid: true,\n },\n marks: [\n Plot.barY(sightingsPerState, {\n x: \"state\", \n y: \"count\",\n }),\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"