Line plot with dropdown to select group in d3.js

This post describes how to build a line plot with a dropdown button to select group in d3.js. It follows the previous basic line plot. Note that all groups are stored in different column of the .csv input file.

Line chart section


  • First, you need to understand how to build a basic line chart.

  • Here the input dataset is composed by several columns: one per group.

  • Chart is initialized using the first group.

  • Then a update() function is created. It smoothly transforms the chart with the value of another column

  • This function is triggered whenever the select button is changed.
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src=""></script>

<!-- Initialize a select button -->
<select id="selectButton"></select>

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

<!-- Color Scale -->
<script src=""></script>


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

// append the svg object to the body of the page
var svg ="#my_dataviz")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + + margin.bottom)
          "translate(" + margin.left + "," + + ")");

//Read the data
d3.csv("", function(data) {

    // List of groups (here I have one group per column)
    var allGroup = ["valueA", "valueB", "valueC"]

    // add the options to the button"#selectButton")
      .text(function (d) { return d; }) // text showed in the menu
      .attr("value", function (d) { return d; }) // corresponding value returned by the button

    // A color scale: one color for each group
    var myColor = d3.scaleOrdinal()

    // Add X axis --> it is a date format
    var x = d3.scaleLinear()
      .range([ 0, width ]);
      .attr("transform", "translate(0," + height + ")")

    // Add Y axis
    var y = d3.scaleLinear()
      .domain( [0,20])
      .range([ height, 0 ]);

    // Initialize line with group a
    var line = svg
        .attr("d", d3.line()
          .x(function(d) { return x(+d.time) })
          .y(function(d) { return y(+d.valueA) })
        .attr("stroke", function(d){ return myColor("valueA") })
        .style("stroke-width", 4)
        .style("fill", "none")

    // A function that update the chart
    function update(selectedGroup) {

      // Create new data with the selection?
      var dataFilter ={return {time: d.time, value:d[selectedGroup]} })

      // Give these new data to update line
          .attr("d", d3.line()
            .x(function(d) { return x(+d.time) })
            .y(function(d) { return y(+d.value) })
          .attr("stroke", function(d){ return myColor(selectedGroup) })

    // When the button is changed, run the updateChart function"#selectButton").on("change", function(d) {
        // recover the option that has been chosen
        var selectedOption ="value")
        // run the updateChart function with this selected option



Related blocks →