Search code examples
javascripthtmlvega-litevega

Boxplot cannot appropriate display

I have follow the template given from vega-Lite webpage: https://vega.github.io/vega-lite/docs/boxplot.html

And I write code as below. However, it cannot show a boxplot. Instead, it just show a couple of points through a vertical line. I am considering if Vega-Lite cannot transform original data into a boxplot automatically.

Should I have to calculate maximum, minimum, 1st/3rd Q for my data in advance? But if that's the case, how can I fill in the code and do the calculation?

enter image description here

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A vertical box plot showing median and lower and upper quartiles of the distribution.",
  "data": {"url": "https://raw.githubusercontent.com/BocongZhao823/My_First_Webpage-/main/data/rainfall_tidy.csv"},
  "mark": "boxplot",
  "encoding": {
    "x": {"field": "city_name", "type": "nominal"},
    "color": {"field": "city_name", "type": "nominal", "legend": null},
    "y": {
      "field": "rainfall",
      "type": "quantitative",
      "scale": {"zero": false}
    }
  }
}
Solution

  • The boxplot is working, your data are just incredibly skewed – the interquartile range is between 0 and 0.8, but the maximum is around 350, so the box part of the boxplot is too small to see.

    You can see this better by setting the y domain to a smaller range, and using the "clip" mark property to zoom-in on the area of interest:

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A vertical box plot showing median and lower and upper quartiles of the distribution.",
  "data": {"url": "https://raw.githubusercontent.com/BocongZhao823/My_First_Webpage-/main/data/rainfall_tidy.csv"
  },
  "mark": {"type": "boxplot", "clip": true},
  "encoding": { 
    "x": {"field": "city_name", "type": "nominal"},
    "color": {"field": "city_name", "type": "nominal", "legend": null},
    "y": {
      "field": "rainfall",
      "type": "quantitative",
      "scale": {"domain": [0, 3]}
    }
  }
}

    enter image description here

    However, this view leaves out a significant amount of your data, so a simple boxplot is probably not an appropriate visualization for this dataset.