Git Product home page Git Product logo

life-expectancy-project's Introduction

life-expectancy-project

https://shielded-stream-21193.herokuapp.com/

Objectives

To graphically display the average life expectancy of men and women around the world over a 55 year period.

What does it do?

You can see the life expectancy of men and women across 37 countries between 1960 - 2015. The four graphs interact with each other displaying how life expectancy has changed in this time period.

How does it work

The data for this site was stored in MongoDB. It uses Flask as a framework and is styled using CSS and Bootstrap. DC.js is used to enable D3.js and Crossfilter.js to work together to manipulate the data and design graphics. The tour is created using intro.js.

Road Blocks

When it came to labelling the x and y axis, an important part of identifying what each graph is showing, I ran up against a brick wall. Despite many attempts at various displays, z-index and colour changes, I was not able to solve the mystery in time.

Tech Used

Some of the tech used includes:

  • Flask handles routing in Python
  • D3.js is used for the visual side of data manipulation
  • Crossfilter.js is used for filtering the data
  • DC.js is used alongside D3 and Crossfilter to create dynamic visualisations
  • Bootstrap is used to create a responsive layout
  • JavaScript is used for interactivity

Charts

  • Pie Chart displaying 39 countries and average life expectancy over 55 year period
  • Composite Chart with year on the x axis and average life expectancy on the y axis
  • Select chart in order to filter by country
  • Bar graph with countries on the x axis and average life expectancy on the y axis

life-expectancy-project's People

Contributors

merialc avatar

Watchers

 avatar  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.