Line chart not displaying from JSON Data

Question

actually I am trying to make a chart line using D3.js. I made x axis and y axis but now the chart line is missing. here is my json data:

filterData([ ` { "Sparte": "Beherbergung", "Jahr": 2020, "Monat": "Januar", "Beschaeftigte": "100,3", "VeraederungenzumVorjahr": "0,3" }, { "Sparte": "Beherbergung", "Jahr": 2020, "Monat": "Februar", "Beschaeftigte": "99,7", "VeraederungenzumVorjahr": "0,2" }, { "Sparte": "Beherbergung", "Jahr": 2020, "Monat": "Maerz", "Beschaeftigte": "96,3", "VeraederungenzumVorjahr": "-5,0" }]);

an here is my script:

function filterData(data){
const beherbergungen = data.filter(
item => item.Sparte === 'Beherbergung'
);
visualiseChart(beherbergungen);
}

function visualiseChart(data){

var margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 900 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#visualisationContainer")
        .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})`);

var xAxis = d3.scaleBand()
          .domain(data.map(function(d) { return d.Monat; }))
          .range([0, width]);

   svg.append("g")
  .attr("transform", `translate(0, ${height})`)
  .call(d3.axisBottom(xAxis));
 
  var yAxis = d3.scaleLinear()
                .domain([-50,50])
                .range([height, 0]);
  svg.append("g")
     .call(d3.axisLeft(yAxis));

//curve is not displaying
var curve = svg.append("path")
           .datum(data)
           .attr("fill", "none")
           .attr("stroke", "turquoise")
           .attr("stroke-width", 4)
           .attr("d",d3.line()
              .x(data.map(function(d) {return xAxis(d.Monat);})) //here is the problem
              .y(data.map(function(d) {return yAxis(d.VeraederungenzumVorjahr);}))//here is the problem
            ); 
}

d.Monat returns `"Maerz"` are you sure you dont want d.Beschaeftigte instead? — ptothep, Dec 14 '20 at 12:23
actually the X axis correspond to Month and the Y axis is a percentage — bilel ayech, Dec 14 '20 at 12:32
Your Y data `VeraederungenzumVorjahr` is a string and not a number. What does `VeraederungenzumVorjahr: "0,3"` represent? Is that `0.3` with a comma as a decimal separator? — Mark, Dec 14 '20 at 13:47

score 1 · Accepted Answer · answered Dec 14 '20 at 13:53

Two issues:

The Y data VeraederungenzumVorjahr is a string and needs to be cast to a number. I'm assuming that 0,3 is a 0.3 (using a comma as decimal separator) in my answer below.
You are calling d3.line() incorrectly.

<!DOCTYPE html>

<html>
  <head> </head>

  <body>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <div id="visualisationContainer"></div>
    <script>

      filterData([{ "Sparte": "Beherbergung", "Jahr": 2020, "Monat": "Januar", "Beschaeftigte": "100,3", "VeraederungenzumVorjahr": "0,3" }, { "Sparte": "Beherbergung", "Jahr": 2020, "Monat": "Februar", "Beschaeftigte": "99,7", "VeraederungenzumVorjahr": "0,2" }, { "Sparte": "Beherbergung", "Jahr": 2020, "Monat": "Maerz", "Beschaeftigte": "96,3", "VeraederungenzumVorjahr": "-5,0" }]);


      function filterData(data) {
        const beherbergungen = data.filter(
          (item) => item.Sparte === 'Beherbergung'
        );
        visualiseChart(beherbergungen);
      }

      function visualiseChart(data) {
        var margin = { top: 10, right: 30, bottom: 30, left: 60 },
          width = 900 - margin.left - margin.right,
          height = 400 - margin.top - margin.bottom;

        // append the svg object to the body of the page
        var svg = d3
          .select('#visualisationContainer')
          .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})`);

        var xAxis = d3
          .scaleBand()
          .domain(
            data.map(function (d) {
              return d.Monat;
            })
          )
          .range([0, width]);

        svg
          .append('g')
          .attr('transform', `translate(0, ${height})`)
          .call(d3.axisBottom(xAxis));

        var yAxis = d3.scaleLinear().domain([-50, 50]).range([height, 0]);
        svg.append('g').call(d3.axisLeft(yAxis));

        //curve is not displaying
        var curve = svg
          .append('path')
          .datum(data)
          .attr('fill', 'none')
          .attr('stroke', 'turquoise')
          .attr('stroke-width', 4)
          .attr(
            'd',
            d3
              .line()
              .x(function (d) {
                  return xAxis(d.Monat);
                }
              )
              .y(function (d) {
                  var value = (+(d.VeraederungenzumVorjahr.replace(",",".")));
                  return yAxis(value);
                }
              )
          );
      }
    </script>
  </body>
</html>

thanks a lot it works but what does the + do in this line ` var value = (+(d.VeraederungenzumVorjahr.replace(",",".")));` — bilel ayech, Dec 14 '20 at 15:26
@bilelayech, the + casts it from a string to a number. See [here](https://stackoverflow.com/a/1133814/16363) for all the different string to number casting in JavaScript. — Mark, Dec 14 '20 at 18:02

Line chart not displaying from JSON Data

1 Answers1