Skip to content

bstuddard/rhcp-d3

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
gif
 
 
 
 
lib
 
 
 
 
 
 
 
 
 
 

RHCP D3

Overview

This repository is a demonstration of visualizing song data using d3.

Data Pull

Initial Code: Python and Beautiful Soup were used to pull popular song keys from Song Key Finder.

Manual Cleanup: Some manual cleanup was performed to remove songs without sufficient data as well as add album and year metadata.

D3 Visualization

D3 was used as the tool/framework for building the visualization. The goal was to build a simple visual (bar chart), yet add time and animation components.

Project Structure

-Root 
--README.md This file.
--index.html Final structure of viz/web page.
--chart.js High level data loading and orchestration of the viz.
--customstyles.css All static css styles, referenced in both html and d3 js code.
--helpers
--structure_builders.js The primary methods for placing any objects onto the canvas.
--dimension.js Helper class for building dimensions and calcs for view less margins.
--data_binding.js Helper class for reading in json data.
--theme.js Static color strings.
--data
--data_pull.py Python program that pulls and writes json data containing song and keys.
--selected_song_data.json Result of program above, after manual cleanup and additions.
--lib
--d3.v5.js Copy of the d3 lib.
--gif
--rhcp-d3.gif Final video result/visualization.

About

D3 visualization of Red Hot Chili Peppers songs and keys.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published