What is the process for designating a data column as the key property in a line generator function?

Question

What is the process for designating a data column as the key property in a line generator function?

One interesting feature of d3.js is the ability to access specific fields in a dataset using the syntax d.measure, where "d" accesses the data property and "measure" represents the field we want to retrieve. Inspired by code I discovered on bl.ocks.org, I decided to create a line chart. However, I wanted to enhance the function dsLineChart() so that I could dynamically specify the column I wish to use for visualizing values on the y-axis - essentially introducing a custom argument into dsLineChart(argument) that determines the chosen column.

Check out the example script below. My dataset comprises columns like "measure", "measure2", "measure3", and "measure4". While currently visualizing "measure" with d.measure, my goal is to call something like dsLineChart("measure2") to achieve the same functionality but with another column.

Example Dataset

var data = [
{group:"All",category:2011,measure:28107,measure2:53301,measure3:89015.40,measure4:138394},
{group:"All",category:2012,measure:39400,measure2:7001, measure3:55550.50,measure4:18004},
{group:"All",category:2013,measure:33894,measure2:690597,measure3:68289.50,measure4:17455},
{group:"All",category:2014,measure:55261,measure2:7172,measure3:73380.93,measure:418143} ];

Script Overview

I have provided a simple working script available at this link Fiddle D3js Line Chart

Thanks to valuable feedback from @GerardoFurtado, you can now see the revised script below which enables calling the function dsLineChart() with different arguments to generate line charts utilizing various measures (e.g., dsLineChart("measure2") vs. dsLineChart("measure")).

// dataset       
var lineChartData = [{
    category: 2011,
    measure: 28107,
    measure2: 53301,
    measure3: 89015.40,
    measure4: 138394
  },
  {
    category: 2012,
    measure: 39400,
    measure2: 7001,
    measure3: 55550.50,
    measure4: 18004
  },
  {
    category: 2013,
    measure: 33894,
    measure2: 690597,
    measure3: 68289.50,
    measure4: 17455
  },
  {
    category: 2014,
    measure: 55261,
    measure2: 7172,
    measure3: 73380.93,
    measure: 418143
  }
];

// layout
var margin = {
    top: 20,
    right: 10,
    bottom: 0,
    left: 50
  },
  width = 350 - margin.left - margin.right,
  height = 250 - margin.top - margin.bottom;

// function to draw linechart
function dsLineChart(selMeasure) {
    //convert object to array
  var data = d3.values(lineChartData);

  var property;
  var measures = [selMeasure];

  var xScale = d3.scaleLinear()
    .domain([0, data.length - 1])
    .range([0, width]);

  var yScale = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) {
      return d[selMeasure];
    })])
    .range([height, 0])
    .range([height, 0]);

  var line = d3.line()
    .x(function(d, i) {
      return xScale(i);
    })
    .y(function(d) {
      return yScale(d[property]);
    });

  var svg = d3.select("#lineChart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("position", "absolute")
    .attr("top", "10px")
    .attr("left", "410px")

  var plot = svg
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .attr("id", "lineChartPlot");

  var paths = plot.selectAll(null)
    .data(measures)
    .enter()
    .append("path")
    .attr("class", "line")
    .attr("d", function(d) {
      property = d;
      return line(data)
    })
    .attr("stroke", "lightgrey")
    .attr("fill", "none")
    .attr("stroke-width", "4px");
}

dsLineChart("measure2");

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="lineChart"></div>

javascript d3.js

Answer 1

Answer №1

An elegant solution to this problem, and perhaps the most natural one, involves nesting your data so that the y value property can have a consistent name across all lines.

However, it is still possible to achieve what you are asking for. You can specify the scale passed to the line generator (refer to this answer) and determine which property to use for each method.

To make this work, we first define a variable:

var property;

This variable will be used in the line generator like so:

var line = d3.line()
    .x(function(d, i) {
        return xScale(i);
    })
    .y(function(d) {
        return yScale(d[property]);
    });

Next, we identify the actual properties. In this case, they are hardcoded, but you could dynamically extract them from the data:

var measures = ["measure", "measure2", "measure3", "measure4"];

We then bind this array as data:

var paths = plot.selectAll(null)
    .data(measures)
    .enter()
    .append("path")

The crucial step comes during the callback where you simply assign the value of property, crucial for the line generator:

.attr("d", function(d) {
    property = d;
    return line(data)
})

Combining these changes, here is your revised code snippet:

// Dataset
var data = [{
    group: "All",
    category: 2011,
    measure: 28107,
    measure2: 53301,
    measure3: 89015.40,
    measure4: 138394
  },
  {
    group: "All",
    category: 2012,
    measure: 39400,
    measure2: 7001,
    measure3: 55550.50,
    measure4: 18004
  },
  {
    group: "All",
    category: 2013,
    measure: 33894,
    measure2: 690597,
    measure3: 68289.50,
    measure4: 17455
  },
  {
    group: "All",
    category: 2014,
    measure: 55261,
    measure2: 7172,
    measure3: 73380.93,
    measure4: 418143
  }
];
var property;
var measures = ["measure", "measure2", "measure3", "measure4"];

// Layout
var margin = {
    top: 20,
    right: 10,
    bottom: 0,
    left: 50
  },
  width = 350 - margin.left - margin.right,
  height = 250 - margin.top - margin.bottom;

