layer6.vl

{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "data": {
        "url": "https://vega.github.io/vega-lite/data/weather.json"
    },
    "description": "A layered bar chart with floating bars representing weekly weather data",
    "encoding": {
        "x": {
            "axis": {
                "domain": false,
                "labels": false,
                "orient": "top",
                "ticks": false,
                "title": null,
                "titlePadding": 25
            },
            "field": "id",
            "type": "ordinal"
        }
    },
    "height": 200,
    "layer": [
        {
            "encoding": {
                "color": {
                    "value": "#ccc"
                },
                "size": {
                    "value": 20
                },
                "y": {
                    "axis": {
                        "title": "Temperature (F)"
                    },
                    "field": "record.low",
                    "scale": {
                        "domain": [
                            10,
                            70
                        ]
                    },
                    "type": "quantitative"
                },
                "y2": {
                    "field": "record.high"
                }
            },
            "mark": {
                "style": "box",
                "type": "bar"
            }
        },
        {
            "encoding": {
                "color": {
                    "value": "#999"
                },
                "size": {
                    "value": 20
                },
                "y": {
                    "field": "normal.low",
                    "type": "quantitative"
                },
                "y2": {
                    "field": "normal.high"
                }
            },
            "mark": {
                "style": "box",
                "type": "bar"
            }
        },
        {
            "encoding": {
                "color": {
                    "value": "#000"
                },
                "size": {
                    "value": 12
                },
                "y": {
                    "field": "actual.low",
                    "type": "quantitative"
                },
                "y2": {
                    "field": "actual.high"
                }
            },
            "mark": {
                "style": "box",
                "type": "bar"
            }
        },
        {
            "encoding": {
                "color": {
                    "value": "#000"
                },
                "size": {
                    "value": 12
                },
                "y": {
                    "field": "forecast.low.low",
                    "type": "quantitative"
                },
                "y2": {
                    "field": "forecast.low.high"
                }
            },
            "mark": {
                "style": "box",
                "type": "bar"
            }
        },
        {
            "encoding": {
                "color": {
                    "value": "#000"
                },
                "size": {
                    "value": 3
                },
                "y": {
                    "field": "forecast.low.high",
                    "type": "quantitative"
                },
                "y2": {
                    "field": "forecast.high.low"
                }
            },
            "mark": {
                "style": "box",
                "type": "bar"
            }
        },
        {
            "encoding": {
                "color": {
                    "value": "#000"
                },
                "size": {
                    "value": 12
                },
                "y": {
                    "field": "forecast.high.low",
                    "type": "quantitative"
                },
                "y2": {
                    "field": "forecast.high.high"
                }
            },
            "mark": {
                "style": "box",
                "type": "bar"
            }
        },
        {
            "encoding": {
                "text": {
                    "field": "day",
                    "type": "nominal"
                }
            },
            "mark": {
                "align": "center",
                "baseline": "bottom",
                "type": "text",
                "y": -5
            }
        }
    ],
    "title": {
        "frame": "group",
        "text": [
            "Weekly Weather",
            "Observations and Predictions"
        ]
    },
    "width": 250
}