Clevejones/forbeshighestPaidCelebrities.csv

## forbeshighestPaidCelebrities.csv

          
            celebritiesName
            earnings
             category
            age

            
              Floyd Mayweather
              300
                athletes
              38

            
              Manny Pacquiao
              160
                athletes
              36

            
              Katy Perry
              135
              musicians
              31

            
              One Direction
              130
              musicians
              na

            
              Howard Stern
              95
                personalities
              61

            
              Garth Brooks
              90
              musicians
              53

            
              James Patterson
              89
              authors
              68

            
              Robert Downey Jr.
              80
              actors
              30

            
              Taylor Swift
              80
                musicians
              25

            
              Cristiano Ronaldo
              79.5
              athletes
              30

            
              Rush Limbaugh
              79
               personalities
              64

            
              Ellen DeGeneres
              75
               personalities
              57

            
              Lionel Messi
              74
              athletes
              28

            
              The Eagles
              73.5
              musicians
              na

            
              Dr. Phil McGraw
              70
                personalities
              65

            
              Roger Federer
              67
              athletes
              34

            
              Calvin Harris
              66
              musicians
              31

            
              LeBron James
              65
              athletes
              30

            
              Justin Timberlake
              63.5
              musicians
              34

            
              David Copperfield
              63
                magicians
              59

            
              Sean Combs
              60
              musicians
              45

            
              Gordon Ramsay
              60
              personalities
              48

            
              Ryan Seacrest
              60
              personalities
              40

            
              Fleetwood Mac
              59.5
              musicians
              na

            
              Lady Gaga
              59
              musicians
              29

            
              Rolling Stones
              57.5
              musicians
              na

            
              Ed Sheeran
              57
              musicians
              24

            
              Jay Z
              56
              musicians
              45

            
              Beyonce Knowles
              54.5
              musicians
              34

            
              Kevin Durant
              54
              athletes
              27

            
              Elton John
              68
              musicians
              68

            
              Toby Keith
              53
              musicians
              54

            
              Kim Kardashian
              52.5
              personalities
              35

            
              Jennifer Lawrence
              52
                actresses
              25

            
              Paul McCartney
              51.5
              musicians
              73

            
              Phil Mickelson
              51
              athletes
              45

            
              Tiger Woods
              50.5
              athletes
              39

            
              Jackie Chan
              50
               actors
              61

            
              Kobe Bryant
              49.5
              athletes
              37

            
              Ben Roethlisberger
              49
              athletes
              33

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Highest Paid Celebrities</title>
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
		<style type="text/css">

			body {
				margin: 0;
				background-color: #fff1e0;
				font-family: Helvetica, Arial, sans-serif;
			}

			#container {
				width: 700px;
				margin-left: auto;
				margin-right: auto;
				margin-top: 50px;
				padding: 50px;
				padding-top: 20px;
				border: 1px solid #CEC6B9;
				border-width: 0px 1px 1px;
				background-color: #fff9f0;
				box-shadow: 1px 1px 2px 2px #ccc;
			}

			h1 {
				margin: 0;
				font-size: 2.7em;
				font-weight: 200;
				color: #74736C;
			}


			h3 {
				margin: 0;
				font-size: 1.00em;
				font-weight: 400;
				color: #74736C;
			}

			p {
			    font-size: 14px;
				margin: 15px 0 10px 0;
				margin-bottom: 4px;

			}

			a:link {
				text-decoration: none;
				color: gray;
			}

			a:hover {
				text-decoration: underline;
			}

			a:visited {
				color: gray;
			}

			a:active {
				color: #be6d82;
			}

			svg {
				background-color: #fff9f0;
			}

			g.bar text {
				font-size: 11px;
				font-weight: bold;
				text-anchor: end;
				opacity: 0;
				color: #74736C;
			}

			g.bar:hover rect {
				fill: #ccc;
				cursor: pointer;
			}

			g.bar:hover text {
				opacity: 1;
				cursor: pointer;
			}

			.axis path,
			.axis line {
				fill: none;
				stroke: #74736C;
				stroke-dasharray:3,1;
				shape-rendering: crispEdges;
			}

			.axis text {
				font-family: sans-serif;
				font-size: 12px;
				font-weight: 400;
				fill: #74736c;
			}

			.y.axis path,
			.y.axis line {
				opacity: 0;
			}

			.source{
                font-size: 12px;
                position: absolute;
                float:
            }

		</style>

	</head>
	<body>

		<div id="container">
			<br><h1>Katy Perry fighting with the big boys</h1></br>
			   <h3>The world's highest-paid celebrities 2015<strong> ($m)</strong></h3>
        </div>
             <p class="source">Source: <a href="http://www.forbes.com/celebrities/list/#tab:overall">Forbes</a>, 2015</p>


		<script type="text/javascript">

			var w = 700;
			var h = 750;
			var padding = [ 20, 10, 30, 120 ];  //Top, right, bottom, left

			var widthScale = d3.scale.linear()
								.range([ 0, w - padding[1] - padding[3] ]);

			var heightScale = d3.scale.ordinal()
								.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);


			var xAxis = d3.svg.axis()
							.scale(widthScale)
							.orient("bottom");

			var yAxis = d3.svg.axis()
							.scale(heightScale)
							.orient("left");


			//Now SVG goes into #container instead of body
			var svg = d3.select("#container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

			d3.csv("forbeshighestPaidCelebrities.csv", function(data) {

				data.sort(function(a, b) {
					return d3.descending(+a.earnings, +b.earnings);
				});

				widthScale.domain([ 0, d3.max(data, function(d) {
					return +d.earnings;
				}) ]);

				heightScale.domain(data.map(function(d) { return d.celebritiesName; } ));

				//Bind data to groups (not bars directly)
				var groups = svg.selectAll("g")
								.data(data)
								.enter()
								.append("g")
								.attr("class", "bar");

				//Add a rect to each group
				var rects = groups.append("rect")
					.attr("x", padding[3])
					.attr("y", function(d) {
						return heightScale(d.celebritiesName);
					})
					.attr("width", 0)
					.attr("height", heightScale.rangeBand())
					.attr("fill", "#be6d82");

				//Add a text element to each group
				groups.append("text")
					.attr("x", function(d) {
						return padding[3] + widthScale(d.earnings) - 3;
					})
					.attr("y", function(d) {
						return heightScale(d.celebritiesName) + 11;
					})
					.text(function(d) {
						return d.earnings;
					});

				rects.transition()
					.delay(function(d, i) {
						return i * 50;
					})
					.duration(1000)
					.attr("width", function(d) {
						return widthScale(d.earnings);
					});

				svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
					.call(xAxis);

				svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + padding[3] + ",0)")
					.call(yAxis);

			});


		</script>

	</body>
