Individual Coloring Scale of Each Column in VegaLite Highlight Table

Question

I am working on a VegaLite highlight table which you can find by clicking this link. For this table, I have 7 different numeric variables I need to visualize in the columns, with their values being shown by url. My data looks like the following:

{
        "url_domain": "[commit.unclaimed-us-assets.com]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 42,
        "name": 0,
        "bounce": 0,
        "people": 383,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      }

After transforming the data to have cleaner column names and to turn 6 of the variables into percentage values, I have been able to get them all on the columns by performing a fold function within the transform area like so:

{
      "fold": [
        "People",
        "Web Visit %",
        "Page Load %",
        "Email %",
        "Phone %",
        "Name %",
        "Bounce %"
      ],
      "as": ["Title", "Value"]
    }

My trouble now is that I have 1 absolute variable that can go into the thousands, and 6 other percentage basis values that have wide-ranging percent values. Therefore, I want my highlight table to have an individualized color scale for each column, but so far I only have been able to color the column that has the absolute amounts and none of the other columns, when I want each of the columns to be colored on their own individual scales. Here is the part that colors them, as I am not sure where to go from here. Thanks in advance for your help!

"layer": [
    {
      "mark": "rect",
      "width": 1000,
      "encoding": {
        "color": {
          "field": "Value",
          "aggregate": "sum",
          "type": "quantitative",
          "legend": null,
          "scale": {"range": ["#ecf9ff", "#c6efff", "#7ad9ff", "#42caff"]}
        }
      }
    }

Answer 1

In order to create independent scales for each column, you can create them as separate views. If you set "resolve": {"scale": {"color": "independent"}}, each view will get its own scale.

Here is an example (also available in the editor). Note that I hid the legends so that the columns are closer to each other.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/cars.json"},
  "transform": [
    {"window": [{"op": "rank", "as": "rank"}]},
    {"filter": {"field": "rank", "lt": 20}}
  ],
  "hconcat": [
    {
      "width": 50,
      "title": "HP",
      "mark": "text",
      "encoding": {
        "text": {"field": "Horsepower", "type": "nominal"},
        "y": {"field": "rank", "type": "ordinal", "axis": null},
        "color": {"field": "Horsepower", "type": "quantitative", "legend": null}
      }
    },
    {
      "width": 50,
      "title": "MPG",
      "mark": "text",
      "encoding": {
        "text": {"field": "Miles_per_Gallon", "type": "nominal"},
        "y": {"field": "rank", "type": "ordinal", "axis": null},
        "color": {"field": "Miles_per_Gallon", "type": "quantitative", "legend": null}
      }
    },
    {
      "width": 50,
      "title": "Origin",
      "mark": "text",
      "encoding": {
        "text": {"field": "Origin", "type": "nominal"},
        "y": {"field": "rank", "type": "ordinal", "axis": null},
        "color": {"field": "Origin", "legend": null}
      }
    }
  ],
  "spacing": 0,
  "resolve": {"scale": {"color": "independent"}}
}

Answer 2

