title: Selecting a section of data from CSV in d3.js
body: <p>I created a bar chart by creating a new csv which was part of a bigger dataset. I want to now use the data from the original data set to plot my bar graph by selecting only two columns (Ward and Unemploymet) and one months data. How do I do this?</p>
  
  <p>The code is below:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Unemployment by Ward Bar Chart&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
    .axis text{
    font-family: Arial;
    font-size: 13px;
    color: #333333;
    text-anchor: end;
  }
    .axis path{
    fill:none;
    stroke:#333333 ;
    stroke-width: 1.5px;
    shape-rendering: crispEdges
    font-family: Arial;
  }
  .bar{
      stroke: none;
      fill: #012C3B;
  
  }
  .textlabel{
      font-family:  Arial;
      font-size:13px;
      color: #333333;
      text-anchor: middle;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;script type="text/javascript" src="d3/d3.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    var margin = {top:20, right:0, bottom:60, left:60},
  width  = 475;
  height = 350;
  padding = 100;
  
  
  var svg = d3.select("body")
  .append("svg")
  .attr("width", "30%")
  .attr("height", "70%")
  .attr("viewBox", "0 0 " + width + " " + height); 
  
  var yScale = d3.scale.linear()
  .range([height - margin.top - margin.bottom, 0]);
  
   var xScale = d3.scale.ordinal()
  .rangeRoundBands([0, width - margin.right - margin.left], .1);
  
  var xAxis = d3.svg.axis()
  .scale(xScale)
  .orient("bottom");
  
  var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left")
  .tickFormat(function(d) {return d + "%"})
  
  
    d3.csv("Unemployment.csv", function(error, data)
   {
  
   //map function goes through every element, then returns a number for                  Unemployment
   data = data.map(function(d){ 
   d["Unemployment"] = +d["Unemployment"]; 
   return d;
    });
  
   //yscale's domain is from zero to the maximum "Unemployment"
   yScale.domain([0, d3.max(data, function(d){ return d["Unemployment"]; })]);
  
   //xscale is unique values in Ward (Ward, since they are all different)
     xScale.domain(data.map(function(d){ return d["Ward"]; }));
    svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .selectAll(".bar")
    .data(data)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("x", function(d){ return xScale(d["Ward"]); })
    .attr("y", function(d){ return yScale(d["Unemployment"]); })
    .attr("height", function(d){ return height - margin.top - margin.bottom -          yScale(d["Unemployment"]); })
    .attr("width", function(d){ return xScale.rangeBand(); })
    .style("font-family", "Arial");
  
  
  //adding y axis to the chart
   svg.append("g")
   .attr("class", "y axis")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
   .call(yAxis)
   .style("color", "#333333")
   .style("font-family", "Arial");
  
  //adding x axis to the bottom of chart
   svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(" + margin.left + "," + (height - margin.bottom)      + ")")
  .call(xAxis)
  .style("color", "#333333")
  .style("font-family", "Arial");
  
  
  //bar labels
  
    svg.append("g")
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
   .selectAll(".textlabel")
   .data(data)
   .enter()
   .append("text")
   .attr("class", "textlabel")
   .style("font-family", "Arial")
   .style("font-size", "15px")
   .attr("x", function(d){ return xScale(d["Ward"]) + (xScale.rangeBand()/2); })
   .attr("y", function(d){ return yScale(d["Unemployment"]) - 3 ; })
   .text(function(d){ return (d["Unemployment"] + "%"); });
  
    // 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("Unemployment")
   .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("Ward")
   .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.78) + "," +(height/30) + ")")
  .text("Unemployment by Ward")
  .style("font-family", "Arial");
  
  //source
  
  svg.append("text")
  .attr("text-anchor", "middle")
  .style("font-size", "13px")
  .style("color", "#333333")
  .attr("transform", "translate("+ (width/3.2) + "," +(height/1) + ")")
  .text("Source:Bureau of Labor Statistics")
  .style("font-family", "Arial")
  
   })
  
  
   &lt;/script&gt;
   &lt;/body&gt;
   &lt;/html
  </code></pre>
  
  <p>The CSV used for this is:</p>
  
  <pre><code>Ward    Unemployment
  1   4.5
  2   4.3
  3   4
  4   5.7
  5   7.9
  6   5.2
  7   11
  8   14.2
  </code></pre>
  
  <p>I want to be able to change the code to select this part of the data set from a bigger csv which includes 56 rows and 6 columns. Can someone please help me with this? Thanks in advance. </p>