KariChung

@KariChung·3 public vizzes

[Vega-Lite] 3.3 Area Chart

This area chart shows the daily closing price of the S&P 500 index over time, with a filled region beneath the line to emphasize the trend in price levels. The visualization is implemented using Vega-Lite v5, with the `area` mark and a temporal x-axis encoding for the date and a quantitative y-axis for price. Data is loaded remotely from a CSV file hosted on GitHub, and the chart is rendered in an HTML page via the Vega library, which parses the specification and draws the result.

Mar 18, 2023

Loading thumbnail…

[Vega-Lite] 3.3 Area Chart

This area chart displays the S&P 500 index price over time, with the date on the temporal x-axis and price on the quantitative y-axis. The visualization is rendered using Vega-Lite’s `area` mark, defined in a JSON specification that loads data from a CSV file hosted on GitHub. The code embeds the chart into an HTML page using `vegaEmbed`, which processes the specification with the Vega and Vega-Lite libraries.

Mar 18, 2023

Loading thumbnail…

[Vega-Lite] 3.2 Line Chart

This line chart visualizes the daily closing price of the S&P 500 index over time, using a temporal x-axis and quantitative y-axis. The visualization is built with Vega-Lite, whose specification defines the data URL, a simple line mark, and the field mappings. The chart is embedded into an HTML page via vega-embed, which loads both Vega and Vega-Lite from CDN. The underlying data is fetched directly from a hosted CSV file containing date and price columns.

Mar 18, 2023