line.Rmd

# Line charts <i class="fa fa-line-chart"></i>

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

Read: *IDVW2*, Chapter 11 Using Paths


## SVG `<line>` element

(Use for two points only.)

``` html
<line x1="50" y1="180" x2="400" y2="20" stroke="blue" stroke-width="5"></line>
```

<svg width = "500" height = "200">
  <line x1="50" y1="180" x2="400" y2="20" stroke="blue" stroke-width="5"></line>
</svg>

## SVG `<path>` element

(Use if you have more than two points.)

``` html
<path d="M 50 200 L 100 100 L 150 100 L 200 33 L 250 175
     L 300 275 L 350 250 L 400 125" fill="none"
     stroke="red" stroke-width="5"></path>
```

<svg width = "500" height = "300">
  <path d="M 50 200 L 100 100 L 150 100 L 200 33 L 250 175
     L 300 275 L 350 250 L 400 125" fill="none"
      stroke="red" stroke-width="5">
  </path>
</svg>

`d` attribute: M = move to, L = line to

More options: [https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d)


## Data for line chart

Format that we have:

Day|High Temp
----|----
April 1|60
April 2|43
April 3|43
April 4|56
April 5|45
April 6|62
April 7|49

To create a line chart we need to generate the `d` attribute.

## Create a line generator

Expects data in an array of 2-dimensional arrays, that is, an array of (x,y) pairs:

``` js
const dataset = [ [0, 60], [1, 43], [2, 43], [3, 56], [4, 45], [5, 62], [6, 49] ];

const mylinegen = d3.line()
```
Test it in the Console:

``` js
mylinegen(dataset);
```

Add an ordinal scale for x:

``` js
const xScale = d3.scaleBand()
    .domain(d3.range(dataset.length))
    .range([0, 500])
```    

... and a linear scale for y:

``` js    
const yScale = d3.scaleLinear()
    .domain([d3.min(dataset, d => d[1]) - 20,
             d3.max(dataset, d => d[1]) + 20])
    .range([400, 0]);         
```             

*Why `d[1]` instead of `d`? (See p. 122)


Add accessor functions `.x()` and `.y()`:

``` js
mylinegen
    .x(d => xScale(d[0]))
    .y(d => yScale(d[1]));
```

Test again:

``` js
mylinegen(dataset);
```

Now let's add a `<path>` element with that `d` attribute: (this step is just for learning purposes...)

``` js
const mypath = mylinegen(dataset);

d3.select("svg#mypath")
 .append("path").attr("d", mypath)
    .attr("fill", "none").attr("stroke", "red")
    .attr("stroke-width", "5");
```

<svg id="mypath" width="500" height="300">
  <rect width="500" height="300" fill="lightblue"></rect>
</svg>

## Put the line generator to work

The more common (and direct) method to create a path: bind the *datum* and calculate the path in one step:

``` js
d3.select("svg").append("path")
    .datum(dataset)
    .attr("d", mylinegen)  // passes the data to mylinegen
    .attr("fill", "none")
    .attr("stroke", "teal")
    .attr("stroke-width", "5");
```

Finally, we'll add a class and style definitions:

``` html
<style>
  .linestyle {
    fill: none;
    stroke: teal;
    stroke-width: 5px;
  }
</style>
```

The `append("path")` line becomes:

``` js
svg.append("path")
    .datum(dataset)
    .attr("d", mylinegen)
    .attr("class", "linestyle");
```


[Full code](code/linechart_noaxes.html)


And another example with axes:

[Line chart with axes](code/linechart_withaxes.html)

(Also uses: `d3.timeParse()` and JavaScript [`Array.foreach()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) )

## Additional Resources

[Multiple Time Series in D3](https://medium.com/@ecb2198/multiple-time-series-in-d3-5562b981236c) by Eric Boxer (EDAV 2018)