Giter Club home page Giter Club logo

datavis-jazzy's Introduction

Jazzy Data Visualization

The main goal of this app is to allow exploration of the dataset and analyze patterns of change in arts over the years. This data comes from a survey of the National Endowment for the Arts (NEA) and is made publicly available for a data visualization challenge. The goal of this challenge is to receive visualizations that supply answers to questions such as: What role do the arts play in communities across the country? How has arts participation changed over time? What are some of the possible explanations for shifts in participation patterns?

We have created an app that allows for interactive visualizations that facilitate the user to find answers to such questions. By using the d3js library we have made an interactive map of the United States that allows the user to explore the arts participation of the different states over time. From this interactive map interesting changes may be identified and selected. These interesting states may then be selected to be explored further with more detailed visualizations that show the different communities and groups within the population of the selected state.

Usage and Features

Prepare

  1. Clone the repo and run index.html. From a webserver, otherwise the data cannot be loaded caused by XSS browser security.

Quick difference between states

  1. Select one or more filters to the right
  2. The colors in the maps show the combined values in % [white (min) > blue (max)]
  3. A quick comparison between states and years can be done by viewing the color difference between them

Quick difference in time

  1. Hover the states to show the computed value in %
  2. The same state in the other maps light up and show the difference in value
  3. The color of the tooltip change for the difference in value [red (min) > grey (zero) > green (max)]

In-detaile comparison between states and time

  1. Click to select multiple states
  2. The lower left corner shows the selected states
  3. Click on this list to open up a selection form where you can select chart types and other variables for detailed comparison

Resources

For this app we used data from the US Government for a Visualisation Challenge. We used Bootstrap for basic styling and jQuery for basic dom manipulation. D3js is used for visualisation in svg object in javascript.

The following examples were used as inspiration. Parallel Sets, Pie, Bar, US Map

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.