D3 X-Axis Label Showing Up & Y-Axis Not Showing Up at All

Viewed 328

I am trying to create my very first D3 chart. Please see my full code below of the svg element/the axises.

var margin = {top: 20, right: 10, bottom: 20, left: 10}
    var width = 960 - margin.left - margin.right
    var height = 500 - margin.top - margin.bottom
    var barPadding = 1
    var svg = d3.select("body").append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    // Get the data
      var pathToCsv = "q3.csv"  // path to csv
    d3.dsv(",", pathToCsv, function (d) {
      return {
        year: new Date(parseFloat(d.year),1),
        running_total: parseFloat(d.running_total)
      }
    }).then(function (data) {
      console.log(data); // you should see the data in your browser's developer tools console 
      dataset=data
      //x_scale
      var x_scale = d3.scaleTime()
              .range([0, width])
      //y_scale
      var y_scale = d3.scaleLinear()
              .range([height,0]);
      var xAxis = d3.axisBottom(x_scale)
      
      //domain
      x_scale.domain([d3.min(dataset, function(d) {return d.year}),
                       d3.max(dataset, function(d){ return d.year})])
      y_scale.domain([0,d3.max(dataset, function(d){ return d.running_total})])
      
      
      svg.selectAll('rect')
         .data(dataset)
         .enter()
         .append('rect')
        //  .attr('x', function(d){return new Date(d.year).getFullYear()}) 
         .attr('x', function(d,i){
           return i * (width / dataset.length)
         })
         .attr('height', function(d){
           return height - y_scale(d.running_total)
         })
         .attr('width', width / dataset.length - barPadding)
         .attr('y', function(d){
           return y_scale(d.running_total)
         })
      
      svg.append('g')
         .attr('id','x_axis')
         .attr('transform','translate(0,462)')
         .call(xAxis)
         .ticks(10)
      
      svg.append('text')
         .attr("class", "x_axis_label")
         .attr("text-anchor", "end")
         .attr("x", width)
         .attr("y", height)
         .text('Year')
        //  .append('text')
        //  .text('Year')
        //  .attr

      svg.append('g')
         .attr('id','y_axis')
         .call(d3.axisLeft())
         .attr('transform','translate(100,0)')
      
      svg.append('text')
         .attr("class", "y_axis_label")
         .attr("text-anchor", "middle")
         .attr("x", width)
         .attr("y", height)
         .text('Running Total')
      
      svg.append('text')
         .attr('x',50)
         .attr('y',50)
         .attr('font-size', '500px')
         .text('Years')

I would really appreciate any guidance as I am following tutorials and it looks right but it alas it is not working. I am also attaching a picture of what my graph looks like.

The y axis does not appear anywhere. As well as the x axis label. I am not sure what I am doing wrong.

Current Output

1 Answers

Your code is missing y_scale argument when calling d3.axisLeft:

svg.append('g')
  .attr('id','y_axis')
  .call(d3.axisLeft(y_scale))
  .attr('transform','translate(100,0)')
Related