html 所有说唱歌手一切
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 所有说唱歌手一切相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>The Largest Vocabulary in Hip hop</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="style2.css" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<meta property="og:image" content="http://www.mdaniels.com/vocab/image.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="480">
<meta property="og:image:height" content="360">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="content">
<div id="widthadjust">
<div id="headertext">
<!-- <div id="redbull">
<div id="redbull-image">
</div>
<div id="redbull-text">
<p>presents</p>
</div>
-->
</div>
<div id="headerleft">
<p>The Largest</p>
<p style="font-size: 80px;">Vocabulary in Hip Hop</p>
</div>
<div id="headerright">
<p id="bio" style="color: #666; font-style: italic;"><a href="http://www.mdaniels.com/">Matt Daniels</a> is a designer, coder, and data scientist at <a href="http://www.undercurrent.com/">Undercurrent</a> in New York City. His past works include the <a href="http://www.mdaniels.com/shorty">Etymology of "Shorty"</a> and <a href="http://www.mdaniels.com/outkast">Outkast, in graphs and charts</a>. He decided to examine the vocabulary of hip hop artists, and this is what he found. – May 2014</p>
<div id="divider"></div>
<p>Literary elites love to rep Shakespeare’s vocabulary: across his entire corpus, he <a href="http://www.opensourceshakespeare.org/stats/">uses 28,829 words</a>, suggesting he knew over 100,000 words and arguably had the largest vocabulary, ever.</p>
<p>I decided to compare this data point against the most famous artists in hip hop. I used each artist’s first 35,000 lyrics. That way, prolific artists, such as Jay-Z, could be compared to newer artists, such as Drake.</p>
</div>
<div id="clear"></div>
</div>
</div>
</div>
<div id="container-fluid" style="background-color: #F0F0F0;padding-top: 50px; height:720px;margin-bottom: 70px;">
<div id="wrapper">
<div id="dataheader">
<div id="widthadjust" class="text-center">
<p># of Unique words used within artist’s first 35,000 lyrics</p>
</div>
</div>
<div id="data">
<div id="axis">
<div class="axis_section">
<div class="axis_content">
<p style="margin-left: 20px;">2,900 Words</p>
<div style="border-left: 1px dotted black; height: 316px;margin-left: 50px;">
</div>
</div>
</div>
<div class="axis_section">
<div class="axis_content">
<p style="margin-left: 47px;">3,600</p>
<div style="border-left: 1px dotted black; height: 316px;margin-left: 62px;"></div>
</div>
</div>
<div class="axis_section">
<div class="axis_content">
<p style="margin-left: 59px;">4,300</p>
<div style="border-left: 1px dotted black; height: 316px;margin-left: 74px;"></div>
</div>
</div>
<div class="axis_section">
<div class="axis_content">
<p style="margin-left: 73px;">5,000</p>
<div style="border-left: 1px dotted black; height: 316px;margin-left: 86px;"></div>
</div>
</div>
<div class="axis_section">
<div class="axis_content">
<p style="margin-left: 82px;">5,700</p>
<div style="border-left: 1px dotted black; height: 316px;margin-left: 98px;"></div>
</div>
</div>
<div class="axis_section_last">
<div class="axis_content">
<p style="margin-left: 90px;">6,400</p>
<div style="border-left: 1px dotted black; height: 316px;margin-left: 106px;"></div>
</div>
</div>
<!-- axis end div -->
</div>
<div id="rapper-circles">
</div>
<svg style="height: 330px;"></svg>
<div id="clear"></div>
<div id="annotations">
<div id="annotationtext" style="left: 0px; top: 90px;">
<p><strong>Notes/sources:</strong></p>
<p>(1)(2) I used the first 5,000 words for 7 of Shakespeare's works: Hamlet, Romeo and Juliet, Othello, Macbeth, As You Like It, Winter's Tale, and Troilus and Cressida. For Melville, I used the first 35,000 words of Moby Dick.</p>
<p>All lyrics are provided by Rap Genius, but are only current to 2012. My lack of recent data prevented me from using quite a few current artists.</p>
<p>This data viz uses code by Amelia Bellamy-Royds's in <a href="http://fiddle.jshell.net/6cW9u/8/">this</a> jsfiddle.
</div>
</div>
<div id="tooltip" class="" style="left: 392px; top: -96px;">
<div id="rapperhead">
<p><span id="rapper">Puff-Daddy:</strong></p>
</div>
<div id="valuehead">
<div id="valueamount">
<p><span id="value">4,429</span></p>
</div>
<div id="valuelabel">
<p>unique words used</p>
</div>
</div>
</div>
<!-- set the class to hidden to hide -->
<div id="regionlegend" class="hidden">
<div class="regionitem" style="border-right: 1px solid #000;">
<div id="regioncolor" style="background-color: #3A4EA3;"></div>
<p>Southern</p>
</div>
<div class="regionitem" style="border-right: 1px solid #000;">
<div id="regioncolor" style="background-color: #58B79A;"></div>
<p>Midwest</p>
</div>
<div class="regionitem" style="border-right: 1px solid #000;">
<div id="regioncolor" style="background-color: #E94953;"></div>
<p>West Coast</p>
</div>
<div class="regionitem">
<div id="regioncolor" style="background-color: #44B0FB;"></div>
<p>East Coast</p>
</div>
<div id="clear"></div>
</div>
<div id="toggles">
<div class="btn-group">
<button type="button" id="active" class="btn btn-default active allartists" style="height: 35px;">All Artists</button>
<button type="button" class="btn btn-default regionselect" style="height: 35px;">View by Region</button>
<button type="button" class="btn btn-default wutangselect" style="height: 35px;">Just <img src="wu-tang2.png" style="width: 20px;"></button>
</div>
</div>
<div class="benchmark-text" style="top: 0; left: 539px;">
<div class="benchmark-header">
<p>shakespeare <span>1</span></p>
<p>would be here</p>
</div>
<div class="benchmark-number">
<p>(5,170)</p>
</div>
</div>
<div class="benchmark-text" style="top: 0; left: 767px;">
<div class="benchmark-header">
<p>moby dick <span>2</span></p>
<p>would be here</p>
</div>
<div class="benchmark-number">
<p>(6,022)</p>
</div>
</div>
<!-- data end div -->
</div>
<!-- wrapper end div -->
</div>
<!-- container fluid end div -->
</div>
<div id="wrapper">
<div id="widthadjust">
<div id="headerright">
<p>35,000 words covers 3-5 studio albums and EPs. I included mixtapes if the artist was <i>just short</i> of the 35,000 words. Quite a few rappers don’t have enough official material to be included (e.g., Biggie, Kendrick Lamar). As a benchmark, I included data points for Shakespeare and Herman Melville, using the same approach (35,000 words across several plays for Shakespeare, first 35,000 of Moby Dick).</p>
<p>I used a research methodology called <a href="http://www.nltk.org/book/ch01.html#counting-vocabulary">token analysis</a> to determine each artist’s vocabulary. Each word is counted once, so <i>pimps</i>, <i>pimp</i>, <i>pimping</i>, and <i>pimpin</i> are four unique words. To avoid issues with apostrophes (e.g., pimpin’ vs. pimpin), they’re removed from the dataset. It still isn’t perfect. Hip hop is full of slang that is hard to transcribe (e.g., shorty vs. shawty), compound words (e.g., king shit), featured vocalists, and repetitive choruses.</p>
<p>It’s still <i>directionally</i> interesting. Of the <strong>85</strong> artists in the dataset, let’s take a look at who is on top.</p>
<div id="divider"></div>
<div id="highlight-header">
<div id="highlight-number">
<p>#1</p>
</div>
<div id="highlight-artists">
<p>Aesop Rock</p>
</div>
<div id="highlight-images">
<div id="highlight-line">
</div>
<div id="highlight-circles" style="width: 47px;">
<div id="highlight-circle" style="background-image: url(aesop.png);">
</div>
</div>
</div>
</div>
<p>When I first published this analysis, I excluded Aesop Rock, figuring he was too obscure. The Reddit hip hop community was in uproar, claiming Aesop would <i>absolutely</i> be #1. Sure enough, Aesop Rock is well-above every artist in my dataset and I was obliged to add him to the chart. In fact, his datapoint is so far to the right that he should be <i>off</i> the chart (I'm lazy and didn't adjust the scale).</p>
<div id="highlight-header">
<div id="highlight-number">
<p>#2, #6, #7, #9, #20, and #23</p>
</div>
<div id="highlight-artists">
<p>wu-tang clan aint nothin ta fuck wit</p>
</div>
<div id="highlight-images">
<div id="highlight-line">
</div>
<div id="highlight-circles" style="width: 290px;">
<div id="highlight-circle" style="background-image: url(gza.png);">
</div>
<div id="highlight-circle" style="background-image: url(wu-tang.png);">
</div>
<div id="highlight-circle" style="background-image: url(rza.png);">
</div>
<div id="highlight-circle" style="background-image: url(ghostface-killah.png);">
</div>
<div id="highlight-circle" style="background-image: url(raekwon.png);">
</div>
<div id="highlight-circle" style="background-image: url(method-man.png);">
</div>
</div>
</div>
</div>
<p>Wu-Tang Clan at #6 is <strong>fucking impressive</strong> given that 10 members, with vastly different styles, are equally contributing lyrics. Add the fact that GZA, Ghostface, Raekwon, and Method Man's solo works are also in the top 20 – notably, <strong>GZA at #2</strong>. Perhaps their countless hours of studio time together (and RZA’s mentorship) exposed each rapper’s vocabulary to one another.</p>
<p>Let’s take a deeper look at Wu-Tang five studio albums to better understand each member’s contribution. Here's a breakdown of the number and percent of words used by each member.</p>
<img src="wu-tang-breakdown.png" width="100%" style=" margin-top:50px; margin-bottom:50px; width: 80%; margin-left: 10%;">
<p>To understand each rapper's vocabulary (# of unique words) in Wu-Tang's first five albums, I chose a 3,500 word threshold so that each person was on an equal footing. That way, we could include GZA, but unfortunately had to exclude Ol' Dirty Bastard, Cappadonna, and Masta Killa, who have too few verses across Wu-Tang's corpus.
<img src="wu-tang-graph3.png" width="100%" style=" margin-top:50px; margin-bottom:50px;">
<p>U-God and GZA clearly bolster the group’s average. Raekwon and Method Man’s contributions have a lower average compared to other members, but recognize that their data points would exceed most artists in hip hop.</p>
<div id="highlight-header">
<div id="highlight-number">
<p>#3 - 5</p>
</div>
<div id="highlight-artists">
<p>Kool Keith, Canibus, Cunninlynguists</p>
</div>
<div id="highlight-images">
<div id="highlight-line">
</div>
<div id="highlight-circles" style="width: 145px;">
<div id="highlight-circle" style="background-image: url(kool-keith.png);">
</div>
<div id="highlight-circle" style="background-image: url(canibus.png);">
</div>
<div id="highlight-circle" style="background-image: url(cunninlynguists.png);">
</div>
</div>
</div>
</div>
<p>Moving past Wu-Tang’s dominance, the next three artists are relatively not as well-known. Of the three, <a href="http://en.wikipedia.org/wiki/Kool_Keith">Kool Keith</a> has the most diverse vocabulary. For a taste of his work, check out his album with the largest vocab: <a href="http://open.spotify.com/album/0GAqyZFjgaz6V5ozTS0dfW">Dr. Octagonecologyst</a>. #2 and #3 are two relatively underground (yet accomplished) acts: Jamaican-born rapper <a href="http://en.wikipedia.org/wiki/Canibus">Canibus</a> and southern-based group <a href="http://en.wikipedia.org/wiki/CunninLynguists">CunninLyguists</a>.</p>
<div id="highlight-header">
<div id="highlight-number">
<p>#14 - 15</p>
</div>
<div id="highlight-artists">
<p>Outkast and E-40</p>
</div>
<div id="highlight-images">
<div id="highlight-line">
</div>
<div id="highlight-circles" style="width: 97px;">
<div id="highlight-circle" style="background-image: url(e-40.png);">
</div>
<div id="highlight-circle" style="background-image: url(outkast.png);">
</div>
</div>
</div>
</div>
<p>Of course <a href="http://en.wikipedia.org/wiki/E-40">E-40</a> is in the top 20; he’s considered to be the inventor of much slang. Just a few that he’s been responsible for: all good, pop ya collar, shizzle, and you feel me.
<p>At #15, Outkast’s deep vocabulary is definitely a function of their style: frequent use of portmanteau (e.g., ATLiens, Stankonia), southern drawl (e.g., nahmsayin, ery’day), and made-up slang (e.g., flawsky-wawsky).</p>
<p>As expected, other southern-based acts aren’t in Outkast’s league. Take a look at the regional break-out below:</p>
<img src="regional.png" width="100%" style=" margin-top:50px; margin-bottom:50px;">
<p>The south has the lowest average (4,268) and the east-coast the highest (4,804). In fact, only 4 of the 17 southern-based artists in the dataset are above average. My guess is that this is a function of crunk music's call-and-response style, resulting in more repetition of words.</p>
<div id="highlight-header">
<div id="highlight-number">
<p>#26 and #33</p>
</div>
<div id="highlight-artists">
<p>busta rhymes and Twista</p>
</div>
<div id="highlight-images">
<div id="highlight-line">
</div>
<div id="highlight-circles" style="width: 97px;">
<div id="highlight-circle" style="background-image: url(busta-rhymes.png);">
</div>
<div id="highlight-circle" style="background-image: url(twista.png);">
</div>
</div>
</div>
</div>
<p>Since both rappers are known for their speed, it’s nice to see that their verses are just as lyrically diverse as their peers.</p>
<div id="divider"></div>
<p>And skipping ahead to the bottom of the dataset...</p>
<div id="highlight-header">
<div id="highlight-number">
<p>#67, #68, #71, and #72</p>
</div>
<div id="highlight-artists">
<p>snoop dogg, 2pac, Kanye west, and lil wayne</p>
</div>
<div id="highlight-images">
<div id="highlight-line">
</div>
<div id="highlight-circles" style="width: 195px;">
<div id="highlight-circle" style="background-image: url(snoop.png);">
</div>
<div id="highlight-circle" style="background-image: url(2pac.png);">
</div>
<div id="highlight-circle" style="background-image: url(kanye-west.png);">
</div>
<div id="highlight-circle" style="background-image: url(lil-wayne.png);">
</div>
</div>
</div>
</div>
<p>Some of the biggest names in hip hop were in the bottom 20%. Let’s take another look at the data:</p>
<img src="dist2.png" width="100%" style=" margin-top:50px; margin-bottom:50px;">
<p>While Lil Wayne has never been celebrated for the complexity of his word choices, I expected 2pac, Snoop, and Kanye to be well above average.</p>
<p>It's also worth noting that Drake, one of the most popular artists of late, is #83 on this list.</p>
<div id="highlight-header">
<div id="highlight-number">
<p>#85</p>
</div>
<div id="highlight-artists">
<p>DMX</p>
</div>
<div id="highlight-images">
<div id="highlight-line">
</div>
<div id="highlight-circles" style="width: 47px;">
<div id="highlight-circle" style="background-image: url(dmx.png);">
</div>
</div>
</div>
</div>
<p>At #85 and in last place: DMX. But this shouldn't undermine an artist whose raw energy and honesty were the most memorable qualities of his music.</p>
<div id="divider"></div>
<p>So what's all this mean?</p>
<p>io9 writer <a href="http://io9.com/rappers-ranked-by-vocabulary-size-1571623387">Robert Gonzalez</a> blew my mind with this point, "On The Black Album track 'Moment of Clarity,' Jay-Z contrasts his lyricism with that of Common and Talib Kweli (both of whom "rank" higher than him, when it comes to the diversity of their vocabulary):</p>
<blockquote>
<p>I dumbed down for my audience to double my dollars</p>
<p>They criticized me for it, yet they all yell "holla"</p>
<p>If skills sold, truth be told, I'd probably be</p>
<p>Lyrically Talib Kweli</p>
<p>Truthfully I wanna rhyme like Common Sense</p>
<p>But I did 5 mil - I ain't been rhyming like Common since</p>
</blockquote>
<div id="divider"></div>
<p>–<a href="https://twitter.com/matthew_daniels"><b>@matthew_daniels</b></a></p>
<p>Want more hip hop data analysis? Show love below.</p>
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.mdaniels.com%2Fvocab%2Fanalysis.html&width&layout=standard&action=like&show_faces=true&share=true&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe>
<div id="" style="width:100%;">
<a href="https://twitter.com/share" data-via="matthew_daniels" data-url="http://experiments.undercurrent.com/" class="twitter-share-button" data-lang="en" data-text="The Largest Vocabulary in Hip Hop: plotting 80 rappers against Shakespeare and Melville">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<p></p>
</div>
<div style="height:100px;"></div>
</div>
</div>
<script type="text/javascript">
var data = [
{rapper:"Rakim (including Eric B. & Rakim)", x: .4621, r: .45, color: "east nowutang fifth", cluster: 5, words: "4621", id: "rakim", region: "east", cx: 441.828571428571, cy: -21.9535954888632},{rapper:"DMX", x: .3214, r: .45, color: "east nowutang first", cluster: 1, words: "3,214", id: "dmx", region: "east", cx: 80.0285714285715, cy: 0},{rapper:"Too Short", x: .3391, r: .45, color: "west nowutang first", cluster: 1, words: "3,391", id: "too-short", region: "west", cx: 125.542857142857, cy: 0},{rapper:"Drake", x: .3522, r: .45, color: "other nowutang first", cluster: 1, words: "3,522", id: "drake", region: "other", cx: 159.228571428571, cy: -10.2112157120103},{rapper:"50 Cent", x: .3591, r: .45, color: "east nowutang first", cluster: 1, words: "3,591", id: "50-cent", region: "east", cx: 161.8, cy: 24.8941119229515},{rapper:"Bone Thugs-n-Harmony", x: .3547, r: .45, color: "midwest nowutang first", cluster: 1, words: "3,547", id: "bone-thugs", region: "midwest", cx: 165.657142857142, cy: -44.8185811512306},{rapper:"Master P", x: .3612, r: .45, color: "south nowutang second", cluster: 2, words: "3,612", id: "master-p", region: "south", cx: 182.371428571428, cy: 53.4565452889411},{rapper:"Salt-n-Pepa", x: .3612, r: .45, color: "east nowutang second", cluster: 2, words: "3,612", id: "salt-n-pepa", region: "east", cx: 182.371428571428, cy: -75.796459166311},{rapper:"Petey Pablo", x: .3617, r: .45, color: "south nowutang second", cluster: 2, words: "3,617", id: "petey-pablo", region: "south", cx: 183.657142857142, cy: 88.6324349298797},{rapper:"Juvenile", x: .3630, r: .45, color: "south nowutang second", cluster: 2, words: "3,630", id: "juvenile", region: "south", cx: 186.999999999999, cy: -110.690192124918},{rapper:"Young Jeezy", x: .3650, r: .45, color: "south nowutang second", cluster: 2, words: "3,650", id: "jeezy", region: "south", cx: 211.171428571428, cy: -55.5589624521424},{rapper:"Wiz Khalifa", x: .3707, r: .45, color: "midwest nowutang second", cluster: 2, words: "3,707", id: "wiz-khalifa", region: "midwest", cx: 206.799999999999, cy: -20.6320833258752},{rapper:"Lil B", x: .3724, r: .45, color: "west nowutang second", cluster: 2, words: "3,724", id: "lil-b", region: "west", cx: 207.571428571428, cy: 14.5588412316745},{rapper:"Kanye West", x: .3982, r: .45, color: "midwest nowutang second", cluster: 2, words: "3,982", id: "kanye-west", region: "midwest", cx: 254.371428571428, cy: 0},{rapper:"Lil Wayne", x: .3743, r: .45, color: "south nowutang second", cluster: 2, words: "3,743", id: "lil-wayne", region: "south", cx: 230.714285714285, cy: 41.0806141083374},{rapper:"Missy Elliot", x: .3874, r: .45, color: "east nowutang second", cluster: 2, words: "3,874", id: "missy-elliot", region: "east", cx: 249.742857142857, cy: -34.8937329586072},{rapper:"Gucci Mane", x: .3885, r: .45, color: "south nowutang second", cluster: 2, words: "3,885", id: "gucci-mane", region: "south", cx: 252.571428571428, cy: 68.671583271787},{rapper:"2Pac", x: .3970, r: .45, color: "west nowutang second", cluster: 2, words: "3,970", id: "2pac", region: "west", cx: 274.428571428571, cy: 28.9258931351158},{rapper:"Snoop Dogg", x: .3974, r: .45, color: "west nowutang second", cluster: 2, words: "3,974", id: "snoop", region: "west", cx: 275.457142857142, cy: -58.9306167720317},{rapper:"UGK", x: .4011, r: .45, color: "south nowutang third", cluster: 3, words: "4,011", id: "ugk", region: "south", cx: 284.971428571428, cy: -25.0414645164364},{rapper:"Run-D.M.C.", x: .4039, r: .45, color: "east nowutang third", cluster: 3, words: "4,039", id: "run-dmc", region: "east", cx: 292.171428571428, cy: 59.3263420407512},{rapper:"Jadakiss", x: .4108, r: .45, color: "east nowutang third", cluster: 3, words: "4,108", id: "jadakiss", region: "east", cx: 309.914285714285, cy: -51.7402357405128},{rapper:"Scarface", x: .4123, r: .45, color: "south nowutang third", cluster: 3, words: "4,123", id: "scarface", region: "south", cx: 313.771428571428, cy: -4.80396780226788},{rapper:"Insane Clown Posse", x: .4146, r: .45, color: "midwest nowutang third", cluster: 3, words: "4,146", id: "insane-clown-posse", region: "midwest", cx: 319.685714285714, cy: 29.8949874809359},{rapper:"Nicki Minaj", x: .4162, r: .45, color: "east nowutang third", cluster: 3, words: "4,162", id: "nicki-minaj", region: "east", cx: 323.8, cy: 74.7739872543018},{rapper:"T.I.", x: .4151, r: .45, color: "south nowutang third", cluster: 3, words: "4,151", id: "t-i-", region: "south", cx: 337.428571428571, cy: -73.6938312293761},{rapper:"Geto Boys", x: .4180, r: .45, color: "south nowutang fourth", cluster: 4, words: "4,180", id: "geto-boys", region: "south", cx: 339.999999999999, cy: -33.4687807033694},{rapper:"Three 6 Mafia", x: .4225, r: .45, color: "south nowutang fourth", cluster: 4, words: "4,225", id: "three-six-mafia", region: "south", cx: 339.999999999999, cy: 106.023887626238},{rapper:"Biz Markie", x: .4313, r: .45, color: "east nowutang fourth", cluster: 4, words: "4,313", id: "biz-markie", region: "east", cx: 376.971428571428, cy: -29.4693486275054},{rapper:"Ice Cube", x: .4371, r: .45, color: "west nowutang fourth", cluster: 4, words: "4,371", id: "ice-cube", region: "west", cx: 377.542857142857, cy: 6.537},{rapper:"Cam'ron", x: .4406, r: .45, color: "east nowutang fourth", cluster: 4, words: "4,406", id: "camron", region: "east", cx: 377.542857142857, cy: -64.5746762624673},{rapper:"Nelly", x: .4413, r: .45, color: "south nowutang fourth", cluster: 4, words: "4,413", id: "nelly", region: "south", cx: 388.342857142857, cy: 72.0389255895792},{rapper:"Puff Daddy", x: .4429, r: .45, color: "east nowutang default fourth", cluster: 4, words: "4,429", id: "puff-daddy", region: "east", cx: 392.457142857142, cy: -96.4582199000343},{rapper:"The Game", x: .4416, r: .45, color: "west nowutang fourth", cluster: 4, words: "4,416", id: "game", region: "west", cx: 389.114285714285, cy: 107.229850147129},{rapper:"Royce da 5'9", x: .4430, r: .45, color: "midwest nowutang fourth", cluster: 4, words: "4,430", id: "royce-da-5-9", region: "midwest", cx: 392.714285714285, cy: -131.656659507593},{rapper:"Ice T", x: .4431, r: .45, color: "east nowutang fourth", cluster: 4, words: "4,431", id: "ice-t", region: "east", cx: 409.428571428571, cy: -49.6650318084311},{rapper:"Lupe Fiasco", x: .4439, r: .45, color: "midwest nowutang fourth", cluster: 4, words: "4,439", id: "lupe-fiasco", region: "midwest", cx: 395.028571428571, cy: 141.928805430332},{rapper:"Eminem", x: .4494, r: .45, color: "midwest nowutang fourth", cluster: 4, words: "4,494", id: "eminem", region: "midwest", cx: 409.171428571428, cy: -162.771908538182},{rapper:"Jay-Z", x: .4506, r: .45, color: "east nowutang fourth", cluster: 4, words: "4,506", id: "jay-z", region: "east", cx: 412.257142857142, cy: 44.3609672462489},{rapper:"Clipse", x: .4514, r: .45, color: "south nowutang fourth", cluster: 4, words: "4,514", id: "clipse", region: "south", cx: 414.314285714285, cy: 0},{rapper:"Cypress Hill", x: .4568, r: .45, color: "west nowutang fourth", cluster: 4, words: "4,568", id: "cypress-hill", region: "west", cx: 428.199999999999, cy: -133.159246674653},{rapper:"KRS-One (only solo albums, excl. boogie productions)", x: .4585, r: .45, color: "east nowutang fourth", cluster: 4, words: "4,585", id: "krs-one-excl-boogie-production", region: "east", cx: 432.571428571428, cy: -98.2323675483859},{rapper:"Tyga", x: .4601, r: .45, color: "west nowutang fifth", cluster: 5, words: "4,601", id: "tyga", region: "west", cx: 436.685714285714, cy: 69.7034448523388},{rapper:"Brand Nubian", x: .4609, r: .45, color: "east nowutang fifth", cluster: 5, words: "4,609", id: "brand-nubian", region: "east", cx: 438.742857142857, cy: 104.842659933516},{rapper:"Mos Def", x: .4630, r: .45, color: "east nowutang fifth", cluster: 5, words: "4,630", id: "mos-def", region: "east", cx: 444.142857142857, cy: -64.9893485207418},{rapper:"A Tribe Called Quest", x: .4635, r: .45, color: "east nowutang fifth", cluster: 5, words: "4,635", id: "tribe-called-quest", region: "east", cx: 445.428571428571, cy: 16.4589640544529},{rapper:"Fat Joe", x: .4686, r: .45, color: "east nowutang fifth", cluster: 5, words: "4,686", id: "fat-joe", region: "east", cx: 458.542857142857, cy: 133.945173111178},{rapper:"Brother Ali", x: .4700, r: .45, color: "midwest nowutang fifth", cluster: 5, words: "4,700", id: "brother-ali", region: "midwest", cx: 462.142857142857, cy: -123.83837105937},{rapper:"Lil' Kim", x: .4474, r: .45, color: "east nowutang fourth", cluster: 4, words: "4,474", id: "lil-kim", region: "east", cx: 384.999999999999, cy: 175.669345265344},{rapper:"Public Enemy", x: .4481, r: .45, color: "east nowutang fourth", cluster: 4, words: "4,481", id: "public-enemy", region: "east", cx: 436.428571428571, cy: 161.330472828416},{rapper:"Talib Kweli", x: .4703, r: .45, color: "east nowutang fifth", cluster: 5, words: "4,703", id: "talib-kweli", region: "east", cx: 462.914285714285, cy: -159.02929561692},{rapper:"Twista", x: .4705, r: .45, color: "midwest nowutang fifth", cluster: 5, words: "4,705", id: "twista", region: "midwest", cx: 474.999999999999, cy: -91.0711595392088},{rapper:"LL Cool J", x: .4743, r: .45, color: "east nowutang fifth", cluster: 5, words: "4,743", id: "ll-cool-j", region: "east", cx: 473.199999999999, cy: -45.1228258699209},{rapper:"Mobb Deep (incl. both Prodigy and Havoc)", x: .4756, r: .45, color: "east nowutang fifth", cluster: 5, words: "4,756", id: "mobb-deep", region: "east", cx: 483.742857142857, cy: -11.5394306198678},{rapper:"Big Daddy Kane", x: .4768, r: .45, color: "east nowutang fifth", cluster: 5, words: "4,768", id: "big-daddy-kane", region: "east", cx: 485.285714285714, cy: 23.6261187870831},{rapper:"Ludacris", x: .4806, r: .45, color: "south nowutang fifth", cluster: 5, words: "4,806", id: "ludacris", region: "south", cx: 489.4, cy: 58.5842212286804},{rapper:"Gang Starr", x: .4794, r: .45, color: "east nowutang fifth", cluster: 5, words: "4,794", id: "gang-starr", region: "east", cx: 486.314285714285, cy: 93.6480863978673},{rapper:"Goodie Mob", x: .4814, r: .45, color: "south nowutang fifth", cluster: 5, words: "4,814", id: "goodie-mob", region: "south", cx: 491.457142857142, cy: 146.420992490055},{rapper:"Tech n9ne", x: .4830, r: .45, color: "midwest nowutang fifth", cluster: 5, words: "4,830", id: "tech-nine", region: "midwest", cx: 511.91, cy: -114.03},{rapper:"Busta Rhymes", x: .4839, r: .45, color: "east nowutang fifth", cluster: 5, words: "4,839", id: "busta-rhymes", region: "east", cx: 503.285714285714, cy: -70.1208697893528},{rapper:"Wale", x: .4896, r: .45, color: "east nowutang fifth", cluster: 5, words: "4,896", id: "wale", region: "east", cx: 512.542857142857, cy: -36.160575630167},{rapper:"De La Soul", x: .4933, r: .45, color: "east nowutang sixth", cluster: 6, words: "4,933", id: "de-la-soul", region: "east", cx: 522.057142857142, cy: -2.27142337457176},{rapper:"Method Man (only solo albums)", x: .4951, r: .45, color: "east wutang sixth", cluster: 6, words: "4,951", id: "method-man", region: "east", cx: 526.685714285714, cy: 32.6223095840354},{rapper:"Common", x: .4974, r: .45, color: "midwest nowutang sixth", cluster: 6, words: "4,974", id: "common", region: "midwest", cx: 532.599999999999, cy: 67.3212648672393},{rapper:"Xzibit", x: .4982, r: .45, color: "west nowutang sixth", cluster: 6, words: "4,982", id: "xzibit", region: "west", cx: 534.657142857142, cy: -86.0842573572765},{rapper:"Raekwon (only solo albums)", x: .5001, r: .45, color: "east wutang sixth", cluster: 6, words: "5,001", id: "raekwon", region: "east", cx: 539.542857142857, cy: 101.829133650313},{rapper:"Das EFX", x: .5005, r: .45, color: "east nowutang sixth", cluster: 6, words: "5,005", id: "das-efx", region: "east", cx: 557.285714285714, cy: -59.1223577884772},{rapper:"Beastie Boys", x: .5090, r: .45, color: "east nowutang sixth", cluster: 6, words: "5,090", id: "beastie-boys", region: "east", cx: 562.428571428571, cy: -24.3007080046984},{rapper:"Nas", x: .5096, r: .45, color: "east nowutang sixth", cluster: 6, words: "5,096", id: "nas", region: "east", cx: 563.971428571428, cy: 10.8648414022526},{rapper:"MF DOOM", x: .5204, r: .45, color: "east nowutang sixth", cluster: 6, words: "5,204", id: "mf-doom", region: "east", cx: 603.571428571428, cy: 0},{rapper:"E-40", x: .5207, r: .45, color: "west nowutang sixth", cluster: 6, words: "5,207", id: "e-40", region: "west", cx: 592.514285714285, cy: 33.4175981347061},{rapper:"Outkast", x: .5212, r: .45, color: "south nowutang sixth", cluster: 6, words: "5,212", id: "outkast", region: "south", cx: 593.8, cy: -40.2640955726219},{rapper:"Redman", x: .5331, r: .45, color: "east nowutang sixth", cluster: 6, words: "5,331", id: "redman", region: "east", cx: 624.4, cy: 48.3272425887428},{rapper:"Kool G Rap", x: .5394, r: .45, color: "east nowutang sixth", cluster: 6, words: "5,394", id: "kool-g-rap", region: "east", cx: 640.599999999999, cy: 17.0773422168059},{rapper:"Blackalicious", x: .5480, r: .45, color: "west nowutang sixth", cluster: 6, words: "5,480", id: "blackalicious", region: "west", cx: 662.714285714285, cy: -10.3079575004312},{rapper:"Killah Priest", x: .5737, r: .45, color: "east nowutang seventh", cluster: 7, words: "5,737", id: "killah-priest", region: "east", cx: 728.8, cy: 0},{rapper:"Ghostface Killah (only solo albums)", x: .5774, r: .45, color: "east wutang seventh", cluster: 7, words: "5,774", id: "ghostface-killah", region: "east", cx: 738.314285714285, cy: -33.8891522555953},{rapper:"Roots", x: .5803, r: .45, color: "east nowutang seventh", cluster: 7, words: "5,803", id: "roots", region: "east", cx: 745.771428571428, cy: 33.8377509799414},{rapper:"Wu-Tang Clan", x: .5895, r: .45, color: "east wutangseventh", cluster: 7, words: "5,895", id: "wu-tang", region: "east", cx: 765.628571, cy: 0},{rapper:"RZA (only solo albums)", x: .5905, r: .45, color: "east wutangseventh", cluster: 7, words: "5,905", id: "rza", region: "east", cx: 785.77, cy: 33.837},{rapper:"CunninLynguists", x: .5971, r: .45, color: "south nowutang seventh", cluster: 7, words: "5,971", id: "cunninlynguists", region: "south", cx: 803.971429, cy: 0},{rapper:"Canibus", x: .5991, r: .45, color: "east nowutang seventh", cluster: 7, words: "5,991", id: "canibus", region: "east", cx: 807.114286, cy: -34.8216497837788},{rapper:"Kool Keith", x: .6238, r: .45, color: "east nowutang seventh", cluster: 7, words: "6,238", id: "kool-keith", region: "east", cx: 842, cy: 0},{rapper:"GZA (only solo albums)", x: .6426, r: .45, color: "east wutang seventh", cluster: 7, words: "6,426", id: "gza", region: "east", cx: 880, cy: 0},{rapper:"Aesop Rock", x: .7392, r: .45, color: "east nowutang seventh", cluster: 7, words: "7,392", id: "aesop", region: "east", cx: 930.623, cy: 0}
];
console.log(data);
var w = 950;
var h = 600;
//Set up SVG and axis//
var svg = d3.select("#rapper-circles")
;
d3.select("svg")
.append("g") // append the average line
.attr("id", "x-axis") //
.attr("transform", "translate(0,177)")
.append("line")
.attr("x1", "0")
.attr("x2", "950");
d3.select("svg")
.append("g") // append the average line
.attr("id", "shakespeare") //
.attr("transform", "translate(604,140)")
.append("line")
.attr("y1", "-80")
.attr("y2", "33");
d3.select("svg")
.append("g") // append the average line
.attr("id", "moby") //
.attr("transform", "translate(834,140)")
.append("line")
.attr("y1", "-80")
.attr("y2", "33");
svg.selectAll("div")
.data(data)
.enter()
.append("div")
.attr("class", function(d) {
return "rapper-circle " + d.color;
})
.style("position","absolute")
.style("width", "35px")
.style("height", "35px")
.style("background-image",function(d) {
return "url(" + d.id + ".png)";
})
.style("left", function(d) {
return d.cx + "px";
})
.style("top", function(d) {
return d.cy + "px";
})
.attr("id", function(d) {
return d.id;
})
.on("mouseover", function(d) {
var xPosition = parseFloat(d3.select(this).style("left"));
var yPosition = parseFloat(d3.select(this).style("top"));
//Update the tooltip position and value
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#value")
.text(d.words);
d3.select("#tooltip")
.select("#rapper")
.text(d.rapper + ":");
d3.select("#puff-daddy")
.classed("default",false);
//Show the tooltip
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function() {
//Hide the tooltip
d3.select("#tooltip").classed("hidden", true);
})
//end of the initial data thing
;
d3.select(".regionselect")
.on("click", function(d) {
d3.select("#regionlegend")
.classed("hidden", false);
d3.selectAll(".south")
.classed("southern", true)
.classed("rapper-circle", false);
d3.selectAll(".east")
.classed("eastern", true)
.classed("rapper-circle", false);
d3.selectAll(".midwest")
.classed("midwestern", true)
.classed("rapper-circle", false);
d3.selectAll(".west")
.classed("western", true)
.classed("rapper-circle", false);
d3.selectAll(".wutang")
.classed('wutangfill' , false);
d3.selectAll(".nowutang")
.classed("nowutangfill", false);
d3.select("#active")
.classed("active", false);
});
d3.select(".wutangselect")
.on("click", function(d) {
d3.select("#regionlegend")
.classed("hidden", true);
d3.selectAll(".wutang")
.classed('wutangfill' , true);
d3.selectAll(".nowutang")
.classed("nowutangfill", true);
d3.select("#active")
.classed("active", false);
d3.selectAll(".south")
.classed("southern", false)
.classed("rapper-circle", true);
d3.selectAll(".east")
.classed("eastern", false)
.classed("rapper-circle", true);
d3.selectAll(".midwest")
.classed("midwestern", false)
.classed("rapper-circle", true);
d3.selectAll(".west")
.classed("western", false)
.classed("rapper-circle", true);
});
d3.select(".allartists")
.on("click", function(d) {
d3.selectAll(".south")
.classed("southern", false)
.classed("rapper-circle", true);
d3.selectAll(".east")
.classed("eastern", false)
.classed("rapper-circle", true);
d3.selectAll(".midwest")
.classed("midwestern", false)
.classed("rapper-circle", true);
d3.selectAll(".west")
.classed("western", false)
.classed("rapper-circle", true);
d3.select("#regionlegend")
.classed("hidden", true);
d3.selectAll(".wutang")
.classed('wutangfill' , false);
d3.selectAll(".nowutang")
.classed("nowutangfill", false);
});
</script>
</div> <!-- wrapper div -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-50585157-1', 'undercurrent.com');
ga('send', 'pageview');
</script>
</body>
</html>
以上是关于html 所有说唱歌手一切的主要内容，如果未能解决你的问题，请参考以下文章