https://github.com/omarkawach/info-viz

Project built with Nivo, React, and Leaflet for an Information Visualization course at the University of Victoria.
https://github.com/omarkawach/info-viz

d3js data-visualization leaflet map react reactjs visualization

Last synced: 6 days ago
JSON representation

Project built with Nivo, React, and Leaflet for an Information Visualization course at the University of Victoria.

• Host: GitHub
• URL: https://github.com/omarkawach/info-viz
• Owner: omarkawach
• License: mit
• Created: 2021-09-10T21:01:48.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-11-26T07:17:59.000Z (almost 3 years ago)
• Last Synced: 2023-05-15T17:22:45.990Z (over 1 year ago)
• Topics: d3js, data-visualization, leaflet, map, react, reactjs, visualization
• Language: JavaScript
• Homepage:
• Size: 8.82 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Little Free Library Demographics Explorer 

**Authors:** Donovan Aikman and Omar Kawach

**Description:** Project for CSC411 - Information Visualization at the University of Victoria

**Link One:** https://omarkawach.github.io/Info-Viz/

**Link Two:** http://aikman.ca/crd-lfl/ 

## Purpose

Little free libraries have been growing in popularity over the years.

Despite the fact that communities gain from literacy, landmarks, art, culture, and sharing, little research has been done to comprehend LFLs and how / why / where they pop up. Little Free Library Demographics Explorer aims to use demographic information coupled with LFL location data to gather new insights.

## Features

- Nivo chart with dropdown menus

  - Use the dropdown to visualize different datasets

- Leaflet map with one-way interactivity and info panel

  - Click a feature on the map to highlight it in the chart and show more details in the info panel

## Getting Started 

Install NodeJS locally and then run ```npm install``` to get all necessary modules. Then, run ```npm start``` to see the project running locally. Use ```npm run deploy``` to ship the project to GitHub Pages.

## TODO

Refactor and document

## Data Sources

[British Columbia Census Profile, 2016 Census - Statistics Canada](https://www12.statcan.gc.ca/census-recensement/2016/dp-pd/prof/details/page.cfm?Lang=E&Geo1=PR&Code1=59&Geo2=PR&Code2=01&SearchText=Canada&SearchType=Begins&SearchPR=01&B1=All&type=0)

[Little Free Libraries - Greater Victoria Placemaking Network](https://victoriaplacemaking.ca/little-free-libraries/)

## Tools

[React Leaflet](https://react-leaflet.js.org/)

[React Select](https://react-select.com/home)

[React](https://reactjs.org/)

[Nivo](https://nivo.rocks/)

[NodeJS](https://nodejs.org/en/)

[GeoPandas](https://geopandas.org/en/stable/)

[GitHub Pages](https://pages.github.com/)