// Line chart drawing function
function dsLineChart() {

  var firstDatasetLineChart = data

  var xScale = d3.scaleLinear()
    .domain([0, firstDatasetLineChart.length - 1])
    .range([0, width]);

  var yScale = d3.scaleLinear()
    .domain([0, d3.max(firstDatasetLineChart, function(d) {
      return d.measure;
    })])
    .range([height, 0])
    .range([height, 0]);

  var line = d3.line()
    .x(function(d, i) {
      return xScale(i);
    })
    .y(function(d) {
      return yScale(d[property]);
    });

  var svg = d3.select("#lineChart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("position", "absolute")
    .attr("top", "10px")
    .attr("left", "410px")

  var plot = svg
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .attr("id", "lineChartPlot");

  var paths = plot.selectAll(null)
    .data(measures)
    .enter()
    .append("path")
    .attr("class", "line")
    .attr("d", function(d) {
      property = d;
      return line(data)
    })
    .attr("stroke", "lightgrey")
    .attr("fill", "none")
    .attr("stroke-width", "4px");
}

dsLineChart();

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="lineChart"></div>

Answer 2

An elegant solution to this problem, and perhaps the most natural one, involves nesting your data so that the y value property can have a consistent name across all lines.

However, it is still possible to achieve what you are asking for. You can specify the scale passed to the line generator (refer to this answer) and determine which property to use for each method.

To make this work, we first define a variable:

var property;

This variable will be used in the line generator like so:

var line = d3.line()
    .x(function(d, i) {
        return xScale(i);
    })
    .y(function(d) {
        return yScale(d[property]);
    });

Next, we identify the actual properties. In this case, they are hardcoded, but you could dynamically extract them from the data:

var measures = ["measure", "measure2", "measure3", "measure4"];

We then bind this array as data:

var paths = plot.selectAll(null)
    .data(measures)
    .enter()
    .append("path")

The crucial step comes during the callback where you simply assign the value of property, crucial for the line generator:

.attr("d", function(d) {
    property = d;
    return line(data)
})

Combining these changes, here is your revised code snippet:

// Dataset
var data = [{
    group: "All",
    category: 2011,
    measure: 28107,
    measure2: 53301,
    measure3: 89015.40,
    measure4: 138394
  },
  {
    group: "All",
    category: 2012,
    measure: 39400,
    measure2: 7001,
    measure3: 55550.50,
    measure4: 18004
  },
  {
    group: "All",
    category: 2013,
    measure: 33894,
    measure2: 690597,
    measure3: 68289.50,
    measure4: 17455
  },
  {
    group: "All",
    category: 2014,
    measure: 55261,
    measure2: 7172,
    measure3: 73380.93,
    measure4: 418143
  }
];
var property;
var measures = ["measure", "measure2", "measure3", "measure4"];

// Layout
var margin = {
    top: 20,
    right: 10,
    bottom: 0,
    left: 50
  },
  width = 350 - margin.left - margin.right,
  height = 250 - margin.top - margin.bottom;

// Line chart drawing function
function dsLineChart() {

  var firstDatasetLineChart = data

  var xScale = d3.scaleLinear()
    .domain([0, firstDatasetLineChart.length - 1])
    .range([0, width]);

  var yScale = d3.scaleLinear()
    .domain([0, d3.max(firstDatasetLineChart, function(d) {
      return d.measure;
    })])
    .range([height, 0])
    .range([height, 0]);

  var line = d3.line()
    .x(function(d, i) {
      return xScale(i);
    })
    .y(function(d) {
      return yScale(d[property]);
    });

  var svg = d3.select("#lineChart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("position", "absolute")
    .attr("top", "10px")
    .attr("left", "410px")

  var plot = svg
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .attr("id", "lineChartPlot");

  var paths = plot.selectAll(null)
    .data(measures)
    .enter()
    .append("path")
    .attr("class", "line")
    .attr("d", function(d) {
      property = d;
      return line(data)
    })
    .attr("stroke", "lightgrey")
    .attr("fill", "none")
    .attr("stroke-width", "4px");
}

dsLineChart();

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="lineChart"></div>

What is the process for designating a data column as the key property in a line generator function?

Answer №1

Similar questions

Below are the steps to handle incorrect input after receiving only one letter:

The V-if condition is specifically tailored for a single line or link

Struggling to retrieve the tagName attribute when clicking in JavaScript

Transferring data between different components in Angular 5

Error alert: $.simpleWeather function not found

Implementing fetch within a custom hook to display a loader within a return function

Error: The function cannot be found

Tips for preventing repeated function calls in React applications

Node: Incorporating variables into require modules

Display the errors generated by Laravel when using async actions with Redux toolkit

Modify the CSS when CKEditor is in focus

Jquery issue: Property or method is not supported by this object

How can I retrieve the text from two DIV elements simultaneously using JS/jQuery?

jquery ajax not ready - responsetext empty - status code 0 - statustext error occurred

Next.js lacks proper Tree Shaking implementation for MUI

Running a Neo4j Cypher query with the help of jQuery

Troubleshooting ng-class functionality in AngularJS

Starting a web application offline using npm: A beginner's guide

Implementing route navigation in two components using a click button

What is the best way to incorporate a changing variable within an htmx request?