Skip to content

Instantly share code, notes, and snippets.

@aliou

aliou/index.html

Forked from tmcw/index.html
Created November 30, 2012 06:27
Show Gist options
  • Save aliou/4174115 to your computer and use it in GitHub Desktop.
Save aliou/4174115 to your computer and use it in GitHub Desktop.
Download ZIP
A Song Chain
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Songs</title>
<style>
line.link {
stroke:#eee;
}
text {
fill:#888;
}
body {
font:15px/20px 'Helvetica';
}
</style>
</head>
<body>
<div id='chart'></div>
<script src="http://d3js.org/d3.v2.js"></script>
<script src='vis.js'></script>
</body>
</html>
Raw
songs.json
[
{
"artist": "Mac Miller",
"name": "Aliens Fighting Robots (feat. Sir Michael Rocks) (prod. Brandun Deshay)",
"id": "574715504",
"date": "1347627050"
},
{
"artist": "Mac Miller",
"name": "Thoughts From A Balcony (prod. Sap)",
"id": "574716846",
"date": "1347626865"
},
{
"artist": "Mac Miller",
"name": "Loud (prod. ID Labs)",
"id": "574715339",
"date": "1347626683"
},
{
"artist": "Mac Miller",
"name": "Desperado (prod. ID Labs)",
"id": "574715810",
"date": "1347626442"
},
{
"artist": "Mac Miller",
"name": "Love Me As I Have Loved You (prod. Ritz Reynolds)",
"id": "574715219",
"date": "1347626367"
},
{
"artist": "Sufjan Stevens",
"name": "Impossible Soul",
"id": "346318802",
"date": "1347624792"
},
{
"artist": "Timbaland",
"name": "Carry Out (feat. Justin Timberlake)",
"id": "353499757",
"date": "1347624423"
},
{
"artist": "Slim Thug, T.I. & Bun-B",
"name": "Three Kings (Ratatat Remix)",
"id": "96124100",
"date": "1347624107"
},
{
"artist": "Big Sean",
"name": "100 ft. Royce Da 5'9, / Kendrick Lamar (Prod by Don Cannon) (DatPiff Exclusive)",
"id": "607918318",
"date": "1347623771"
},
{
"artist": "Orelsan",
"name": "Raelsan",
"id": "509225926",
"date": "1347623516"
},
{
"artist": "OFWGKTA",
"name": "Bitches (feat. Domo Genesis & Hodgy Beats)",
"id": "572975069",
"date": "1347623315"
},
{
"artist": "Big Sean",
"name": "Money And Sex (feat. Bun B.)",
"id": "439425318",
"date": "1347623010"
},
{
"artist": "Big Sean",
"name": "Memories",
"id": "439415248",
"date": "1347617466"
},
{
"artist": "Steve Aoki",
"name": "Cudi The Kid (feat. Kid Cudi & Travis Barker)",
"id": "553210138",
"date": "1347617170"
},
{
"artist": "Big Sean",
"name": "Higher (Prod by keY Wane) (DatPiff Exclusive)",
"id": "607902591",
"date": "1347616939"
},
{
"artist": "Asher Roth x Nottz",
"name": "Gotta get up (dirty)",
"id": "468253912",
"date": "1347616746"
},
{
"artist": "Big Sean",
"name": "Dance (A$$)",
"id": "512696187",
"date": "1347616549"
},
{
"artist": "Jay-Z",
"name": "Hate (feat. Kanye West)",
"id": "339688260",
"date": "1347616397"
},
{
"artist": "Theophilus London",
"name": "Stop It",
"id": "513492856",
"date": "1347616212"
},
{
"artist": "Frank Ocean",
"name": "Start",
"id": "593312529",
"date": "1347616161"
},
{
"artist": "Arctic Monkeys",
"name": "Don't Forget Whose Legs You're On",
"id": "357061531",
"date": "1347613325"
},
{
"artist": "RAC",
"name": "Sonic 2 - Chemical Plant Zone (RAC Mix)",
"id": "514965973",
"date": "1347613106"
},
{
"artist": "The 88",
"name": "At Least It Was Here",
"id": "363143447",
"date": "1347612935"
},
{
"artist": "Tyler, the Creator",
"name": "Analog (feat. Hodgy Beats)",
"id": "501739661",
"date": "1347612738"
},
{
"artist": "Chiddy Bang",
"name": "Breakfast",
"id": "401498250",
"date": "1347612580"
},
{
"artist": "K.Flay",
"name": "ON the bridge",
"id": "329532813",
"date": "1347612467"
},
{
"artist": "OFWGKTA",
"name": "Forest Green (feat. Mike G)",
"id": "507139817",
"date": "1347612284"
},
{
"artist": "Kanye West",
"name": "Good Friday (feat. Common, Pusha T, Kid Cudi, Big Sean & Charlie Wilson)",
"id": "442242765",
"date": "1347611971"
},
{
"artist": "Frank Ocean",
"name": "Pink Matter (feat. André 3000)",
"id": "596436601",
"date": "1347611702"
},
{
"artist": "The Beatles",
"name": "Because",
"id": "1040419",
"date": "1347611491"
},
{
"artist": "G.O.O.D. Music",
"name": "Clique (feat. Kanye West, Jay-Z & Big Sean)",
"id": "608085762",
"date": "1347611197"
},
{
"artist": "Frank Ocean",
"name": "Super Rich Kids (feat. Earl Sweatshirt)",
"id": "596436600",
"date": "1347608250"
},
{
"artist": "1995",
"name": "La Suite",
"id": "566246392",
"date": "1347607914"
},
{
"artist": "Yeah Yeah Yeahs",
"name": "Down Boy",
"id": "3455663",
"date": "1347607504"
},
{
"artist": "Kid Cudi",
"name": "Just What I Am (feat. King Chip)",
"id": "603510558",
"date": "1347607276"
},
{
"artist": "Theophilus London",
"name": "Why Even Try (feat. Sara Quin)",
"id": "478506443",
"date": "1347604986"
},
{
"artist": "K.Flay",
"name": "NO ignorance",
"id": "344876008",
"date": "1347604833"
},
{
"artist": "K.Flay",
"name": "crack a VANILLA COKE",
"id": "328786394",
"date": "1347604665"
},
{
"artist": "K.Flay",
"name": "paper planes & SPITBALLS feat. MC Lars",
"id": "328785837",
"date": "1347604491"
},
{
"artist": "K.Flay",
"name": "LOCKDOWN (Feat. Zumbi)",
"id": "358739366",
"date": "1347604324"
},
{
"artist": "K.Flay",
"name": "MONEYmakerZ",
"id": "329536758",
"date": "1347604153"
},
{
"artist": "K.Flay",
"name": "supa dupaFLYING",
"id": "329536486",
"date": "1347604075"
},
{
"artist": "K.Flay",
"name": "love in this CLUB MED",
"id": "329535997",
"date": "1347603865"
},
{
"artist": "K.Flay",
"name": "miniVANS feat. Eligh",
"id": "329535476",
"date": "1347603683"
},
{
"artist": "K.Flay",
"name": "heavy CROSS OUT",
"id": "329534860",
"date": "1347603502"
},
{
"artist": "K.Flay",
"name": "CRAZYtown",
"id": "329534195",
"date": "1347559543"
},
{
"artist": "K.Flay",
"name": "boom boom pow KUNG FU",
"id": "329533522",
"date": "1347559266"
},
{
"artist": "Orelsan",
"name": "2010",
"id": "529149161",
"date": "1347554653"
},
{
"artist": "Kanye West",
"name": "Christmas In Harlem (Feat. Cam'ron, Jim Jones, CyHi Da Prynce, Pusha T, Big Sean, Teyana Taylor & Musiq Soulchild)",
"id": "467814994",
"date": "1347554257"
},
{
"artist": "Childish Gambino",
"name": "Black Faces (feat. Nipsey Hussle)",
"id": "587850925",
"date": "1347553949"
},
{
"artist": "Sleigh Bells",
"name": "Demons",
"id": "563250171",
"date": "1347553765"
},
{
"artist": "We Are Scientists",
"name": "Lethal Enforcer",
"id": "145651359",
"date": "1347553480"
},
{
"artist": "Fiona Apple",
"name": "Every Single Night",
"id": "572923503",
"date": "1347553049"
},
{
"artist": "Alexander Spit",
"name": "Ashes",
"id": "434029057",
"date": "1347552811"
},
{
"artist": "Black Sabbath",
"name": "Iron Man",
"id": "31909",
"date": "1347552356"
},
{
"artist": "Sleigh Bells",
"name": "Road to Hell",
"id": "563250664",
"date": "1347552153"
},
{
"artist": "The Beatles",
"name": "Golden Slumbers",
"id": "1015844",
"date": "1347552061"
},
{
"artist": "Sleigh Bells",
"name": "Born to Lose",
"id": "553558519",
"date": "1347551827"
},
{
"artist": "Steve Aoki",
"name": "Cudi The Kid (feat. Kid Cudi & Travis Barker)",
"id": "553210138",
"date": "1347551531"
},
{
"artist": "Asher Roth x Nottz",
"name": "Gotta get up (dirty)",
"id": "468253912",
"date": "1347551311"
},
{
"artist": "The White Stripes",
"name": "Ball and Biscuit",
"id": "34333",
"date": "1347550759"
},
{
"artist": "Eminem",
"name": "Won't Back Down (Feat. Pink)",
"id": "416865439",
"date": "1347550494"
},
{
"artist": "The Strokes",
"name": "Machu Picchu",
"id": "477439015",
"date": "1347531766"
},
{
"artist": "The 88",
"name": "At Least It Was Here",
"id": "363143447",
"date": "1347531591"
},
{
"artist": "The Black Keys",
"name": "Strange Times",
"id": "149252996",
"date": "1347531401"
},
{
"artist": "Childish Gambino",
"name": "Not Going Back (feat. Beldina Malaika)",
"id": "489374206",
"date": "1347531121"
},
{
"artist": "Mac Miller",
"name": "Oy Vey",
"id": "490263739",
"date": "1347530910"
},
{
"artist": "Justice",
"name": "Planisphère (Final)",
"id": "228445625",
"date": "1347530643"
},
{
"artist": "Kings of Leon",
"name": "17",
"id": "60647938",
"date": "1347530453"
},
{
"artist": "Alexander Spit",
"name": "The Kids Are Bored (Bonus)",
"id": "543133055",
"date": "1347530129"
},
{
"artist": "Alexander Spit",
"name": "Facemelter",
"id": "543148580",
"date": "1347529888"
},
{
"artist": "Alexander Spit",
"name": "El Camino (feat. Gilbere Forte)",
"id": "543226603",
"date": "1347525106"
},
{
"artist": "Alexander Spit",
"name": "Live Fast",
"id": "543147576",
"date": "1347524751"
},
{
"artist": "Alexander Spit",
"name": "Shawn Kemp",
"id": "543145463",
"date": "1347524583"
},
{
"artist": "Alexander Spit",
"name": "Six Days Remix",
"id": "514537624",
"date": "1347524215"
},
{
"artist": "Alexander Spit",
"name": "\"You Fuckin' Bitch, Move!\" Prod. by Gideon",
"id": "543125637",
"date": "1347524106"
},
{
"artist": "Alexander Spit",
"name": "Real RSWD Pt. 2",
"id": "543146036",
"date": "1347523915"
},
{
"artist": "Alexander Spit",
"name": "Real RSWD Pt. 1 feat. CBG",
"id": "543136433",
"date": "1347523620"
},
{
"artist": "Alexander Spit",
"name": "Posse Up (feat. Jams F. Kennedy)",
"id": "543176990",
"date": "1347523312"
},
{
"artist": "Alexander Spit",
"name": "Strange x Unusual (feat. Bago)",
"id": "543218348",
"date": "1347522951"
},
{
"artist": "Alexander Spit",
"name": "Blue Champagne feat. Young Murph (produced by Lou Koo)",
"id": "434029137",
"date": "1347522712"
},
{
"artist": "Alexander Spit",
"name": "Frisco What Up feat. Jay Ughh",
"id": "434088457",
"date": "1347522487"
},
{
"artist": "Alexander Spit",
"name": "Beautiful or Bust",
"id": "434019465",
"date": "1347522221"
},
{
"artist": "Alexander Spit",
"name": "We On",
"id": "434045724",
"date": "1347522031"
},
{
"artist": "Alexander Spit",
"name": "Shades On feat. J-Billion and Casey Veggies",
"id": "433961695",
"date": "1347520824"
},
{
"artist": "Alexander Spit",
"name": "Hella",
"id": "428776340",
"date": "1347520609"
},
{
"artist": "Alexander Spit",
"name": "Our Time",
"id": "433961088",
"date": "1347520410"
},
{
"artist": "Alexander Spit",
"name": "He Said She Said",
"id": "433960852",
"date": "1347520227"
},
{
"artist": "Alexander Spit & Senor Homme",
"name": "DIY",
"id": "591329068",
"date": "1347516410"
},
{
"artist": "The Notorious B.I.G.",
"name": "Respect",
"id": "267990681",
"date": "1347516087"
},
{
"artist": "Diggy",
"name": "Digg Is Like (Street Version)",
"id": "468309708",
"date": "1347515895"
},
{
"artist": "Mac Miller",
"name": "Definition Of Cool (feat. Diggy)",
"id": "569969076",
"date": "1347515680"
},
{
"artist": "Big Sean",
"name": "Hundred Dollar Bill Skyscraper (feat. Mac Miller)",
"id": "594433131",
"date": "1347513974"
},
{
"artist": "Big Sean",
"name": "Ambiguous (feat. Mike Posner & Clinton Sparks)",
"id": "439420330",
"date": "1347513646"
},
{
"artist": "Big Sean",
"name": "Fuck My Opponent (feat. Tyga)",
"id": "439418361",
"date": "1347513409"
},
{
"artist": "Big Sean",
"name": "Too Fake (feat. Chiddy)",
"id": "439413664",
"date": "1347513153"
},
{
"artist": "Big Sean",
"name": "My Closet (feat. Big Sean)",
"id": "472948438",
"date": "1347512905"
},
{
"artist": "Big Sean",
"name": "Fat Raps Remix (Feat. Chuck Inglish, Asher Roth, Chip tha Ripper, Dom Kennedy & Boldy James)",
"id": "439416504",
"date": "1347512547"
},
{
"artist": "Big Sean",
"name": "Money And Sex (feat. Bun B.)",
"id": "439425318",
"date": "1347512300"
},
{
"artist": "Big Sean",
"name": "What U Doin?",
"id": "410942881",
"date": "1347512145"
},
{
"artist": "Big Sean",
"name": "Meant To Be",
"id": "439208821",
"date": "1347511924"
},
{
"artist": "Big Sean",
"name": "Final Hour",
"id": "439408874",
"date": "1347511696"
},
{
"artist": "G.O.O.D. Music",
"name": "G.O.O.D. Music Cypher (Feat. Kanye West, Pusha T, CyHi Da Prynce, Big Sean & Common)",
"id": "454433690",
"date": "1347510326"
},
{
"artist": "Kanye West",
"name": "The Joy (feat. Pete Rock, Jay-Z, Charlie Wilson, Curtis Mayfield & Kid Cudi)",
"id": "455441502",
"date": "1347510009"
},
{
"artist": "Kanye West",
"name": "Don't Look Down (feat. Mos Def, Lupe Fiasco & Big Sean)",
"id": "453524443",
"date": "1347509653"
},
{
"artist": "Kanye West",
"name": "Take One for the Team (feat. Keri Hilson, Pusha T & Cyhi the Prince)",
"id": "451676507",
"date": "1347509272"
},
{
"artist": "Child Rebel Soldier",
"name": "Don't Stop!",
"id": "449690510",
"date": "1347509034"
},
{
"artist": "Kanye West",
"name": "Christian Dior Denim Flow (feat. Kid Cudi, Pusha T, John Legend, Lloyd Banks & Ryan Leslie)",
"id": "447914412",
"date": "1347508623"
},
{
"artist": "Kanye West",
"name": "So Appalled (feat. RZA, Jay-Z, Pusha T, Swizz Beatz & Cyhi the Prynce)",
"id": "445924256",
"date": "1347508222"
},
{
"artist": "Kanye West",
"name": "Lord Lord Lord (feat. Mos Def, Swizz Beatz, Raekwon & Charlie Wilson)",
"id": "444137018",
"date": "1347507771"
},
{
"artist": "Kanye West",
"name": "Good Friday (feat. Common, Pusha T, Kid Cudi, Big Sean & Charlie Wilson)",
"id": "442242765",
"date": "1347507459"
},
{
"artist": "Kanye West",
"name": "Runaway Love (remix) (feat. Justin Bieber & Raekwon)",
"id": "439161573",
"date": "1347507150"
},
{
"artist": "Kanye West",
"name": "Monster (feat. Jay-Z, Rick Ross, Bon Iver, and Nicki Minaj)",
"id": "438482679",
"date": "1347506768"
},
{
"artist": "Kanye West",
"name": "Power (remix) (feat. Jay-Z & Swizz Beatz)",
"id": "436466502",
"date": "1347506453"
},
{
"artist": "Kanye West",
"name": "See Me Now (Feat. Big Sean, Beyonce & Charlie Wilson)",
"id": "458835090",
"date": "1347506086"
},
{
"artist": "Kanye West",
"name": "Who Will Survive in America",
"id": "455502085",
"date": "1347505988"
},
{
"artist": "Kanye West",
"name": "Lost in the World (feat. Bon Iver)",
"id": "447047675",
"date": "1347505731"
},
{
"artist": "Kanye West",
"name": "Blame Game (feat. John Legend)",
"id": "454194612",
"date": "1347505261"
},
{
"artist": "Kanye West",
"name": "Hell of a Life",
"id": "425822282",
"date": "1347504933"
},
{
"artist": "Kanye West",
"name": "Runaway (feat. Pusha T)",
"id": "442790543",
"date": "1347504385"
},
{
"artist": "Kanye West",
"name": "Devil in a New Dress (feat. Rick Ross)",
"id": "456106037",
"date": "1347503991"
},
{
"artist": "Kanye West",
"name": "So Appalled (feat. Jay-Z, Pusha T, Prynce Cy Hi, Swizz Beatz & The RZA)",
"id": "453488551",
"date": "1347503595"
},
{
"artist": "Kanye West",
"name": "Monster (feat. Jay-Z, Rick Ross, Nicki Minaj & Bon Iver)",
"id": "438480623",
"date": "1347503216"
},
{
"artist": "Kanye West",
"name": "All of the Lights",
"id": "433113653",
"date": "1347502916"
},
{
"artist": "Kanye West",
"name": "Gorgeous (feat. Kid Cudi & Raekwon)",
"id": "453926288",
"date": "1347493589"
},
{
"artist": "Kanye West",
"name": "Dark Fantasy",
"id": "425822560",
"date": "1347493309"
},
{
"artist": "K.Flay",
"name": "LOCKDOWN (Feat. Zumbi)",
"id": "358739366",
"date": "1347486605"
},
{
"artist": "K.Flay",
"name": "boom boom pow KUNG FU",
"id": "329533522",
"date": "1347486334"
},
{
"artist": "Big Sean",
"name": "Hundred Dollar Bill Skyscraper (feat. Mac Miller)",
"id": "594433131",
"date": "1347461454"
},
{
"artist": "Kanye West",
"name": "Gorgeous (feat. Kid Cudi & Raekwon)",
"id": "453926288",
"date": "1347461089"
},
{
"artist": "Kanye West",
"name": "Christmas In Harlem (Feat. Cam'ron, Jim Jones, CyHi Da Prynce, Pusha T, Big Sean, Teyana Taylor & Musiq Soulchild)",
"id": "467814994",
"date": "1347460636"
},
{
"artist": "Kanye West",
"name": "Mercy (feat. Big Sean, Pusha T & 2 Chainz)",
"id": "577460336",
"date": "1347460304"
},
{
"artist": "Big Sean",
"name": "Woke Up ft. Say It Aint Tone, Early Mac, Mike Posner, James Fantleroy (Prod by BP, Young Chop keY (DatPiff Exclusive)",
"id": "607918201",
"date": "1347460013"
},
{
"artist": "Teriyaki Boyz",
"name": "TERIYA-KING feat.KANYE WEST & BIG SEAN",
"id": "267135686",
"date": "1347459656"
},
{
"artist": "Kanye West",
"name": "See Me Now (Feat. Big Sean, Beyonce & Charlie Wilson)",
"id": "458835090",
"date": "1347459258"
},
{
"artist": "Kanye West",
"name": "Good Friday (feat. Common, Pusha T, Kid Cudi, Big Sean & Charlie Wilson)",
"id": "442242765",
"date": "1347458945"
},
{
"artist": "OK Go",
"name": "This Too Shall Pass",
"id": "333607336",
"date": "1347456752"
},
{
"artist": "OK Go",
"name": "WTF?",
"id": "356766531",
"date": "1347456547"
},
{
"artist": "Lil Wayne",
"name": "I Am Not A Human Being",
"id": "303093041",
"date": "1347455043"
},
{
"artist": "Kanye West",
"name": "Monster (Teachers Remix)",
"id": "484302958",
"date": "1347454694"
},
{
"artist": "Kanye West",
"name": "Mercy (feat. Big Sean, Pusha T & 2 Chainz)",
"id": "577460336",
"date": "1347454333"
},
{
"artist": "G.O.O.D. Music",
"name": "Clique (feat. Kanye West, Jay-Z & Big Sean)",
"id": "608085762",
"date": "1347451029"
},
{
"artist": "G.O.O.D. Music",
"name": "Clique (feat. Kanye West, Jay-Z & Big Sean)",
"id": "608085762",
"date": "1347451029"
},
{
"artist": "TTC",
"name": "Ambition",
"id": "80273921",
"date": "1347443904"
},
{
"artist": "TTC",
"name": "Strip Pour Moi",
"id": "43208365",
"date": "1347443698"
},
{
"artist": "TTC",
"name": "Frotte Ton Cul Par Terre",
"id": "74392341",
"date": "1347443507"
},
{
"artist": "TTC",
"name": "J'Ai Le Son",
"id": "80278427",
"date": "1347443344"
},
{
"artist": "TTC",
"name": "Antenne 2",
"id": "78090352",
"date": "1347443078"
},
{
"artist": "TTC",
"name": "Cé Pou Vou",
"id": "80277817",
"date": "1347442846"
},
{
"artist": "TTC",
"name": "Travailler",
"id": "80275228",
"date": "1347441990"
},
{
"artist": "TTC",
"name": "Paris Paris",
"id": "50099926",
"date": "1347441787"
}
]
Raw
vis.js
var width = 960,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-100)
.linkDistance(5)
.size([width, height]);
var svg = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height);
var tooltip = svg.append("text")
.attr('dy', '15px')
.attr('dx', '10px')
.attr('class', 'tooltip');
d3.json("songs.json", function(songs) {
var json = {};
json.nodes = [];
var ids = {};
var radius = {};
for (var i = 0; i < songs.length; i++) {
radius[songs[i].id] = 0;
}
for (var i = 0; i < songs.length; i++) {
radius[songs[i].id] += 1;
if (!ids.hasOwnProperty(songs[i].id)) {
json.nodes.push(songs[i]);
ids[songs[i].id] = json.nodes.length - 1;
}
}
json.links = [];
for (var i = 0; i < songs.length - 1; i++) {
json.links.push({
source: ids[songs[i].id],
target: ids[songs[i + 1].id]
});
}
force
.nodes(json.nodes)
.links(json.links)
.start();
var link = svg.selectAll("line.link")
.data(json.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll("circle.node")
.data(json.nodes)
.enter().append("circle")
.attr("class", "node")
.call(force.drag)
.attr("r", function(d) {
return (2.5 + radius[d.id]);
})
.style("fill", function(d) {
return color(d.artist);
})
.on('mouseover', function(d) {
tooltip.text(d.artist + ' - ' + d.name);
})
.on('mouseout', function(d) {
tooltip.text('');
});
node.append("title")
.text(function(d) {
return new Date(d.date * 1000);
});
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment