score:7

Accepted answer 
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>Unemployment by Ward Bar Chart</title>

 <style type="text/css">
  .axis text{
  font-family: Arial;
  font-size: 13px;
  color: #333333;
  text-anchor: end;
  }

  path { 
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
  }

 .axis path,
 .axis line {
 fill: none;
 stroke: grey;
 stroke-width: 1;
 shape-rendering: crispEdges;
 } 


 .textlabel{
    font-family:  Arial;
    font-size:13px;
    color: #333333;
    text-anchor: middle;
  }
}

</style>
<body>


 <script src="http://d3js.org/d3.v3.min.js"></script>

 <script>

 // Set the dimensions of the canvas / graph
 var margin = {top: 20, right: 0, bottom: 60, left: 60},

 width = 475;
 height = 350;
 padding = 100; 


  // Adds the svg canvas
  var svg = d3.select("body")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
   .attr("viewBox", "0 0 " + width + " " + height);


 // Parse the date / time
 var parseDate = d3.time.format("%m/%d/%y").parse;
 var formatTax = d3.format(",.2f");

 // Set the ranges
 var x = d3.time.scale()
    .range([0, width - margin.right - margin.left], .1);


  var y = d3.scale.linear()
    .range([height - margin.top - margin.bottom, 0]);

 // Define the axes
 var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(5);

 var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .tickFormat(function(d) {return "$" + d + "B"});



 // Define the line
 var valueline = d3.svg.line()

.x(function(d) { return x(d.Date); })
.y(function(d) { return y(d["Tax Collections"]); });




// Get the data
 d3.csv("Yearly Tax Collections.csv", function(error, data) {
   data.forEach(function(d) {
    d.Date = parseDate(d.Date);
    d["Tax Collections"] = formatTax(+d["Tax Collections"]/1000000000);
});


 // Scale the range of the data
  x.domain(d3.extent(data, function(d) { return d.Date; }));
  y.domain([0, d3.max(data, function(d) { return d["Tax Collections"]; })]);

   // Add the valueline path.
     svg.append("path")
    .attr("class", "line")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
     .attr("d", valueline(data));

// Add the X Axis
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(" + margin.left + "," + (height -         margin.bottom) + ")")
    .call(xAxis);

   // Add the Y Axis
   svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .call(yAxis);

    // Y-axis labels
   svg.append("text")
   .attr("text-anchor", "middle")
   .style("font-size", "13px")
   .style("color", "#333333")
   .attr("transform", "translate ("+ (padding/4) + "," +(height/2)+") rotate(-90)")
   .text("Tax Revenue")
   .style("font-family", "Arial"); 

   // X-axis labels
   svg.append("text")
   .attr("text-anchor", "middle")
   .style("font-size", "13px")
   .style("color", "#333333")
   .attr("transform", "translate("+ (width/2) + "," +(height-(padding/4)) + ")")
   .text("Fiscal Year")
   .style("font-family", "Arial"); 

 //source

   svg.append("text")
   .attr("text-anchor", "middle")
   .style("font-size", "13px")
   .style("color", "#333333")
   .attr("transform", "translate("+ (width/4.5) + "," +(height/1) + ")")
   .text("Source: DC OCFO")
   .style("font-family", "Arial")

//title for the chart 

   svg.append("text")
   .attr("text-anchor", "middle")
   .style("font-size", "16px")
   .style("color", "#333333")
   .attr("transform", "translate("+ (width/3) + "," +(height/30) + ")")
   .text("DC Total Tax Revenues by Fiscal Year")
   .style("font-family", "Arial");


  svg.append("text")
  .attr("text-anchor", "left")
  .style("font-size", "10x")
  .style("color", "#333333")
  .attr("transform", "translate("+ (width/20) + "," +(height/12) + ")")
  .text("2000 to 2015")
  .style("font-family", "Arial")

  //line labels

  svg.append('g')
  .classed('labels-group', true)
  .selectAll('text')
  .data(data)
  .enter()

  .append('text')
  .filter(function(d, i) { return i === 0 || i === (data.length - 1) })
  .classed('label',true)
  .attr({
    'x':function(d,i) {
        return x(d.Date);

    },
      'y':function(d,i) {
        return y(d["Tax Collections"]);
    }
  })
 .text(function(d,i){
    return "$" + d["Tax Collections"] + "B";
   })
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 



});

</script>
</body>

Assumes that the data array is sorted by date.


Related Query

More Query from same tag