score:1

Accepted answer

As mentioned in the comments above the issue lies in the dataset where the final data point does not have the Teen_Unemployment data point. As a result the last point is counted as 0 or null and the point drops to the bottom of the y-scale.

To fix this, we create a separate dataset for the line chart by eliminating any data points which have empty Teen_Unemployment field like:

var lineData = dataset.filter(f => f.Teen_Unemployment != "");

Then we use the lineData to map the domain of for the yLineScale like:

   var   yLineScale = d3.scaleLinear()
        .rangeRound([height, 0])
        .domain([0, d3.max(lineData, (function (d) {
          return d.Teen_Unemployment;
        }))]);

Finally we create the lineChart with the lineData like so:

  g.append("g")
      .call(d3.axisRight(yLineScale));

  var line = d3.line()
      .x(function(d,i) { return xScale(d.Year) + xScale.bandwidth() / 2})
      .y(function(d) { return yLineScale(d.Teen_Unemployment)})
      .curve(d3.curveMonotoneX);

    let lineChart = g.append('g')
                                    .attr('class', 'lineChart')
                    ;


  lineChart.append("path")
    .attr("class", "line") // Assign a class for styling
    .attr("d", line(lineData)); // 11. Calls the line generator

  lineChart.selectAll('circle').data(lineData).enter().append("circle")
      .attr("class", "dot") 
      .attr("cx", function(d, i) { return xScale(d.Year)+ xScale.bandwidth() / 2})
      .attr("cy", function(d) { return yLineScale(d.Teen_Unemployment); })
      .attr("r", 5);


       // labels on the line chart
  lineChart.selectAll('text').data(lineData).enter().append("text")
    .attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
    .attr("y", function(d) { return yLineScale(d.Teen_Unemployment) - 10; })
    .attr("text-anchor", "middle")
    .text(function(d) {
      return parseInt(d.Teen_Unemployment * 100) + '%';
    });

Working example:

    var dataset = [
  {
    "Year": 2007,
    "SYEP_Enrollment": 41650,
    "Teen_Unemployment": .330
  },
  {
    "Year": 2008,
    "SYEP_Enrollment": 41804,
    "Teen_Unemployment": .302
  },
  {
    "Year": 2009,
    "SYEP_Enrollment": 43113,
    "Teen_Unemployment": .308
  },
  {
    "Year": 2010,
    "SYEP_Enrollment": 52255,
    "Teen_Unemployment": .325
  },
  {
    "Year": 2011,
    "SYEP_Enrollment": 35725,
    "Teen_Unemployment": .383
  },
  {
    "Year": 2012,
    "SYEP_Enrollment": 30628,
    "Teen_Unemployment": .399
  },
  {
    "Year": 2013,
    "SYEP_Enrollment": 29416,
    "Teen_Unemployment": .408
  },
  {
    "Year": 2014,
    "SYEP_Enrollment": 35957,
    "Teen_Unemployment": .369
  },
  {
    "Year": 2015,
    "SYEP_Enrollment": 47126,
    "Teen_Unemployment": .357
  },
  {
    "Year": 2016,
    "SYEP_Enrollment": 54263,
    "Teen_Unemployment": .334
  },
  {
    "Year": 2017,
    "SYEP_Enrollment": 60113,
    "Teen_Unemployment": .316
  },
  {
    "Year": 2018,
    "SYEP_Enrollment": 69716,
    "Teen_Unemployment": .291
  },
  {
    "Year": 2019,
    "SYEP_Enrollment": 74354,
    "Teen_Unemployment":""
  }
];
   
  //make a copy of the dataset for the lineChart
var lineData = dataset.filter(f => f.Teen_Unemployment != "");
    
var margin = {top: 20, right: 35, bottom: 30, left: 40},
      width = 600,
      height = 400;

  var xScale = d3.scaleBand()
                .rangeRound([0, width])
                .padding(0.1)
                .domain(dataset.map(function(d) {
                  return d.Year;
                }));


   var   yScale = d3.scaleLinear()
                .rangeRound([height, 0])
                .domain([0, d3.max(dataset, (function (d) {
                  return d.SYEP_Enrollment;
                }))]);

   var   yLineScale = d3.scaleLinear()
        .rangeRound([height, 0])
        .domain([0, d3.max(lineData, (function (d) {
          return d.Teen_Unemployment;
        }))]);

  var svg = d3.select(".bar-chart-wrapper svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom);

  var g = svg.append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top +")");

  // axis-x
  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(xScale));

  // axis-y
  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(yScale));

  // axis-y for the line
  g.append("g")
      .attr("class", "axis axis--y")
      .attr('transform',`translate(${width},0)`)
      .call(d3.axisRight(yLineScale));

  var bar = g.selectAll("rect")
    .data(dataset)
    .enter().append("g");

  // bar chart
  bar.append("rect")
    .attr("x", function(d) { return xScale(d.Year); })
    .attr("y", function(d) { return yScale(d.SYEP_Enrollment); })
    .attr("width", xScale.bandwidth())
    .attr("height", function(d) { return height - yScale(d.SYEP_Enrollment);})
    .attr('class','bar')


  // labels on the bar chart
  bar.append("text")
    .attr("dy", "1.8em")
    .attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
    .attr("y", function(d) { return yScale(d.SYEP_Enrollment); })
    .attr("text-anchor", "middle")
    .text(function(d) {
      return d.SYEP_Enrollment;
    });

  // line chart
	// data filtered above
  
  // axis-y
  g.append("g")
      .call(d3.axisRight(yLineScale));

  var line = d3.line()
      .x(function(d,i) { return xScale(d.Year) + xScale.bandwidth() / 2})
      .y(function(d) { return yLineScale(d.Teen_Unemployment)})
      .curve(d3.curveMonotoneX);

	let lineChart = g.append('g')
  									.attr('class', 'lineChart')
                    ;
                    
  
  lineChart.append("path")
    .attr("class", "line") // Assign a class for styling
    .attr("d", line(lineData)); // 11. Calls the line generator

  lineChart.selectAll('circle').data(lineData).enter().append("circle")
      .attr("class", "dot") 
      .attr("cx", function(d, i) { return xScale(d.Year)+ xScale.bandwidth() / 2})
      .attr("cy", function(d) { return yLineScale(d.Teen_Unemployment); })
      .attr("r", 5);


       // labels on the line chart
  lineChart.selectAll('text').data(lineData).enter().append("text")
    .attr("x", function(d) { return xScale(d.Year) + xScale.bandwidth() / 2; })
    .attr("y", function(d) { return yLineScale(d.Teen_Unemployment) - 10; })
    .attr("text-anchor", "middle")
    .text(function(d) {
      return parseInt(d.Teen_Unemployment * 100) + '%';
    });
.line {
  fill-opacity: 0;
  stroke: blue
}

.dot {
  fill: white;
  stroke: blue;
}
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <div class="bar-chart-wrapper">
    <svg></svg>
  </div>

</body>


Related Query