Code Monkey home page Code Monkey logo

updatedmap.github.io's Introduction

USA Election Map

An interactive USA presidential, senatorial, house, and governor election map. Created with HTML/CSS/JS (+JQuery), chart.js, and map svg outlines from YAPms.

Features

  • Interactive and detailed map sources
    • Displays projection data for the 2020 presidential election from FiveThirtyEight, JHK, and The Cook Political Report
    • Displays projection data for the 2022 senate elections from Let's Talk Elections, Political Analysis, and The Cook Political Report
    • Displays projection data for the 2022 governor elections from Let's Talk Elections and The Cook Political Report
    • Displays presidential (1856-2020), senatorial (1960-2020), house (1976-2020), and gubernatorial (1980-2020) election results, showing both victory margin and voteshare percentages for each state & district
    • Pie chart to show electoral vote counts by party and by margin, as well as national popular vote totals for past elections
    • View states that flipped between election cycles on both the map and pie chart
    • Fully editable custom maps that can be downloaded and uploaded as JSON or CSV files
  • Comparisons between different map sources
    • Can be used to show shift between elections
    • Can be used to show margins of error between projections and election results
  • Countdown timer to upcoming elections and important events
  • Keyboard controls for advanced usage

Development

Running a fork locally is simple since this code only uses the base HTML/CSS/JS stack (+ JQuery & chart.js, which are included locally). Just clone the repo and open index.html to run.

Since the site uses separate svg files for the map, Chrome and Safari might prevent them from loading over the file protocol due to CORS restrictions (this is a well known issue: see more info and solution).

  • Fixing this CORS issue on Safari is fairly simple: go to Develop > Disable Cross-Origin Restrictions.
  • Chrome is a little more complicated, as it needs to be opened via command line to disable CORS:
    • Mac:
      "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --allow-file-access-from-files
      
    • Windows:
      "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files
      
  • Alternatively, Firefox can be used without issue since it does not enforce CORS restrictions over the file protocol in the same way.

Another way to address the CORS issue is to run a local http server. On Mac (via Homebrew):

brew install http-server
cd <local repo path>
http-server

Then open the address provided in the Terminal window (by default, it seems to be http://localhost:8080).

TODO List

  • Past senate election results & 2022 senate projections
    • More past senate election results (1960-1974)
  • More past election results
    • 1960-1972 presidential elections
    • 1912-1956 presidential elections
    • 1856-1908 presidential elections
  • Past governor elections & 2022 governor projections (1980-2020)
  • Full third-party support in past results and custom maps
    • Display in voteshare
    • Display on pie chart
    • Display in past result maps
    • Add & Edit parties in custom map
    • Shift & compare modes for multiple parties
  • Custom map improvements
    • Directly editable margins
    • Direct electoral vote editing
    • Set map-wide electoral votes from decade
    • Add multiple dates, edit dates, create & remove dates
    • Split electoral votes between multiple candidates
  • National popular vote totals for past elections
  • Past house election results
  • Presidential election results by county
  • Profiles and custom map sharing
  • Popularity rating source (by state)
  • Custom countdown timer events
  • 2024 presidential primaries
    • Past presidential primaries?

If you have any questions, suggestions, or feature ideas, feel free to open an issue here on GitHub. Alternatively, you can email [email protected].

updatedmap.github.io's People

Contributors

jacksonjude avatar fish1 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.