Some advice on learning how to dissect a chart's code

Community Help
1

Hey, there! I’m running into what I suspect is a common barrier to learning to visualize data in Observable, so I’m going to ask in a more generalized way.

I have a basic array of player stats that I pulled from the API for an online shooter videogame:

Screen Shot 2022-08-31 at 1.04.27 PM
Screen Shot 2022-08-31 at 1.04.27 PM1114×326 62.4 KB

I want to put them into a bar chart that preserves the order of the “stat” values from how they’re ordered in the array (so show a bar for “Kills”, then “Assists”, then “DamagerPer100”, then “DBNOs”. I’m choosing the pre-existing bar chart template from Observable Plot from the cell options menu, and then subbing in my own data references.

image
image684×766 59.2 KB

image
image1636×1094 49.8 KB

As you can see, the bar chart values are not in the same order as the array. The template seems to be sorting them in descending value. No problem, I can just remove the specified “sort” property and they’ll default to my order, right?

image
image1728×1126 49.7 KB

Apparently not. So, I pop over to the general Observable Plot collection and check out the entry on bar marks. The only mention of explicitly setting the order of the domain comes in this small passage:

Screen Shot 2022-08-31 at 1.13.42 PM
Screen Shot 2022-08-31 at 1.13.42 PM1332×274 67.5 KB

So, I pop over to the linked page about Scales in Observable Plot, and the only mention I find of “discrete position” is this passage here:

image
image1348×1202 187 KB

As you can see, the example only references explicitly specifying single character domains, and only within a “point” or “band” scale. There’s no mention of how to apply this to a 2D chart like a bar mark, or even how to make that domain order derivative of actual data you’re referencing.

I popped into the Tutorials page and clicked into the D3 Gallery in hopes that maybe I could find a way to make a sorted bar chart with D3, but alas, the lone example is sorted by frequency.

So the question: What is the best way for someone (obviously) green on JavaScript to figure something like this out, without having to ask the forum every time?

1 Like
2

I am in the same boat as you are when using the examples and tutorials to learn data visualisation. I will share some strategies that I have learnt. Before delving into that, let me share the solution first😉

The plot config is created using the “domain” option under the ‘X-Axis’ in plot, to get the result required.

example
example774×484 3.37 KB 


temp = [{stat:"Kills",value:0.77},{stat:"Assists",value:0.301},{stat:"DBNOs",value:1.481},{stat:"Damages",value:0.905}]

Plot.plot({
  marginLeft: 70,
   x: {
    line: true,
    domain: ["Kills", "Assists", "Damages", "DBNOs"] // setting the order manually by specifying the array
  },
  y: {
    line: true
  },
  marks: [
    Plot.barY(
      temp,
      Plot.groupX({ y: "max" }, { y: "value", x: "stat" })
    )
  ]
})

That answers your current short term challenge.
Your next question,
What is the best way for someone (obviously) green on JavaScript to figure something like this out, without having to ask the forum every time?
:open_mouth:

Strategy is to target the specific problem you are facing and question that. (Not helpful advice, but stay with me…for examples)

Rephrasing your problem:
“X-axis is being sorted by Plot library. How to stop Plot from doing that?”

Question that you ask will also help you break down the problem you are facing into something that you can manage. The above question targets the X-axis specifically and how to stop the ticks from being sorted.

Further rephrasing the question:
How to instruct “Plot” to use the X-axis ticks in the order I give to it?

Answer: Using the
domain: ["Kills", "Assists", "Damages", "DBNOs"] option

The above process needs to be mastered to do your research before coming to the forums for help.
Libraries abstract away the details to provide instant solutions. If you need more control, then the solution is to “Ask more detailed questions and answer them”. If a library doesn’t let you implement the solution, then you search for ways to get the control.
Happy Questioning and then Visualising…:blush:

1 Like
3

My strategy has been to try and watch videos with Mike in it because he often has these off-hand remarks that totally pivot my mind model. Like I think in this video he something about the core of dataviz is really about designing scales. When that penny dropped I realised I was focusing on the wrong part

Also I really liked this video which got me started on the journey

3 Likes