45:["$","title",null,{"children":"A3 Interactive Visualization | Kenny Warner | Observable"}] 4d:T326a,chart1 = { var width = 1200, height = 500; const svg = d3.select(DOM.svg(width, height)) .style("width", "100%") .style("height", "100%"); var inputValue = 2018; var time = ["2018","2020","2022","2024"]; var color = d3.scaleThreshold() .range(["#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"]) .domain([0.014, 0.032, 0.045, 0.075, 0.1, 0.15, 0.3, 0.56]); var colorFB = d3.scaleThreshold() .range(["#4d9900","#66cc00","#80ff00","#99ff33","#b3ff66","#ccff99"]) .domain([-40000, -15000, -10000, -5000, -2500, 0]); var colorDem = d3.scaleThreshold() .range(["#809fff","#4d79ff","#1a53ff","#0039e6","#002db3", "#002080", "#001a66"]) .domain([1, 2500, 10000, 25000, 40000, 55000, 70000]); var colorRep = d3.scaleThreshold() .range(["#ffcccc","#ff9999","#ff6666","#ff3333","#ff0000","#cc0000", "#990000"]) .domain([1, 2500, 10000, 25000, 40000, 55000, 70000]); var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("background", "black") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden"); var projection = d3.geoAlbersUsa(); var path = d3.geoPath().projection(projection); //background map d3.json("https://gist.githubusercontent.com/krwarner/ba149b4ed187b80cce4b9aad2135ddae/raw/8d564df8079729c819781819a084c9a1587dc434/congress_topo.json", function(error, us) { svg.selectAll(".region") .data(topojson.feature(us, us.objects.congress).features) .enter() .append("path") .attr("class", "region") .attr("d", path) .style("stroke", "#595959") .style("stroke-width", "0.15px") .style("fill", function(d) { if (d.properties.PARTY_AFF == "Democrat") { return "#e6ffff"; } else { return "#ffebe6"; } }); }); d3.queue() .defer(d3.csv, "https://gist.githubusercontent.com/krwarner/b1e1358cfb016cdce5b3b9e2633b8d48/raw/63628367dc185fbdad67a79c9d069c063e56076c/fb_mov_data_years.csv") .defer(d3.json, "https://gist.githubusercontent.com/krwarner/ba149b4ed187b80cce4b9aad2135ddae/raw/8d564df8079729c819781819a084c9a1587dc434/congress_topo.json") .await(ready); function ready(error, mov_vs_fb, us) { if (error) return console.warn(error); // console.log(mov_vs_fb20); const mov_vs_fbByDist18 = {}; const mov_vs_fbByDist20 = {}; const mov_vs_fbByDist22 = {}; const mov_vs_fbByDist24 = {}; mov_vs_fb.forEach(function(d) { d.mov_vs_FB = +d.mov_vs_FB; d.mov_2016 = +d.mov_2016; d.party = d.party; d.pct_change16_20 = +d.pct_change16_20; d.poe_2018 = +d.poe_2018; d.year = +d.year; d.state = d.state; if (d.year == 2018) { mov_vs_fbByDist18[d.GEOID] = d; } else if (d.year == 2020) { mov_vs_fbByDist20[d.GEOID] = d; } else if (d.year == 2022) { mov_vs_fbByDist22[d.GEOID] = d; } else if (d.year == 2024) { mov_vs_fbByDist24[d.GEOID] = d; } }); var format = d3.format(".2%"); var commas = d3.format(","); var path = d3.geoPath() .projection(d3.geoAlbersUsa()); var subset = topojson.feature(us, us.objects.congress).features.filter(function(d) { return d.id in (mov_vs_fbByDist18); }); svg.append("g") .attr("class", "congress") .selectAll("path") .data(subset) .enter().append("path") .attr("d", path) .style("fill", initialState) .on("mouseover", function(d) { var val = mov_vs_fbByDist18[d.id]; var stateName = val["state"]; console.log(stateName); var fill_color = color(val["poe_2018"]); tooltip.html(""); tooltip.style("visibility", "visible") .style("border", "7px solid " + fill_color); tooltip.append("h3") .style("color", "white") .text(val.geolabel); tooltip.append("div") .style("color", "white") .text("Margin of Victory 2016: " + commas(val["mov_2016"])); tooltip.append("div") .style("color", "white") .text("Margin of Victory Compared to Foreign Born Growth: " + commas(val["mov_vs_FB"])); tooltip.append("div") .style("color", "white") .text("Foreign Born Percentage of Electorate 2018: " + format(val["poe_2018"])); d3.selectAll(".congress path") .style("opacity", 0.3) .style("stroke", null); d3.select(this) .style("opacity", 1) .style("stroke", "#222") .raise(); d3.selectAll(".STATE_FIPS") .style("opacity", 0); return stateName; }) .on("mousemove", function() { return tooltip.style("top", (d3.event.pageY-52) + "px").style("left", (d3.event.pageX+18) + "px"); }) .on("mouseout", function() { tooltip.style("visibility", "hidden"); d3.selectAll(".congress path") .style("opacity", 1); d3.selectAll(".STATE_FIPS") .style("opacity", 1); }); // when the input range changes update the rectangle d3.select("#timeslide").on("input", function() { update(+this.value); }); function update(value) { document.getElementById("range").innerHTML=time[value]; inputValue = time[value]; d3.selectAll(".congress path").remove(); svg.append("g") .attr("class", "congress") .selectAll("path") .data(subset) .enter().append("path") .attr("d", path) .style("fill", function(d) { return timeMatch(d); }) .on("mouseover", function(d) { var val = use_data(d); var fill_color = color(val["poe_2018"]); tooltip.html(""); tooltip.style("visibility", "visible") .style("border", "7px solid " + fill_color); tooltip.append("h3") .text(val.geolabel) .style("color", "white"); tooltip.append("div") .style("color", "white") .text("Margin of Victory: " + commas(val["mov_2016"])); tooltip.append("div") .style("color", "white") .text("Margin of Victory Compared to Foreign Born Growth: " + commas(val["mov_vs_FB"])); tooltip.append("div") .style("color", "white") .text("Foreign Born Percentage of Electorate 2018: " + format(val["poe_2018"])); d3.selectAll(".congress path") .style("opacity", 0.3) .style("stroke", null); d3.select(this) .style("opacity", 1) .style("stroke", "#222") .raise(); d3.selectAll(".STATE_FIPS") .style("opacity", 0); }) .on("mousemove", function() { return tooltip.style("top", (d3.event.pageY-52) + "px").style("left", (d3.event.pageX+18) + "px"); }) .on("mouseout", function() { tooltip.style("visibility", "hidden"); d3.selectAll(".congress path") .style("opacity", 1); d3.selectAll(".STATE_FIPS") .style("opacity", 1); }); } // svg.append("path") // .datum(topojson.mesh(us, us.objects.STATE_FIPS, function(a, b) { return a.id !== b.id; })) // .attr("class", "STATE_FIPS") // .attr("d", path); svg.append("text") .style("font-weight", "bold") .attr("x", width - 430) .attr("y", height - 170) .text("Margin of Victory vs"); svg.append("text") .style("font-weight", "bold") .attr("x", width - 430) .attr("y", height - 152) .text("Foreign Born Growth"); var legend1 = svg.selectAll(".legend") .data(colorDem.domain().reverse()) .enter().append("g") .attr("transform", function(d,i) { return "translate(" + (width-410) + "," + (height - 144 + 16 * i) + ")"; }); legend1.append("rect") .attr("width", 10) .attr("height", 10) .style("fill", function(d) { return colorDem(d); }); legend1.append("text") .attr("x", 16) .attr("y", 9) .style("font-size", "10px") .text(function(d) { return commas(d); }); var legend2 = svg.selectAll(".legend") .data(colorRep.domain().reverse()) .enter().append("g") .attr("transform", function(d,i) { return "translate(" + (width-425) + "," + (height - 144 + 16 * i) + ")"; }); legend2.append("rect") .attr("width", 10) .attr("height", 10) .style("fill", function(d) { return colorRep(d); }); var legend3 = svg.selectAll(".legend") .data(colorFB.domain().reverse()) .enter().append("g") .attr("transform", function(d,i) { return "translate(" + (width-350) + "," + (height - 144 + 16 * i) + ")"; }); legend3.append("rect") .attr("width", 10) .attr("height", 10) .style("fill", function(d) { return colorFB(d); }); legend3.append("text") .attr("x", 16) .attr("y", 9) .style("font-size", "10px") .text(function(d) { return commas(d); }); function use_data(d) { if (inputValue == "2018") { return mov_vs_fbByDist18[d.id]; } else if (inputValue == "2020") { return mov_vs_fbByDist20[d.id]; } else if (inputValue == "2022") { return mov_vs_fbByDist22[d.id]; } else if (inputValue == "2024") { return mov_vs_fbByDist24[d.id]; } } function timeMatch(d) { if (inputValue == "2018") { var green_val = mov_vs_fbByDist18[d.id]; var blue_val = mov_vs_fbByDist18[d.id]; var red_val = mov_vs_fbByDist18[d.id]; if (mov_vs_fbByDist18[d.id]["party"] == "R" && mov_vs_fbByDist18[d.id]["mov_vs_FB"] > 0) { return colorRep(red_val["mov_vs_FB"]); } else if (mov_vs_fbByDist18[d.id]["party"] == "D" && mov_vs_fbByDist18[d.id]["mov_vs_FB"] > 0) { return colorDem(blue_val["mov_vs_FB"]); } else if (mov_vs_fbByDist18[d.id]["mov_vs_FB"] <= 0) { return colorFB(green_val["mov_vs_FB"]); } else { return "#000"; } } else if (inputValue == "2020") { var green_val = mov_vs_fbByDist20[d.id]; var blue_val = mov_vs_fbByDist20[d.id]; var red_val = mov_vs_fbByDist20[d.id]; if (mov_vs_fbByDist20[d.id]["party"] == "R" && mov_vs_fbByDist20[d.id]["mov_vs_FB"] > 0) { return colorRep(red_val["mov_vs_FB"]); } else if (mov_vs_fbByDist20[d.id]["party"] == "D" && mov_vs_fbByDist20[d.id]["mov_vs_FB"] > 0) { return colorDem(blue_val["mov_vs_FB"]); } else if (mov_vs_fbByDist20[d.id]["mov_vs_FB"] <= 0) { return colorFB(green_val["mov_vs_FB"]); } else { return "#000"; } } else if (inputValue == "2022") { var green_val = mov_vs_fbByDist22[d.id]; var blue_val = mov_vs_fbByDist22[d.id]; var red_val = mov_vs_fbByDist22[d.id]; if (mov_vs_fbByDist22[d.id]["party"] == "R" && mov_vs_fbByDist22[d.id]["mov_vs_FB"] > 0) { return colorRep(red_val["mov_vs_FB"]); } else if (mov_vs_fbByDist22[d.id]["party"] == "D" && mov_vs_fbByDist22[d.id]["mov_vs_FB"] > 0) { return colorDem(blue_val["mov_vs_FB"]); } else if (mov_vs_fbByDist22[d.id]["mov_vs_FB"] <= 0) { return colorFB(green_val["mov_vs_FB"]); } else { return "#000"; } } else { var green_val = mov_vs_fbByDist24[d.id]; var blue_val = mov_vs_fbByDist24[d.id]; var red_val = mov_vs_fbByDist24[d.id]; if (mov_vs_fbByDist24[d.id]["party"] == "R" && mov_vs_fbByDist24[d.id]["mov_vs_FB"] > 0) { return colorRep(red_val["mov_vs_FB"]); } else if (mov_vs_fbByDist24[d.id]["party"] == "D" && mov_vs_fbByDist24[d.id]["mov_vs_FB"] > 0) { return colorDem(blue_val["mov_vs_FB"]); } else if (mov_vs_fbByDist24[d.id]["mov_vs_FB"] <= 0) { return colorFB(green_val["mov_vs_FB"]); } else { return "#000"; } } } function initialState(d){ if (document.getElementById("range").innerHTML == 2018) { var green_val = mov_vs_fbByDist18[d.id]; var blue_val = mov_vs_fbByDist18[d.id]; var red_val = mov_vs_fbByDist18[d.id]; if (mov_vs_fbByDist18[d.id]["party"] == "R" && mov_vs_fbByDist18[d.id]["mov_vs_FB"] > 0) { return colorRep(red_val["mov_vs_FB"]); } else if (mov_vs_fbByDist18[d.id]["party"] == "D" && mov_vs_fbByDist18[d.id]["mov_vs_FB"] > 0) { return colorDem(blue_val["mov_vs_FB"]); } else if (mov_vs_fbByDist18[d.id]["mov_vs_FB"] <= 0) { return colorFB(green_val["mov_vs_FB"]); } else { return "#000"; } } } } return svg.node(); }4e:Tfe0,chart = { var height = 600, width = 600; var margin = ({top: 20, right: 35, bottom: 20, left: 35}); var svg = d3.select(DOM.svg(width, height)) .attr("width", "60%") .attr("height", "60%"); var rowConverter = function(d) { return { word: (d.word), dem: parseFloat(d.dem), rep: parseFloat(d.rep) }; }; d3.csv("https://raw.githubusercontent.com/ceguiluzrosas/D3_Json/master/Google_Trends/word_usage/word_usage_"+stateFilter+".csv", rowConverter, function(data) { var dataset = data; var x = d3.scaleLinear() .domain([0,chartBound]) .range([margin.left, width - margin.right]); var y = d3.scaleLinear() .domain([0,chartBound]) .range([height - margin.bottom, margin.bottom]); var xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(width/50)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("y2", -height) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", width/2+margin.right) .attr("y", -10) .attr("font-weight", "bold") .attr("text-anchor", "end") .attr("fill", "black") .style("font-size", "15px") .text("Democratic %")) var yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(height / 50)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -height/3-margin.top) .attr("y", 20) .attr("transform", "rotate(-90)") .attr("text-anchor", "end") .attr("font-weight", "bold") .attr("fill", "black") .style("font-size", "15px") .text("Republican %")) var tooltip = d3.select("body") .append("div") .attr("class", "tooltip") .style("background", "black") .style("position", "absolute") .style("z-index", "10") .style("visibility", "hidden"); var commas = d3.format(",.5f"); svg.append("g") .attr("stroke", "black") .attr("stroke-width", 1) .selectAll("circle") .data(dataset) .enter().append("circle") .attr("cx", d => x(d.dem)) .attr("cy", d => y(d.rep)) .attr("r", 5) .attr("fill", d => retrieveColor(d.dem, d.rep)) .on("mouseover", function(d) { tooltip.html(""); tooltip.style("visibility", "visible") .style("border", "7px solid " + "pink"); tooltip.append("h3") .text("Word: "+d.word) .attr("font-weight", "bold") .style("color", "white"); tooltip.append("div") .style("color", "white") .attr("font-weight", "bold") .text("Democratic: " + commas(d.dem) + "%"); tooltip.append("div") .style("color", "white") .attr("font-weight", "bold") .text("Republican: " + commas(d.rep) + "%"); d3.selectAll("circle").style("opacity", 0.5); d3.select(this) .style("opacity", 1) .style("stroke", "#222") .style("opacity", 1) .raise(); }) .on("mousemove", function() { return tooltip.style("top", (d3.event.pageY-52) + "px").style("left", (d3.event.pageX+18) + "px"); }) .on("mouseout", function(d) { tooltip.style("visibility", "hidden"); d3.selectAll("circle").style("opacity", 1); }) svg.append("line") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("y1", height - margin.bottom) .attr("y2", margin.bottom) .style("stroke", "red"); svg.append("g") .call(yAxis); svg.append("g") .call(xAxis); }) return svg.node(); }4f:Ta65,md `Design Decision and Process
We initially started with the idea of creating 4 different visualizations that would build upon our work from A2 to portray a user-profile of the average US Democratic and Republican user involved in these Immigration-related conversations. Our idea was to have: two pyramid charts where each layer corresponds to the word frequency, a time-series graphs that displays the popularity of several terms from September 2016 to May 2018, a network graph for connecting influencers based on retweets, and a map for portraying the political landscape of the country over X number of years. The time-series graph can be found [here] (https://beta.observablehq.com/@ceguiluzrosas/immigration-politics). In order to integrate these ideas best into one visualization (accompanied by “helper” visualization), we began to re-think our idea. Given that our theme was “Immigration” and that the USA is known for being a “cultural potluck”, we began to consider the (future) presence of immigrants in the US and their involvement/mention in these conversations and how that might effect election outcomes.
We settled on the idea of creating a map that will compare the foreign-born electoral growth rate and the 2016 margin of victory in battleground districts with the overall 2016 Presidential Results in the background. Our aim was to show that foreign-born voters are in the rise in vital parts of the US and that their votes will potentially affect the outcome of future electoral victories. Therefore there will be a continued shift in the electorate every 2 years. In addition, we took the pyramid concept and decided to look at how often certain shared words are used in immigration conversations by both parties in each state since the elections. This graph will serve as a reflection of how users from both parties referred and/or chose to write their support/disproval of immigrants in the US.
Along the way we faced certain challenges. The first being adjusting our graphs to the proper D3 version since each graph works best with one version and not the other. The change of version affects how our data will be processed by Observable. CSS and HTML also has some unpredictable effects on rendering of visualizations in Observable, as well, which proved annoying. Also, we were faced with the decision of deciding if hovering over a state will affect the selection of state in the word chart. In the end, we decided on letting the user decide which states they choose to explore. The interactive components of the word chart allow the user to select what kind of information they want to explore. `50:[] 49:{"id":"7bddcfc55940a64a","slug":"a3-interactive-visualization","title":"A3 Interactive Visualization","thumbnail":"c9151eaae8307b98f7a682f0856fc035c8e154698289d5176357deaa169c3b93","access_level":"public","create_time":"$D2018-10-30T01:22:22.095Z","update_time":"$D2019-02-13T15:12:17.055Z","view_time":null,"first_public_time":"$D2018-10-30T02:07:41.687Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"6ebfe19b938ed05f","login":"krwarner","name":"Kenny Warner","avatar_url":"https://avatars-next.observableusercontent.com/128519b73e15e24f7fa6607f95203dfd82ba9b73e7ca06a5ca882aea5dc82b7f","tier":"starter_2024","bio":"Previously founder of FuzeUs, now Data Science student at Columbia","followed_by_you":false,"follows_you":false},"version":337,"publish_version":337,"role":null,"authored":false,"authors":[{"type":"individual","id":"7c25d453e04671b3","login":"krwarner","name":"Kenny Warner","avatar_url":"https://avatars-next.observableusercontent.com/128519b73e15e24f7fa6607f95203dfd82ba9b73e7ca06a5ca882aea5dc82b7f","tier":null,"bio":"Previously founder of FuzeUs, now Data Science student at Columbia","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7c25d453e04671b3","login":"krwarner","name":"Kenny Warner","avatar_url":"https://avatars-next.observableusercontent.com/128519b73e15e24f7fa6607f95203dfd82ba9b73e7ca06a5ca882aea5dc82b7f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"A3 Interactive Visualization","cells":[{"id":220,"value":"md `# A3 Interactive Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"md `For this assignment, we created an interactive-extension of our previous assignment.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"md `Team:
\n\t•\tKenny Warner (krw2133)
\n\t•\tCarlos Eguiluz Rosas (cee2130)
`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"md `Overview:
\nOur first dataset contains +500 MB worth of Twitter data that includes approximately one million immigration-related tweets accompanied with their respective user profiles (ex. descriptions, locations, time zones) from September 2016 to May 2018. Our second dataset includes data from New American Economy, that looks at the margin of victory of 80 battleground districts during the 2016 elections and their respective growth of the foriegn born electorate between 2018 and 2024. For this assignment, we looked at both the 2016 Presidential Election Margin of Victory vs Foreign Born Electorate Growth Rates (2018-2024), and the particular terms (words, hashtags, mentions) shared between Democrats and Republicans (in their tweet) from each US state.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`### 2016 Election Margin of Victory vs Foreign Born Electorate Growth Rate 2018 - 2024`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"html`\n Choose a Year\n

\n
\n 2018\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"md `### Frequency Comparison of Terms Shared (in Tweets) between Democrats and Republicans by State`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"// viewof chartBound = {\n// const div = html`\n// Choose Size of Vis: \n// \n// \n// `;\n// const range = div.querySelector(\"[type=range]\");\n// const number = div.querySelector(\"[type=number]\");\n// div.value = range.value = number.value = 10;\n// range.oninput = () => number.value = div.value = range.valueAsNumber;\n// number.oninput = () => range.value = div.value = number.valueAsNumber;\n// return div;\n// }\n\nviewof chartBound = slider({\n min: 0.0, \n max: 10.0, \n step: 0.1, \n value: 10, \n title: \"Size of Visualization\", \n description: \"Choose a size (upper-bound) for visualization\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"viewof stateFilter = select({\n title: \"US States\",\n description: \"Choose a US State for query\",\n options: ['ALABAMA', 'ALASKA', 'ARIZONA', 'ARKANSAS', 'CALIFORNIA', 'COLORADO', 'CONNECTICUT', 'DELAWARE', 'FLORIDA', 'GEORGIA', 'HAWAII', 'IDAHO', 'ILLINOIS', 'INDIANA', 'IOWA', 'KANSAS', 'KENTUCKY', 'LOUISIANA', 'MAINE', 'MARYLAND', 'MASSACHUSETTS', 'MICHIGAN', 'MINNESOTA', 'MISSISSIPPI', 'MISSOURI', 'MONTANA', 'NEBRASKA', 'NEVADA', 'NEW HAMPSHIRE', 'NEW JERSEY', 'NEW MEXICO', 'NEW YORK', 'NORTH CAROLINA', 'NORTH DAKOTA', 'OHIO', 'OKLAHOMA', 'OREGON', 'PENNSYLVANIA', 'RHODE ISLAND', 'SOUTH CAROLINA', 'SOUTH DAKOTA', 'TENNESSEE', 'TEXAS', 'UTAH', 'VERMONT', 'VIRGINIA', 'WASHINGTON', 'WEST VIRGINIA', 'WISCONSIN', 'WYOMING'],\n value: \"ALABAMA\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"md `Data Processing
\n* For the frequency comparision visualization, we first filtered tweets by location and considered only those where the US state name/abbreviation was included in the user profile. Following that, we looked at user descriptions and built a heuristic for determining democrats from republicans based on particular labels in description. Using this, we gathered all the tweets by state, recorded frequency for each party, and took the set intersection of all terms.\n* For the map, we took information from the 2016 election to determine margin of victory, Cook PVI ratings to determine battleground districts (PVI+-5 Republican vs Democrat), and 2016/2017 ACS data to determine foreign born population, electorate, and growth rates. The shapefile that was used was gathered from the US Census TIGER/Line files.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md `Data Source:
\n* Our Twitter \"data was collected using Twitter’s API by Kenny Warner through New American Economy. [The data was collected through] Twitter’s Historical Archive API and pulled a few thousand tweets between the hours of 1pm and 6pm EST every other day for nearly two years worth of data. In doing so this captured before, during, and after the election of Donald Trump, so that no one period of time would lead to bias within the data. Click [here](https://drive.google.com/open?id=1RUCVeG0GipaOoaXwEFhC_BlJcuOGNgnV) to access our shareable dataset.\n* Our map data was taken from New American Economy and ACS American Fact Finder. Click [here](https://gist.github.com/krwarner/b1e1358cfb016cdce5b3b9e2633b8d48) to access our shareable dataset.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"md `Resources/References:
\n* Inputs - https://beta.observablehq.com/@jashkenas/inputs\n* Scatterplot Example - http://bl.ocks.org/weiglemc/6185069\n* Map Example = http://blockbuilder.org/syntagmatic/623a3221d3e694f85967d83082fd4a77\n* Data Importing/Debugging for Republican vs Democrat Graph - TA Conder Shou`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"md `Imports and Parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"https://d3js.org/d3.v4.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"function retrieveColor(x, y) {\n if (x > y ) {return \"#4152f4\";}\n else {return \"#f44141\";}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 44:null