histogram

histogram.json

{
    "meta": {
        "title": "Histogram",
        "description": "Below I overlay 2x distribtuions (overall + selected), but to make comparisons it's helpful if I can normalise"
    },
    "data": {
        "flights": {
            "file": "data/flights-200k.parquet"
        }
    },
    "params": {
        "brush": {
            "select": "crossfilter"
        }
    },
    "vconcat": [
        {
            "plot": [
                {
                    "mark": "rectY",
                    "data": {
                        "from": "flights"
                    },
                    "x": {
                        "bin": "delay"
                    },
                    "y": {
                        "count": null
                    },
                    "fill": "#888",
                    "fillOpacity": 0.5
                },
                {
                    "select": "intervalX",
                    "as": "$brush"
                },
                {
                    "mark": "rectY",
                    "data": {
                        "from": "flights",
                        "filterBy": "$brush"
                    },
                    "x": {
                        "bin": "delay"
                    },
                    "y": {
                        "count": null
                    },
                    "fill": "aqua",
                    "fillOpacity": 0.5
                }
            ],
            "xDomain": "Fixed",
            "xLabel": "delay",
            "yAxis": null,
            "width": 600,
            "marginLeft": 10,
            "height": 200
        },
        {
            "plot": [
                {
                    "mark": "rectY",
                    "data": {
                        "from": "flights"
                    },
                    "x": {
                        "bin": "distance"
                    },
                    "y": {
                        "count": null
                    },
                    "fill": "#888",
                    "fillOpacity": 0.5
                },
                {
                    "mark": "rectY",
                    "data": {
                        "from": "flights",
                        "filterBy": "$brush"
                    },
                    "x": {
                        "bin": "distance"
                    },
                    "y": {
                        "count": null
                    },
                    "fill": "aqua",
                    "fillOpacity": 0.5
                },
                {
                    "select": "intervalX",
                    "as": "$brush"
                }
            ],
            "xDomain": "Fixed",
            "xLabel": "distance",
            "yAxis": null,
            "width": 600,
            "marginLeft": 10,
            "height": 200
        },
        {
            "plot": [
                {
                    "mark": "rectY",
                    "data": {
                        "from": "flights"
                    },
                    "x": {
                        "bin": "time"
                    },
                    "y": {
                        "count": null
                    },
                    "fill": "#888",
                    "fillOpacity": 0.5
                },
                {
                    "mark": "rectY",
                    "data": {
                        "from": "flights",
                        "filterBy": "$brush"
                    },
                    "x": {
                        "bin": "time"
                    },
                    "y": {
                        "count": null
                    },
                    "fill": "aqua",
                    "fillOpacity": 0.5
                },
                {
                    "select": "intervalX",
                    "as": "$brush"
                }
            ],
            "xDomain": "Fixed",
            "xLabel": "Departure Time (hour)",
            "yAxis": null,
            "width": 600,
            "marginLeft": 10,
            "height": 200
        }
    ]
}