31:T8c8,md`

## About this Vis [This month's r/dataisbeautiful dataviz battle](https://www.reddit.com/r/dataisbeautiful/comments/950j3n/battle_dataviz_battle_for_the_month_of_august/) challenged Redditors to create visuals from a dataset filed under Oldie But Goodie: TSA Claims. Since 2002, there have been more than ${formatNumber(claimsCount)} claims from airport travelers accusing TSA officers of being responsible for personal injury or property damage/lost during the screening process. The Internet is already replete with [interesting visuals](https://csfloyd.com/2017-tsa-claims-infographic), [insightful articles](http://www.latimes.com/business/la-fi-travel-briefcase-tsa-claims-20170825-story.html), and [detailed analysis](http://www.brettrics.com/tsa-claims/) on this dataset as a whole, so I aimed to create a visualization that supports the task of comparing airports over time. I quickly and clearly saw that the claims dataset alone wouldn't be enough data to support this task fairly. Although other Redditors submitted visualizations that segment claims by airport, graphics without claims counts normalized passenger traffic is biased against busy airports. Consider this tale of two airports. In 2017, the TSA received ${formatNumber(data.get("den").properties.claims["2017"])} claims from Denver International Airport (DEN) and ${formatNumber(data.get("pdx").properties.claims["2017"])} from Portland International Airport (PDX), in Oregon. Which airport performed better? Does it matter that Denver Airport received ${formatNumber(data.get("den").properties.passengers["2017"])} passengers while Portland Airport had ${formatNumber(data.get("pdx").properties.passengers["2017"])}? When normalized by passenger traffic, about ${formatNumber(data.get("den").properties.rates["2017"])} claims were filed from Denver Airport and about ${formatNumber(data.get("pdx").properties.rates["2017"])} claims were filed from Portland Airport per every one million passengers. By passenger, I use Bureau of Transportation Statistics' definition:

Any person on board a flight who is not a member of the flight or cabin crew.

`32:T43a,md`Did you notice the very, very large bubble in the map above in 2008? McKellar Sipes Regional Airport in Jackson, Tenn., reported only 28 passengers in 2008, and one person filed a claim. If you scale 1 claim per 28 passengers to 1 million passengers, then McKellar Sipes Airport had the most egregious rate of 2008, with more than 35,000 claims per 1 million passengers. For the curious, the one claim was for $67 in damages to eyeglasses at the screening checkpoint. It was approved in full. ### Why I Used Two Separate Channels In the end, I encoded passenger traffic by circle radius and claim rate with a sequential color gradient from yellow for low rates to red for high rates. Encoding airport passenger traffic with circle radius means that sleepy airports with miniscule passenger numbers aren't as noticeable at this scale. Their circle fills are still dark red, but it's not visually prominent as busy airports. McKellar-Sipes Airport is still on the map, but its radius is actually less than 1 pixel. #### TSA Claim Rate with Passenger Count By Airport (Again) `33:T17fc,class Chart { constructor(dataMap, radius, fill = {}, detail) { const data = Array.from(dataMap).map((d) => d[1]); const interval = 500; // milliseconds const width = 960; const height = 600; const path = d3.geoPath(); const projection = d3.geoAlbersUsa().scale(1280).translate([width / 2, height / 2]); this.radius = radius; this.fill = fill; this.detail = detail; this.isSilent = (!radius.scaleData.length); this.radiusTransition = d3.transition().duration(interval); const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("font-family", "sans-serif") .style("height", "auto"); svg.append("path") .datum(topojson.feature(us, us.objects.nation)) .attr("fill", "#ccc") .attr("d", path); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("d", path); const legend = svg.append("g") .attr("fill", "#777") .attr("transform", `translate(${width - 57},${height - 2})`) .attr("text-anchor", "middle") .style("font-size", "10px"); legend.append("text") .attr("y", 0) .text(() => (this.isSilent) ? "" : this.radius.metric); const legend2 = legend.selectAll("g") .data(radius.scaleData) .enter().append("g"); legend2.append("circle") .attr("fill", "none") .attr("stroke", "#ccc") .attr("cy", d => -this.radius.scale(d) - 10) .attr("r", this.radius.scale); legend2.append("text") .attr("y", d => -2 * this.radius.scale(d) - 10) .attr("dy", "1.3em") .text(d3.format(".1s")); // Create graphic title this.titleText = svg.append("text") .attr("x", width / 2) .attr("y", 15) .attr("text-anchor", "middle") .attr("font-size", "16px"); this.circles = svg.append("g") .attr("stroke", "#fff") .attr("opacity", () => (this.fill.scale !== undefined) ? 1 : 0.5) .attr("stroke-width", 0.5) .selectAll("circle") .data(data).enter() .append("circle") .attr("transform", d => `translate(${projection(d.geometry.coordinates)})`) .attr("r", 0); this.labels = this.circles.append("title"); if (this.fill.scale) { this.drawRateScale(width, height, svg); } this.div = DOM.element("div"); const input = this.drawInput(2002, 2017); this.div.appendChild(svg.node()); this.div.appendChild(input); } // constructor drawInput(min, max) { /** * Create range and number input for stepping through map data * Hat tip to @mbostock https://beta.observablehq.com/@mbostock/linked-inputs */ const div = html` `; const range = div.querySelector("[type=range]"); const number = div.querySelector("[type=number]"); div.value = range.value = number.value = min; const update = _.debounce(() => { this.update(div.value); }, 300); range.addEventListener("input", () => { number.value = div.value = range.valueAsNumber; update(); }); number.addEventListener("input", () => { range.value = div.value = number.valueAsNumber; update(); }); return div; } drawRateScale(width, height, svg) { /* * Tip of the hat to @tmcw * https://beta.observablehq.com/@tmcw/d3-scalesequential-continuous-color-legend-example */ const margin = { bottom: 150, right: 50, left: 10, top: 225} ; const barWidth = 15; const linearGradient = svg.append("defs").append("linearGradient") .attr("id", "linear-gradient") .attr("x1", "0%") .attr("y1", "100%") .attr("x2", "0%") .attr("y2", "0%"); linearGradient.selectAll("stop") .data(this.fill.scale.ticks().map((t, i, n) => ({ offset: `${100*i/n.length}%`, color: this.fill.scale(t) }))) .enter().append("stop") .attr("offset", d => d.offset) .attr("stop-color", d => d.color); const axisScale = d3.scaleLinear() .domain(this.fill.scale.domain().reverse()) .range([margin.top, height - margin.bottom]); const ticks = g => g .attr("class", "y-axis") .attr("fill", "#777") .call(d3.axisLeft(axisScale) .ticks(height / 80) .tickSize(-barWidth)); const legend = svg.append("g") .attr("fill", "#777") .attr("transform", `translate(${width - margin.right - barWidth},20)`); legend.append("text") .attr("y", height - margin.bottom + 20) .attr("x", -25) .attr("text-align", "center") .attr("font-size", "10px") .attr("font-family", "sans-serif") .text("claims per") .append("tspan") .attr("dy", "10px") .attr("dx", "-58px") .text("1M passengers") legend.append("g") .append("rect") .attr('transform', `translate(0,${margin.top})`) .attr("height", height - margin.top - margin.bottom) .attr("width", barWidth) .style("fill", "url(#linear-gradient)"); legend.append("g").call(ticks); } update(currYear = 2002) { /* * Update chart with data from a new year */ this.circles .transition(this.radiusTransition) .attr("fill", d => { if (this.fill.scale) { return this.fill.scale(d.properties[this.fill.metric][currYear]); } return "brown"; }) .attr("r", d => this.radius.scale(d.properties[this.radius.metric][currYear])); if (!this.isSilent) { this.labels .text(d => d.properties.name + " (" + d.properties.code + "): " + this.detail(d, currYear, formatNumber)) } this.titleText.text(currYear); } // update method } // Chart class34:[] 2f:{"title":"TSA Claims with Passenger Count By Airport","cells":[{"id":902,"value":"md`# TSA Claims with Passenger Count By Airport\n\nSource: [Transportation Security Administration](https://www.dhs.gov/tsa-claims-data) and [Bureau of Transportation Statistics](https://www.transtats.bts.gov/Fields.asp?Table_ID=273)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1452,"value":"submission()","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1698,"value":"md`### Visualizing TSA Claims is Visualizing Passenger Traffic\n\nIntuitively, airports with more passengers are going to have more TSA Claims, and Redditor anguimorpha's submission [Comparing TSA Claims with Airport and Airline Enplanement Data](https://www.reddit.com/r/dataisbeautiful/comments/981ce1/comparing_tsa_claims_with_airport_and_airline/) found strong positive correlation using passenger data from Federal Aviation Administration (FAA). When Bureau of Transportation Statistics' passenger rates rise and fall, so do TSA Claims in my data with numbers, as shown by calculating covariance and correlation each year.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1794,"value":"{\n const table = DOM.element(\"table\");\n d3.select(table)\n .append(\"thead\")\n .append(\"tr\")\n .selectAll(\"td\")\n .data([\"year\", \"covariance\", \"correlation\"])\n .enter().append(\"th\")\n .text(d => d);\n \n const tr = d3.select(table)\n .append(\"tbody\")\n .selectAll(\"tr\")\n .data(dataByYear)\n .enter()\n .append(\"tr\");\n \n tr.append(\"td\")\n .text(d => d.year);\n \n tr.append(\"td\")\n .text(d => {\n let mean = { \n claims: d3.mean(d.claims), \n passengers: d3.mean(d.passengers) \n };\n let s = 0;\n let n = d.claims.length;\n for (let i = 0; i < n; i++) {\n s += (d.claims[i] - mean.claims) * (d.passengers[i] - mean.passengers);\n }\n s /= n - 1;\n d.cov = s;\n return formatNumber(s);\n });\n \n tr.append(\"td\")\n .text(d => d.cov / (d3.deviation(d.claims) * d3.deviation(d.passengers)));\n \n return table;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":880,"value":"md`\n\nNot only is covariance positive, the coefficient of correlation shows that claims and passengers are strongly positively correlated every year.\n\n### Why Not Encode Claim Rate as Circle Radius? \n\nI first tried to encode the claim rate by airport as circle radius. Then, I saw the 2008 data. While encoding the total number of claims as circle radius creates a bias against large airports, encoding claim rates creates a bias against small airports. Select the year 2008 in the map below to see what I mean.\n\n#### Claims By Airport Per 1 Million Passengers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1353,"value":"{\n const radius = {\n scale: d3.scaleSqrt()\n .domain([0, 1000])\n .range([0, 35]),\n scaleData: [100, 500, 1000],\n metric: \"rates\"\n };\n \n const detail = (d, year, format) => format(d.properties.rates[year]) + \" claims / 1M passengers\";\n \n const chart = new Chart(data, radius, {}, detail);\n \n chart.update();\n \n return chart.div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1358,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1445,"value":"submission()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1468,"value":"md`\nOther submissions have shown a downward trend in the number of claims filed yearly since 2005 with a line chart, and this bubble map conveys that trend with regional details. While the map generally becomes more yellow as the years progress, it's clear that large airports in the country's interior turn yellow before those on the coasts. \n\n\nThe next couple years, may have the lowest claim rates in this dataset, but not necessarily because less travelers are abused at U.S. airport security checkpoints. In July, a [federal appeals court ruling](https://www.reuters.com/article/us-usa-tsa-lawsuit/tsa-screeners-win-immunity-from-flier-abuse-claims-u-s-appeals-court-idUSKBN1K125W) would protect TSA screeners from abuse claims.\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1335,"value":"md`Data for this notebook was imported from a [Google Sheet](https://docs.google.com/spreadsheets/d/1QrdRzn-mYCx1iOMiN9ln9x6X-cttlivnGvnXAsL7pIY/edit?usp=sharing). Although the work joining and aggregating raw data was done in [an Excel workbook](https://1drv.ms/f/s!Agom-EMi8B6RqQJNoA37lXV_nzhA).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"data = new Map((await d3.csv(\"https://docs.google.com/spreadsheets/d/e/2PACX-1vSNCsZZFU4Fw_C8iU5yPGNTN6Cv2MoNk-jEY3QgQeEjsqFhd5grXeJ-jItfGvipy31pVkh0VfQjVOD3/pub?gid=100923998&single=true&output=csv\", (d) => {\n let rates = {},\n claims = {},\n passengers = {},\n claim,\n max = 0;\n \n for (let i = 2002; i <= 2017; i++) {\n claims[i] = +d[\"claims_\" + i];\n passengers[i] = +d[\"passengers_\" + i];\n rates[i] = (claims[i] / passengers[i]) * 1e6;\n max = (passengers[i] > max) ? passengers[i] : max;\n }\n \n // GeoJSON Feature schema\n return {\n \"type\": \"Feature\",\n \"geometry\" : {\n \"type\": \"Point\",\n \"coordinates\": d.coordinates.split(\",\")\n },\n \"properties\": {\n \"rates\": rates,\n \"claims\": claims,\n \"passengers\": passengers,\n \"code\": d.code,\n \"max\": max,\n \"name\": d.name\n }\n };\n}))\n.sort((a, b) => b.properties.max - a.properties.max)\n.map(d => [d.properties.code.toLowerCase(), d]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1797,"value":"dataByYear = {\n var out = [];\n for (let year = 2002; year < 2017; year++) {\n let claims = [];\n let passengers = [];\n for (let airport of data.values()) {\n claims.push(airport.properties.claims[year]);\n passengers.push(airport.properties.passengers[year]); \n }\n out.push({\n year: year,\n claims: claims,\n passengers: passengers\n });\n }\n return out;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1572,"value":"md`\nThe notebook variable \\`\\`claimsCount\\`\\` may be less than what's found in other people's anaysis because the \\`\\`claims\\`\\` data includes only data from airports in the U.S. with both passenger and claims totals for all years.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1569,"value":"claimsCount = {\n let sum = 0;\n for (let airport of data.values()) {\n for (let year in airport.properties.claims) {\n sum += airport.properties.claims[year]; \n }\n }\n return sum;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1680,"value":"formatNumber = d3.format(\",.0f\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"submission = function() {\n const radius = {\n scale: d3.scaleSqrt()\n .domain([0, 2e7])\n .range([0, 35]),\n scaleData: [2e6, 1e7, 2e7],\n metric: \"passengers\"\n };\n \n const detail = (d, year, format) => format(d.properties.rates[year]) + \" claims / 1M passengers\";\n \n const fill = {\n scale: d3.scaleSequential(d3.interpolateYlOrRd)\n .domain([0, 40]),\n metric: \"rates\"\n };\n \n const chart = new Chart(data, radius, fill, detail);\n \n chart.update(2002);\n \n return chart.div;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"us = d3.json(\"https://unpkg.com/us-atlas@1/us/10m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1877,"value":"_ = require(\"underscore\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1184,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}