layer6.vl

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