diff --git a/examples/compiled/animated_hop.png b/examples/compiled/animated_hop.png new file mode 100644 index 0000000000..d14fcdc557 Binary files /dev/null and b/examples/compiled/animated_hop.png differ diff --git a/examples/compiled/animated_hop.svg b/examples/compiled/animated_hop.svg new file mode 100644 index 0000000000..4d501cb6ae --- /dev/null +++ b/examples/compiled/animated_hop.svg @@ -0,0 +1 @@ +0102030405060precipitation \ No newline at end of file diff --git a/examples/compiled/animated_hop.vg.json b/examples/compiled/animated_hop.vg.json new file mode 100644 index 0000000000..6c5fe079be --- /dev/null +++ b/examples/compiled/animated_hop.vg.json @@ -0,0 +1,157 @@ +{ + "$schema": "https://vega.github.io/schema/vega/v5.json", + "background": "white", + "padding": 5, + "width": 20, + "height": 200, + "style": "cell", + "data": [ + {"name": "animation_frame_store"}, + { + "name": "source_0", + "url": "data/seattle-weather.csv", + "format": {"type": "csv"}, + "transform": [ + { + "type": "filter", + "expr": "isValid(datum[\"precipitation\"]) && isFinite(+datum[\"precipitation\"])" + } + ] + }, + { + "name": "source_0_curr", + "source": "source_0", + "transform": [ + { + "type": "filter", + "expr": "!length(data(\"animation_frame_store\")) || vlSelectionTest(\"animation_frame_store\", datum)" + } + ] + } + ], + "signals": [ + { + "name": "unit", + "value": {}, + "on": [ + {"events": "pointermove", "update": "isTuple(group()) ? group() : unit"} + ] + }, + { + "name": "animation_frame", + "update": "vlSelectionResolve(\"animation_frame_store\", \"union\", true, true)" + }, + { + "name": "anim_clock", + "init": "0", + "on": [ + { + "events": {"type": "timer", "throttle": 16.666666666666668}, + "update": "is_playing ? (anim_clock + (now() - last_tick_at) > max_range_extent ? 0 : anim_clock + (now() - last_tick_at)) : anim_clock" + } + ] + }, + { + "name": "last_tick_at", + "init": "now()", + "on": [ + { + "events": [{"signal": "anim_clock"}, {"signal": "is_playing"}], + "update": "now()" + } + ] + }, + {"name": "is_playing", "init": "true"}, + {"name": "eased_anim_clock", "update": "anim_clock"}, + {"name": "animation_frame_domain", "init": "domain('time')"}, + {"name": "min_extent", "init": "extent(animation_frame_domain)[0]"}, + {"name": "max_range_extent", "init": "extent(range('time'))[1]"}, + {"name": "anim_value", "update": "invert('time', eased_anim_clock)"}, + { + "name": "animation_frame_tuple", + "on": [ + { + "events": [{"signal": "eased_anim_clock"}, {"signal": "anim_value"}], + "update": "{unit: \"\", fields: animation_frame_tuple_fields, values: [anim_value ? anim_value : min_extent]}", + "force": true + } + ] + }, + { + "name": "animation_frame_tuple_fields", + "value": [{"type": "E", "field": "date"}] + }, + { + "name": "animation_frame_modify", + "on": [ + { + "events": {"signal": "animation_frame_tuple"}, + "update": "modify(\"animation_frame_store\", animation_frame_tuple, true)" + } + ] + } + ], + "marks": [ + { + "name": "marks", + "type": "rect", + "style": ["tick"], + "interactive": true, + "from": {"data": "source_0_curr"}, + "encode": { + "update": { + "opacity": {"value": 0.7}, + "fill": {"value": "#4c78a8"}, + "ariaRoleDescription": {"value": "tick"}, + "description": { + "signal": "\"precipitation: \" + (format(datum[\"precipitation\"], \"\")) + \"; date: \" + (isValid(datum[\"date\"]) ? datum[\"date\"] : \"\"+datum[\"date\"])" + }, + "xc": {"signal": "width", "mult": 0.5}, + "width": {"signal": "0.75 * width"}, + "yc": {"scale": "y", "field": "precipitation"}, + "height": {"value": 3} + } + } + } + ], + "scales": [ + { + "name": "y", + "type": "linear", + "domain": {"data": "source_0", "field": "precipitation"}, + "range": [{"signal": "height"}, 0], + "nice": true, + "zero": true + }, + { + "name": "time", + "type": "band", + "domain": {"data": "source_0", "field": "date", "sort": true}, + "range": {"step": 500} + } + ], + "axes": [ + { + "scale": "y", + "orient": "left", + "grid": true, + "tickCount": {"signal": "ceil(height/40)"}, + "domain": false, + "labels": false, + "aria": false, + "maxExtent": 0, + "minExtent": 0, + "ticks": false, + "zindex": 0 + }, + { + "scale": "y", + "orient": "left", + "grid": false, + "title": "precipitation", + "labelOverlap": true, + "tickCount": {"signal": "ceil(height/40)"}, + "zindex": 0 + } + ] +} diff --git a/examples/specs/animated_hop.json b/examples/specs/animated_hop.vl.json similarity index 100% rename from examples/specs/animated_hop.json rename to examples/specs/animated_hop.vl.json