javascript html typescript ionic-framework d3.js

D3 - line plot from bar chart example

I am trying to modify below code from this example

https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54/

to a line plot or connected scatter plot (preferred). How?

Nearly all simple D3 examples I find a bar charts or have different syntax since they read data from a cvs and not locally in the example above. D3 is a bit cryptic for me so far.

    this.g.selectAll('.bar')
      .data(this.barData)
      .enter()
      .append('rect')
      .attr('class', 'bar')
      .attr('fill', 'rgb(34, 167, 240)')
      .attr('x', (d) => this.x(d.season))
      .attr('y', (d) => this.y(d.viewers))
      .attr('width', this.x.bandwidth())
      .attr('height', (d) => this.height - this.y(d.viewers));

Solution

I believe this is a line plot, not sure if it meets your requirements, let me know:

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

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

//d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv", function(data) {
//console.log(data);
//});
  var data = [
    { x: 1, y: 2500000 },
    { x: 2, y: 3800000 },
    { x: 3, y: 5000000 },
    { x: 4, y: 6900000 },
    { x: 5, y: 6900000 },
    { x: 6, y: 7500000 },
    { x: 7, y: 10000000 },
    { x: 8, y: 17000000 }
  ];

  // Add X axis
  var x = d3.scaleLinear()
    .domain([0, 10])
    .range([ 0, width ]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, 20000000])
    .range([ height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Add dots - scatter plot
  //svg.append('g')
  //  .selectAll("dot")
  //  .data(data)
  //  .enter()
  //  .append("circle")
  //    .attr("cx", function (d) { return x(d.x); } )
  //    .attr("cy", function (d) { return y(d.y); } )
  //    .attr("r", 1.5)
  //    .style("fill", "#69b3a2")
  svg.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", d3.line()
        .x(function(d) { return x(d.x) })
        .y(function(d) { return y(d.y) })
        )

  svg.append("text")             
      .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (height + margin.top + 20) + ")")
      .style("text-anchor", "middle")
      .text("season");

  // Add the y Axis
  svg.append("g")
      .call(d3.axisLeft(y));

  // text label for the y axis
  svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x",0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("viewers"); 

</script>

<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

Important as for reading from CSV, it's relatively simple to grasp how to get rid of it in the examples. Here's how you could load data from csv:

d3.csv("https://.../master/Example_dataset/2_TwoNum.csv", function(data) {
//do something with data here
});

So, basically you do the drawing within the callback (once you've got the data, right?). If you know data when writing the script (like in your example), you simply assign the data and use it in d3 transformations. Here's a great example of scatter plot drawing in d3. All I've done is simply got rid of the callback and assign your data + re-scale the x and y axes.