2b:null 2c:["$","title",null,{"children":"UFO Sightings in the United States | Columbia Data Viz Sp21 | Observable"}] 31:T8e7,md`Extraterrestrial sightings and experiences are often accompanied by both intrigue and skepticism, which makes portraying data related to the topic quite difficult. How do you lend seriousness to something that baffles? Is there a way to demystify and ground data that seems, at first glance, random and bizarre? And, even then, how do you avoid providing explanations for what is thought to be unexplainable? With a [dataset of UFO sightings collected by the National UFO Reporting Center](https://www.kaggle.com/NUFORC/ufo-sightings?select=scrubbed.csv), we created visualizations that place exploration and interaction in users’ hands. We display the data in easy-to-use formats for users to parse through and examine. When exploring the area chart by brushing through the decades, one of the most noticeable trends is the consistent summer spikes from 1950 to the mid-1990s. We must avoid assuming the cause of these, but one cannot help but speculate: Could this be because of an increase in air traffic during the summer? Or is the warmer climate preferable for aliens? These spikes disappear completely during the advent and commercialization of the Internet in the mid-1990s, which might allay the skeptic who was previously discomforted by the summer spikes. There are one-off events, as well. The [Phoenix Lights event that occurred on March 13th, 1997](http://www.nuforc.org/EncyclopediaPhoenixLights.htm) saw an enormous surge of sightings in the Arizona and Nevada region that broke the consistent summer phenomenon we saw until then. You can see the regional uptick in the map that accompanies the area chart. This event remains largely unexplained, but some speculate it may have been caused by military aircrafts. Other strange surges in sightings, when accompanied by the map for a geographical explanation, can sometimes be contextualized with weather events. One example is the [Leonids meteor shower that occurred on November 16th, 1999 in the midwest](https://science.nasa.gov/science-news/science-at-nasa/1999/ast17nov99_1/). Brush through the area chart to find the month and observe the huge cluster of sightings in the midwest on the map. Go ahead and explore the following visualizations. Ask yourself questions, then try to find the answers.` 32:T42c,md`## UFO Sightings Tracker Below is an area chart of UFO sightings in the United States from 1950 to 2014. You can use the smaller area below the larger one in order to select a date range. This brushing allows you to focus on UFO sightings for a specific time range. Note that the y-axis also adjusts for the brushed section to better display the data. Below the brushing there is also a map. For whatever section you brush, the map will display all UFO sighting locations for that date range. One particularly interesting trend is that there tend to be many more UFO sightings during summers from the 1950s to the mid-1990s. Use the brushing tool below the area chart to observe these spikes in the summer months. The map below the brushing tool also changes according to the years selected. Hover over a dot on the map to obtain information about the shape of the reported UFO, and the UFO sighting description; the color of the dot indicates the time the sighting took place. As you observe sections of the area chart, note the geographic changes that follow. `33:T43f,map = { const map = vl.markGeoshape({fill: '#000000', stroke: '#fff', strokeWidth: 1, background: "black"}) .data(vl.topojson(usa).feature('states')); // .filter(d => (d.date == focus) //console.log((d3.timeParse("%Y-%m-%d")(looking[0].date))); // var looking_data = looking.filter(x => {focus[0] <= (d3.timeParse("%Y-%m-%d")(x.date))}) var looking_data = datesList.filter( x => { return focus[0] <= x.date && x.date <= focus[1]}); const points = vl.markCircle({size: 16, color: '#3cd070', opacity: 0.35}) //.data(ufo) .data(looking_data) .encode( vl.latitude().fieldQ('lat'), vl.longitude().fieldQ('long'), vl.tooltip(["City", "Shape", "Sighting Description"]), vl.color().fieldN("Time").scale({ range: timeColors }).legend({ orient: "top", title:"Time of Sighting",titleFontSize: 19, labelFontSize:16, labelFont: "Source Serif Pro", titleFont: "Source Serif Pro"}), ); return vl.layer(map, points) .project(vl.projection('albersUsa')) .width(900).height(500) .config({view: {stroke: null}}) .render() }34:Tee9,chartDecadeSlide = { var width = 800; var height = 600; const svg = d3.select(DOM.svg(width, height)) const pack = d3.pack() .size([width - 2, height - 2]) .padding(3) var MinYear = Math.round(YearSlider.range[0]) var MaxYear = Math.round(YearSlider.range[1]) var decadeData = wordData.filter((year) => (year.word.split(",")[1].substring(0,4) >= MinYear) & (year.word.split(",")[1].substring(0,4) <= MaxYear)) var decadeList = new Array(); for (var i = 0; i< decadeData.length; i++) { decadeList.push({word:decadeData[i].word.split(",")[0], ppm:decadeData[i].ppm}); } let counts = decadeList.reduce((prev, curr) => { let count = prev.get(curr.word) || 0; prev.set(curr.word, parseInt(curr.ppm) + count); return prev; }, new Map()); let decadeListClean = [...counts].map(([word, ppm]) => { return {word, ppm} }) var sum = 0; for (var i = 0; i < decadeListClean.length; i++) { sum += decadeListClean[i].ppm; } const extent2 = d3.extent(decadeListClean, d => +d.ppm) const color2 = d3.scaleLinear() .range(["#81d5dd", "#e9b198", "#acd9aa", "#cfb4de", "#d7d09e"]) .interpolate(d3.interpolateHcl) .domain(extent2) const root = pack(d3.hierarchy({children: decadeListClean}) .sum(d => d.ppm)) const leaf = svg.selectAll("g") .data(root.leaves()) .enter().append("g") .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`) .attr("text-anchor", "middle") .on("mouseout", function(d) { d3.select(this) .on('mousemove', nodeMouseOver) .on('mouseout', nodeMouseOut ); function nodeMouseOver(event, d){ toolTip.style("left", event.pageX + 18 + "px") .style("top", event.pageY + 18 + "px") .style("display", "block") .html(`${d.data.word.charAt(0).toUpperCase() + d.data.word.slice(1)} Count: ${d3.format(",")(d.data.ppm)}`) // Optional cursor change on target d3.select(this).style("cursor", "pointer"); // Optional highlight effects on target // console.log(event.path) // console.log(event.srcElement) // console.log(event.target) /* if (event.target.toString() === "[object SVGCircleElement]") { d3.select(event.target) // .transition() .attr('stroke', '#807374') .attr('stroke-width', 3); } */ d3.select(this) // .transition() .attr('stroke', '#807374') .attr('stroke-width', 2); } function nodeMouseOut(event, d){ // Hide tooltip on mouse out toolTip.style("display", "none"); // Hide toolTip // Optional cursor change removed d3.select(this).style("cursor", "default"); // Optional highlight removed d3.select(this) .transition() .attr('stroke', '#fff') .attr('stroke-width', 0); } }) leaf.append("circle") .attr("r", d => d.r) .attr("fill", d => color2(d.data.ppm)) leaf.append('text') .attr("fill", d => d3.hsl(color2(d.data.ppm)).darker(2.6)) .attr("font-size", d => { if (d.data.ppm/sum * 100 > 20) { return 50 } if (d.data.ppm/sum * 100 > 15) { return 40 } if (d.data.ppm/sum * 100 > 10) { return 30 } else if (d.data.ppm/sum * 100 > 5) { return 16 } else if (d.data.ppm/sum * 100 > 1) { return 12 } return 8 }) .text(d => { if (d.data.ppm/sum * 100 > .07) { return d.data.word.split(",")[0] } else if (d.data.ppm > 10) { return format(d.decadeListClean.ppm) } }) .attr('y', 5) return svg.node() } 35:T477,md `## Design One of our initial ideas involved visualizing UFO sightings alongside release dates of sci-fi movies (scraped from [IMDb](https://www.imdb.com/list/ls002479236/)). We explored these two datasets side-by-side but decided to abandon the idea since there was no meaningful intersection between the two topics. We shifted our analysis framework to focus entirely on exploring UFO sightings. Our design for the linked area chart and map was motivated by our desire to effectively show seasonal spikes in sightings during certain decades. If we were to show a concrete area chart from 1950 to 2014, users would not be able to discern the summer spikes due to the enormous surge in data in the early 2000s. To resolve this design issue, we incorporated brushing to allow users to see the entire chart at once as an overview and also focus on certain time periods for deeper analysis. To allow for greater user interaction, we encoded sliders whenever possible as well as tooltips. We also added small touches like a force simulation on the seasonal bubble chart and an inverted color palette for the map to capture users’ interest. `36:T206c,// https://observablehq.com/@bradysheridan/force-beads-respondent-demographic-breakdown function beadClusters() { d3.select("#CircleChart").selectAll("svg").remove() // defined via accessor functions var data, width, height, padding, maxRadius, labelRadius, simulation, velocityDecay = 0.4 // --- chart generator --------------------------------------- function chart(selection) { selection.each(function() { var m = data.groups.length, // total number of clusters n = 0, // total number of nodes clusters = new Array(m), // cluster nodes destination array nodes = [] // all nodes destination array // generate nodes data.groups.forEach((group, i) => { // console.log(group) // count nodes in this group n += group.numNodes // generate nodes in this group var k = 0; let _nodes = d3.range(group.numNodes).map(() => { // console.log(group.numNodes) // console.log(group.size) console.log(i) var r = group.size[k],//Math.sqrt((i + 1) / m * -Math.log(Math.random())) * maxRadius, d = { cluster: i, radius: r, x: Math.cos(i / m * 2 * Math.PI) * (width / 5) + width / 2 + Math.random(), y: Math.sin(i / m * 2 * Math.PI) * (width / 5) + height / 2 + Math.random() } k=k+1 return d }) // console.log(group.size) // generate cluster node that other nodes in this group orbit around let clusterNode = clusters[i] = { isClusterNode: true, key: group.key, label: group.label, cluster: i, radius: labelRadius, x: width / 2, y: height / 2 } // add cluster node to nodes in this group _nodes.push(clusterNode) // add nodes in this group to all nodes nodes = nodes.concat(_nodes) }) console.log(nodes) // define color scale corresponding to clusters var color = ["#faf19d","#3bbc9b", "#b97ebb", "#2d3e50"]; // define separate forces var forceCenter = d3.forceCenter(width / 2, height / 2), forceCluster = d3.forceCluster().centers((d) => clusters[d.cluster]).strength(0.5), forceCollide = d3.forceCollide((d) => d.radius + padding) // compose simulation with all forces simulation = d3.forceSimulation() .force('center', forceCenter) .force('cluster', forceCluster) .force('collide', forceCollide) .velocityDecay(velocityDecay) .on('tick', tick) .nodes(nodes) // set up svg var svg = selection.append('svg') .attr('width', width) .attr('height', height) var nodeElements = svg.append('g') .attr('class', 'nodes') .selectAll('circle') .data(nodes) .enter().append('circle') // .style('fill', (d) => (d.isClusterNode) ? 'none' : color(d.cluster / 10)) .style("fill", function (d) { if (d.isClusterNode) return "none"; if (d.cluster == 0) return "#b97ebb"; //purple if (d.cluster == 1) return "#2d3e50"; //navy if (d.cluster == 2) return "#e6d85a"; //yellow if (d.cluster == 3) return "#3bbc9b"; // green }) .style('stroke', (d) => (d.isClusterNode) ? '#eee' : 'none') .style('stroke-width', (d) => (d.isClusterNode) ? '2px' : 'none') var labelElements = svg.append('g') .attr('class', 'cluster-node-labels') .selectAll('text') .data(clusters) .enter().append('text') .style("fill", function (d) { //if (d.isClusterNode) // '' return 'none'; if (d.cluster == 0) return "#b97ebb"; //purple if (d.cluster == 1) return "#2d3e50"; //navy if (d.cluster == 2) return "#e6d85a"; //yellow if (d.cluster == 3) return "#3bbc9b"; // green }) // .style('fill', (d) => color(d.cluster / 10)) .attr('text-anchor', 'middle') .text((d) => d.label) .each(function() { d3.select(this).call(wrap, { radius: labelRadius }) }) function tick(e) { nodeElements .attr('cx', (d) => d.x) .attr('cy', (d) => d.y) .attr('r', (d) => d.radius) labelElements .attr('transform', (d) => `translate(${d.x}, ${d.y})`) } }) } // --- helpers ----------------------------------------- // wrap text function wrap(selection, params) { let scaleFactor = (params && params.scaleFactor) ? params.scaleFactor : 0.6, lineHeight = (params && params.lineHeight) ? params.lineHeight : 16, radius = (params && params.radius) ? params.radius : 100, text = selection.text(), _words = words(text), _targetWidth = targetWidth(text), _lines = lines(_words, _targetWidth), _textRadius = textRadius(_lines) // split text into words function words(text) { let words = text.split(/\s+/g); // To hyphenate: /\s+|(?<=-)/ if (!words[words.length - 1]) words.pop(); if (!words[0]) words.shift(); return words; } // measure simulated text width function measureWidth(text) { const context = document.createElement("canvas").getContext("2d"); return context.measureText(text).width; } // calculate target width function targetWidth(text) { return Math.sqrt(measureWidth(text.trim()) * lineHeight) } // split text into lines function lines(words, targetWidth) { let line; let lineWidth0 = Infinity; const lines = []; for (let i = 0, n = words.length; i < n; ++i) { let lineText1 = (line ? line.text + " " : "") + words[i]; let lineWidth1 = measureWidth(lineText1); if ((lineWidth0 + lineWidth1) / 2 < targetWidth) { line.width = lineWidth0 = lineWidth1; line.text = lineText1; } else { lineWidth0 = measureWidth(words[i]); line = {width: lineWidth0, text: words[i]}; lines.push(line); } } return lines; } // calculate simulated text radius function textRadius(lines) { let radius = 0; for (let i = 0, n = lines.length; i < n; ++i) { const dy = (Math.abs(i - n / 2 + 0.5) + 0.5) * lineHeight; const dx = lines[i].width / 2; radius = Math.max(radius, Math.sqrt(dx ** 2 + dy ** 2)); } return radius; } return selection .text("") .attr("transform", `scale(${radius / _textRadius * scaleFactor})`) .selectAll("tspan") .data(_lines) .enter().append("tspan") .attr("x", 0) .attr("y", (d, i) => (i - _lines.length / 2 + 0.8) * lineHeight) .text(d => d.text) } // --- accessors --------------------------------------- chart.data = function(value) { if (!arguments.length) return data data = value return chart } chart.width = function(value) { if (!arguments.length) return width width = value return chart } chart.height = function(value) { if (!arguments.length) return height height = value return chart } chart.padding = function(value) { if (!arguments.length) return padding padding = value return chart } chart.maxRadius = function(value) { if (!arguments.length) return maxRadius maxRadius = value return chart } chart.labelRadius = function(value) { if (!arguments.length) return labelRadius labelRadius = value return chart } chart.velocityDecay = function(value) { if (!arguments.length) return velocityDecay velocityDecay = value return chart } // --- updater --------------------------------------- chart.fadeOut = function(cb) { d3.select('.nodes').selectAll('circle') .transition() .duration(300) .attr('r', 0) .remove() d3.select('.cluster-node-labels').selectAll('text') .transition() .duration(500) .style('opacity', 0) .remove() setTimeout(cb, 500) } return chart } 37:T635,md` --- # Sources 1. [US Coronavirus daily cases map](https://observablehq.com/@jashkenas/united-states-coronavirus-daily-cases-map-covid-19) 1. [Data-driven particle animation](https://observablehq.com/@yarynam/webgl-data-driven-particle-animation) 1. [Map and timeline of Coronavirus outbreak](https://observablehq.com/@kartoteket/map-and-timeline-of-corona-outbreak) 1. [Bubble map](https://observablehq.com/@d3/bubble-map) 1. [Cartographic visualization](https://observablehq.com/@uwdata/cartographic-visualization) 1. [Introduction to d3, part 2](https://observablehq.com/@uwdata/introduction-to-d3-part-2) 1. [Patient path simulation](https://observablehq.com/@fionadingxo/patient-path-simulation) 1. [Making an area chart: focus + context](https://observablehq.com/@d3/focus-context) 1. [Force simulation to visualize word cloud](https://observablehq.com/@danyyyy89/force-simulation-to-visualize-word-cloud) 1. [Force simulation to visualize word cloud with split version](https://observablehq.com/@danielefadda/force-simulation-to-visualize-word-cloud-with-split-versio) 1. [Frequency lists using word clouds](https://observablehq.com/@dobladov/untitled/2) 1. [Word cloud tutorial](https://observablehq.com/@d3/word-cloud) 1. [Text analysis, part 1](https://observablehq.com/@rschifini/text-analysis) 1. [Text analysis, part 2](https://observablehq.com/d/4384ec1be8b4b015) 1. [Force bead clusters](https://observablehq.com/@bradysheridan/force-beads-respondent-demographic-breakdown) 1. [Data driven range sliders](https://observablehq.com/@bumbeishvili/data-driven-range-sliders)`38:[{"id":"87a179dccf04ecbdb105b280708b888a0e7137bffaaf55ab1dc960594b29430aa16b36ca80f73588627fd483a48a4a2cbcab8373e3fcaaca3032936cb00e24c8","href":"https://static.observableusercontent.com/files/87a179dccf04ecbdb105b280708b888a0e7137bffaaf55ab1dc960594b29430aa16b36ca80f73588627fd483a48a4a2cbcab8373e3fcaaca3032936cb00e24c8","name":"year_season_seconds.csv","type":"text/csv","lastModified":1618785886952.297,"size":1011864},{"id":"c093e0726e3b41c05fc2ae7958b5ce5ad3715ddc54d7e94511a1578c61fd7b177c189967a33ecfbd21f577df99b45248d78eea2bff2fc4fe5b3b8e5d20223140","href":"https://static.observableusercontent.com/files/c093e0726e3b41c05fc2ae7958b5ce5ad3715ddc54d7e94511a1578c61fd7b177c189967a33ecfbd21f577df99b45248d78eea2bff2fc4fe5b3b8e5d20223140","name":"clean.csv","type":"text/csv","lastModified":1618273510460.662,"size":10138},{"id":"33bce40a2782672ff42c26c69f4eaaf3cb5c3416470399c576f32ebe7ba86165e41df596ca9eae3377cb35b3f1d1a9e69545e218087d3fb82cfe38ae66073712","href":"https://static.observableusercontent.com/files/33bce40a2782672ff42c26c69f4eaaf3cb5c3416470399c576f32ebe7ba86165e41df596ca9eae3377cb35b3f1d1a9e69545e218087d3fb82cfe38ae66073712","name":"Word-Data.csv","type":"text/csv","lastModified":1618273510460.662,"size":21234},{"id":"603234d6b87a0019f02df8b186f48d8eec2e2f6e9c89f2867b1f731ca2a51bc0453267505fbab6ad61f8cbba651f9383fb6b3aaf92e27b284ff12ef1c1369146","href":"https://static.observableusercontent.com/files/603234d6b87a0019f02df8b186f48d8eec2e2f6e9c89f2867b1f731ca2a51bc0453267505fbab6ad61f8cbba651f9383fb6b3aaf92e27b284ff12ef1c1369146","name":"YearCount.csv","type":"text/csv","lastModified":1618273510460.662,"size":882},{"id":"d1c84dbc3ca234394ef1e4ac886a7c0ac68297aa45d4ef79266ca4aeb81e2723676fa4753842ff68382589eb9e815d0a1334f8d18639da1c55c01e210e977ac9","href":"https://static.observableusercontent.com/files/d1c84dbc3ca234394ef1e4ac886a7c0ac68297aa45d4ef79266ca4aeb81e2723676fa4753842ff68382589eb9e815d0a1334f8d18639da1c55c01e210e977ac9","name":"map_counts@1.csv","type":"text/csv","lastModified":1618273510460.662,"size":625561},{"id":"19b83c0d3ce3d50482c6584ad01a44739b2799a307da8f399b7fd8499f2d99b4dbbae67c63c4655225ebb47cab48a97aaf9ee46d416a2704f51a319482410a0e","href":"https://static.observableusercontent.com/files/19b83c0d3ce3d50482c6584ad01a44739b2799a307da8f399b7fd8499f2d99b4dbbae67c63c4655225ebb47cab48a97aaf9ee46d416a2704f51a319482410a0e","name":"date_coord_count.csv","type":"text/csv","lastModified":1618273510460.662,"size":2892177},{"id":"ec46e93cb1dc2c56eeaeb4c8d0d113e918271055533414c3c5821d32bca6ff156f6e2518c2501f3e66956666dd72d1175b8ca5c16b3049f34332087a8003292d","href":"https://static.observableusercontent.com/files/ec46e93cb1dc2c56eeaeb4c8d0d113e918271055533414c3c5821d32bca6ff156f6e2518c2501f3e66956666dd72d1175b8ca5c16b3049f34332087a8003292d","name":"season_data.csv","type":"text/csv","lastModified":1618273510460.662,"size":14087467},{"id":"05d70f356e6b8d58dbe97b6045d7b23a30e618f2605b31b6727f23d7c7ab03bdd437ebb05fcbf68fac242b89174440b825d0e8c0cddb73b017a61db098d8c203","href":"https://static.observableusercontent.com/files/05d70f356e6b8d58dbe97b6045d7b23a30e618f2605b31b6727f23d7c7ab03bdd437ebb05fcbf68fac242b89174440b825d0e8c0cddb73b017a61db098d8c203","name":"disk.webp","type":"image/webp","lastModified":1618273510460.662,"size":552082},{"id":"f2693693fcff460a737cfc30185d91f0df846b7868f33ada993b1b366e20697897eb2bb00534a5300363a84b822969cf996306ec441b7359b56b9ccc0b71ef9b","href":"https://static.observableusercontent.com/files/f2693693fcff460a737cfc30185d91f0df846b7868f33ada993b1b366e20697897eb2bb00534a5300363a84b822969cf996306ec441b7359b56b9ccc0b71ef9b","name":"year_map.csv","type":"text/csv","lastModified":1618273510460.662,"size":1407763},{"id":"b6badbb77e75c04ef4ae206deecce568f84ae116d6c102d167805771a517c0755b9f36ceac282a005fea1ec71e147591d98c90da3cd321873f319b782faaa356","href":"https://static.observableusercontent.com/files/b6badbb77e75c04ef4ae206deecce568f84ae116d6c102d167805771a517c0755b9f36ceac282a005fea1ec71e147591d98c90da3cd321873f319b782faaa356","name":"date_coord_shape.csv","type":"text/csv","lastModified":1618787239207.39,"size":9504738},{"id":"118a1007616edb4fef89a5b93848f6d505fc2edd91234b6e0e341756d8269db057db681d52976c3951d4616850e294271cebb73d15e91033f92136eac1750d3d","href":"https://static.observableusercontent.com/files/118a1007616edb4fef89a5b93848f6d505fc2edd91234b6e0e341756d8269db057db681d52976c3951d4616850e294271cebb73d15e91033f92136eac1750d3d","name":"sightings_data_map.csv","type":"text/csv","lastModified":1618853499317.027,"size":9285988},{"id":"ecf7b8629c732d3224a04303d4c649a8c2865f466eed6d465d9887659d083cf2c9ff5191b4980c4d3a928f88013dbe0a5934a1883823cc7e4610de603b35361b","href":"https://static.observableusercontent.com/files/ecf7b8629c732d3224a04303d4c649a8c2865f466eed6d465d9887659d083cf2c9ff5191b4980c4d3a928f88013dbe0a5934a1883823cc7e4610de603b35361b","name":"SeasonBubble.gif","type":"image/gif","lastModified":1618865786981.338,"size":4414475},{"id":"123f3c0b94f742cd962693db84dcfdb48b5cd215de395b92414dbdff2589f3e08533e036825313fccf5d90eb4e217610fff0d1ecd484c0f559c3c29198040721","href":"https://static.observableusercontent.com/files/123f3c0b94f742cd962693db84dcfdb48b5cd215de395b92414dbdff2589f3e08533e036825313fccf5d90eb4e217610fff0d1ecd484c0f559c3c29198040721","name":"Spikes.png","type":"image/png","lastModified":1618867877340.556,"size":657019},{"id":"1fb8b0502f62f8303326a261254768cc4490ad7f519b98e535dccba37780acf8f66c53714b541338d7a822c4d5c9c2c11b0404b3d79d88b2470cbd05198631f9","href":"https://static.observableusercontent.com/files/1fb8b0502f62f8303326a261254768cc4490ad7f519b98e535dccba37780acf8f66c53714b541338d7a822c4d5c9c2c11b0404b3d79d88b2470cbd05198631f9","name":"NotebookGIF.gif","type":"image/gif","lastModified":1618867063519.55,"size":8762908},{"id":"df54bb38e5f3c398cc99d70473c09d179cb4b4b7eb844c5a3bd418094088f9a674f1c742c18648476344111d4fcfe77ebadd97cded935a8b35e37b2a8d4b9ce1","href":"https://static.observableusercontent.com/files/df54bb38e5f3c398cc99d70473c09d179cb4b4b7eb844c5a3bd418094088f9a674f1c742c18648476344111d4fcfe77ebadd97cded935a8b35e37b2a8d4b9ce1","name":"Overview.png","type":"image/png","lastModified":1618866383597.838,"size":122725},{"id":"7014300a1bedfdd4aa31e05288bc1177b19c03fcd4ba88d59ffafd9c88cd808398149ca2dd8343780b24622c6942f9f66127f9b94f7277c7c0522f31c46115b8","href":"https://static.observableusercontent.com/files/7014300a1bedfdd4aa31e05288bc1177b19c03fcd4ba88d59ffafd9c88cd808398149ca2dd8343780b24622c6942f9f66127f9b94f7277c7c0522f31c46115b8","name":"Report.gif","type":"image/gif","lastModified":1618868128452.621,"size":11652466},{"id":"1ee61c3e1b3f150379f2881e4d9be4bab6eae4770e9813c38554e3037805d3f224c0455e5e48b6b38424d7e48e5c7e3829971ffc9cf8824cffb568842f5317d1","href":"https://static.observableusercontent.com/files/1ee61c3e1b3f150379f2881e4d9be4bab6eae4770e9813c38554e3037805d3f224c0455e5e48b6b38424d7e48e5c7e3829971ffc9cf8824cffb568842f5317d1","name":"SeasonShapes.png","type":"image/png","lastModified":1618866220982.84,"size":558581},{"id":"cc49083af36ebc1e24f36f7a4e5edd74ca1b26736dcc579d73a3a3154bf16659b850be8b3e3ae7cbf10785bb21a43927a78cd5f45a52323673aa73b35f9efec6","href":"https://static.observableusercontent.com/files/cc49083af36ebc1e24f36f7a4e5edd74ca1b26736dcc579d73a3a3154bf16659b850be8b3e3ae7cbf10785bb21a43927a78cd5f45a52323673aa73b35f9efec6","name":"Image Story.png","type":"image/png","lastModified":1618866138521.916,"size":145014},{"id":"bfaf9bdd3395dba6786a32d5089abb4347688091344f993a68ad084789c1afb61d97d7fa1be11c387f596c594204b0305526f1dcc33674cb49513af516fc6b7f","href":"https://static.observableusercontent.com/files/bfaf9bdd3395dba6786a32d5089abb4347688091344f993a68ad084789c1afb61d97d7fa1be11c387f596c594204b0305526f1dcc33674cb49513af516fc6b7f","name":"MapSlider.gif","type":"image/gif","lastModified":1618873422438.513,"size":3162594}] 2f:{"id":"b3373a6bfee613e8","slug":null,"title":"UFO Sightings in the United States","thumbnail":"afde05e075c721c7dd5da9d85fbff50e82d05212a7685950574914f490699838","access_level":"unlisted","create_time":"$D2021-04-13T00:25:10.460Z","update_time":"$D2022-04-06T18:52:00.939Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"bd55f8cdcb03c6ac","login":"columbiaviz-s21","name":"Columbia Data Viz Sp21","avatar_url":"https://avatars-next.observableusercontent.com/d7aca17844c982135939acf7860ef7195e5f7a382fd8f1db267359800ab85fbc","tier":"starter_2024"},"version":2372,"publish_version":2372,"role":null,"authored":false,"authors":[{"type":"individual","id":"958c5513bd9c7cf0","login":"dr2925","name":"","avatar_url":null,"tier":null}],"members":[{"type":"individual","id":"958c5513bd9c7cf0","login":"dr2925","name":"","avatar_url":null,"tier":null,"role":"editor"},{"type":"individual","id":"c29eaaa40b87cb75","login":"mlw2173","name":"Michael Leo Winitch","avatar_url":"https://avatars-next.observableusercontent.com/8bbbe7409ff200c8ea188cb1ecad363d968a839ebbb9378089ee250c70f5c68f","tier":null,"role":"editor"},{"type":"individual","id":"7632f5f1083f2167","login":"nataliadorogi","name":"Natalia Grace Dorogi","avatar_url":"https://avatars-next.observableusercontent.com/485f6302a7a79b97a7c8bad249ddb568ea9ab4fb7964c76cf4d5d7e4c8001a76","tier":null,"role":"editor"},{"type":"individual","id":"146995e66bd53784","login":"raefahwahid","name":"","avatar_url":"https://avatars-next.observableusercontent.com/41f45762a27a0fbc6d58cef26a872f977962b0e1b370f1568e8713848362bf6f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"UFO Sightings in the United States","cells":[{"id":0,"value":"md`# UFO Sightings in the United States\n_By Dena Rosman, Michael Winitch, Natalia Dorogi, & Raefah Wahid_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1532,"value":"html`

\n \n\nUnited States UFO Sightings from\n\n${focus[0].getFullYear()} to ${focus[1].getFullYear()}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"display\", \"block\");\n\n const clipId = DOM.uid(\"clip\");\n\n svg.append(\"clipPath\")\n .attr(\"id\", clipId.id)\n .append(\"rect\")\n .attr(\"x\", margin.left + 1)\n .attr(\"y\", 0)\n .attr(\"height\", height)\n .attr(\"width\", width - margin.left - margin.right);\n\n const gx = svg.append(\"g\");\n\n const gy = svg.append(\"g\");\n\n const path = svg.append(\"path\")\n .datum(data)\n .attr(\"clip-path\", clipId)\n .attr(\"fill\", \"#3cd070\");\n\n return Object.assign(svg.node(), {\n update(focusX, focusY) {\n gx.call(xAxis, focusX, height);\n gy.call(yAxis, focusY, data.y);\n path.attr(\"d\", area(focusX, focusY));\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"viewof focus = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, focusHeight])\n .style(\"display\", \"block\");\n\n const brush = d3.brushX()\n .extent([[margin.left, 0.5], [width - margin.right, focusHeight - margin.bottom + 0.5]])\n .on(\"brush\", brushed)\n .on(\"end\", brushended);\n\n const defaultSelection = [x(d3.utcYear.offset(x.domain()[1], -1)), x.range()[1]];\n\n svg.append(\"g\")\n .call(xAxis, x, focusHeight);\n\n svg.append(\"path\")\n .datum(data)\n .attr(\"fill\", \"#3cd070\")\n .attr(\"d\", area(x, y.copy().range([focusHeight - margin.bottom, 4])));\n\n const gb = svg.append(\"g\")\n .call(brush)\n .call(brush.move, defaultSelection);\n\n function brushed({selection}) {\n if (selection) {\n svg.property(\"value\", selection.map(x.invert, x).map(d3.utcDay.round));\n svg.dispatch(\"input\");\n }\n }\n\n function brushended({selection}) {\n if (!selection) {\n gb.call(brush.move, defaultSelection);\n }\n }\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"md`## Categorizing UFO Sightings by Season`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1601,"value":"md`The seasonal differences in UFO sightings are particularly eye-catching. UFO sightings throughout the years tend to have the highest overall volume during the summer and winter, with very little exception. Fall sightings are much rarer in comparison. \n\nIn the following visualization, a bubble represents a UFO sighting. The size of the bubble represents the duration of the UFO sighting while the color indicates the season in which the UFO sighting was reported. Use the following sliders to change the year to dive deeper into these seasonal differences. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"\nviewof selectedTime = {\n var years = d3.utcYears(Date.UTC(1950), Date.UTC(2014))\n\n const slider = slider_d3.sliderBottom()\n .min(d3.min(years)) //d3.min(years)\n .max(d3.max(years))\n .marks(years)\n .width(300)\n .ticks(5)\n .tickFormat(d3.utcFormat(\"%Y\"))\n .fill('#3cd070')\n .on(\"onchange\", () => svg.dispatch(\"input\"));\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [-20, -20, 340, 60])\n .attr(\"width\", 340)\n .attr(\"height\", 60)\n .call(slider);\n\n return Object.defineProperty(\n svg.node(), \n \"value\", \n {get: () => slider.value()}\n );\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1577,"value":"html`

\n \n\nUFO Sightings by Season in\n\n ${selectedTime.toString().split(\" \")[3]}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"md`## UFO Description Word Bubble`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1604,"value":"md`Many of the UFO sightings in the dataset were accompanied by descriptors of the extraterrestrial objects. These descriptors can range from shapes like “triangle” to words like “light.” The association of disks with UFO sightings was very common up until the mid-1980s, after which the UFOs began to be moreover associated with triangles (this is reflected in events such as [the Belgian UFO Wave](https://www.ufoinsight.com/ufos/waves/belgian-ufo-wave) abroad).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1607,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1609,"value":"md`Brush through the bar chart below to narrow in on certain years and observe the evolution of user reported UFO classifications through the decades. When selecting a date range from the slider, you will see the most popular descriptors for UFO sightings appear as word bubbles. The size of each bubble refers to that descriptor’s proportion, while the color refers to just the relative number. You can hover over each circle to get the count.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"\nviewof YearSlider = rangeSlider(cleanListYears,\n d=>d.Year, \n value=>d3.sum(value.values.map(d=>d.Count)), \n {\n height:100,\n yTicks:2,\n \n }\n )\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"html`

\n \n\nUFO Sightings by Classification:\n\n ${Math.round(YearSlider.range[0])} to ${Math.round(YearSlider.range[1])}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2113,"value":"md`---\n# Writeup`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2118,"value":"md `## Introduction\nWhile exploring different topics, we found a dataset of UFO sightings collected by the National UFO Reporting Center ([NUFORC](http://www.nuforc.org/)). We were drawn to its uniqueness, and came up with questions to guide our initial analysis, for example: Are there temporal or geographic trends to UFO sightings? However, as we dove deeper into the data, we found it difficult to form conclusions about UFO sightings since we cannot claim definite causality for any particular sighting. We pivoted to an exploration of UFO sightings using all the available categories. Our exploration-centric design allows users to form their own insights and interpretations as they interact with our visualizations. \n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2229,"value":"md`

${Object.assign(await FileAttachment(\"Overview.png\").image(), {style: 'width: 90%; max-width: 40;' })}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2121,"value":"md `## Related Work\nDuring our research, we found visualizations ([Vox](https://www.vox.com/2015/6/17/8791111/us-ufo-sighting-map), [Université de Namur](https://ufo.kediss.eu/about), [Ross Ballman](https://public.tableau.com/profile/ross6552#!/vizhome/UnitedStatesofUFOs/Dashboard1)) of UFO sightings. While these works were useful in giving us a starting point for our own visualizations, the related works were limited to exploring location-based data. We were inspired by the color palette of these works but ultimately decided to diverge and visualize different parameters, such as UFO shape and seasonal sightings, that would interest users.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2123,"value":"md `## Methodology\nThe data was collected from forms submitted by users to [NUFORC](http://www.nuforc.org/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2285,"value":"md`

${Object.assign(await FileAttachment(\"Report.gif\").image(), {style: 'width: 55%;' })}NUFORC's report form for UFO sightings. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2292,"value":"md`We conducted our exploratory data analysis on Tableau and began by analyzing the sightings temporally. We found an interesting series of spikes in sightings during the summer months from the 1950s to the mid-1990s. We also found a surge in sightings after the mid-1990s, perhaps due to the commercialization of the Internet.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2297,"value":"md`

${Object.assign(await FileAttachment(\"Spikes.png\").image(), {style: 'width: 100%;' })}\nExploratory data analysis done in Tableau to showcase the summer spikes across four decades (1950-1989). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2301,"value":"md`There are specific moments when a surge in sightings seemed to occur for no apparent reason, but after further analysis using a map, we were able to find that sightings might spike in a certain region due to weather events and are not entirely random. \n\nOur main visualization is an area chart with a brush-and-linking feature that is connected to a map. This allows users to explore these spikes with the added geographic component.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2313,"value":"md`

${Object.assign(await FileAttachment(\"Image Story.png\").image(), {style: 'width: 60%; max-width: 55;' })}\n A sketch of our initial design depicting the linked area chart and map with a brushing feature. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2317,"value":"md`Data cleanup was done using Python. We decided to focus on the U.S. and eliminated variables that were not necessary for the combined area chart and map, such as shapes of the UFOs and durations of the sighting.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2324,"value":"md`

${Object.assign(await FileAttachment(\"NotebookGIF.gif\").image(), {style: 'width: 100%;' })} One of our Jupyter Notebooks for cleaning the data. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2329,"value":"md`However, we didn't completely eliminate categorical data from our project and created a word bubble chart that centered around different shapes of UFOs throughout the years. We also added a force simulation of seasonal sightings, which allowed for a more simplified exploration through time. Our key techniques were incorporating sliders and tooltips to allow for interactivity and greater exploration of the data.`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2239,"value":"md`

${Object.assign(await FileAttachment(\"SeasonShapes.png\").image(), {style: 'width: 100%; max-width: 55;' })}\n Exploratory data analysis done in Tableau to showcase the proportion of UFO shapes by season. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2207,"value":"md`

${Object.assign(await FileAttachment(\"SeasonBubble.gif\").image(), {style: 'width: 90%; max-width: 40;' })}\n One of the first visualizations we made to explore the seasonal breakdown of UFO sightings. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2125,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2346,"value":"md`

${Object.assign(await FileAttachment(\"MapSlider.gif\").image(), {style: 'width: 50%;' })}Slider interaction for area chart and map of UFO sightings. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2126,"value":"md `## Implementation\nWe used Observable for this project since it allows for easy collaboration and user interaction. While encoding our visualizations, we ran into a few performance issues due to the dataset size. To resolve performance issues, we cleaned our datasets on Jupyter Notebook. This involved grouping and removing unnecessary columns from a specific visualization’s dataset. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2128,"value":"md `## Discussion\nOverall, our visualization was very successful and users were intrigued by our topic focus and scope of analysis. Users enjoyed how brushing linked the area chart to the map, allowing for simultaneous analyses of both regional and temporal data. Users were particularly intrigued by the spike in UFO sightings that were reported in the 1990s. The word chart was also popular, as users theorized potential explanations into the popularity of the “light” in the early 2000s. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2130,"value":"md `## Future Work\nWe would extend this project by incorporating the UFO descriptions into more visualizations, perhaps by adding a search function that allows users to find UFO stories as they explore the area chart or map. In particular, we would extend the map further by incorporating a zoom-in option and allowing users to search for UFO sightings near them.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2189,"value":"html`

\n🛸\n

`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"md`---\n# Appendices`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"md `## Area Chart Brush + Linking Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"data = Object.assign(d3.csvParse(await FileAttachment(\"clean.csv\").text(), d3.autoType).map(({date, value}) => ({date: new Date(date), value: value})), {y: \"Number of Sightings\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"x = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"xAxis = (g, x, height) => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"yAxis = (g, y, title) => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.selectAll(\".title\").data([title]).join(\"text\")\n .attr(\"class\", \"title\")\n .attr('transform', 'rotate(-90)')\n //.attr(\"x\", -margin.left)\n .attr(\"x\", -(margin.top + (height - margin.top - margin.bottom) / 2))\n .attr(\"y\", -30)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(title))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"area = (x, y) => d3.area()\n .defined(d => !isNaN(d.value))\n .x(d => x(d.date))\n .y0(y(0))\n .y1(d => y(d.value))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"focusHeight = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"slider_d3 = require('d3@6'),\n require.alias({\n \"d3-array\": \"d3@6\",\n \"d3-axis\": \"d3@6\",\n \"d3-dispatch\": \"d3@6\",\n \"d3-drag\": \"d3@6\",\n \"d3-ease\": \"d3@6\",\n \"d3-scale\": \"d3@6\",\n \"d3-selection\": \"d3@6\",\n \"d3-transition\": \"d3@6\"\n})(\"d3@6\", \"d3-simple-slider@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"update = {\n const [minX, maxX] = focus;\n const maxY = d3.max(data, d => minX <= d.date && d.date <= maxX ? d.value : NaN);\n chart.update(x.copy().domain(focus), y.copy().domain([0, maxY]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"md `## Map Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"md `slider`\n// import {rangeSlider} from '@mootari/range-slider'\n\n// // viewof time = {\n\n// // const slider = slider_d3.sliderBottom()\n// // .min(d3.min(years))\n// // .max(d3.max(years))\n// // .marks(years)\n// // .width(300)\n// // .ticks(5)\n// // .tickFormat(d3.utcFormat(\"%Y\"))\n// // .fill('#3cd070')\n// // .on(\"onchange\", () => svg.dispatch(\"input\"));\n\n// // const svg = d3.create(\"svg\")\n// // .attr(\"viewBox\", [-20, -20, 340, 60])\n// // .attr(\"width\", 340)\n// // .attr(\"height\", 60)\n// // .call(slider);\n\n// // return Object.defineProperty(\n// // svg.node(), \n// // \"value\", \n// // {get: () => slider.value()}\n// // );\n// // }\n\n// ////\n\n// // viewof range = rangeSlider({\n// // min: 1960,\n// // max: 2010,\n// // value: [2000, 2010],\n// // precision: 0, // how many decimal places\n// // color: \"#3cd070\",\n// // title: 'Ranges of years from 1960 and 2010',\n// // })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"ufo_time = FileAttachment(\"year_map.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"years = d3.utcYears(Date.UTC(1960), Date.UTC(2011))\n//years = [1960, 1961, 1962, 1963, 1964, 1965, 1966, 1967, 1968, 1969, 1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979, 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"usa = datasets['us-10m.json']()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2039,"value":"//timeColors = [ \"#ffb429\", \"#3cd070\"]//orange\n//timeColors = [ \"red\", \"#3cd070\"]//pink\ntimeColors = [ \"#f540cb\", \"#3cd070\"]//purple\n\n//ufo = FileAttachment(\"map_counts@1.csv\").csv()\n//looking = FileAttachment(\"date_coord_count.csv\").csv()\n//looking.forEach(function(x) {\n// x.date = d3.timeParse(\"%Y-%m-%d\")(x.date)\n//})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1894,"value":"date_coord_count = FileAttachment(\"sightings_data_map.csv\").csv()\n//date_coord_count = FileAttachment(\"date_coord_shape.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1798,"value":"datesList = \n{\n for (var i = 0; i x[column])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1694,"value":"SeasonFile = FileAttachment(\"year_season_seconds.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1697,"value":"byYear =\n{\nreturn SeasonFile.filter(i => i.year.match(selectedTime.toString().split(\" \")[3]))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"extractedList = {\n var jarray = [];\n for (var i=0; i< byYear.length; i++)\n if (getColumn(byYear, \"seconds\")[i] < 2000)\n {\n jarray[i] = [getColumn(byYear, \"seconds\")[i], getColumn(byYear, \"season\")[i]];\n }\n else\n {\n jarray[i] = [\"2000\", getColumn(byYear, \"season\")[i]];\n }\nreturn jarray;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"dataTwo = d3.range(extractedList.length).map((d, idx) => ({\n id: idx,\n type: (extractedList[d][1]),\n radius: extractedList[d][0]/400\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"seasonalData = [\n {label: \"Fall\", \n percentage:(getColumn(dataTwo, \"type\").filter(x => x === \"FALL\").length) / dataTwo.length * 100,\n size: getColumn(dataTwo.filter(x => x.type === \"FALL\"), \"radius\")},\n \n {label: \"Winter\",\n percentage: (getColumn(dataTwo, \"type\").filter(x => x === \"WINTER\").length) / dataTwo.length * 100,\n size: getColumn(dataTwo.filter(x => x.type === \"WINTER\"), \"radius\")},\n \n {label: \"Summer\",\n percentage: (getColumn(dataTwo, \"type\").filter(x => x === \"SUMMER\").length) / dataTwo.length * 100,\n size: getColumn(dataTwo.filter(x => x.type === \"SUMMER\"), \"radius\")},\n \n {label: \"Spring\",\n percentage: (getColumn(dataTwo, \"type\").filter(x => x === \"SPRING\").length) / dataTwo.length* 100,\n size: getColumn(dataTwo.filter(x => x.type === \"SPRING\"), \"radius\")}];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"CircleData = ({\n groups: seasonalData\n .filter((o) => o.label && o.percentage)\n .map((o, i) => Object.assign({}, o, {\n key: \"g\" + i,\n numNodes: ((o.percentage / 100) * getColumn(dataTwo, \"type\").length).toFixed(),\n label: `${o.percentage.toFixed()}% ${o.label}`,\n size: o.size\n }))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"d3.select(\"#CircleChart\").call(CircleChart)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"import {group} from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"md `## Word Map Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"yearCountData = FileAttachment(\"YearCount.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"cleanListYears = \n{\nvar decadeList = new Array();\n \n for (var i = 0; i< yearCountData.length; i++)\n {\n if ((parseInt(yearCountData[i].Year) <= 2014) && (parseInt(yearCountData[i].Year) >= 1950)) \n\n decadeList.push({Year:yearCountData[i].Year, Count:yearCountData[i].Count});\n }\nreturn decadeList;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"format = d3.format('.1s')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"import {rangeSlider} from \"@dr2925/utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"wordData = FileAttachment(\"Word-Data.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1412,"value":"toolTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1167,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"