Best way to implement rankings in multiple line charts?

New To Observable
1

I am trying to create a graph showing the top 10 rankings for each week from a set of data. I want to create multiple line graphs tracking objects going from, say, #1 last week to #2 today. This would include many different lines being created on the graph, and them not always being present on the graph.

Currently my data is structured in a JSON file that has each “line” object with a set of properties like so

[
{name: object,
data: [{time: 0, rank: 0}, {time:1, rank:0}, …]
}, …
]

How can I plot all of the “line” instances in my JSON using the data property? Is there a better way to organize the information? I thought making a bunch of objects with a property for every single possible line would be counterintuitive. Any ideas on how to structure or go about this?

2

Have you a link to your notebook as it would be easier to help.

I don’t think this is the best way but it’s a way.

3

I’m not using notebooks, I’m using observable as a JS library. The example you gave looks good, but is their anyway to write a for loop that will plot all possible iterations of the array?

4

Do you mean the plot.js library with Vanilla HTML?

1 Like
5

@sh2 I am not sure exactly what you mean by “using Observable as a JS library”… I would love to understand that better.

I forked @hellonearthis’s your notebook and first transformed the data to be tidy (see tidy data):

image
image1302×662 100 KB

When the data is in this format, it works much better for data viz (and then you can do the plot for any number of ‘names’):

Plot.plot({
  marks: [
    Plot.ruleY([0]),
    Plot.lineY(flatData, {x: "time", y: "rank", stroke: "name"})
  ]
})

Thanks @hellonearthis !!!

1 Like
6

Yes, sorry! New to this so I totally mix up the terminology. :sweat_smile:

7

What does the final line do? And so this graphs each line based on similarity on “name”?

8

Yes! When you use stroke it automatically defaults a z channel so it draws multiple lines. Check out the Plot documentation here:

If a stroke (or fill ) channel is specified, the z option defaults to the same, automatically grouping series. For this reason, both stroke and z are typically ordinal or categorical.