Creating a visually striking line chart using data from an infotable

Question

Creating a visually striking line chart using data from an infotable

I am looking to create a dynamic line chart using d3.js based on data from an infotable. To achieve this, I have converted the information in the infotable into two arrays: a single-dimensional array xValueArray: [0, 10, 20, 30, 40] and a two-dimensional array

yValueArray: [[0, 20, 30, 40, 50], [0, 200, 250, 400, 450]]

. My approach involves mapping the xValueArray to both arrays within yValueArray to represent x and y-coordinates, which I accomplish by using the map function.

    var result = xValueArray.map(function (x, i) { 
        return [x, yValueArray[0][i]];
    });
    console.log(result); //returns [[0,0], [10,20], [20,30], [30,40], [40, 50]]

    var data = result.map(function(d) {
        return {
          x: d[0],
          y: d[1]
        };
    });
    console.log(data); //returns [[x:0, y:0], [x:10, y:20], [x:20, y:30], [x:30, y:40], [x:40, y:50]]

    //************* Plotting of graph ***************   
    var lineFunction = d3.line()
        .x(function(d) {return x(d.x); })
        .y(function(d) {return y(d.y); })
        .curve(d3.curveLinear);

    //plot line
    var path1 = g.append("path")
        .attr("class", "path1")
        .attr("id", "blueLine")
        .attr("d", lineFunction(data))
        .attr("stroke", "blue")
        .attr("stroke-width", 2)
        .attr("fill", "none")
        .attr("clip-path", "url(#clip)");

The line chart is generated successfully, but with only one line as I mapped the first array in yValueArray to xValueArray. To make the chart dynamic, I aim to plot lines corresponding to the number of data fields inputted by the user in the infotable. For example, if there are 2 arrays in yValueArray, I want 2 lines plotted on the chart. How can I accomplish this task? Any guidance or suggestions would be highly appreciated!

javascript arrays d3.js

Answer 1

Answer №1

Instead of starting with your x array for mapping the y values, switch it up:

const yValuesArray = [
  [0, 20, 30, 40, 50],
  [0, 200, 250, 400, 450]
];

const xValuesArray = [0, 10, 20, 30, 40];

const dataPoints = yValuesArray.map(dataset =>
  dataset.map((value, index) => ({
    x: xValuesArray[index],
    y: value
  }))
);

console.log(dataPoints);

This approach accommodates any number of nested arrays within yValuesArray.

Now incorporate these data points into your enter selection:

const yValuesArray = [
  [0, 20, 30, 40, 50],
  [0, 200, 250, 400, 450]
];

const xValuesArray = [0, 10, 20, 30, 40];

const dataPoints = yValuesArray.map(dataset =>
  dataset.map((value, index) => ({
    x: xValuesArray[index],
    y: value
  }))
);

const xScale = d3.scaleLinear();
const yScale = d3.scaleLinear();

const lineGenerator = d3.line()
  .x(d => xScale(d.x))
  .y(d => yScale(d.y))
  .curve(d3.curveLinear);

const chartLine = d3.select("svg").selectAll(null)
  .data(dataPoints)
  .enter()
  .append("path")
  .attr("d", lineGenerator)
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="400"></svg>

Answer 2

Instead of starting with your x array for mapping the y values, switch it up:

const yValuesArray = [
  [0, 20, 30, 40, 50],
  [0, 200, 250, 400, 450]
];

const xValuesArray = [0, 10, 20, 30, 40];

const dataPoints = yValuesArray.map(dataset =>
  dataset.map((value, index) => ({
    x: xValuesArray[index],
    y: value
  }))
);

console.log(dataPoints);

This approach accommodates any number of nested arrays within yValuesArray.

Now incorporate these data points into your enter selection:

const yValuesArray = [
  [0, 20, 30, 40, 50],
  [0, 200, 250, 400, 450]
];

const xValuesArray = [0, 10, 20, 30, 40];

const dataPoints = yValuesArray.map(dataset =>
  dataset.map((value, index) => ({
    x: xValuesArray[index],
    y: value
  }))
);

const xScale = d3.scaleLinear();
const yScale = d3.scaleLinear();

const lineGenerator = d3.line()
  .x(d => xScale(d.x))
  .y(d => yScale(d.y))
  .curve(d3.curveLinear);

const chartLine = d3.select("svg").selectAll(null)
  .data(dataPoints)
  .enter()
  .append("path")
  .attr("d", lineGenerator)
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="400"></svg>

Creating a visually striking line chart using data from an infotable

Answer №1

Similar questions

Dynamically assigning anchor tags to call JavaScript functions

Issue encountered while trying to render an item from a state array in React

What is the best approach to iterate through multiple input fields while maintaining separate states for each one?

I am facing difficulty in retrieving a unique dynamic div id using the useRef ReactJS hook, as it keeps returning the same id repeatedly

Trouble presenting information retrieved from API

What are the reasons behind the lack of smooth functionality in the Bootstrap 4 slider?

Enclose HTML tags around to ensure all are clickable

Tips on duplicating an object within a React state without using references

Guide to creating jQuery event handlers for active elements

Remove the export statement after transpiling TypeScript to JavaScript

How can one effectively bounce back from a promise that has gone unfulfilled?

Troubleshooting issue: Dexie.js query using .equals not functioning properly in conjunction with localStorage

Make sure the first character in Jquery is not a number

Once you have successfully navigated past Div2, smoothly transition downwards to Div1 and transform it into a sticky

Latest Version of Joomla includes Jquery 3.4.3 Files

Step by step guide on serializing two forms and an entire table

Creating Three-Dimensional Arrays in Print

Discovering elements in Selenium that are dynamically loaded using JavaScript

When implementing a helper function in ejs with .then, the result returned is an [ object promise ]

Search for entries that were posted in the previous month