Exercise 4 - Single Line-Chart with Selection

The first steps, are similar to the previous three exercises:

1. Create index.html
2. Create index.js and import into index.html
3. Create a function for plotting the line chart
4. Prepare the chart canvas and load data
5. Data preparation
6. Add axis to the chart

The only two differences this time are:

• You have to add a HTML select element with an unique id (e.g. selectButton)
• Since we have to change the y axis based on the selected data, we save the axis to a variable:

  var yAxis = svg.append("g")
    .call(d3.axisLeft(yScale));
                        

If you have added the select element, it is empty. Hence we have to define the selection of different measurements we want to be able to choose from.

//Define the desired selection in an array
var allGroup = ["actPressure", "actForce", "setPressure"];

//select the select element in the index.html
d3.select("#selectButton")
  //define the variable from above as data
  .selectAll('myOptions')
      .data(allGroup)
  //add for each entry in the array an option
  .enter()
      .append('option')
  //an option of a select element has always a
    text and a value - in this case the same
  .text(function (d) {return d;})
  .attr("value", function (d) {return d;})
                  

To add the line to the chart, the code looks the same as in the previous exercises.

var line = svg
  .append("g")
  .append("path")
      .datum(data['datapoints'])
      .attr("d", d3.line()
          .x(function(d) {return xScale(+d.time)})
          .y(function(d) {return yScale(+d.actPressure)})
      )
      .attr("stroke", "green")
      .style("stroke-width", 4)
      .style("fill", "none")
                  

Based on the selected value (in the selection element), we need to update the data and the chart.

//The function needs to take the selected value as input
function update(selectedGroup) {
  //based on the selected value, the data needs to be filtered
  var dataFilter = data['datapoints'].map(function(d) 
    {return {time: d.time, value: d[selectedGroup]}})
  //the y domain and range needs to be updated
  yScale = d3.scaleLinear()
    .domain([0, d3.max(data['datapoints'], function(d) 
      { return d[selectedGroup]})])
    .range([ height, 0 ]);
  //the y axis needs to be set again
  yAxis
    .call(d3.axisLeft(yScale));

  //the new line with the selected data needs to be added
  line
    .datum(dataFilter)
    .attr("d", d3.line()
        .x(function(d){return xScale(+d.time)})
        .y(function(d){return yScale(+d.value)})
    )
    .attr("stroke", "green")
}
                  

As a last step, you need to bind the defined function from step 4 to the on-change event of the select element.

d3.select("#selectButton").on("change", function(d){
  var selectedOption = d3.select(this).property("value");
  update(selectedOption);
})
                  

After you have followed the steps so far, the chart does not look exactly the same as shown at the left side. Try to achieve the same look, especially try to:

• Add different colors for each line, based on the chosen data
• Add a transition 'animation' when changing the data