A nicer chart about myths - Claudia Fix

forked from claudialexa's block: A nicer chart about myths

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Myths: Horizontal Bar</title>

body {
			font-family: Arial;
		}

h1 {
			font-size: 36px;
			line-height: 30px;
		}

p {
			font-size: 16px;
			color: #666666;
		}

p.source {
			font-size: 14px;
			color: #666;
		}

a {
			color: #EB7F00;
		}

rect:hover {
			opacity: 0.5;
			}

.axis path,
		.axis line {
				fill: none;
				stroke: #666666;
				shape-rendering: crispEdges;
		}

.axis text {
			font-family: sans-serif;
			font-size: 10px;
			color: #666666;
		}

.xlabel {
			font-famile: sans-serif;
			font-size: 11px;
			color: gray;
		}

svg {
			background-color: white;
		}
    
    .labels {
      font-size: 10px;
      fill: gray;
    }

.tooltip {   
		  position: absolute;           
		  text-align: center;           
		  width: 60px;                  
		  height: 28px;                 
		  padding: 2px;             
		  font: 14px sans-serif bold;  
		  font-weight: bold;      
		  background-color: #dedede;   
		  border: 0px;      
		  border-radius: 8px;           
		  pointer-events: none;         
		}

</style>
	
	</head>

<body>

<h1>A Very Basic Chart About Myths</h1>
    <p>This table shows some some popular myths/questions ranked by Google hits.</p>
    <p class="source">Source: <a href="https://www.dataisbeautiful.net" target="_blank">dataisbeautiful.net</a></p>
		<div id="table"></div>

var fullWidth = 1000;
			var fullHeight = 750;
			var colors = d3.scale.category20c();
    		console.log(colors(0));

// Setting up the Margins Here

var margin = {top:20, left: 300, right:50, bottom:50};

var width = fullWidth - margin.left - margin.right;
    		var height = fullHeight - margin.top - margin.bottom;

var widthScale = d3.scale.linear()
				.range([0, width]);

var heightScale = d3.scale.ordinal().rangeRoundBands([0,height], 0.4);

// Setting up the Axis Here

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

var yAxis = d3.svg.axis()
				.scale(heightScale)
				.orient("left")
				.innerTickSize([0]);

var svg = d3.select("body")
						.append("svg")
						.attr("width", fullWidth)
						.attr("height", fullHeight)
						.append("g")
							.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("category_myths.csv", function(error, data){

if (error) { 
					console.log("Had an error loading file.");
	     		}

// Setting Up Scales
				widthScale.domain([0,3500000]); // hard coded to cut off biggest? you could also drop them in your data.forEach below
				heightScale.domain(data.map(function(d) {return d.myth} ));

var median = d3.median(data, function(d) {
				return d.google_hits;
			} )

var rects = svg.selectAll("rect")
						.data(data) // you aren't using the data set you calc'd?
						.enter()
						.append("rect");

rects.attr("x", 0)
					.attr("y", function(d) {
						return heightScale(d.myth);
					})
					.attr("width", function(d) {
						return widthScale(+d.google_hits); // use your scale here:
					})
					.attr("height", heightScale.rangeBand())
					.style("fill" , function(d){
						if (d.category === "science") {
							return "#F5A503";
						}
						else if (d.category === "drugs") {
							return "#EFC94C";
						}
						else if (d.category === "history") {
							return "#4AD9D9";
						}
						else if (d.category === "religion") {
							return "#36B1BF";
						}

else if (d.category === "health") {
							return "#45B29D";
						}
						else if (d.google_hits >= median) {
							return "red";
						}
					})
					.append("title") 
					.attr("class", "tooltip") 
					.text(function(d) {
						return "Category:" + " " + d.category + " " + "Google Hits:" + " " + d.google_hits;
					});

// SOS HOW DO I ADD LABELS AT THE END OF THE BARS?

svg.selectAll("text.labels")
				 		.data(data)
				 		.enter()
				 		.append("text")
      			.attr("class", "labels")
   	 				.attr("x", function(d) {
    						return widthScale(+d.google_hits);
   	 				})
				 	  .attr("y", function(d) {
						return heightScale(d.myth);
					})
          .attr("dx", 3)
          .attr("dy", 7)
          .text(function(d) {
                return d.google_hits/1000 + "K"; // or use a d3.format
              });

// Adding Axis information

svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + height + ")")
					.call(xAxis)

svg.append("g")
					.attr("class", "y axis")
					.call(yAxis)

// Label Axis

svg.append("text")
					.attr("class", "xlabel")
        			.attr("transform", "translate(" + width/2 + " ," +
        				height + ")")
        			.style("text-anchor", "middle")
        			.attr("dy", "35")
        			.text("Google Hits");

});

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js