diff --git a/decks/.DS_Store b/decks/.DS_Store new file mode 100644 index 00000000..4496da76 Binary files /dev/null and b/decks/.DS_Store differ diff --git a/decks/Elections-Proposal.mdx b/decks/Elections-Proposal.mdx new file mode 100644 index 00000000..f9b58b1d --- /dev/null +++ b/decks/Elections-Proposal.mdx @@ -0,0 +1,76 @@ +import { CodeSurfer as Surfer } from "code-surfer"; +import { CodeSurferColumns, Step } from "code-surfer"; +import { Appear, Background } from "gatsby-theme-mdx-deck"; +import * as L from "../src/layout"; +import customTheme from "../src/theme"; +import GreetingLoader from "./src/greeting-loader"; + +export const theme = customTheme; + +import i from '../images/Open-FEC-Sample-Data.jpg'; + +# Workshop Proposal +## Title +Analyzing OpenFEC Finacial Trends +--- + +# Specific Topic +- We are going to use the OpenFEC API Election endpoint to visualize data for total disbursements and total receipts for Presidential candidates for the last 30 elections. +- (our example) Graph will compare this financial information over time and for both the Democratic and Republican parties. +- Comparing one specific data point for Democratics and Republicans from 1950-2016 + +--- + +# Interactive Component +- We will have students visualize data from the same endpoint but for cash_on_hand_end_period +- They will be using the API to record 3 specific data for each candiate during that election year into a bar graph using Chartjs. +## Example Image + +--- + +# Code Deliverables +## Week 2 +- Code out total disbursements and total receipts (Work on together) + +## Week 3 +- Finish up any unfinished work from week 2 + complete interactive activity (Work on together) + +## Week 4 +- Finish up any unfinished code from interactive activity +- Work on presentation slides (will decide how to split up) + +--- + +# Slide Outline +What is a general roadmap for your slides? +- Intro to tech (Chartjs, d3js) +- Visualize information from API and Chartjs (also explain how to get the JSON from the website) +- Explain and present our code +- Present interactive activity prompt +- Conclusion and why its important +--- + +# Timing +Each workshop should be around an hour to 90 minutes. How long will your workshop be? +- An hour +--- + +# Motivation behind project +What motivated your duo to pursue this idea? +- Explored the API and searched through to find interesting information +- The data from the API allows us to look in to how much money each candiate is spending and how much is the 'sweet spot' +- Comparing the Democrats and Republicans, we want to figure out if money is a factor in winning. +- Importance: Can we use information from the past to gain insight into right amount to spend on an election? Can this help us in predicting results? +--- + +# Explain difficulty/prior experience needed +Is there any prior experience needed for this workshop? Please be specific. +- Some basic experience with HTML/CSS/JavaScript would be helpful, but not neccessarily required +--- + +# Technologies that will be used +- Chartjs/D3js +- Postman + + + diff --git a/decks/Project/OpenFEC.html b/decks/Project/OpenFEC.html new file mode 100644 index 00000000..de9b7e04 --- /dev/null +++ b/decks/Project/OpenFEC.html @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/decks/Project/OpenFEC.js b/decks/Project/OpenFEC.js new file mode 100644 index 00000000..d5c86c19 --- /dev/null +++ b/decks/Project/OpenFEC.js @@ -0,0 +1,104 @@ +// Create a web request object using an XMLHttpRequest object +var http = new XMLHttpRequest(); + +// This is the url we are making the request to +var url = "https://api.open.fec.gov/v1/presidential/financial_summary/" ++ "?sort=-net_receipts&election_year=2016&sort_null_only=false&page=1&sort_nulls_last=false" ++ "&api_key=x4RnLdBY6jSdpY3qB2skGmZfU6xecsBWPyH9saWg&candidate_id=-P00000001&sort_hide_null=false&per_page=13"; + +// open and sending the GET request at the url +http.open('GET', url); +http.send(); + +// this function will run when we receive a response +http.onreadystatechange=function(){ + // only proceed once we receive a VALID response + if (this.readyState == 4 && this.status == 200) { + // obtain all the JSON data and parse it into a JavaScript object raw_data + var raw_data = JSON.parse(this.response); + // obtain the results array from the raw_data + var results = raw_data["results"]; + + // initialize empty arrays for the fields we are interested in displaying in our chart + names = []; + operating_expenditures = []; + total_contribution_refunds = []; + net_receipts = []; + individual_contributions_less_refunds = []; + fundraising_disbursements = []; + + // loop through all of the results + for (i = 0; i < results.length; i++) { + // obtain the current candidate / party from all the results we are traversing + current_data = results[i]; + + /* obtain the candidate name, operating expenditures, etc. by indexing the current_data with + appropriate key */ + names.push(current_data["candidate_name"]); + operating_expenditures.push(current_data["operating_expenditures"]); + net_receipts.push(current_data["net_receipts"]); + fundraising_disbursements.push(current_data["fundraising_disbursements"]); + individual_contributions_less_refunds.push(current_data["individual_contributions_less_refunds"]); + } + + // Save the chart from HTML in JavaScript + var ctx = document.getElementById('chart').getContext('2d'); + // Create a new Chart (will be a bar chart) object + var chart = new Chart(ctx, { + type: 'bar', + // create the data + data: { + // x-axis will be labeled with names + labels: names, + /* create an array of different data values for each name, each having respective labels, colors, + and data that we obtained from the API response earlier*/ + datasets: [ + { + label: 'Operating Expenditures', + data: operating_expenditures, + backgroundColor: "rgba(106, 220, 123, 1)", + borderColor: "black", + borderWidth: 1 + + }, + { + label: "Net Receipts", + data: net_receipts, + backgroundColor: "rgba(71, 175, 255, 1)", + borderColor: "black", + borderWidth: 1, + }, + + { + label: "Fundraising Disbursements", + data: net_receipts, + backgroundColor: "rgba(136, 0, 240, 1)", + borderColor: "black", + borderWidth: 1, + }, + { + label: "Individual Contributions Less Refunds", + data: individual_contributions_less_refunds, + backgroundColor: "rgba(233, 114, 114, 1)", + borderColor: "black", + borderWidth: 1, + } + ] + }, + // tinker with various options for the chart + options: { + // from the scales + scales: { + // for the y-axis specifically + yAxes: [{ + // start the ticks at 0 + ticks: { + beginAtZero: true + } + }] + } + } + }); + + } +} diff --git a/decks/Project/package/.DS_Store b/decks/Project/package/.DS_Store new file mode 100644 index 00000000..9498e50b Binary files /dev/null and b/decks/Project/package/.DS_Store differ diff --git a/decks/Project/package/LICENSE.md b/decks/Project/package/LICENSE.md new file mode 100644 index 00000000..29c941dc --- /dev/null +++ b/decks/Project/package/LICENSE.md @@ -0,0 +1,9 @@ +The MIT License (MIT) + +Copyright (c) 2018 Chart.js Contributors + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/decks/Project/package/README.md b/decks/Project/package/README.md new file mode 100644 index 00000000..5a522a5e --- /dev/null +++ b/decks/Project/package/README.md @@ -0,0 +1,32 @@ +

