Framework: Plot.circle stroke value based on channel value

New To Observable
1

I’m currently struggling to figure out how to change the color of a Plot.circle based on a value in my data set in my framework based dashboard.

I’m drawing the lines and circles I want to draw on the map, and have a rudimentary map navigation (pointers to something that allows users to move around the map gracefully via mouse are welcome!)

As a next feature, I’d like to change the color of the circles. I’d like to use a different color based on the various expected values for the “aircraft_model” value in my dataset - currently, if two different aircraft models are flying out of a given location, they both just get a red ring, and I’d like the rings to be different colors for the different models to make it more obvious.

Open to any suggestions!

Plot.circle(airports, {
      x: "lng", 
      y: "lat", 
      r: "count_flights",
      stroke: "#f43f5e",
      channels: { 
        icao: "origin", 
        airport: "airport_name", 
        flights: "count_flights", 
        aircraft_model: "aircraft_model", 
        aircraft_count: "count_aircraft", 
        flight_hours: "sum_duration", 
        average_duration: "average_duration",
        sum_distance_km: "sum_distance_km",
        average_distance: "average_distance"
      },
      tip: true
    }),
2

It should be as simple as replacing this line with

stroke: “aircraft_model”,

(For further questions, please open a discussion on github.)

3

ok nice, amazing!

How might I suggest which color for which model?

4

See range in Scales | Plot

1 Like