A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter. (function (d3, vega, vegaLite, vl, vegaTooltip) { 'use strict';

vega = vega && Object.prototype.hasOwnProperty.call(vega, 'default') ? vega['default'] : vega; vegaLite = vegaLite && Object.prototype.hasOwnProperty.call(vegaLite, 'default') ? vegaLite['default'] : vegaLite; vl = vl && Object.prototype.hasOwnProperty.call(vl, 'default') ? vl['default'] : vl;

const csvUrl = 'file.csv'; const getData = async () => { const data = await d3.csv(csvUrl); console.log(data[0]); return data; };

// Appearance customization to improve readability. // See https://vega.github.io/vega-lite/docs/ const dark = '#3e3c38'; const config = { axis: { domain: false, tickColor: 'lightGray' }, style: { "guide-label": { fontSize: 13, fill: dark }, "guide-title": { fontSize: 17, fill: dark } } };

const g1 = vl .markPoint({ opacity: 0.4}) .encode( vl.x().fieldT('Date').timeUnit('daymonth'), vl.y().fieldQ('Comments'), vl.color().fieldN('Network'), vl.size().fieldQ('Likes'), vl.tooltip().fieldN('Post') );

const g2 = vl .markLine({ size : 1 }) .encode( vl.x().fieldT('Date').timeUnit("date"), vl.y().fieldQ('Likes').aggregate('average'), vl.color().fieldN('Sentiment'), vl.tooltip().fieldT('Date').timeUnit('date') );

// import { message } from './myMessage';

vl.register(vega, vegaLite, { view: { renderer: 'svg' }, init: view => { view.tooltip(new vegaTooltip.Handler().call); } });

const run = async () => { const data = await getData(); const marks = g1 .data(data) .width(window.innerWidth) //window.innerWidth .height(1000) .autosize({ type: 'pad', contains: 'padding' }) .config(config);

	const marks2 = g2
  .data(data)
  .width(window.innerWidth)
  .height(400)
  .autosize({ type: 'pad', contains: 'padding'})
  .config(config);

document.body.appendChild(await marks.render());
//document.body.appendChild(await marks2.render());

};

run();

}(d3, vega, vegaLite, vl, vegaTooltip));

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbImdldERhdGEuanMiLCJjb25maWcuanMiLCJncmFwaHMuanMiLCJpbmRleC5qcyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3YgfSBmcm9tICdkMyc7XG5jb25zdCBjc3ZVcmwgPSAnZmlsZS5jc3YnO1xuZXhwb3J0IGNvbnN0IGdldERhdGEgPSBhc3luYyAoKSA9PiB7XG4gIGNvbnN0IGRhdGEgPSBhd2FpdCBjc3YoY3N2VXJsKTtcbiAgY29uc29sZS5sb2coZGF0YVswXSk7XG4gIHJldHVybiBkYXRhO1xufTtcbiIsIi8vIEFwcGVhcmFuY2UgY3VzdG9taXphdGlvbiB0byBpbXByb3ZlIHJlYWRhYmlsaXR5LlxuLy8gU2VlIGh0dHBzOi8vdmVnYS5naXRodWIuaW8vdmVnYS1saXRlL2RvY3MvXG5jb25zdCBkYXJrID0gJyMzZTNjMzgnO1xuZXhwb3J0IGNvbnN0IGNvbmZpZyA9IHtcbiAgYXhpczoge1xuICAgIGRvbWFpbjogZmFsc2UsXG4gICAgdGlja0NvbG9yOiAnbGlnaHRHcmF5J1xuICB9LFxuICBzdHlsZToge1xuICAgIFwiZ3VpZGUtbGFiZWxcIjoge1xuICAgICAgZm9udFNpemU6IDEzLFxuICAgICAgZmlsbDogZGFya1xuICAgIH0sXG4gICAgXCJndWlkZS10aXRsZVwiOiB7XG4gICAgICBmb250U2l6ZTogMTcsXG4gICAgICBmaWxsOiBkYXJrXG4gICAgfVxuICB9XG59OyIsImltcG9ydCB2bCBmcm9tICd2ZWdhLWxpdGUtYXBpJztcblxuZXhwb3J0IGNvbnN0IGcxID0gdmxcbiAgLm1hcmtQb2ludCh7IG9wYWNpdHk6IDAuNH0pXG4gIC5lbmNvZGUoXG4gICAgdmwueCgpLmZpZWxkVCgnRGF0ZScpLnRpbWVVbml0KCdkYXltb250aCcpLFxuICAgIHZsLnkoKS5maWVsZFEoJ0NvbW1lbnRzJyksXG4gICAgdmwuY29sb3IoKS5maWVsZE4oJ05ldHdvcmsnKSxcbiAgICB2bC5zaXplKCkuZmllbGRRKCdMaWtlcycpLFxuICAgIHZsLnRvb2x0aXAoKS5maWVsZE4oJ1Bvc3QnKVxuICApO1xuXG5leHBvcnQgY29uc3QgZzIgPSB2bFxuICAubWFya0xpbmUoeyBzaXplIDogMSB9KVxuICAuZW5jb2RlKFxuICAgIHZsLngoKS5maWVsZFQoJ0RhdGUnKS50aW1lVW5pdChcImRhdGVcIiksXG4gICAgdmwueSgpLmZpZWxkUSgnTGlrZXMnKS5hZ2dyZWdhdGUoJ2F2ZXJhZ2UnKSxcbiAgICB2bC5jb2xvcigpLmZpZWxkTignU2VudGltZW50JyksXG4gICAgdmwudG9vbHRpcCgpLmZpZWxkVCgnRGF0ZScpLnRpbWVVbml0KCdkYXRlJylcbiAgKTsiLCIvLyBpbXBvcnQgeyBtZXNzYWdlIH0gZnJvbSAnLi9teU1lc3NhZ2UnO1xuLy8gc2VsZWN0KCcjbWVzc2FnZScpLnRleHQobWVzc2FnZSk7XG5cbmltcG9ydCB7IHNlbGVjdCB9IGZyb20gJ2QzJztcbmltcG9ydCB2ZWdhIGZyb20gJ3ZlZ2EnO1xuaW1wb3J0IHZlZ2FMaXRlIGZyb20gJ3ZlZ2EtbGl0ZSc7XG5pbXBvcnQgdmwgZnJvbSAndmVnYS1saXRlLWFwaSc7XG5pbXBvcnQgeyBIYW5kbGVyIH0gZnJvbSAndmVnYS10b29sdGlwJztcblxuaW1wb3J0IHsgZ2V0RGF0YSB9IGZyb20gJy4vZ2V0RGF0YSc7XG5pbXBvcnQgeyBjb25maWcgfSBmcm9tICcuL2NvbmZpZyc7XG5pbXBvcnQgeyBnMSwgZzIgfSBmcm9tICcuL2dyYXBocyc7XG5cblxuXG52bC5yZWdpc3Rlcih2ZWdhLCB2ZWdhTGl0ZSwge1xuICB2aWV3OiB7IHJlbmRlcmVyOiAnc3ZnJyB9LFxuICBpbml0OiB2aWV3ID0+IHsgdmlldy50b29sdGlwKG5ldyBIYW5kbGVyKCkuY2FsbCk7IH1cbn0pO1xuXG5jb25zdCBydW4gPSBhc3luYyAoKSA9PiB7XG4gIGNvbnN0IGRhdGEgPSBhd2FpdCBnZXREYXRhKCk7XG4gIGNvbnN0IG1hcmtzID0gZzFcbiAgICAuZGF0YShkYXRhKVxuICAgIC53aWR0aCh3aW5kb3cuaW5uZXJXaWR0aClcbiAgLy93aW5kb3cuaW5uZXJXaWR0aFxuICAgIC5oZWlnaHQoMTAwMClcbiAgICAuYXV0b3NpemUoeyB0eXBlOiAncGFkJywgY29udGFpbnM6ICdwYWRkaW5nJyB9KVxuICAgIC5jb25maWcoY29uZmlnKTtcbiAgXG5cdGNvbnN0IG1hcmtzMiA9IGcyXG4gICAgLmRhdGEoZGF0YSlcbiAgICAud2lkdGgod2luZG93LmlubmVyV2lkdGgpXG4gICAgLmhlaWdodCg0MDApXG4gICAgLmF1dG9zaXplKHsgdHlwZTogJ3BhZCcsIGNvbnRhaW5zOiAncGFkZGluZyd9KVxuICAgIC5jb25maWcoY29uZmlnKTtcbiAgXG4gIGRvY3VtZW50LmJvZHkuYXBwZW5kQ2hpbGQoYXdhaXQgbWFya3MucmVuZGVyKCkpO1xuICAvL2RvY3VtZW50LmJvZHkuYXBwZW5kQ2hpbGQoYXdhaXQgbWFya3MyLnJlbmRlcigpKTtcbiAgXG59O1xuXG5cbnJ1bigpOyJdLCJuYW1lcyI6WyJjc3YiLCJIYW5kbGVyIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0VBQ0EsTUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDO0VBQ25CLE1BQU0sT0FBTyxHQUFHLFlBQVk7RUFDbkMsRUFBRSxNQUFNLElBQUksR0FBRyxNQUFNQSxNQUFHLENBQUMsTUFBTSxDQUFDLENBQUM7RUFDakMsRUFBRSxPQUFPLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO0VBQ3ZCLEVBQUUsT0FBTyxJQUFJLENBQUM7RUFDZCxDQUFDOztFQ05EO0VBQ0E7RUFDQSxNQUFNLElBQUksR0FBRyxTQUFTLENBQUM7RUFDaEIsTUFBTSxNQUFNLEdBQUc7RUFDdEIsRUFBRSxJQUFJLEVBQUU7RUFDUixJQUFJLE1BQU0sRUFBRSxLQUFLO0VBQ2pCLElBQUksU0FBUyxFQUFFLFdBQVc7RUFDMUIsR0FBRztFQUNILEVBQUUsS0FBSyxFQUFFO0VBQ1QsSUFBSSxhQUFhLEVBQUU7RUFDbkIsTUFBTSxRQUFRLEVBQUUsRUFB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