Reusable Bar Chart

Simple bar chart that takes in a .csv. Particular format for sharing data. Bar chart handles changes in values and changes in the amount of records.

No CSS. Only need access to the header to reference d3.

Can be found here: https://gist.github.com/parnelandr/7887491

24/12/2013 - CSS removed as had a mix of where styling was in the code. Mainly for flexibility with webpages run in a CMS. Adjustments made to bottom margin and x-axis title placement allowing more chart space.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Reusable Bar Chart</title>
    <script src="https://d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      
      //set up canvas and bar sizes
      var canvasWidth = 600,
          canvasHeight = 500,
          otherMargins = canvasWidth * 0.1,
          bottomMargin = canvasHeight * 0.2,
          maxBarHeight = canvasHeight - otherMargins - bottomMargin,
          maxChartWidth = canvasWidth - otherMargins * 2;

//set up linear scale for data to fit on chart area 
      var yScale = d3.scale.linear()
                      .range([maxBarHeight, 0]);

//set up ordinal scale for x variables
      var xScale = d3.scale.ordinal();

//add canvas to HTML
      var chart = d3.select("body").append("svg")
                                  .attr("width",canvasWidth)
                                  .attr("height", canvasHeight);

//set up y axis                            
      var yAxis = d3.svg.axis()
                  .scale(yScale)
                  .orient("left")
                  .ticks(5);

//set up x axis
      var xAxis = d3.svg.axis()
                  .scale(xScale)
                  .orient("bottom")
                  .tickSize(0);

