lineY does not connect between points once color is defined

Community Help
1

Hi y’all!

After a really cool intro by Allison Horst, I decided to move my newest project to observable. I might have been a little over ambitious, and I’m currently going a little crazy because once I add color to my lineplot, only some of the dots are being connected. I’m a complete javascript newbie, so I might be missing something obvious here.

This is a small part of my data where the problem occurs.

minimal_data = minimal_data = [{"country":"Hungary","year":"1990","final_v2x_libdem":"0.724","gov_popul_weighted":"0.5077386172006746","date":"1990-01-01","new_date":"1989-12-31T23:00:00.000Z","populism_score":0.5077386172006746},{"country":"Hungary","year":"1991","final_v2x_libdem":"0.765","gov_popul_weighted":"0.5077386172006746","date":"1991-01-01","new_date":"1990-12-31T23:00:00.000Z","populism_score":0.5077386172006746},{"country":"Hungary","year":"1992","final_v2x_libdem":"0.765","gov_popul_weighted":"0.5077386172006746","date":"1992-01-01","new_date":"1991-12-31T23:00:00.000Z","populism_score":0.5077386172006746},{"country":"Hungary","year":"1993","final_v2x_libdem":"0.765","gov_popul_weighted":"0.5077386172006746","date":"1993-01-01","new_date":"1992-12-31T23:00:00.000Z","populism_score":0.5077386172006746},{"country":"Hungary","year":"1994","final_v2x_libdem":"0.763","gov_popul_weighted":"0.36809027777777775","date":"1994-01-01","new_date":"1993-12-31T23:00:00.000Z","populism_score":0.36809027777777775},{"country":"Hungary","year":"1995","final_v2x_libdem":"0.762","gov_popul_weighted":"0.36809027777777775","date":"1995-01-01","new_date":"1994-12-31T23:00:00.000Z","populism_score":0.36809027777777775},{"country":"Hungary","year":"1996","final_v2x_libdem":"0.762","gov_popul_weighted":"0.36809027777777775","date":"1996-01-01","new_date":"1995-12-31T23:00:00.000Z","populism_score":0.36809027777777775},{"country":"Hungary","year":"1997","final_v2x_libdem":"0.761","gov_popul_weighted":"0.36809027777777775","date":"1997-01-01","new_date":"1996-12-31T23:00:00.000Z","populism_score":0.36809027777777775},{"country":"Hungary","year":"1998","final_v2x_libdem":"0.759","gov_popul_weighted":"0.5110197238658777","date":"1998-01-01","new_date":"1997-12-31T23:00:00.000Z","populism_score":0.5110197238658777},{"country":"Hungary","year":"1999","final_v2x_libdem":"0.756","gov_popul_weighted":"0.5110197238658777","date":"1999-01-01","new_date":"1998-12-31T23:00:00.000Z","populism_score":0.5110197238658777},{"country":"Hungary","year":"2000","final_v2x_libdem":"0.756","gov_popul_weighted":"0.5110197238658777","date":"2000-01-01","new_date":"1999-12-31T23:00:00.000Z","populism_score":0.5110197238658777}]

I then define colors manually for the stroke.

myContinuousColors = ["#FAB869", "#9E3D22"]

And this is how I plot it. The first layer doesn’t include the colored stroke to show that there should be a line, the second layer does not include color. I’ve tried it without coloring null values as darkgrey as well that didn’t help either (that doesn’t work yet though either, so if you have ideas on that as well - I’d love to read them!). As you can see it works perfectly as long as I don’t use a stroke color, but once I do not all of the points are connected.

plotfinal = Plot.plot({
  color: {type: "linear",
  interpolate: "hcl",
  legend: true,
  range: myContinuousColors,
  domain: [0,1]
  // need to add that 0 = non- and 1 very populist
  } ,
  marks: [
    Plot.ruleY([0]),
    Plot.lineY(minimal_data, {
      x: "new_date", 
      y: "final_v2x_libdem",
      stroke: "lightgrey"
    }),
    Plot.lineY(minimal_data, {
      x: "new_date", 
      y: "final_v2x_libdem",
      stroke:  ({gov_popul_weighted}) => gov_popul_weighted !== null? gov_popul_weighted : "darkgrey"
    })
  ],
  x: {
    label: "Year"
  },
  y: {
    domain: [0, 1],
    label: "V-Dem Liberal Democracy Index"
  }
})

I created a public notebook with the minimal example here and this is the full project notebook.

I would be super happy and thankful about any hints on what might be the issue here, or whether anyone else has run into this issue. The deadline on this project is slowly approaching and I’m starting to get nervous about more than a week of trying to debug this… :face_with_spiral_eyes:

Hope y’all have a wonderful weekend!
Jas

2

If you want to vary the stroke within a series you need to specify the z channel. If you just want to draw a single line with a varying stroke color you should set z: null. Without this Plot assumes that stroke is categorical and will group your data into series (and probably will show you a warning in the console in this case when it detects that the stroke has high cardinality).

2 Likes
3

Mike beat me to it :slight_smile:

I’ve just sent you a suggestion with the same solution (z: null), as well as a method to type the values as dates and numbers rather than strings.

1 Like
5

Thank you so much for the super fast help, Mike! I had tried setting z = country but didn’t know I could set it to null. Thank you so much, you made my week!

Thank you so much for the super fast help, Mike! I had tried setting z = country but didn’t know I could set it to null. Thank you so much, you made my week!

And thank you Fil for the additional suggestions. I really appreciate this - love learning every new trick!