Skip to content

Instantly share code, notes, and snippets.

@Finterly
Last active April 29, 2020 21:23
Show Gist options
  • Save Finterly/87fcde989793d562f0f16c5afcdc90fe to your computer and use it in GitHub Desktop.
Save Finterly/87fcde989793d562f0f16c5afcdc90fe to your computer and use it in GitHub Desktop.
USHateCrime Top Cities
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"background": "white",
"padding": 5,
"height": 300,
"data": [
{
"name": "selector006_store"
},
{
"name": "data-5fd2302cc4e7c562c8c5300bf1f33762",
"values": [
{
"POPULATION_GROUP_CODE": "1B",
"PUB_AGENCY_NAME": "Boston",
"REGION_NAME": "Northeast",
"n": 4229
},
{
"POPULATION_GROUP_CODE": "1A",
"PUB_AGENCY_NAME": "Chicago",
"REGION_NAME": "Midwest",
"n": 2140
},
{
"POPULATION_GROUP_CODE": "1B",
"PUB_AGENCY_NAME": "Columbus",
"REGION_NAME": "Midwest",
"n": 2250
},
{
"POPULATION_GROUP_CODE": "2",
"PUB_AGENCY_NAME": "Columbus",
"REGION_NAME": "South",
"n": 16
},
{
"POPULATION_GROUP_CODE": "4",
"PUB_AGENCY_NAME": "Columbus",
"REGION_NAME": "Midwest",
"n": 20
},
{
"POPULATION_GROUP_CODE": "5",
"PUB_AGENCY_NAME": "Columbus",
"REGION_NAME": "Midwest",
"n": 3
},
{
"POPULATION_GROUP_CODE": "6",
"PUB_AGENCY_NAME": "Columbus",
"REGION_NAME": "Midwest",
"n": 2
},
{
"POPULATION_GROUP_CODE": "6",
"PUB_AGENCY_NAME": "Columbus",
"REGION_NAME": "South",
"n": 1
},
{
"POPULATION_GROUP_CODE": "1A",
"PUB_AGENCY_NAME": "Dallas",
"REGION_NAME": "South",
"n": 946
},
{
"POPULATION_GROUP_CODE": "5",
"PUB_AGENCY_NAME": "Dallas",
"REGION_NAME": "West",
"n": 1
},
{
"POPULATION_GROUP_CODE": "1A",
"PUB_AGENCY_NAME": "Houston",
"REGION_NAME": "South",
"n": 723
},
{
"POPULATION_GROUP_CODE": "1C",
"PUB_AGENCY_NAME": "Kansas City",
"REGION_NAME": "Midwest",
"n": 683
},
{
"POPULATION_GROUP_CODE": "2",
"PUB_AGENCY_NAME": "Kansas City",
"REGION_NAME": "Midwest",
"n": 1
},
{
"POPULATION_GROUP_CODE": "1A",
"PUB_AGENCY_NAME": "Las Vegas Metropolitan Police Department",
"REGION_NAME": "West",
"n": 1005
},
{
"POPULATION_GROUP_CODE": "1B",
"PUB_AGENCY_NAME": "Las Vegas Metropolitan Police Department",
"REGION_NAME": "West",
"n": 249
},
{
"POPULATION_GROUP_CODE": "1A",
"PUB_AGENCY_NAME": "Los Angeles",
"REGION_NAME": "West",
"n": 7094
},
{
"POPULATION_GROUP_CODE": "1C",
"PUB_AGENCY_NAME": "Minneapolis",
"REGION_NAME": "Midwest",
"n": 1059
},
{
"POPULATION_GROUP_CODE": "1A",
"PUB_AGENCY_NAME": "New York",
"REGION_NAME": "Northeast",
"n": 10024
},
{
"POPULATION_GROUP_CODE": "1A",
"PUB_AGENCY_NAME": "Philadelphia",
"REGION_NAME": "Northeast",
"n": 1395
},
{
"POPULATION_GROUP_CODE": "1A",
"PUB_AGENCY_NAME": "Phoenix",
"REGION_NAME": "West",
"n": 3446
},
{
"POPULATION_GROUP_CODE": "1B",
"PUB_AGENCY_NAME": "Phoenix",
"REGION_NAME": "West",
"n": 163
},
{
"POPULATION_GROUP_CODE": "6",
"PUB_AGENCY_NAME": "Phoenix",
"REGION_NAME": "West",
"n": 3
},
{
"POPULATION_GROUP_CODE": "1B",
"PUB_AGENCY_NAME": "Portland",
"REGION_NAME": "West",
"n": 785
},
{
"POPULATION_GROUP_CODE": "1C",
"PUB_AGENCY_NAME": "Portland",
"REGION_NAME": "West",
"n": 930
},
{
"POPULATION_GROUP_CODE": "3",
"PUB_AGENCY_NAME": "Portland",
"REGION_NAME": "Northeast",
"n": 321
},
{
"POPULATION_GROUP_CODE": "5",
"PUB_AGENCY_NAME": "Portland",
"REGION_NAME": "South",
"n": 6
},
{
"POPULATION_GROUP_CODE": "6",
"PUB_AGENCY_NAME": "Portland",
"REGION_NAME": "Midwest",
"n": 5
},
{
"POPULATION_GROUP_CODE": "6",
"PUB_AGENCY_NAME": "Portland",
"REGION_NAME": "South",
"n": 2
},
{
"POPULATION_GROUP_CODE": "1A",
"PUB_AGENCY_NAME": "San Diego",
"REGION_NAME": "West",
"n": 1666
},
{
"POPULATION_GROUP_CODE": "1B",
"PUB_AGENCY_NAME": "San Francisco",
"REGION_NAME": "West",
"n": 3282
},
{
"POPULATION_GROUP_CODE": "1A",
"PUB_AGENCY_NAME": "San Jose",
"REGION_NAME": "West",
"n": 118
},
{
"POPULATION_GROUP_CODE": "1B",
"PUB_AGENCY_NAME": "San Jose",
"REGION_NAME": "West",
"n": 652
},
{
"POPULATION_GROUP_CODE": "1B",
"PUB_AGENCY_NAME": "Seattle",
"REGION_NAME": "West",
"n": 1760
},
{
"POPULATION_GROUP_CODE": "2",
"PUB_AGENCY_NAME": "Springfield",
"REGION_NAME": "Midwest",
"n": 494
},
{
"POPULATION_GROUP_CODE": "2",
"PUB_AGENCY_NAME": "Springfield",
"REGION_NAME": "Northeast",
"n": 196
},
{
"POPULATION_GROUP_CODE": "3",
"PUB_AGENCY_NAME": "Springfield",
"REGION_NAME": "Midwest",
"n": 33
},
{
"POPULATION_GROUP_CODE": "3",
"PUB_AGENCY_NAME": "Springfield",
"REGION_NAME": "West",
"n": 76
},
{
"POPULATION_GROUP_CODE": "4",
"PUB_AGENCY_NAME": "Springfield",
"REGION_NAME": "West",
"n": 12
},
{
"POPULATION_GROUP_CODE": "5",
"PUB_AGENCY_NAME": "Springfield",
"REGION_NAME": "South",
"n": 7
},
{
"POPULATION_GROUP_CODE": "6",
"PUB_AGENCY_NAME": "Springfield",
"REGION_NAME": "Midwest",
"n": 5
},
{
"POPULATION_GROUP_CODE": "6",
"PUB_AGENCY_NAME": "Springfield",
"REGION_NAME": "Northeast",
"n": 12
},
{
"POPULATION_GROUP_CODE": "6",
"PUB_AGENCY_NAME": "Springfield",
"REGION_NAME": "South",
"n": 3
},
{
"POPULATION_GROUP_CODE": "7",
"PUB_AGENCY_NAME": "Springfield",
"REGION_NAME": "Midwest",
"n": 1
},
{
"POPULATION_GROUP_CODE": "7",
"PUB_AGENCY_NAME": "Springfield",
"REGION_NAME": "South",
"n": 2
},
{
"POPULATION_GROUP_CODE": "1C",
"PUB_AGENCY_NAME": "St. Louis",
"REGION_NAME": "Midwest",
"n": 692
},
{
"POPULATION_GROUP_CODE": "6",
"PUB_AGENCY_NAME": "St. Louis",
"REGION_NAME": "Midwest",
"n": 1
},
{
"POPULATION_GROUP_CODE": "1B",
"PUB_AGENCY_NAME": "Washington",
"REGION_NAME": "South",
"n": 1255
},
{
"POPULATION_GROUP_CODE": "4",
"PUB_AGENCY_NAME": "Washington",
"REGION_NAME": "West",
"n": 3
},
{
"POPULATION_GROUP_CODE": "5",
"PUB_AGENCY_NAME": "Washington",
"REGION_NAME": "Midwest",
"n": 2
},
{
"POPULATION_GROUP_CODE": "5",
"PUB_AGENCY_NAME": "Washington",
"REGION_NAME": "South",
"n": 1
},
{
"POPULATION_GROUP_CODE": "5",
"PUB_AGENCY_NAME": "Washington",
"REGION_NAME": "West",
"n": 4
},
{
"POPULATION_GROUP_CODE": "6",
"PUB_AGENCY_NAME": "Washington",
"REGION_NAME": "Northeast",
"n": 38
},
{
"POPULATION_GROUP_CODE": "6",
"PUB_AGENCY_NAME": "Washington",
"REGION_NAME": "South",
"n": 1
}
]
},
{
"name": "data_1",
"source": "data-5fd2302cc4e7c562c8c5300bf1f33762",
"transform": [
{
"type": "filter",
"expr": "isValid(datum[\"n\"]) && isFinite(+datum[\"n\"])"
}
]
},
{
"name": "data_2",
"source": "data-5fd2302cc4e7c562c8c5300bf1f33762",
"transform": [
{
"type": "filter",
"expr": "!(length(data(\"selector006_store\"))) || (vlSelectionTest(\"selector006_store\", datum))"
},
{
"type": "aggregate",
"groupby": [
"REGION_NAME",
"PUB_AGENCY_NAME"
],
"ops": [
"sum"
],
"fields": [
"n"
],
"as": [
"sum_n"
]
}
]
}
],
"signals": [
{
"name": "concat_0_x_step",
"value": 20
},
{
"name": "concat_0_width",
"update": "bandspace(domain('concat_0_x').length, 1, 0.5) * concat_0_x_step"
},
{
"name": "concat_1_x_step",
"value": 20
},
{
"name": "concat_1_width",
"update": "bandspace(domain('concat_1_x').length, 0.1, 0.05) * concat_1_x_step"
},
{
"name": "unit",
"value": {},
"on": [
{
"events": "mousemove",
"update": "isTuple(group()) ? group() : unit"
}
]
},
{
"name": "selector006",
"update": "vlSelectionResolve(\"selector006_store\", \"union\")"
}
],
"layout": {
"padding": 20,
"bounds": "full",
"align": "each"
},
"marks": [
{
"type": "group",
"name": "concat_0_group",
"style": "cell",
"encode": {
"update": {
"width": {
"signal": "concat_0_width"
},
"height": {
"signal": "height"
}
}
},
"signals": [
{
"name": "selector006_x",
"value": [],
"on": [
{
"events": {
"source": "scope",
"type": "mousedown",
"filter": [
"!event.item || event.item.mark.name !== \"selector006_brush\""
]
},
"update": "[x(unit), x(unit)]"
},
{
"events": {
"source": "window",
"type": "mousemove",
"consume": true,
"between": [
{
"source": "scope",
"type": "mousedown",
"filter": [
"!event.item || event.item.mark.name !== \"selector006_brush\""
]
},
{
"source": "window",
"type": "mouseup"
}
]
},
"update": "[selector006_x[0], clamp(x(unit), 0, concat_0_width)]"
},
{
"events": {
"signal": "selector006_scale_trigger"
},
"update": "[0, 0]"
},
{
"events": {
"signal": "selector006_translate_delta"
},
"update": "clampRange(panLinear(selector006_translate_anchor.extent_x, selector006_translate_delta.x / span(selector006_translate_anchor.extent_x)), 0, concat_0_width)"
},
{
"events": {
"signal": "selector006_zoom_delta"
},
"update": "clampRange(zoomLinear(selector006_x, selector006_zoom_anchor.x, selector006_zoom_delta), 0, concat_0_width)"
},
{
"events": [
{
"source": "scope",
"type": "dblclick"
}
],
"update": "[0, 0]"
}
]
},
{
"name": "selector006_POPULATION_GROUP_CODE",
"on": [
{
"events": {
"signal": "selector006_x"
},
"update": "selector006_x[0] === selector006_x[1] ? null : invert(\"concat_0_x\", selector006_x)"
}
]
},
{
"name": "selector006_y",
"value": [],
"on": [
{
"events": {
"source": "scope",
"type": "mousedown",
"filter": [
"!event.item || event.item.mark.name !== \"selector006_brush\""
]
},
"update": "[y(unit), y(unit)]"
},
{
"events": {
"source": "window",
"type": "mousemove",
"consume": true,
"between": [
{
"source": "scope",
"type": "mousedown",
"filter": [
"!event.item || event.item.mark.name !== \"selector006_brush\""
]
},
{
"source": "window",
"type": "mouseup"
}
]
},
"update": "[selector006_y[0], clamp(y(unit), 0, height)]"
},
{
"events": {
"signal": "selector006_scale_trigger"
},
"update": "[scale(\"concat_0_y\", selector006_n[0]), scale(\"concat_0_y\", selector006_n[1])]"
},
{
"events": {
"signal": "selector006_translate_delta"
},
"update": "clampRange(panLinear(selector006_translate_anchor.extent_y, selector006_translate_delta.y / span(selector006_translate_anchor.extent_y)), 0, height)"
},
{
"events": {
"signal": "selector006_zoom_delta"
},
"update": "clampRange(zoomLinear(selector006_y, selector006_zoom_anchor.y, selector006_zoom_delta), 0, height)"
},
{
"events": [
{
"source": "scope",
"type": "dblclick"
}
],
"update": "[0, 0]"
}
]
},
{
"name": "selector006_n",
"on": [
{
"events": {
"signal": "selector006_y"
},
"update": "selector006_y[0] === selector006_y[1] ? null : invert(\"concat_0_y\", selector006_y)"
}
]
},
{
"name": "selector006_scale_trigger",
"value": {},
"on": [
{
"events": [
{
"scale": "concat_0_x"
},
{
"scale": "concat_0_y"
}
],
"update": "(!isArray(selector006_POPULATION_GROUP_CODE) || (invert(\"concat_0_x\", selector006_x)[0] === selector006_POPULATION_GROUP_CODE[0] && invert(\"concat_0_x\", selector006_x)[1] === selector006_POPULATION_GROUP_CODE[1])) && (!isArray(selector006_n) || (+invert(\"concat_0_y\", selector006_y)[0] === +selector006_n[0] && +invert(\"concat_0_y\", selector006_y)[1] === +selector006_n[1])) ? selector006_scale_trigger : {}"
}
]
},
{
"name": "selector006_tuple",
"on": [
{
"events": [
{
"signal": "selector006_POPULATION_GROUP_CODE || selector006_n"
}
],
"update": "selector006_POPULATION_GROUP_CODE && selector006_n ? {unit: \"concat_0\", fields: selector006_tuple_fields, values: [selector006_POPULATION_GROUP_CODE,selector006_n]} : null"
}
]
},
{
"name": "selector006_tuple_fields",
"value": [
{
"field": "POPULATION_GROUP_CODE",
"channel": "x",
"type": "E"
},
{
"field": "n",
"channel": "y",
"type": "R"
}
]
},
{
"name": "selector006_translate_anchor",
"value": {},
"on": [
{
"events": [
{
"source": "scope",
"type": "mousedown",
"markname": "selector006_brush"
}
],
"update": "{x: x(unit), y: y(unit), extent_x: slice(selector006_x), extent_y: slice(selector006_y)}"
}
]
},
{
"name": "selector006_translate_delta",
"value": {},
"on": [
{
"events": [
{
"source": "window",
"type": "mousemove",
"consume": true,
"between": [
{
"source": "scope",
"type": "mousedown",
"markname": "selector006_brush"
},
{
"source": "window",
"type": "mouseup"
}
]
}
],
"update": "{x: selector006_translate_anchor.x - x(unit), y: selector006_translate_anchor.y - y(unit)}"
}
]
},
{
"name": "selector006_zoom_anchor",
"on": [
{
"events": [
{
"source": "scope",
"type": "wheel",
"consume": true,
"markname": "selector006_brush"
}
],
"update": "{x: x(unit), y: y(unit)}"
}
]
},
{
"name": "selector006_zoom_delta",
"on": [
{
"events": [
{
"source": "scope",
"type": "wheel",
"consume": true,
"markname": "selector006_brush"
}
],
"force": true,
"update": "pow(1.001, event.deltaY * pow(16, event.deltaMode))"
}
]
},
{
"name": "selector006_modify",
"on": [
{
"events": {
"signal": "selector006_tuple"
},
"update": "modify(\"selector006_store\", selector006_tuple, true)"
}
]
}
],
"marks": [
{
"name": "selector006_brush_bg",
"type": "rect",
"clip": true,
"encode": {
"enter": {
"fill": {
"value": "#333"
},
"fillOpacity": {
"value": 0.125
}
},
"update": {
"x": [
{
"test": "data(\"selector006_store\").length && data(\"selector006_store\")[0].unit === \"concat_0\"",
"signal": "selector006_x[0]"
},
{
"value": 0
}
],
"y": [
{
"test": "data(\"selector006_store\").length && data(\"selector006_store\")[0].unit === \"concat_0\"",
"signal": "selector006_y[0]"
},
{
"value": 0
}
],
"x2": [
{
"test": "data(\"selector006_store\").length && data(\"selector006_store\")[0].unit === \"concat_0\"",
"signal": "selector006_x[1]"
},
{
"value": 0
}
],
"y2": [
{
"test": "data(\"selector006_store\").length && data(\"selector006_store\")[0].unit === \"concat_0\"",
"signal": "selector006_y[1]"
},
{
"value": 0
}
]
}
}
},
{
"name": "concat_0_marks",
"type": "symbol",
"style": [
"circle"
],
"interactive": true,
"from": {
"data": "data_1"
},
"encode": {
"update": {
"opacity": {
"value": 0.8
},
"size": {
"value": 50
},
"fill": [
{
"test": "!(length(data(\"selector006_store\"))) || (vlSelectionTest(\"selector006_store\", datum))",
"scale": "color",
"field": "REGION_NAME"
},
{
"value": "lightgray"
}
],
"tooltip": {
"signal": "''+datum[\"PUB_AGENCY_NAME\"]"
},
"x": {
"scale": "concat_0_x",
"field": "POPULATION_GROUP_CODE"
},
"y": {
"scale": "concat_0_y",
"field": "n"
},
"shape": {
"value": "circle"
}
}
}
},
{
"name": "selector006_brush",
"type": "rect",
"clip": true,
"encode": {
"enter": {
"fill": {
"value": "transparent"
}
},
"update": {
"x": [
{
"test": "data(\"selector006_store\").length && data(\"selector006_store\")[0].unit === \"concat_0\"",
"signal": "selector006_x[0]"
},
{
"value": 0
}
],
"y": [
{
"test": "data(\"selector006_store\").length && data(\"selector006_store\")[0].unit === \"concat_0\"",
"signal": "selector006_y[0]"
},
{
"value": 0
}
],
"x2": [
{
"test": "data(\"selector006_store\").length && data(\"selector006_store\")[0].unit === \"concat_0\"",
"signal": "selector006_x[1]"
},
{
"value": 0
}
],
"y2": [
{
"test": "data(\"selector006_store\").length && data(\"selector006_store\")[0].unit === \"concat_0\"",
"signal": "selector006_y[1]"
},
{
"value": 0
}
],
"stroke": [
{
"test": "selector006_x[0] !== selector006_x[1] && selector006_y[0] !== selector006_y[1]",
"value": "white"
},
{
"value": null
}
]
}
}
}
],
"axes": [
{
"scale": "concat_0_y",
"orient": "left",
"gridScale": "concat_0_x",
"grid": true,
"tickCount": {
"signal": "ceil(height/40)"
},
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_0_x",
"orient": "bottom",
"grid": false,
"title": "City population (decreasing)",
"labelAlign": "right",
"labelAngle": 270,
"labelBaseline": "middle",
"labelOverlap": true,
"zindex": 0
},
{
"scale": "concat_0_y",
"orient": "left",
"grid": false,
"title": "n",
"labelOverlap": true,
"tickCount": {
"signal": "ceil(height/40)"
},
"zindex": 0
}
]
},
{
"type": "group",
"name": "concat_1_group",
"style": "cell",
"encode": {
"update": {
"width": {
"signal": "concat_1_width"
},
"height": {
"signal": "height"
}
}
},
"marks": [
{
"name": "concat_1_marks",
"type": "rect",
"style": [
"bar"
],
"interactive": false,
"from": {
"data": "data_2"
},
"encode": {
"update": {
"fill": {
"scale": "color",
"field": "REGION_NAME"
},
"tooltip": {
"signal": "''+datum[\"PUB_AGENCY_NAME\"]"
},
"x": {
"scale": "concat_1_x",
"field": "REGION_NAME"
},
"width": {
"scale": "concat_1_x",
"band": true
},
"y": {
"scale": "concat_1_y",
"field": "sum_n"
},
"y2": {
"scale": "concat_1_y",
"value": 0
}
}
}
}
],
"axes": [
{
"scale": "concat_1_y",
"orient": "left",
"gridScale": "concat_1_x",
"grid": true,
"tickCount": {
"signal": "ceil(height/40)"
},
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "concat_1_x",
"orient": "bottom",
"grid": false,
"title": "Region name",
"labelAlign": "right",
"labelAngle": 270,
"labelBaseline": "middle",
"zindex": 0
},
{
"scale": "concat_1_y",
"orient": "left",
"grid": false,
"title": "Sum of n",
"labelOverlap": true,
"tickCount": {
"signal": "ceil(height/40)"
},
"zindex": 0
}
]
}
],
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": {
"fields": [
{
"data": "data_1",
"field": "REGION_NAME"
},
{
"data": "data_2",
"field": "REGION_NAME"
}
],
"sort": true
},
"range": {
"scheme": "paired"
}
},
{
"name": "concat_0_x",
"type": "point",
"domain": {
"data": "data_1",
"field": "POPULATION_GROUP_CODE",
"sort": true
},
"range": {
"step": {
"signal": "concat_0_x_step"
}
},
"padding": 0.5
},
{
"name": "concat_0_y",
"type": "linear",
"domain": {
"data": "data_1",
"field": "n"
},
"range": [
{
"signal": "height"
},
0
],
"nice": true,
"zero": true
},
{
"name": "concat_1_x",
"type": "band",
"domain": {
"data": "data_2",
"field": "REGION_NAME",
"sort": true
},
"range": {
"step": {
"signal": "concat_1_x_step"
}
},
"paddingInner": 0.1,
"paddingOuter": 0.05
},
{
"name": "concat_1_y",
"type": "linear",
"domain": {
"data": "data_2",
"field": "sum_n"
},
"range": [
{
"signal": "height"
},
0
],
"nice": true,
"zero": true
}
],
"legends": [
{
"fill": "color",
"gradientLength": {
"signal": "clamp(height, 64, 200)"
},
"symbolType": "circle",
"title": "REGION_NAME",
"encode": {
"symbols": {
"update": {
"opacity": {
"value": 0.8
}
}
}
}
}
],
"config": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment