2

I have a dataset called graphData with three values, wavelength, magnitude, and name.

let array = [
{name: "dataset 1", wavelength: 2, magnitude: 20}
{name: "dataset 1", wavelength: 3, magnitude: 22}
{name: "dataset 1", wavelength: 4, magnitude: 19}
{name: "dataset 2", wavelength: 2, magnitude: 14} //and so on...
]

I've grouped the dataset using d3.group() using the name value as a key

let sortedGraphData = d3.group(graphData, d => d.fullId)

Which should return a map structure like this:

{key: "dataset 1"
values: [
{wavelength: 2, magnitude: 20}
{wavelength: 3, magnitude: 22}
{wavelength: 4, magnitude: 19}
]}

{key: "dataset 2"
values: [
{wavelength: 2, magnitude: 14}
///and so on...
]}

But when I try and draw that data onto my graph with

 let valueline = d3.line()
.x(function(d){return x(+d.wavelength)})
.y(function(d){return y(+d.magnitude)});


graph.append("path")
.data(sortedSessionGraphData)
.attr("class", "line")
.attr("d", valueline);

I get the following error: Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN".

I figure that d3.line().x(function(d){return +d.wavelength}) isn't returning an array of wavelength and magnitude data pairs like I want it to, but I'm not sure how to expose the right data within the map.

How do you navigate through a map and graph new lines for each of the objects contained within a map?

Tadgh Wagstaff
  • 93
  • 5

1 Answers1

1

Since the output of d3.group is a javascript Map, it needs to be converted into an array of [key,value] tuples in order to be iterable:

let sortedGraphData = Array.from(d3.group(graphData, d => d.fullId))

With this change, the sortedGraphData now has the following structure:

[
  ["dataset 1", [{wavelength: 2, magnitude: 20}, ...]  ],
  ["dataset 2", [{wavelength: 2, magnitude: 14}, ...]  ],
]

Using sortedGraphData with append will create a path for each dataset, and the d attribute of the SVG path can be calculated by passing the values to the line generator function. Since the value array is the second element of each dataset, it can be accessed with the index 1:

.attr("d", d => valueline(d[1])).

Rodrigo Divino
  • 1,791
  • 5
  • 15
  • Might be another problem on top of this. I checked the output of your solution with a single dataset (```graph.append("path").data(sortedSessionGraphData).attr("class", "line").attr("d", d => valueline(d.values));```) in the console by stringifying it and it still seems to return the entire map. (Output: ```{"_groups":[[{"__data__":["dynamic_log1646765518618",[{"fullId":"dynamic_log1646765518618","wavelength":20,"magnitude":-33.9},{"fullId":"dynamic_log1646765518618","wavelength":21,"magnitude":-33.5},{"fullId":"dynamic_log1646765518618","wavelength":22,"magnitude":-33.06},``` etc...). – Tadgh Wagstaff Mar 08 '22 at 18:56
  • @TadghWagstaff I see now, since the output d3.group is a Map, It also needs to be converted to an array using ```Array.from(sortedSessionGraphData)```. In that case the Map is decomposed into an array of [key, value] tuples. I'm updating the answer. – Rodrigo Divino Mar 08 '22 at 19:40