//add in data
      //csv has 4 lines before the data to be graphed
      //First line - Title of the chart
      //Second line - Source of the data
      //Third line - Metadata notes
      //Fourth line - blank
      //Fifth line - x variable name, y variable name
      //Sixth line onwards - x variable value, y variable value
        d3.xhr("Food.csv").get(function (error, response) {
          
          //retrieve data
          var dirtyCSV = response.responseText;
          var cleanCSV = dirtyCSV.split('\n').slice(4).join('\n');
          var data = d3.csv.parse(cleanCSV)
          
          //retrieve title
          var dirtyTitle = dirtyCSV.split('\n').slice(0,1).join('\n');
          var title = dirtyTitle.slice(0,-1);

//get variable names
              var keys = d3.keys(data[0]);
              var xName = keys[0];
              var yName = keys[1];

//accessing the properties of each object with the variable name through its key
              var yData = function(d) {return +d[yName];};
              var xData = function(d) {return d[xName];}

// find highest value
              var maxY = d3.max(data, yData); 
              
              //set x domain by mapping an array of the variables along x axis
              xScale.domain(data.map(xData));
              
              //set y domain with max y value and use .nice() to ensure the y axis is labelled above the max y value
              yScale.domain([0, maxY]).nice();

//set bar width with rangeBands ([x axis width], gap between bars, gap before and after bars) as a proportion of bar width  
        xScale.rangeBands([0, maxChartWidth], 0.1, 0.25);
        
        //set up rectangle elements with attributes based on data
        var rects = chart.selectAll("rect")
                        .data(data)
                        .enter()
                        .append("rect");

//set up attributes of svg rectangle elements based on attributes
        var rectAttributes = rects
                              .attr("x", function (d) {return (xScale(d[xName])) + otherMargins; })
                              .attr("y", function (d) {return yScale(d[yName]) + otherMargins; })
                              .attr("width", xScale.rangeBand())
                              .attr("height", function (d) {return maxBarHeight - yScale(d[yName])})
                              .attr("fill", "blue")
                              .on("mouseover", function(d, i) {
                                
                                //change fill
                                d3.select(this)
                                      .attr("fill", "orange");
                                
                                //set up data to show on mouseover
                                var xPosition = parseFloat(d3.select(this).attr("x")) + (parseFloat(d3.select(this).attr("width")) / 2);
                                var yPosition = (parseFloat(d3.select(this).attr("y")) - 6);
                                chart.append("text")
                                      .attr("id", "tooltip")
                                      .attr("x", xPosition)
                                      .attr("y", yPosition)
                                      .attr("text-anchor", "middle")
                                      .attr("font-family", "sans-serif")
                                      .attr("font-size", "12px")
                                      .attr("font-weight", "bold")
                                      .attr("fill", "black")
                                      .text(d[yName]);
                              })
                              
                              //transition out
                              .on("mouseout", function(d) {
                                d3.select(this)
                                  .transition()
                                  .duration(250)
                                  .attr("fill", "blue");
                                d3.select("#tooltip").remove();
                              });

//chart title
        chart.append("text")
              .attr("x", (maxChartWidth / 2) + otherMargins)
              .attr("y", otherMargins / 2)
              .attr("text-anchor", "middle")
              .attr("font-family", "sans-serif")
              .attr("font-size", "20px")
              .attr("font-weight", "bold")
              .attr("fill", "black")
              .text(title);

//append y axis
        chart.append("g")
              .attr("transform", "translate(" + otherMargins + ", " + otherMargins + ")")
              .attr("text-anchor", "middle")
              .attr("font-family", "sans-serif")
              .attr("font-size", "10px")
              .style("stroke", "black")
              .style("fill", "none")
              .style("stroke-width", 1)
              .style("shape-rendering", "crispEdges")
              .call(yAxis)
                .selectAll("text")
                .attr("stroke", "none")
                .attr("fill", "black");

//y axis title
          chart.append("text")
                .attr("transform", "rotate(-90)")
                .attr("x", -((maxBarHeight / 2) + otherMargins))
                .attr("y", otherMargins / 2)
                .attr("dy", "-0.5em")
                .attr("text-anchor", "middle")
                .attr("font-family", "sans-serif")
                .attr("font-size", "14px")
                .attr("font-weight", "bold")
                .attr("fill", "black")
                .text(yName);

//append x axis
        chart.append("g")
              .attr("transform", "translate(" + otherMargins + ", " + (canvasHeight - bottomMargin) + ")")
              .attr("text-anchor", "middle")
              .attr("font-family", "sans-serif")
              .attr("font-size", "10px")
              .style("stroke", "black")
              .style("fill", "none")
              .style("stroke-width", 1)
              .style("shape-rendering", "crispEdges")
              .call(xAxis)
              .selectAll("text")
                .attr("dy", "1.15em")
                .attr("stroke", "none")
                .attr("fill", "black")
                .call(wrap, xScale.rangeBand()); //calls wrap function below

//x axis title        
          chart.append("text")
                .attr("x", (maxChartWidth / 2) + otherMargins)
                .attr("y", canvasHeight - (bottomMargin / 3))
                .attr("text-anchor", "middle")
                .attr("font-family", "sans-serif")
                .attr("font-size", "14px")
                .attr("font-weight", "bold")
                .attr("fill", "black")
                .text(xName);
        
        //chart border - not necessary used for reference for the edge of canvas
        var border = chart.append("rect")
                          .attr("x", 0)
                          .attr("y", 0)
                          .attr("height", canvasHeight)
                          .attr("width", canvasWidth)
                          .style("stroke", "black")
                          .style("fill", "none")
                          .style("stroke-width", 1);

//log anything in the console for debugging
        //console.log(yAxis);

});
      
      //line wrap function adapted from "Wrapping Long Labels" - mike bostock
      function wrap(text, width) {
        text.each(function() {
          var text = d3.select(this),
            words = text.text().split(/\s+/).reverse(),
            word,
            line = [],
            lineNumber = 0,
            lineHeight = 1.1, //em
            y = text.attr("y"),
            dy = parseFloat(text.attr("dy")),
            tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
          while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(" "));
            if (tspan.node().getComputedTextLength() > width) {
              line.pop();
              tspan.text(line.join(" "));
              line = [word];
              tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
            } 
          }
        })
      }

//while the data is being loaded it turns the strings into a number
      function type(d) {
        d[yName] = +d[yName];
        return d;

}

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

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js