Value based colors

Question

Created Jun ’22

Replies 2

Boosts 0

Views 1.6k

Participants 2

How to create a chart where each data mark has a color based on its value? Like this chart: https://observablehq.com/@d3/gradient-encoding

With the following code, the whole curve has one color only. My function Color.forTemperature() returns different colors for different temperatures.

Chart(temperatures) { temperature in
    LineMark(
        x: .value("Day", temperature.date, unit: .day),
        y: .value("Temperature", temperature.value)
    )
    .foregroundStyle(Color.forTemperature(temperature.value))
}

Boost

Answer 1

OnionSource OP

Jul ’22

Hi, LineMark uses a single collar, try PointMark in your example above.

0

Answer 2

yvsong OP

Jul ’22

I'm trying to plot 2 lines (daily minimum and maximum temperatures). PointMark's do have individual colors, but look like crowded dots, and lose the sense of 2 lines, so it's not a good solution.

0