30:T84c,signinNote = md`_This tutorial presumes you’ve signed up for Observable. To do that, click Fork in the top right corner. A dialogue box will prompt you to join Observable using a [GitHub](https://github.com/) account._ This tutoial is what's called an **Observable Notebook**. It's JavaScript, made easier. A notebook is both readable and functional: a cross between an essay and a program. It is made up of a series of cells, and each cell is defined by its JavaScript source code. 👈 Click the margin to the left of any cell (including this one!), to toggle it open and closed, and see, and even edit, the source that lies below. In this tutorial, all technical terminology is highlighted. Click a highlighted word to look it up in the glossary.`31:T52a,api = md`

## Intro to API's API is an acronym for **A**pplication **P**rogram **I**nterface. It's essentially a set of protocols that allow computers to query information from each other. Today, we are specifically using[ Web API's](https://en.wikipedia.org/wiki/Web_API). This will allow us to automatically and progromatically retrieve election data without having to manually keep up with our own database. So instead of constantly maintaining a spreadsheet with tons of data points, we'll just make one single request to something called an endpoint. Think of the the endpoint like a huge remote database, and the request as a set of instructions specifying what we want. Those specific instructions are called parameters. This approach has many benefits: 1. We don't have to maintain our own database 2. We only deal with the data we need 3. The data is always up to date *Today, we are going to begin with the [Google Civic Information API](https://developers.google.com/civic-information/docs/using_api).*
`32:T500,html`

Normalized Input	Open Civic Data Division
${response.normalizedInput.line1}
${response.normalizedInput.city}	${Object.keys(response.divisions) .filter(d => d.includes("place")) .map(d => html`${d} `)}
${response.normalizedInput.zip}	${Object.keys(response.divisions) .filter(d => d.includes("county")) .map(d => html`${d} `)}
${response.normalizedInput.state}	${Object.keys(response.divisions) .filter( d => d.includes("state") && !d.includes("county") && !d.includes("place") ) .map(d => html`${d} `)}
United States of America	${Object.keys(response.divisions) .filter( d => d.includes("country") && !d.includes("state") && !d.includes("county") && !d.includes("place") ) .map(d => html`${d} `)}

`33:T49c,figure = table( sortedResults.map( d => new Object({ name: _.startCase(_.lowerCase(d.name)), party: partyColor(d.party[0]), district: d.district_number === 0 ? "Senate" : `House ${d.district_number}`, status: _.startCase(d.incumbent_challenge_full), cash: d.cash_on_hand_end_period }) ), { rank: false, sortable: true, paged: 5, style: 'compact', columns: { name: { formatter(val) { // Formatters can also return HTML values! Here’s // one that highlights first names. let parts = val.match(/^(\S+)\s(.*)/); return html`${parts[1]}, ${parts[2]}`; } }, cash: { formatter(val) { let formatted = d3.format("($,.0f")(val); if (val > 0) { return html`${formatted}`; } else if (val === 0) { return html`${formatted}`; } else { return html`${formatted}`; } } }, status: {} } } )34:T5f3,glossary = md`

## Glossary * JavaScript: * Fetch API: * Endpoint: * Parameter: * Request: * Response: * Object: * Array: * OCD Identifiers: * CORS:`35:[] 2e:{"title":"Election Data Tutorial","cells":[{"id":0,"value":"md`# Election Data Tutorial`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1633,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1176,"value":"md`### Table of Contents\n1. Intro to API's\n * Google Civic Data API's\n * Open Civic Data Divisions\n2. Voter Quotient\n * Historial Election Data\n * Campaign Finance Data\n * Other Data Sources\n2. Alpha Product\n3. Glossary\n4. Utilites & Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1025,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"viewof address = text({\n title: \"Home Address\",\n placeholder: \"123 Political Way\",\n description: \"To get started, type in your full address!\",\n submit: \"Let's Code!\",\n width: width,\n value: \"Lebanon, Kansas 66952\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1308,"value":"address","pinned":true,"hidden":false,"mode":"ojs"},{"id":1610,"value":"{\n const map = vl\n .markGeoshape({ fill: '#ddd', stroke: '#fff', strokeWidth: .6 })\n .data(vl.topojson(usa).feature('states'));\n\n const point = vl\n .markCircle({ size: 25, color: 'red' })\n .data(coordinates)\n .encode(\n vl.latitude().fieldQ('lat'),\n vl.longitude().fieldQ('lon')\n // vl.tooltip().fieldN('iata')\n );\n\n if (coordinates) {\n return vl\n .layer(map, point)\n .project(vl.projection('albersUsa'))\n .width(width / 2.5)\n .config({ view: { stroke: null } })\n .render();\n } else {\n return vl\n .layer(map)\n .project(vl.projection('albersUsa'))\n .width(width / 2.5)\n .config({ view: { stroke: null } })\n .render();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1337,"value":"md`As you can see, whatever you type into the text box will be assigned to the parameter called \\`address\\`. This is out most important parameter—remember everything is based on where a voter is registered! It will be passed to the API, along with a couple of others. Taken together, they will specify what kind of data we recieved as a response. Here are a few other we'll pass along.\n* \\`endpoint\\` — the place where we get our data\n\n\n* \\`address\\` — the user's voter registration location\n* \\`apiKey\\` — a unique identifier giving us access\n* \\`requestType\\` — specifying what type of data we want`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"endpoint = `https://www.googleapis.com/civicinfo/v2`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1270,"value":"apiKey = `AIzaSyAeBXmh-VC60AmBRrlc5OQBJmKQg7upwDo`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1262,"value":"viewof requestType = radio({\n title: 'Request Type',\n description: 'What kind of data would you like to query from the API?',\n options: [\n { label: 'representativeInfoQuery ', value: 'representatives' },\n { label: 'electionQuery', value: 'elections' }\n // { label: 'voterInfoQuery', value: 'voterinfo' }\n ],\n value: 'representatives'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"requestType","pinned":true,"hidden":false,"mode":"ojs"},{"id":1361,"value":"md`Combine them all together, and they create our Request. Here is what it looks like! Ugly, right? Hard for humans to read, but computers love it. The four components are listed below, much easier to see!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"request = encodeURI(\n `${endpoint}/${requestType}?key=${apiKey}&address=${address}`\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1372,"value":"md`When you make a Request, you get a Response.
Click on the to see all the information we've gotten back. There's so much!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"response = d3.json(request)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1546,"value":"md`The response comes back as a combination of two very important data types, an Object and an Array. \n\n~~~js\nresponse = Object {\n normalizedInput: Object {}\n kind: \"string\"\n divisions: Object {}\n offices: Array([Object,... ]) \n officials: Array([Object,... ])\n}~~~\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2510,"value":"md`Here is the same data, processed and categorized!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2506,"value":"categorizedData = {\n const processedData = Array.from(\n d3array.groups(responseAlpha.offices, d => d.name),\n ([office, value]) => ({\n office,\n level: value[0].levels[0],\n politicians: value[0].officialIndices.map(d => responseAlpha.officials[d])\n })\n );\n\n const categories = d3array.group(processedData.reverse(), d =>\n categorize(d.level)\n );\n\n return categories;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1390,"value":"ocdid = md`

\n## Open Civic Data Divisions\nLet's look at our \\`address\\` again. Because what we type and what is sent to the database are not *exactly* the same. Before are request is processed, the API normalizes our input into something that the databse can understand. It does this so it can associate each piece of the address with an Open Civic Data ID, or OCD ID.\n\nBasically, it's an international standard for political geographies!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1393,"value":"address","pinned":true,"hidden":false,"mode":"ojs"},{"id":1032,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1451,"value":"md`
\n### Next Steps\n\nSometimes getting API's to work with Observable is difficult required **C**ross **O**rigin **R**esource **S**haring, or CORS. Not all API's utilize CORS. If your API request throws the following error:

\\`TypeError: NetworkError when attempting to fetch resource.\\`

then prepend this url to your request: https://cors-anywhere.herokuapp.com/\n\nLearn why [here](https://observablehq.com/@asg017/cors-anywhere-for-observables)\n\n### The API Motherlist\n* [Open Elections](http://openelections.net/about/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1809,"value":"viewof a3 = slider({\n min: 0,\n max: 100,\n step: 1,\n value: 10,\n title: \"Voter Quotient\",\n description: \"How competitive is your race, 0 to 100?\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1785,"value":"chart = {\n const arcs = pie(dataEx);\n\n const svg = d3.create(\"svg\").attr(\"viewBox\", [-150, -150, 2000, 500 / 1.8]);\n\n svg\n .selectAll(\"path\")\n .data(arcs)\n .join(\"path\")\n .attr(\"fill\", color(a3))\n .attr('opacity', \"20%\")\n .attr(\"d\", arc);\n\n svg\n .selectAll('path2')\n .data(arcs)\n .enter()\n .append('g')\n .append('path')\n .attr('d', arc)\n .attr('fill', color(a3))\n .attr('opacity', (d, i) => (i + 1) % 2);\n\n svg\n // .append(\"g\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", \"6.7em\")\n .attr(\"text-anchor\", \"middle\")\n .selectAll(\"text\")\n .data(arcs)\n .join(\"text\")\n .call(text =>\n text\n .attr(\"y\", \"0.37em\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", color(a3))\n .text(d => a3)\n );\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":777,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1186,"value":"alpha = md`

\n## Alpha Product`","pinned":false,"hidden":false,"mode":"ojs"},{"id":572,"value":"embed = html`\n${viewof addressAlpha}
\n${Array.from(\n categorizedData,\n ([key, values]) => html`\n

${key}

\n\n\n\n${values.map(\n d =>\n html``\n)}\n

${\n d.office\n }	${d.politicians.map(d =>\n d.urls && d.phones\n ? html`${d.name} ${partyColor(\n d.party[0]\n )} ${\n d.phones[0]\n } `\n : html`${d.name} ${partyColor(d.party[0])} `\n )}

`\n)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof addressAlpha = text({\n title: \"Home Address\",\n placeholder: \"1600 Penn Ave, D.C.\",\n description: \"Type in your address to find your representatives!\",\n submit: \"Submit\",\n value: \"1600 Penn Ave, D.C.\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1417,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1254,"value":"utilities = md`

\n## Utilities, Data, & Helper Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"fedFunds = d3.json(\n `https://api.open.fec.gov/v1/candidates/totals/?election_year=2020&has_raised_funds=true&per_page=100&api_key=qXGdgdfPXPCWadQ6zp20q269ijntc8QxzjUL7V4p&state=${state}`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1800,"value":"dataEx = [{ value: a3 }, { value: 100 - a3 }]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1804,"value":"color = d3.scaleSequential(d3.interpolateYlOrRd).domain([-40, 120])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1796,"value":"arc = {\n const radius = Math.min(width, 500) / 4;\n return d3\n .arc()\n .innerRadius(radius * 0.88)\n .outerRadius(radius - 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1794,"value":"pie = d3\n .pie()\n .padAngle(0.015)\n .sort(null)\n .value(d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":994,"value":"d3array.group(sortedResults, d => d.district_number)","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"sortedResults = fedFunds.results\n .slice()\n .sort(\n (a, b) =>\n d3.ascending(a.district_number, b.district_number) ||\n d3.ascending(b.incumbent_challenge_full, a.incumbent_challenge_full)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":1748,"value":"requestAlpha = encodeURI(\n `${endpoint}/${requestType}?key=${apiKey}&address=${addressAlpha}`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1747,"value":"responseAlpha = d3.json(requestAlpha)","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"state = `${response.normalizedInput.state}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"function partyColor(data) {\n if (data === \"R\") {\n return html`(R)`;\n } else if (data === \"D\") {\n return html`(D)`;\n } else {\n return html`(I)`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"function categorize(data) {\n if (data === \"country\") {\n return \"Federal\";\n } else if (data === \"administrativeArea1\") {\n return \"State\";\n } else {\n return \"Local\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1710,"value":"mapQuestAPI = d3.json(\n `https://cors-anywhere.herokuapp.com/http://www.mapquestapi.com/geocoding/v1/address?key=e3o5CmNkCdQGqU6jiZ2GewfjvnzhWUuz&location=${encodeURI(\n address\n )}`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1580,"value":"coordinates = [\n new Object({\n lat: +openStreetMapAPI[0].lat,\n lon: +openStreetMapAPI[0].lon\n })\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1494,"value":"openStreetMapAPI = d3.json(\n `https://cors-anywhere.herokuapp.com/https://nominatim.openstreetmap.org/search?format=json&q=${encodeURI(\n address\n )}`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {\n textarea,\n text,\n radio,\n usaMapCoordinates,\n slider\n} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"import {table} from \"@tmcw/tables@513\"\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"d3array = require(\"d3-array@^2.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1609,"value":"import { vl } from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1614,"value":"usa = datasets['us-10m.json']()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1616,"value":"datasets = require('vega-datasets@1.25')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}