Last active
December 10, 2015 19:04
-
-
Save bdilday/6466ea4b0e1d62c14164 to your computer and use it in GitHub Desktop.
Ramones song catalog - visualization
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Ramones Songs</title> | |
<style> | |
.axis text { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="wrapper"> | |
<div id="chart"> | |
</div> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> | |
<script type="text/javascript"> | |
// globals | |
var margin = {top: 40, right: 20, bottom: 30, left: 50}, | |
width = 800 - margin.left - margin.right, | |
height = 3900 - margin.top - margin.bottom; | |
var xoffset = 230; | |
var yaxis_offset = width-50; | |
var svg = d3.select("body").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") | |
; | |
var xscale = d3.scale.ordinal() | |
.rangeBands([xoffset+2, yaxis_offset+440]) | |
.domain(['song', 'chords']) | |
var yscale = {}; | |
yscale['chords'] = | |
d3.scale.linear() | |
.range([height, 0]) | |
.domain([0, 5]); | |
yscale['song'] = | |
d3.scale.ordinal() | |
.rangeRoundBands([0, height], .1) | |
; | |
var line = d3.svg.line() | |
.interpolate('linear') | |
.x(function(d) { | |
return d.x; | |
}) | |
.y(function(d) { | |
return d.y; | |
}); | |
var chord_axis = d3.svg.axis() | |
.orient('right') | |
.scale(yscale['chords']) | |
.ticks(6) | |
; | |
var xaxis = d3.svg.axis().orient('top').scale(xscale); | |
/******************************/ | |
d3.csv('ramones.csv', function(data) { | |
var songs = _.map(data, function(d) { | |
return d.song; | |
}); | |
yscale['song'] | |
.domain(songs); | |
var proc_data = _.map(data, function(d) { | |
return { | |
k: d.song, | |
val: [ | |
{x: xscale('song'), y:yscale['song'](d.song)}, | |
{x: xscale('chords'), y:yscale['chords'](d.chords)} | |
] | |
}; | |
}); | |
svg.selectAll('.song-names') | |
.data(data) | |
.enter() | |
.append('text') | |
.attr('class', 'song-names') | |
.text(function(d) { | |
return d.song; | |
}) | |
.style('font-size', 8) | |
.style('font-family', "Helvetica; Arial; sans-serif") | |
//.style('font-weight', 'bold') | |
.style('fill', '#333333') | |
.attr('text-anchor', 'end') | |
.attr('x', xoffset) | |
.attr('y', function(d) { | |
//console.log('song', d.song, yscale['song'](d.song)); | |
return yscale['song'](d.song); | |
}) | |
; | |
svg.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + (width-50) + ",0)") | |
.call(chord_axis); | |
var song_lines = svg.selectAll('.song-line') | |
.data(proc_data) | |
.enter() | |
.append('g') | |
.attr('class', 'song-line') | |
; | |
var song_line = song_lines.append('path') | |
.attr('class', 'line') | |
.attr('d', function(d) { | |
console.log('line d', d, d.val); | |
return line(d.val); | |
}) | |
.style('stroke', '#222222') | |
.style('stroke-width', 1) | |
; | |
}) | |
svg.append('text') | |
.text('Song Name') | |
.attr('x', 230) | |
.attr('y', 30) | |
.style('font-size', 18) | |
.attr('text-anchor', 'middle') | |
; | |
svg.append('text') | |
.text('Chords') | |
.attr('x', 630) | |
.attr('y', 30) | |
.style('font-size', 18) | |
.attr('text-anchor', 'middle') | |
; | |
svg.append('text') | |
.text('RAMONES SONG CATALOG') | |
.attr('x', 430) | |
.attr('y', 5) | |
.style('font-size', 18) | |
.attr('text-anchor', 'middle') | |
; | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
song | chords | |
---|---|---|
53rd & 3rd | 3 | |
53rd And 3rd (Live at The Roxy Version ) | 3 | |
7-11 | 3 | |
7 And 7 Is | 3 | |
9 & 9 Is | 3 | |
A Punk Rock Chistmas | 3 | |
A Real Cool Time | 3 | |
All Quiet at the Eastern Front | 3 | |
All Screwed Up | 3 | |
All the Away | 3 | |
All The Way | 3 | |
All's Quiet At The Eastern Front | 3 | |
All's Quiet On The Eastern Front | 3 | |
Animal Boy | 3 | |
Anxiety | 3 | |
Any Way You Want It | 3 | |
Apeman Hop | 3 | |
Baby, I Love You | 3 | |
Baby Say You Beg | 3 | |
Baby Sitter | 3 | |
Babysitter | 3 | |
Babysitter (Remastered Album Version ) | 3 | |
Bad Brain | 3 | |
Bad Brain (Remastered Album Version) | 3 | |
Beat on the Beat | 3 | |
Beat On The Brat | 3 | |
Beat On The Brat (Live at The Roxy Version ) | 3 | |
Beat On The Brat (LP Version ) | 3 | |
Blank Generation | 3 | |
Blitzkreig Bop (LP Version ) | 3 | |
Blitzkrieg Bop | 3 | |
Blitzkrieg Bop (Live at The Roxy Version ) | 3 | |
Blitzkrieg Bop [Remastered Version] | 3 | |
Blitzkrieg Bop/Teenage Labotomy/California Sun/Pinhead/She's The One (Live Version ) | 3 | |
Bonzo Goes to Bitberg | 3 | |
Bonzo Goes To Bitburg | 3 | |
Boomerang | 3 | |
Bop 'til You Drop | 3 | |
Bop 'Till You Drop | 3 | |
Born To Die In Berlin | 3 | |
Bye Bye Baby | 3 | |
Cabbies On Crack | 3 | |
California Sun | 3 | |
California Sun (Live at The Roxy Version ) | 3 | |
California Sun (Remastered Version ) | 3 | |
Can't Get You Outta My Mind | 3 | |
Can't Say Anything Nice | 3 | |
Can't Seem To Make You Mine | 3 | |
Carbona Not Glue | 3 | |
Carbonara Not Glue (Remastered Version ) | 3 | |
Censorshit | 3 | |
Chain Saw | 3 | |
Chain Saw (Live at The Roxy Version ) | 3 | |
Chainsaw | 3 | |
Chasing The Night | 3 | |
Chatterbox | 3 | |
Chinese Rock | 3 | |
Chinese Rocks | 3 | |
Chop Suey | 3 | |
Come Back Baby | 3 | |
Come Back, She Cried AKA I Walk Out (Demo Version) | 3 | |
Come On Now | 3 | |
Commando | 3 | |
Commando (Remastered Version ) | 3 | |
Cretan Hop | 3 | |
Cretin Family | 3 | |
Cretin Hop | 3 | |
Cretin Hop (Remastered Version ) | 3 | |
[crowd noise] | 3 | |
Crummy Stuff | 3 | |
Crusher | 3 | |
Danger Zone | 3 | |
Danny Says | 3 | |
Daytime Dilemma (Dangers Of Love) | 3 | |
Death Of Me | 3 | |
Do You Remember Rock'n Roll | 3 | |
Do You Remember Rock'n'roll Radio | 3 | |
Do You Wanna Dance? | 3 | |
Do You Wanna Dance (LP Version ) | 3 | |
Do You Wanna Dance (Remastered Album Version) | 3 | |
Do You Want To Dance | 3 | |
Don't Be So Strange | 3 | |
Don't Bust My Chops | 3 | |
Don't Come Close | 3 | |
Don't Come Close (Remastered Version ) | 3 | |
Don't Go | 3 | |
Durango 95 | 3 | |
Durango 95 / Blitzkrieg Bop | 3 | |
Eat That Rat | 3 | |
[encore break] | 3 | |
Endless Vacation | 3 | |
Everytime I Eat Vegetables It Makes Me Think Of You | 3 | |
Freak Of Nature | 3 | |
Garden Of Serenity | 3 | |
Gilligan | 3 | |
Gimme Gimme Shock Treatment | 3 | |
Gimme Gimme Shock Treatment / Rock 'n' Roll High School / I Wanna Be Sedated | 3 | |
Gimme Shock Treatment | 3 | |
Gimmie Gimmie Shock Treatment (Remastered Version ) | 3 | |
Glad All Over | 3 | |
Glad To See You Go | 3 | |
Glad To See You Go (Live at The Roxy Version ) | 3 | |
Glad To See You Go (Remastered Version ) | 3 | |
Go Home Ann | 3 | |
Go Lil' Camaro Go | 3 | |
Go Mental | 3 | |
Go Mental (Remastered Version ) | 3 | |
Gonna Kill That Girl | 3 | |
Got A Lot To Say | 3 | |
Got Alot To Say | 3 | |
Hair Of The Dog | 3 | |
Happy Birthday, Mr. Burns | 3 | |
Havana Affair | 3 | |
Havana Affair (Live at The Roxy Version ) | 3 | |
Have A Nice Day | 3 | |
Have You Ever Seen The Rain? | 3 | |
Heidi Is A Headcase | 3 | |
Here Today Gone Tomorrow | 3 | |
Here Today, Gone Tomorrow (Remastered Version ) | 3 | |
Hey Ho, Lets Go! | 3 | |
High Risk Insurance | 3 | |
Highest Trails Above | 3 | |
Howling at the Moon | 3 | |
Human Kind | 3 | |
Humankind | 3 | |
I Am Seeing UFO's | 3 | |
I Believe In Miracles | 3 | |
I Can't Be | 3 | |
I Can't Control Myself | 3 | |
I Can't Give You Anything | 3 | |
I Can't Give You Anything (Remastered Album Version) | 3 | |
I Can't Make It On Time | 3 | |
I'd Love To Save The World | 3 | |
I Don't Care | 3 | |
I Don't Care (Remastered Version ) | 3 | |
I Don't Wanna Be Learned/ I Don't Wanna Be Tamed | 3 | |
I Don't Wanna Go | 3 | |
I Don't Wanna Go Down To The Basement | 3 | |
I Don't Wanna Go Down To The Basement (LP Version ) | 3 | |
I Don't Wanna Grow Up | 3 | |
I Don't Wanna Talk Around With You | 3 | |
I Don't Wanna Walk Around With You | 3 | |
I Don't Wanna Walk Around With You (LP Version ) | 3 | |
I Don't Wanna Walk Around With You / Today Your Love, Tomorrow the World | 3 | |
I Don't Want To Go Down To The Basement | 3 | |
I Don't Want To Grow Up | 3 | |
I Don't Want To Live This Life (Anymore) | 3 | |
I Don't Want to Live This Life (Anymore) (UK B-Side) | 3 | |
I Don't Want to Walk Around With You | 3 | |
I Don't Want To Walk Around With You (Live at The Roxy Version ) | 3 | |
I Don't Want You | 3 | |
I Don't Want You (Remastered Album Version ) | 3 | |
I Fought the Law | 3 | |
I Got You Baby | 3 | |
I Just Wanna Have Something To Do | 3 | |
I Just Want To Have Something To Do | 3 | |
I Just Want To Have Something To Do (Remastered Version ) | 3 | |
I Know Better Now | 3 | |
I Lost My Mind | 3 | |
I Love You | 3 | |
I'm Affected | 3 | |
I'm Against It | 3 | |
I'm Against It (Remastered Version ) | 3 | |
I'm Not Afraid Of Life | 3 | |
I'm Not Jesus | 3 | |
I Need Your Love | 3 | |
I Remember You | 3 | |
I Remember You (Live at The Roxy Version ) | 3 | |
I Remember You (Remastered Version ) | 3 | |
I Wanna Be Sedated | 3 | |
I Wanna Be Sedated (LP Version ) | 3 | |
I Wanna Be Sedated - Remastered | 3 | |
I Wanna Be Well | 3 | |
I Wanna Be Well (Remastered Album Version) | 3 | |
I Wanna Be Your Boyfriend | 3 | |
I Wanna Be Your Boyfriend (Live at The Roxy Version ) | 3 | |
I Wanna Be Your Boyfriend (LP Version ) | 3 | |
I Wanna Live | 3 | |
I Wanna Live (LP Version ) | 3 | |
I Want You Around | 3 | |
I Want You Around (Ed Stasium Version) | 3 | |
I Wanted Everything | 3 | |
I Wanted Everything (Remastered LP Version ) | 3 | |
I Wasn't Looking For Love | 3 | |
I Won't Let It Happen | 3 | |
Ignorance Is Bliss | 3 | |
In The Park | 3 | |
Indian Giver | 3 | |
Intro | 3 | |
Intro A | 3 | |
Intro B | 3 | |
Intro / Line Check / Blitzkrieg Bop | 3 | |
[introduction] | 3 | |
It's A Long Way Back | 3 | |
It's A Long Way Back (Remastered Album Version) | 3 | |
It's A Long Way Back To Germany (UK B-Side) | 3 | |
It's Gonna Be Alright | 3 | |
It's Not For Me To Know | 3 | |
It's Not My Place | 3 | |
Journey To The Center Of The Mind | 3 | |
Judi Is a Punk | 3 | |
Judy Is A Punk | 3 | |
Judy Is A Punk (Live at The Roxy Version ) | 3 | |
Keeping Time | 3 | |
Know What I Got Here | 3 | |
Learn To Listen | 3 | |
Let's Dance | 3 | |
Let's Dance (Live at The Roxy Version ) | 3 | |
Let's Go | 3 | |
Life Goes On | 3 | |
Life's A Gas | 3 | |
Listen To My Heart | 3 | |
Listen To My Heart (Live at The Roxy Version ) | 3 | |
Little Bit O' Soul | 3 | |
Locket Love | 3 | |
Locket Love (Remastered Album Version) | 3 | |
Loud Mouth | 3 | |
Loud Mouth (Live at The Roxy Version ) | 3 | |
Loudmouth | 3 | |
Love Kills | 3 | |
Main Man | 3 | |
Makin Monsters For My Friends | 3 | |
Mama's Boy | 3 | |
Mama's Boy / Animal Boy | 3 | |
Mental Hell | 3 | |
Merry Christmas | 3 | |
My Back Pages | 3 | |
My Brain Is Hanging Upside Down | 3 | |
My-my Kind Of A Girl | 3 | |
My-My Kind of Girl | 3 | |
Needles And Pins | 3 | |
Needles And Pins (Early Version) | 3 | |
Needles And Pins (Remastered Album Version ) | 3 | |
New Girl In Town | 3 | |
No Go | 3 | |
Nothing Can Change the Shape of the Things to Come | 3 | |
Now I Wanna Be A Good Boy | 3 | |
Now I Wanna Be A Good Boy (Remastered Album Version) | 3 | |
Now I Wanna Sniff Some Glue | 3 | |
Now I Wanna Sniff Some Glue (Live at The Roxy Version ) | 3 | |
Oh Oh I Love Her So | 3 | |
Oh Oh I Love Her So (Remastered Version ) | 3 | |
On The Beach | 3 | |
Out Of Time | 3 | |
Outsider | 3 | |
Palisades Park | 3 | |
Palisades Park / We're a Happy Family | 3 | |
Pet Cemetery | 3 | |
Pet Sematary | 3 | |
Pet Sematary + Carbona Not Glue | 3 | |
Pet Semetary | 3 | |
Pinhead | 3 | |
Pinhead (Remastered Version ) | 3 | |
Planet Earth 1988 | 3 | |
Poison Heart | 3 | |
Psycho Terapy | 3 | |
Psycho Therapy | 3 | |
Punishment Fits The Crime | 3 | |
Questioningly | 3 | |
Questioningly (Remastered Album Version ) | 3 | |
Quick To Cut | 3 | |
R.A.M.O.N.E.S. | 3 | |
Ramona | 3 | |
Ramona (Remastered Album Version) | 3 | |
Real Cool Time | 3 | |
Remember You | 3 | |
Ride | 3 | |
Rock Away Beach | 3 | |
Rock'n'roll High School | 3 | |
Rock 'N' Roll High School (Ed Stasium Version) | 3 | |
Rock 'N' Roll High School - Remastered | 3 | |
Rock'n'Roll Radio | 3 | |
Rockaway Beach | 3 | |
Rockaway Beach (LP Version ) | 3 | |
Rockaway Beach (Remastered Version ) | 3 | |
Scattergun | 3 | |
See My Way | 3 | |
She Belongs To Me | 3 | |
She Talk to Rainbows | 3 | |
She Talks To Rainbows | 3 | |
Sheena Is A Punk Rocker | 3 | |
Sheena Is A Punk Rocker (LP Version ) | 3 | |
Sheena Is A Punk Rocker - Remastered | 3 | |
Sheena Is A Punk Rocker (Remastered Album Version ) | 3 | |
Sheena Is A Punk Rocker (Remastered Single Version) | 3 | |
Sheena Is a Punk Rocker / Rockaway Beach | 3 | |
She's A Sensation | 3 | |
She's The One | 3 | |
She's The One (Remastered Version ) | 3 | |
Sitting In My Room | 3 | |
Sleeping Troubles | 3 | |
Slug | 3 | |
Slug (Remastered Album Version) | 3 | |
Smash You | 3 | |
Somebody Like Me | 3 | |
Somebody Put Something In My Drink | 3 | |
Somebody Put Something in My Drink / Let's Dance | 3 | |
Somebody To Love | 3 | |
Something To Believe In | 3 | |
Spider-Man | 3 | |
Spiderman | 3 | |
Street Fighting Man | 3 | |
Strenght To Endure | 3 | |
Strength To Endure | 3 | |
Substitute | 3 | |
Surf City | 3 | |
Surfin' Bird | 3 | |
Surfin' Bird / Cretin Hop | 3 | |
Surfin' Bird (Remastered Version ) | 3 | |
Surfin' Safari | 3 | |
Surfing Bird | 3 | |
Suzie Is a Head Banger | 3 | |
Suzy Is a Head Banger | 3 | |
Suzy Is A Headbanger | 3 | |
Suzy Is A Headbanger (Remastered Album Version ) | 3 | |
Swallow My Pride | 3 | |
Swallow My Pride (Remastered Version ) | 3 | |
Take It As It Comes | 3 | |
Take The Pain Away | 3 | |
Teenage Labotomy | 3 | |
Teenage Lobotomy | 3 | |
Teenage Lobotomy (Remastered Version ) | 3 | |
The Crusher | 3 | |
The Good The Bad And The Ugly | 3 | |
The Job That Ate My Brain | 3 | |
The Kkk Took My Baby Away | 3 | |
The Return Of Jackie And Judy | 3 | |
The Shape Of Things To Come | 3 | |
The Wonderful Widow of Eighteen Spings | 3 | |
This Ain't Havana | 3 | |
This Business Is Killing Me | 3 | |
Time Bomb | 3 | |
Time Has Come Today | 3 | |
Today Your Love, Tomorrow The World | 3 | |
Today Your Love, Tomorrow The World (Live at The Roxy Version ) | 3 | |
Tomorrow She Goes Away | 3 | |
Tonight | 3 | |
Too Tough To Die | 3 | |
Touring | 3 | |
Wanna Be a Good Boy | 3 | |
Wart Hog | 3 | |
We're A Happy Family | 3 | |
We're A Happy Family (Remastered Version ) | 3 | |
We Want The Airwaves | 3 | |
Weasel Face | 3 | |
Weaselface | 3 | |
What About Me | 3 | |
What'd Ya Do | 3 | |
What I Like About You | 3 | |
What's Your Game | 3 | |
What's Your Game (Remastered Album Version) | 3 | |
When I Was Young | 3 | |
Why Is It Always the Way? | 3 | |
Why Is It Always This Way | 3 | |
Why Is It Always This Way (Remastered Album Version) | 3 | |
Working It Over | 3 | |
Worm Man | 3 | |
Yea, Yea | 3 | |
Yea, Yea (Remastered Album Version) | 3 | |
(You) Can't Say Anything Nice | 3 | |
You Didn't Mean Anything To Me | 3 | |
You're Gonna Kill That Girl | 3 | |
You're Gonna Kill That Girl (Remastered Album Version) | 3 | |
You're Not Fooling Me | 3 | |
You Should Have Never Opened That Door (Remastered Album Version) | 3 | |
You Should Never Have Opened That Door | 3 | |
You Sound Like You're Sick | 3 | |
Your're Gonna Kill That Girl | 3 | |
Zero Zero Ufo | 3 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment