2e:null 2f:["$","title",null,{"children":"[Vega-lite] Filtering Top-k aggregated fields by another aggregation field | Malik Koné | Observable"}] 34:T6a1,vl2( { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "data": {"url": vegaDataset['seattle-weather.csv'].url, // making sure every thing is treated as a number "format": {"parse": {"precipitation": "number"}} }, "transform": [ { "joinaggregate": [ {"as": "mean_precipitation", "field": "precipitation", "op": "mean"}, {"as": "max_precipitation", "field": "precipitation", "op": "max"} ], "groupby": ["month_date"] }, {"fold": ["max_precipitation", "mean_precipitation"]}, ], "hconcat": [ { "mark": {"type": "bar"}, "encoding": { "x": {"field": "date", "type": "ordinal", "timeUnit": "month", "sort": {"field": "max_precipitation"} }, "y": {"aggregate": "max", "field": "precipitation", "type": "quantitative", "scale": {"type": scale_type}, "axis": {"orient":"left", "titleAngle":0, "titleX": 120, "titleY": -10} } } }, { "mark": {"type": "tick", "size": 15, "color": "red"}, "encoding": { "x": {"field": "date", "type": "ordinal", "timeUnit": "month", "sort": "y" }, "y": {"aggregate": "mean", "field": "precipitation", "scale": {"type": scale_type}, "axis": {"orient":"left", "titleAngle":0, "titleX": 120, "titleY": -10}} } } ], "resolve": {"scale": {"y": resolve}} } )35:T42d,vl2( { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "data": {"url": vegaDataset['seattle-weather.csv'].url, // format because precipitation is treated as string and miggle the axis "format": {"parse": {"precipitation": "number"}}}, "transform": [ {"timeUnit": "month", "field": "date", "as": "month_date"}, { "aggregate": [ {"as": `${op}_precipitation`, "field": "precipitation", "op": op} ], "groupby": ["month_date"] }, { "window": [{"op":"row_number", "as": "rank" }], "sort": [ { "field": `${op}_precipitation`, "order": "ascending" } ] }, {"filter" : `datum.rank <= ${k} `} ], "mark": {"type": "bar"}, "encoding": { "x": {"field": "month_date", "type": "ordinal", "timeUnit": "month", "sort": {"field": "rank", "order": "ascending"} }, "y": {"field": `${op}_precipitation`, "type": "quantitative"} } } )36:T41d,vl2( { "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "data": vl_data, "transform": [ {"timeUnit": "month", "field": "date", "as": "month_date"}, { "joinaggregate": [ {"as": "mean_precipitation", "field": "precipitation", "op": "mean"}, {"as": "max_precipitation", "field": "precipitation", "op": "max"} ], "groupby": ["month_date"] } ], "encoding": { "x": {"field": "month_date", "type": "ordinal", "timeUnit": "month" } }, "layer": [ {"height": 300, "mark": {"type": "bar"}, "encoding": { "y": { "field": "max_precipitation", "type": "quantitative", } } }, { "mark": "tick", "encoding": { "y": {"field": "mean_precipitation", "type": "quantitative" }, "color": {"value": "red"}, "size": {"value": 15} } } ] } )37:T579,vl2({ "$schema": "https://vega.github.io/schema/vega-lite/v4.json", "title": `Top Months by ${sort_filter_field}`, "data": vl_data, "transform": [ vl_timeUnit_transform, { "aggregate": [ {"op": "mean", "field": "precipitation", "as": "mean_precipitation"}, {"op": "max", "field": "precipitation", "as": "max_precipitation"} ], "groupby": ["month_date"] }, { "window": [{"op": "row_number", "as": "rank"}], "sort": [{"field": sort_filter_field, "order": "descending"}] }, {"filter": `datum.rank <= ${k2}`} ], "encoding": { "x": { "field": "month_date", "type": "ordinal", "timeUnit": "month", "title": `month (descending by ${sort_filter_field})`, "sort": { "field": sort_filter_field, "op": "average", "order": "descending" } } }, "layer": [ { "mark": {"type": "bar"}, "encoding": { "y": { "field": "max_precipitation", "type": "quantitative", "title": "precipitation (mean & max)", "scale": {"type": scale_type} } } }, { "mark": "tick", "encoding": { "y": {"field": "mean_precipitation", "type": "quantitative", "scale": {"type": scale_type} }, "color": {"value": "red"}, "size": {"value": 15} } } ] })38:T10a8,table = (data, options) => { options = Object.assign({}, defaultOptions, options); const { sortable, rank, paged } = options; let sortKey = undefined; let sortDirection = true; let page = 0; if (sortable && rank) { throw new Error("A table can either be ranked or sortable, but not both"); } let columns = Object.keys(data[0]).map(key => { const opts = options.columns[key] || {}; return { key: key, type: opts.type || typeof data[0][key], options: opts }; }); function bake() { if (sortKey) { data = data.slice().sort((a, b) => { let as = a[sortKey]; let bs = b[sortKey]; // make this sort stable if (as == bs) return JSON.stringify(a).localeCompare(JSON.stringify(b)); let res = as > bs ? 1 : as < bs ? -1 : 0; if (sortDirection) res = -res; return res; }); } let rows = data.slice(page * paged, page * paged + paged); let pages = Math.ceil(data.length / paged); return html`

${ options.header === false ? `` : html` ${rank ? html`` : ""} ${columns.map(c => { return th(c, sortKey, sortDirection, sortable); })} ` } ${rows.map( (row, i) => html` ${rank ? html`` : ""} ${columns.map(c => { let displayValue = (c.options.formatter || identity)( row[c.key], i, row ); if ( displayValue instanceof window.HTMLElement && displayValue.tagName == "TD" ) { return displayValue; } return html``; })} ` )}


${i + 1}	${displayValue}

${ pages ? html`` : "" }

`; } let dom = bake(); function rerender() { dom.firstChild.remove(); dom.appendChild(bake().firstChild); } dom.addEventListener("click", e => { if (e.target.tagName === "TH" && sortable) { if (sortKey == e.target.dataset.key) { sortDirection = !sortDirection; } sortKey = e.target.dataset.key; rerender(); } if (e.target.tagName === "BUTTON") { if (e.target.dataset.action) { switch (e.target.dataset.action) { case "next": page++, rerender(); break; case "previous": page--, rerender(); break; } } else if (e.target.dataset.page) { (page = parseInt(e.target.dataset.page)), rerender(); } } }); return dom; }39:[] 32:{"id":"e4e03162dbadce09","slug":"vega-lite-filtering-top-k-aggregated-fields-by-another-aggr","title":"[Vega-lite] Filtering Top-k aggregated fields by another aggregation field","thumbnail":"a974a7ac1d4f09cb5a375ac31b7853d3341e4c4008275fd14f098b15f100dfda","access_level":"public","create_time":"$D2020-02-10T07:07:04.312Z","update_time":"$D2020-02-11T22:12:15.975Z","view_time":null,"first_public_time":"$D2020-02-10T15:33:39.911Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024"},"version":658,"publish_version":658,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null}],"members":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"14f0cca9949787a0","slug":"only_vega","title":"only_vega","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"type":"notebook","body":{"title":"[Vega-lite] Filtering Top-k aggregated fields by another aggregation field","cells":[{"id":0,"value":"md`# [Vega-lite] Filtering Top-k aggregated fields by another aggregation field`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`It is possible to filter aggregated data and keep only the K-most or less values as in [manzt's example](https://observablehq.com/@manzt/top-k-plot-with-others-vega-lite-example)\n\nBut in that case you display the aggregated data, that you aggregate one.\n\n*Question: * How can you filter data based on an aggregated criteria, but display another aggregation ? -> [answer on stackoverflow](https://stackoverflow.com/questions/60151507/filtering-an-aggregated-chart-with-another-aggregation-field). \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"html`

Showing the 'max' & 'mean' of precipitation for data aggregated per month

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"md`In the above example, the three highests 'mean' precipitation months are November, December and March, so I would like to show their respective 'max' precipitation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"md`#### Here's an exemple of the dataset excerpt`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"dataset = vegaDataset[\"seattle-weather.csv\"]()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"table(dataset, {\"sortable\": true, \"paged\": 31})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`#### Filtering and ordering the top '${k}' months by 'op' of precipiation per day`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"viewof op = select([\"mean\", \"max\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"viewof k = slider({\n min: 1, \n max: 12, \n step: 1, \n value: 5, \n title: \"k\", \n description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"md`### Showing the max and the mean precipitation for all months`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`#### As a layered chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"vl2(\n {\n \"$schema\": \"https://vega.github.io/schema/vega-lite/v4.json\",\n \"data\": {\"url\": vegaDataset['seattle-weather.csv'].url},\n \"hconcat\": [\n {\n \"encoding\": \n {\n \"x\": {\n \"field\": \"date\",\n \"type\": \"ordinal\", \"timeUnit\": \"month\"\n } \n },\n \"layer\": [\n {\n \"mark\": {\"type\": \"bar\"},\n\n \"encoding\": {\n \"y\": {\n \"aggregate\": \"max\",\n \"field\": \"precipitation\", \n \"type\": \"quantitative\",\n }\n }\n },\n {\n \"mark\": \"tick\",\n \"encoding\": {\n \"y\": { \n \"aggregate\": \"mean\",\n \"field\": \"precipitation\",\n \"type\": \"quantitative\"\n },\n \"color\": {\"value\": \"red\"},\n \"size\": {\"value\": 15}\n }\n }\n ]\n }\n ]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"md`#### Using *joinaggregate*\nWe have to be carrefull of the format of the precipitation columns which can be parse as string and not as an integer.\nOne signe of this is the axis not scaling propery`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"md`### Question how to filter both layers at the same time ?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"md`Here's an answer adapted from [stackoverflow](https://stackoverflow.com/questions/60151507/filtering-an-aggregated-chart-with-another-aggregation-field) by Jake from Altair.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"html`

Filtering or ordering the aggregated precipitations by '${sort_filter_field}'

${viewof scale_type}

${viewof resolve}

\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"viewof k2 = slider({\n min: 1, \n max: 12, \n step: 1, \n value: 5, \n title: \"k\", \n description: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"md`### Bazar`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"vl_data = ({\"url\": vegaDataset['seattle-weather.csv'].url,\n \"format\": {\"parse\": {\"precipitation\": \"number\"}}\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"vl_timeUnit_transform =({\"timeUnit\": \"month\", \"field\": \"date\", \"as\": \"month_date\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"vl2 = require(\"@observablehq/vega-lite@0.2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"vl_data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"vegaDataset = require('vega-datasets')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"vegaDatasets = (await require('vega-datasets')).default","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"defaultOptions = ({ columns: {}, style: 'normal', paged: 25 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"md`Table API from [Tom MacWright](https://observablehq.com/@tmcw/tables)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"th = (c, sortKey, sortDirection, sortable) => {\n let {\n options: { title }\n } = c;\n let sortIndicator = sortKey && sortDirection ? \"↑\" : \"↓\";\n let arrow = html`${sortIndicator}`;\n let displayedTitle = title !== undefined ? title : c.key;\n return c.type === \"number\"\n ? html`\n ${arrow}${displayedTitle}\n `\n : html`\n ${displayedTitle}${arrow}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"identity = i => i","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"import { select, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"md`#### views`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"viewof sort_filter_field = radio({\n title: 'Sort & Filtering field',\n description: 'Select the fied used for filtering and ordering',\n options: [\n { label: 'By mean', value: 'mean_precipitation' },\n { label: 'By max', value: 'max_precipitation' }\n ],\n value: 'mean_precipitation'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"viewof scale_type2 = select({\n title: \"Scale type\",\n description: \"Select a type\",\n options: [\"log\", \"linear\", \"sqrt\" ],\n value: \"sqrt\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"viewof scale_type = select({\n title: \"Scale type\",\n description: \"Select a type\",\n options: [\"log\", \"linear\", \"sqrt\" ],\n value: \"sqrt\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"viewof resolve = checkbox({\n description: \"Share x y axis\",\n options: [{ value: \"shared\", label: \"toggle share y-axis\" }],\n value: null\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"import {checkbox, radio} from \"@jashkenas/inputs\"\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 33:"$32:body"

${viewof sort_filter_field}

${viewof k2}

${viewof scale_type2}