singhsays/vega_js_eventstream.html

## vega_js_eventstream.html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/vega@5.13.0/build/vega.js"></script>
  </head>

  <body>
    <div id="vis"></div>
    <button>Update Data</button>

    <script>
      const spec = {
        '$schema': 'https://vega.github.io/schema/vega/v5.json',
        data: [{
          name: 'table',
          values: [],
        }, ],
        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'
          },
        ],
        signals: [{
          name: 'ydown',
        }, ],
        marks: [{
          type: 'group',
          name: 'foo',
          from: {
            data: 'table'
          },
          signals: [{
              name: 'ydown',
              push: 'outer',
              on: [{
                events: '@foo:mousedown',
                update: 'y()',
              }, ],
            },
            {
              name: 'tooltip',
              value: {},
              on: [{
                  events: 'rect:mouseover',
                  update: 'datum'
                },
                {
                  events: 'rect:mouseout',
                  update: '{}'
                },
              ],
            },
          ],
          marks: [{
              type: 'rect',
              encode: {
                enter: {
                  x: {
                    scale: 'xscale',
                    field: {
                      parent: 'category'
                    }
                  },
                  width: {
                    scale: 'xscale',
                    band: 1
                  },
                  y: {
                    scale: 'yscale',
                    field: {
                      parent: '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: 'isNaN(tooltip.amount)',
                      value: 0
                    },
                    {
                      value: 1
                    },
                  ],
                },
              },
            },
          ],
        }, ],
      };

      let view;

      const data = [{
          category: 'A',
          amount: 28
        },
        {
          category: 'B',
          amount: 55
        },
        {
          category: 'C',
          amount: 43
        },
        {
          category: 'D',
          amount: 91
        },
        {
          category: 'E',
          amount: 81
        },
        {
          category: 'F',
          amount: 53
        },
        {
          category: 'G',
          amount: 19
        },
        {
          category: 'H',
          amount: 87
        },
      ];

      // updates the dataset
      async function updateData() {
        const table = data.map(i => ({
          ...i
        }));
        table.reverse();
        await view.data('table', table);
      }

      // initialize dom for visualization.
      async function initialize(spec) {
        console.log('running visualization');
        const el = document.querySelector('#vis');
        spec.width = 1400;
        spec.height = 500;
        spec.padding = 5;

        const runtime = vega.parse(spec);
        const view = new vega.View(runtime, {
          renderer: 'svg',
          container: el,
          hover: true,
          logLevel: vega.Info,
        });

        const table = data.map(i => ({
          ...i
        }));
        view.data('table', table);
        await view.runAsync();
        view.addSignalListener('ydown', (name, value) => {
          console.log(name, value);
        });
        document.querySelector('button').addEventListener('click', async () => {
          await updateData();
        });
        console.log(data, table);
        return view;
      }

      document.addEventListener('DOMContentLoaded', () => {
        initialize(spec).then(v => {
          view = v;
        });
      });

    </script>
  </body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script src="https://cdn.jsdelivr.net/npm/vega@5.13.0/build/vega.js"></script>
	</head>

	<body>
	<div id="vis"></div>
	<button>Update Data</button>

	<script>
	const spec = {
	'$schema': 'https://vega.github.io/schema/vega/v5.json',
	data: [{
	name: 'table',
	values: [],
	}, ],
	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'
	},
	],
	signals: [{
	name: 'ydown',
	}, ],
	marks: [{
	type: 'group',
	name: 'foo',
	from: {
	data: 'table'
	},
	signals: [{
	name: 'ydown',
	push: 'outer',
	on: [{
	events: '@foo:mousedown',
	update: 'y()',
	}, ],
	},
	{
	name: 'tooltip',
	value: {},
	on: [{
	events: 'rect:mouseover',
	update: 'datum'
	},
	{
	events: 'rect:mouseout',
	update: '{}'
	},
	],
	},
	],
	marks: [{
	type: 'rect',
	encode: {
	enter: {
	x: {
	scale: 'xscale',
	field: {
	parent: 'category'
	}
	},
	width: {
	scale: 'xscale',
	band: 1
	},
	y: {
	scale: 'yscale',
	field: {
	parent: '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: 'isNaN(tooltip.amount)',
	value: 0
	},
	{
	value: 1
	},
	],
	},
	},
	},
	],
	}, ],
	};

	let view;

	const data = [{
	category: 'A',
	amount: 28
	},
	{
	category: 'B',
	amount: 55
	},
	{
	category: 'C',
	amount: 43
	},
	{
	category: 'D',
	amount: 91
	},
	{
	category: 'E',
	amount: 81
	},
	{
	category: 'F',
	amount: 53
	},
	{
	category: 'G',
	amount: 19
	},
	{
	category: 'H',
	amount: 87
	},
	];

	// updates the dataset
	async function updateData() {
	const table = data.map(i => ({
	...i
	}));
	table.reverse();
	await view.data('table', table);
	}

	// initialize dom for visualization.
	async function initialize(spec) {
	console.log('running visualization');
	const el = document.querySelector('#vis');
	spec.width = 1400;
	spec.height = 500;
	spec.padding = 5;

	const runtime = vega.parse(spec);
	const view = new vega.View(runtime, {
	renderer: 'svg',
	container: el,
	hover: true,
	logLevel: vega.Info,
	});

	const table = data.map(i => ({
	...i
	}));
	view.data('table', table);
	await view.runAsync();
	view.addSignalListener('ydown', (name, value) => {
	console.log(name, value);
	});
	document.querySelector('button').addEventListener('click', async () => {
	await updateData();
	});
	console.log(data, table);
	return view;
	}

	document.addEventListener('DOMContentLoaded', () => {
	initialize(spec).then(v => {
	view = v;
	});
	});

	</script>
	</body>

	</html>