</html>
celebritiesName	earnings	category	age
Floyd Mayweather	300	athletes	38
Manny Pacquiao	160	athletes	36
Katy Perry	135	musicians	31
One Direction	130	musicians	na
Howard Stern	95	personalities	61
Garth Brooks	90	musicians	53
James Patterson	89	authors	68
Robert Downey Jr.	80	actors	30
Taylor Swift	80	musicians	25
Cristiano Ronaldo	79.5	athletes	30
Rush Limbaugh	79	personalities	64
Ellen DeGeneres	75	personalities	57
Lionel Messi	74	athletes	28
The Eagles	73.5	musicians	na
Dr. Phil McGraw	70	personalities	65
Roger Federer	67	athletes	34
Calvin Harris	66	musicians	31
LeBron James	65	athletes	30
Justin Timberlake	63.5	musicians	34
David Copperfield	63	magicians	59
Sean Combs	60	musicians	45
Gordon Ramsay	60	personalities	48
Ryan Seacrest	60	personalities	40
Fleetwood Mac	59.5	musicians	na
Lady Gaga	59	musicians	29
Rolling Stones	57.5	musicians	na
Ed Sheeran	57	musicians	24
Jay Z	56	musicians	45
Beyonce Knowles	54.5	musicians	34
Kevin Durant	54	athletes	27
Elton John	68	musicians	68
Toby Keith	53	musicians	54
Kim Kardashian	52.5	personalities	35
Jennifer Lawrence	52	actresses	25
Paul McCartney	51.5	musicians	73
Phil Mickelson	51	athletes	45
Tiger Woods	50.5	athletes	39
Jackie Chan	50	actors	61
Kobe Bryant	49.5	athletes	37
Ben Roethlisberger	49	athletes	33
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Highest Paid Celebrities</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<style type="text/css">

	body {
	margin: 0;
	background-color: #fff1e0;
	font-family: Helvetica, Arial, sans-serif;
	}

	#container {
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
	padding: 50px;
	padding-top: 20px;
	border: 1px solid #CEC6B9;
	border-width: 0px 1px 1px;
	background-color: #fff9f0;
	box-shadow: 1px 1px 2px 2px #ccc;
	}

	h1 {
	margin: 0;
	font-size: 2.7em;
	font-weight: 200;
	color: #74736C;
	}


	h3 {
	margin: 0;
	font-size: 1.00em;
	font-weight: 400;
	color: #74736C;
	}

	p {
	font-size: 14px;
	margin: 15px 0 10px 0;
	margin-bottom: 4px;

	}

	a:link {
	text-decoration: none;
	color: gray;
	}

	a:hover {
	text-decoration: underline;
	}

	a:visited {
	color: gray;
	}

	a:active {
	color: #be6d82;
	}

	svg {
	background-color: #fff9f0;
	}

	g.bar text {
	font-size: 11px;
	font-weight: bold;
	text-anchor: end;
	opacity: 0;
	color: #74736C;
	}

	g.bar:hover rect {
	fill: #ccc;
	cursor: pointer;
	}

	g.bar:hover text {
	opacity: 1;
	cursor: pointer;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #74736C;
	stroke-dasharray:3,1;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 12px;
	font-weight: 400;
	fill: #74736c;
	}

	.y.axis path,
	.y.axis line {
	opacity: 0;
	}

	.source{
	font-size: 12px;
	position: absolute;
	float:
	}

	</style>

	</head>
	<body>

	<div id="container">
	<br><h1>Katy Perry fighting with the big boys</h1></br>
	<h3>The world's highest-paid celebrities 2015<strong> ($m)</strong></h3>
	</div>
	<p class="source">Source: <a href="http://www.forbes.com/celebrities/list/#tab:overall">Forbes</a>, 2015</p>


	<script type="text/javascript">

	var w = 700;
	var h = 750;
	var padding = [ 20, 10, 30, 120 ]; //Top, right, bottom, left

	var widthScale = d3.scale.linear()
	.range([ 0, w - padding[1] - padding[3] ]);

	var heightScale = d3.scale.ordinal()
	.rangeRoundBands([ padding[0], h - padding[2] ], 0.1);


	var xAxis = d3.svg.axis()
	.scale(widthScale)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(heightScale)
	.orient("left");


	//Now SVG goes into #container instead of body
	var svg = d3.select("#container")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	d3.csv("forbeshighestPaidCelebrities.csv", function(data) {

	data.sort(function(a, b) {
	return d3.descending(+a.earnings, +b.earnings);
	});

	widthScale.domain([ 0, d3.max(data, function(d) {
	return +d.earnings;
	}) ]);

	heightScale.domain(data.map(function(d) { return d.celebritiesName; } ));

	//Bind data to groups (not bars directly)
	var groups = svg.selectAll("g")
	.data(data)
	.enter()
	.append("g")
	.attr("class", "bar");

	//Add a rect to each group
	var rects = groups.append("rect")
	.attr("x", padding[3])
	.attr("y", function(d) {
	return heightScale(d.celebritiesName);
	})
	.attr("width", 0)
	.attr("height", heightScale.rangeBand())
	.attr("fill", "#be6d82");

	//Add a text element to each group
	groups.append("text")
	.attr("x", function(d) {
	return padding[3] + widthScale(d.earnings) - 3;
	})
	.attr("y", function(d) {
	return heightScale(d.celebritiesName) + 11;
	})
	.text(function(d) {
	return d.earnings;
	});

	rects.transition()
	.delay(function(d, i) {
	return i * 50;
	})
	.duration(1000)
	.attr("width", function(d) {
	return widthScale(d.earnings);
	});

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + padding[3] + ",0)")
	.call(yAxis);

	});


	</script>

	</body>
	</html>