|
|
| Line 1: |
Line 1: |
| <graph> | | <graph> |
| { | | { |
| "$schema": "https://vega.github.io/schema/vega/v5.json", | | "$schema": "https://vega.github.io/schema/vega-lite/v4.json", |
| "description": "A basic bar chart example, with value labels shown upon mouse hover.", | | "description": "A simple bar chart with embedded data.", |
| "width": 400,
| | "data": { |
| "height": 200,
| | "values": [ |
| "padding": 5,
| | {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43}, |
| | | {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53}, |
| "data": [ | | {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52} |
| { | | ] |
| "name": "table",
| | }, |
| "values": [
| | "mark": "bar", |
| {"category": "A", "amount": 28},
| | "encoding": { |
| {"category": "B", "amount": 55},
| | "x": {"field": "a", "type": "ordinal", "axis": {"labelAngle": 0}}, |
| {"category": "C", "amount": 43},
| | "y": {"field": "b", "type": "quantitative"} |
| {"category": "D", "amount": 91},
| | } |
| {"category": "E", "amount": 81},
| |
| {"category": "F", "amount": 53},
| |
| {"category": "G", "amount": 19},
| |
| {"category": "H", "amount": 87}
| |
| ]
| |
| }
| |
| ],
| |
| | |
| "signals": [
| |
| {
| |
| "name": "tooltip",
| |
| "value": {},
| |
| "on": [
| |
| {"events": "rect:mouseover", "update": "datum"},
| |
| {"events": "rect:mouseout", "update": "{}"}
| |
| ]
| |
| } | |
| ],
| |
| | |
| "scales": [ | |
| {
| |
| "name": "xscale",
| |
| "type": "band",
| |
| "domain": {"data": "table", "field": "category"},
| |
| "range": "width",
| |
| "padding": 0.05,
| |
| "round": true
| |
| },
| |
| {
| |
| "name": "yscale",
| |
| "domain": {"data": "table", "field": "amount"},
| |
| "nice": true,
| |
| "range": "height"
| |
| }
| |
| ], | |
| | |
| "axes": [
| |
| { "orient": "bottom", "scale": "xscale" },
| |
| { "orient": "left", "scale": "yscale" }
| |
| ],
| |
| | |
| "marks": [
| |
| { | |
| "type": "rect",
| |
| "from": {"data":"table"},
| |
| "encode": {
| |
| "enter": {
| |
| "x": {"scale": "xscale", "field": "category"},
| |
| "width": {"scale": "xscale", "band": 1},
| |
| "y": {"scale": "yscale", "field": "amount"},
| |
| "y2": {"scale": "yscale", "value": 0}
| |
| },
| |
| "update": {
| |
| "fill": {"value": "steelblue"}
| |
| },
| |
| "hover": {
| |
| "fill": {"value": "red"}
| |
| }
| |
| }
| |
| },
| |
| { | |
| "type": "text",
| |
| "encode": {
| |
| "enter": {
| |
| "align": {"value": "center"},
| |
| "baseline": {"value": "bottom"},
| |
| "fill": {"value": "#333"}
| |
| },
| |
| "update": {
| |
| "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
| |
| "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
| |
| "text": {"signal": "tooltip.amount"},
| |
| "fillOpacity": [
| |
| {"test": "datum === tooltip", "value": 0},
| |
| {"value": 1}
| |
| ]
| |
| }
| |
| }
| |
| }
| |
| ]
| |
| } | | } |
|
| |
|
| </graph> | | </graph> |
