Skip to content
D3 visualization of Red Hot Chili Peppers songs and keys.
JavaScript Python HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
data
gif
helpers
lib
LICENSE
README.md
chart.js
customstyles.css
index.html

README.md

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.
You can’t perform that action at this time.