vbTest.vl

{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "background": "yellow",
    "config": {
        "legend": {
            "title": null
        },
        "style": {
            "mySecondStyle": {
                "fill": "black",
                "stroke": "blue"
            },
            "myStyle": {
                "fill": "red",
                "fillOpacity": 0.1,
                "strokeOpacity": 1
            }
        },
        "view": {
            "fill": "#feb"
        }
    },
    "data": {
        "url": "https://vega.github.io/vega-lite/data/cars.json"
    },
    "hconcat": [
        {
            "encoding": {
                "color": {
                    "field": "Cylinders",
                    "type": "ordinal"
                },
                "shape": {
                    "field": "Origin",
                    "type": "nominal"
                },
                "x": {
                    "field": "Horsepower",
                    "type": "quantitative"
                },
                "y": {
                    "field": "Miles_per_Gallon",
                    "type": "quantitative"
                }
            },
            "height": 200,
            "mark": {
                "size": 100,
                "type": "point"
            },
            "title": {
                "color": "brown",
                "fontSize": 12,
                "text": "Car Scatter"
            },
            "width": 200
        },
        {
            "encoding": {
                "color": {
                    "field": "Origin",
                    "type": "nominal"
                },
                "x": {
                    "field": "Horsepower",
                    "type": "quantitative"
                },
                "y": {
                    "aggregate": "count",
                    "type": "quantitative"
                }
            },
            "height": 200,
            "mark": "bar",
            "title": "Car Histogram",
            "view": {
                "cornerRadius": 18,
                "fill": "white",
                "stroke": "red",
                "strokeCap": "round",
                "strokeDash": [
                    10,
                    10
                ],
                "strokeJoin": "bevel",
                "strokeWidth": 4
            },
            "width": 200
        },
        {
            "encoding": {
                "color": {
                    "field": "Origin",
                    "type": "nominal"
                },
                "x": {
                    "field": "Year",
                    "timeUnit": "year",
                    "type": "temporal"
                },
                "y": {
                    "aggregate": "count",
                    "axis": null,
                    "stack": "center",
                    "type": "quantitative"
                }
            },
            "height": 200,
            "mark": "area",
            "title": "Car Streamgraph",
            "view": {
                "style": [
                    "myStyle",
                    "mySecondStyle"
                ]
            },
            "width": 200
        }
    ],
    "resolve": {
        "scale": {
            "color": "independent",
            "shape": "independent"
        }
    }
}