You can provide conditioning in color or fill encoding and depending on the condition provide a color. I tried giving scale inside condition but it was not working with condition[], it only worked with a single condition. Below is the config or refer editor.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Domain Breakout Breakout",
  "width": "container",
  "title": {
    "text": ["Current Week Domain Breakout", "by Specific Failures"],
    "align": "center",
    "dy": -10,
    "fontWeight": "bold",
    "color": "#4f597a",
    "fontSize": 13,
    "font": "Montserrat,sans-serif"
  },
  "config": {"axis": {"grid": true, "tickBand": "extent"}},
  "data": {
    "values": [
      {
        "url_domain": "[commit.unclaimed-us-assets.com]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 42,
        "name": 0,
        "bounce": 0,
        "people": 383,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[knowledge.foodstampsassistance.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 5,
        "name": 0,
        "bounce": 0,
        "people": 83,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[community.unclaimed-us-assets.com]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 1,
        "phone": 39,
        "name": 0,
        "bounce": 1,
        "people": 395,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[enroll.unclaimed-stimulus-check.com]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 12,
        "name": 0,
        "bounce": 0,
        "people": 82,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[howtogetassistance.com]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 18,
        "name": 0,
        "bounce": 0,
        "people": 263,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[info.unclaimed-stimulus-check.com]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 14,
        "name": 0,
        "bounce": 0,
        "people": 87,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[my-section-8-housing.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 1,
        "phone": 382,
        "name": 0,
        "bounce": 1,
        "people": 2662,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[assist.eligibilityassistance.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 1,
        "phone": 7,
        "name": 0,
        "bounce": 1,
        "people": 111,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[apply.section8assistance.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 1,
        "phone": 16,
        "name": 0,
        "bounce": 1,
        "people": 198,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[determine.section8assistance.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 12,
        "name": 0,
        "bounce": 0,
        "people": 157,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[assist.unemploymentassistance.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 3,
        "name": 0,
        "bounce": 0,
        "people": 40,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[assist.howtogetassistance.com]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 2,
        "name": 0,
        "bounce": 0,
        "people": 34,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[educate.eligibilityassistance.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 6,
        "name": 0,
        "bounce": 0,
        "people": 117,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[form.housing-advice.com]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 2,
        "name": 0,
        "bounce": 0,
        "people": 9,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[about.seniorassistancebenefits.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 2,
        "name": 0,
        "bounce": 0,
        "people": 17,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[section8assistance1.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 1,
        "name": 0,
        "bounce": 0,
        "people": 6,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[login.housing-advice.com]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 2,
        "name": 0,
        "bounce": 0,
        "people": 10,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[prepare.housing-benefits.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 0,
        "name": 0,
        "bounce": 0,
        "people": 35,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[form.housing-services.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 1,
        "name": 0,
        "bounce": 0,
        "people": 10,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[info.unclaimed-us-assets.com]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 0,
        "name": 0,
        "bounce": 0,
        "people": 2,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[about.medicaidguideassistance.com]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 0,
        "name": 0,
        "bounce": 0,
        "people": 1,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[signup.unemploymentassistance5.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 0,
        "name": 0,
        "bounce": 0,
        "people": 1,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[blog.section8assistance5.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 1,
        "name": 0,
        "bounce": 0,
        "people": 1,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[rent2owneligible.com]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 0,
        "name": 0,
        "bounce": 0,
        "people": 1,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[login.section8assistance1.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 0,
        "name": 0,
        "bounce": 0,
        "people": 2,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[assist.section8assistance1.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 1,
        "name": 0,
        "bounce": 0,
        "people": 2,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[about.unemploymentassistance4.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 0,
        "name": 0,
        "bounce": 0,
        "people": 2,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[form.section8assistance1.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 0,
        "name": 0,
        "bounce": 0,
        "people": 2,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[form.unemploymentassistance4.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 1,
        "name": 0,
        "bounce": 0,
        "people": 2,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[signup.medicaidguideassistance.com]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 0,
        "name": 0,
        "bounce": 0,
        "people": 2,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[apply.medicaidguideassistance.com]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 0,
        "name": 0,
        "bounce": 0,
        "people": 1,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[tricareassistance.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 1,
        "name": 0,
        "bounce": 0,
        "people": 1,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[form.section8assistance2.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 1,
        "name": 0,
        "bounce": 0,
        "people": 1,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[unemploymentassistance1.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 0,
        "name": 0,
        "bounce": 0,
        "people": 1,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      },
      {
        "url_domain": "[blog.section8assistance4.org]",
        "web_visits": 0,
        "has_page_load": 0,
        "email": 0,
        "phone": 0,
        "name": 0,
        "bounce": 0,
        "people": 1,
        "implementation_type": "Current",
        "time_frame": "Current Week"
      }
    ]
  },
  "transform": [
    {"filter": {"field": "time_frame", "equal": "Current Week"}},
    {"filter": {"field": "implementation_type", "equal": "Current"}},
    {"calculate": "datum.people", "as": "People"},
    {
      "calculate": "round((toNumber(datum.web_visits)/datum.people)*10000)/100",
      "as": "Web Visit %"
    },
    {
      "calculate": "round((toNumber(datum.has_page_load)/datum.people)*10000)/100",
      "as": "Page Load %"
    },
    {
      "calculate": "round((toNumber(datum.email)/datum.people)*10000)/100",
      "as": "Email %"
    },
    {
      "calculate": "round((toNumber(datum.phone)/datum.people)*10000)/100",
      "as": "Phone %"
    },
    {
      "calculate": "round((toNumber(datum.name)/datum.people)*10000)/100",
      "as": "Name %"
    },
    {
      "calculate": "round((toNumber(datum.bounce)/datum.people)*10000)/100",
      "as": "Bounce %"
    },
    {
      "fold": [
        "People",
        "Web Visit %",
        "Page Load %",
        "Email %",
        "Phone %",
        "Name %",
        "Bounce %"
      ],
      "as": ["Title", "Value"]
    }
  ],
  "mark": "text",
  "encoding": {
    "x": {
      "field": "Title",
      "type": "nominal",
      "sort": "descending",
      "axis": {
        "title": null,
        "labelAngle": 0,
        "labelFontWeight": "bold",
        "labelColor": "#4f597a",
        "labelFontSize": 10,
        "labelPadding": 5,
        "orient": "top"
      }
    },
    "y": {
      "field": "url_domain",
      "type": "nominal",
      "sort": {
        "field": "People",
        "type": "quantitative",
        "order": "descending",
        "op": "sum"
      },
      "axis": {
        "title": null,
        "labelAngle": 0,
        "labelFontWeight": "bold",
        "labelColor": "#4f597a",
        "labelFontSize": 10,
        "labelPadding": 5
      }
    }
  },
  "layer": [
    {
      "mark": "rect",
      "width": 1000,
      "encoding": {
        "fill": {
          "legend": null,
          "field": "Value",
          "type": "quantitative",
          "condition": [
            {
              "test": "datum.Title == 'Web Visit %'",
              "type": "quantitative",
              "value": "#fff861"
            },
            {
              "test": "datum.Title == 'Page Load %'",
              "type": "quantitative",
              "value": "#a2ee61"
            },
            {
              "test": "datum.Title == 'Email %'",
              "type": "quantitative",
              "value": "#f689a1"
            },
            {
              "test": "datum.Title == 'Phone %'",
              "type": "quantitative",
              "value": "#cf991a"
            },
            {
              "test": "datum.Title == 'Name %'",
              "type": "quantitative",
              "value": "#cab101"
            },
            {
              "test": "datum.Title == 'Bounce %'",
              "type": "quantitative",
              "value": "#eea2a8"
            }
          ],
          "scale": {"range": ["#ecf9ff", "#c6efff", "#7ad9ff", "#42caff"]}
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 8,
        "font": "Montserrat,sans-serif",
        "align": "center"
      },
      "encoding": {"text": {"field": "Value"}}
    }
  ]
}