D3 Examples - A nicer chart about myths

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Myths: Horizontal Bar</title>
​
    <style type="text/css">
​
        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>
​
​
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
​
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
​
    <script type="text/javascript" src="stupidtable.js"></script>
​
    <script type="text/javascript">
​
            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>
    