+
+ Simple yet flexible JavaScript charting for designers & developers +

+ +

+ Downloads + Builds + Coverage + Awesome + Slack +

+ +## Documentation + +- [Introduction](https://www.chartjs.org/docs/latest/) +- [Getting Started](https://www.chartjs.org/docs/latest/getting-started/) +- [General](https://www.chartjs.org/docs/latest/general/) +- [Configuration](https://www.chartjs.org/docs/latest/configuration/) +- [Charts](https://www.chartjs.org/docs/latest/charts/) +- [Axes](https://www.chartjs.org/docs/latest/axes/) +- [Developers](https://www.chartjs.org/docs/latest/developers/) +- [Popular Extensions](https://github.com/chartjs/awesome) +- [Samples](https://www.chartjs.org/samples/) + +## Contributing + +Instructions on building and testing Chart.js can be found in [the documentation](https://github.com/chartjs/Chart.js/blob/master/docs/developers/contributing.md#building-and-testing). Before submitting an issue or a pull request, please take a moment to look over the [contributing guidelines](https://github.com/chartjs/Chart.js/blob/master/docs/developers/contributing.md) first. For support, please post questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/chartjs) with the `chartjs` tag. + +## License + +Chart.js is available under the [MIT license](https://opensource.org/licenses/MIT). diff --git a/decks/Project/package/bower.json b/decks/Project/package/bower.json new file mode 100644 index 00000000..588bcfd6 --- /dev/null +++ b/decks/Project/package/bower.json @@ -0,0 +1,16 @@ +{ + "name": "chart.js", + "description": "Simple HTML5 charts using the canvas element.", + "homepage": "https://www.chartjs.org", + "license": "MIT", + "version": "2.9.3", + "main": "./dist/Chart.js", + "ignore": [ + ".github", + ".codeclimate.yml", + ".gitignore", + ".npmignore", + ".travis.yml", + "scripts" + ] +} \ No newline at end of file diff --git a/decks/Project/package/composer.json b/decks/Project/package/composer.json new file mode 100644 index 00000000..b332bb0f --- /dev/null +++ b/decks/Project/package/composer.json @@ -0,0 +1,26 @@ +{ + "name": "nnnick/chartjs", + "type": "library", + "description": "Simple HTML5 charts using the canvas element.", + "keywords": [ + "chart", + "js" + ], + "homepage": "https://www.chartjs.org/", + "license": "MIT", + "authors": [ + { + "name": "NICK DOWNIE", + "email": "hello@nickdownie.com" + } + ], + "require": { + "php": ">=5.3.3" + }, + "minimum-stability": "stable", + "extra": { + "branch-alias": { + "release/2.0": "v2.0-dev" + } + } +} diff --git a/decks/Project/package/package.json b/decks/Project/package/package.json new file mode 100644 index 00000000..afb129b7 --- /dev/null +++ b/decks/Project/package/package.json @@ -0,0 +1,69 @@ +{ + "name": "chart.js", + "homepage": "https://www.chartjs.org", + "description": "Simple HTML5 charts using the canvas element.", + "version": "2.9.3", + "license": "MIT", + "jsdelivr": "dist/Chart.min.js", + "unpkg": "dist/Chart.min.js", + "main": "dist/Chart.js", + "keywords": [ + "canvas", + "charts", + "data", + "graphs", + "html5", + "responsive" + ], + "repository": { + "type": "git", + "url": "https://github.com/chartjs/Chart.js.git" + }, + "bugs": { + "url": "https://github.com/chartjs/Chart.js/issues" + }, + "files": [ + "bower.json", + "composer.json", + "dist/*.css", + "dist/*.js" + ], + "devDependencies": { + "clean-css": "^4.2.1", + "coveralls": "^3.0.0", + "eslint": "^5.9.0", + "eslint-config-chartjs": "^0.1.0", + "eslint-plugin-html": "^5.0.0", + "gitbook-cli": "^2.3.2", + "gulp": "^4.0.0", + "gulp-eslint": "^5.0.0", + "gulp-file": "^0.4.0", + "gulp-htmllint": "^0.0.16", + "gulp-replace": "^1.0.0", + "gulp-size": "^3.0.0", + "gulp-streamify": "^1.0.2", + "gulp-terser": "^1.1.6", + "gulp-zip": "^4.2.0", + "jasmine": "^3.3.0", + "jasmine-core": "^3.3.0", + "karma": "^4.0.0", + "karma-chrome-launcher": "^2.2.0", + "karma-coverage": "^1.1.1", + "karma-firefox-launcher": "^1.0.1", + "karma-jasmine": "^2.0.1", + "karma-jasmine-html-reporter": "^1.4.0", + "karma-rollup-preprocessor": "^7.0.0", + "merge-stream": "^1.0.1", + "pixelmatch": "^4.0.2", + "rollup": "^1.0.0", + "rollup-plugin-commonjs": "^10.0.0", + "rollup-plugin-istanbul": "^2.0.1", + "rollup-plugin-node-resolve": "^5.0.0", + "rollup-plugin-terser": "^5.0.0", + "yargs": "^12.0.5" + }, + "dependencies": { + "chartjs-color": "^2.1.0", + "moment": "^2.10.2" + } +} diff --git a/decks/README.md b/decks/README.md new file mode 100644 index 00000000..b1a22a6f --- /dev/null +++ b/decks/README.md @@ -0,0 +1,21 @@ +# OpenFEC Financial Data Visualization + +## API Key + +Sign up for the OpenFEC API Key through this [website.](https://api.data.gov/signup/)Check your email for the API Key and save it. You will need the API key to make requests to the API. + +## ChartJS Installation + +Download ChartJS through this [website.](https://www.jsdelivr.com/package/npm/chart.js) It will download a zip file, which you should extract to a folder where you ultimately want to save your final project. The folder will be called `package`. + +## Create HTML/JS Files + +Create one HTML file and one JS file in the same location as you extracted the ChartJS. You should edit and save the HTML file and JS file in a text editor of your choice (download one if you don’t have one) + +## Testing Your Program and Seeing Output + +As you code your HTML and JS files, to run the program and see the output, right-click on the HTML file in your file directory and open with a web browser of your choice! + +## Want to Learn How to Code the Project? + +See the blog! \ No newline at end of file diff --git a/decks/images/Open-FEC-Sample-Data.png b/decks/images/Open-FEC-Sample-Data.png new file mode 100644 index 00000000..ffcca77e Binary files /dev/null and b/decks/images/Open-FEC-Sample-Data.png differ