Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Sep 5, 2022

Created on Sep 1, 2022

A bar chart displays Finnish crime statistics from 2019 and 2020, sourced via a StatFin API request filtered by court, crime group, and appellant. The visualization uses Vega-Lite API for encoding, with `vl.markBar` for bars and `vl.y().fieldQ('name')`/`vl.x().fieldN('age')` mappings. Data is fetched asynchronously with d3.csv and d3.json, though the chart ultimately plots sample JSON objects with names and ages rather than the fetched statistics. Custom styling includes dark axis labels and enlarged fonts via a config object.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API Template

A bar chart displays the number of convictions for each age group, sorted in descending order by age. The visualization is built using the Vega-Lite API library, which programmatically constructs the chart specification via `vl.markBar()`, `vl.x()`, and `vl.y()`. Data is loaded asynchronously from a CSV URL using `d3.csv`. The chart renders with Vega-Lite's SVG renderer, and hovering triggers a tooltip via the `vega-tooltip` handler. Appearance is customized through a shared config object that removes axis domains and adjusts tick colors, label sizes, and dark text styling.

Llscholz1

81% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a bar chart of population by country for 2015, with countries sorted in descending order along the x-axis. It uses the Vega-Lite API to define the bar marks and encodings, and renders the visualization through a custom D3-based setup in `index.js` that loads data from a CSV URL via d3.csv. The chart leverages vega, vega-lite, and vega-lite-api libraries, with a custom dark-themed configuration for axes and labels, and automatically sizes itself to the full window.

Mmavercikalvin

80% match

Loading thumbnail…

Vega-Lite API Template

This example presents a bar chart of prisoner convictions, showing the number of convictions for each offense category, sorted in descending order. Using the Vega-Lite API—built on Vega, Vega-Lite, and D3—the visualization renders data loaded via `d3.csv` from a GitHub-hosted CSV file. The chart is automatically sized to fit the browser window and incorporates custom axis, label, and title styling from a separate configuration object, along with a tooltip displaying exact conviction counts.

Llscholz1

79% match

Loading thumbnail…

Vega-Lite API Template

This example visualizes the relationship between country and year using a bar chart, where each bar’s length encodes the year value, sorted in descending order. It processes data from a TSV file, calculating a burglary-per-capita metric and filtering out low values before rendering. The visualization is built with the Vega-Lite API, using `vl.markBar` and `vl.y().fieldQ` for encoding, while D3’s `tsv` loader fetches the dataset. A custom configuration adjusts axis fonts and colors for readability.

DdaojunL

79% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example renders a bar chart of population by country for 2015, using data loaded from a CSV file via d3’s `csv` function. The visualization is built declaratively with the Vega-Lite API, which is registered with Vega and Vega-Lite libraries in `index.js`. The chart uses `markBar` with encoding for country on the x-axis and population on the y-axis, and a tooltip for country names. Appearance is customized through a config object, and the chart resizes to fit the browser window.

MMd Rizabul

78% match

Loading thumbnail…

Fork of Vega-Lite API Template

A scatter plot visualizes terrorist reports from April 2003, encoded by date and threat level, with points colored by agency (CIA) and tooltips revealing detailed notes. The visualization is built using the Vega-Lite API, with `vl.markCircle` for marks and `vl.x`, `vl.y`, `vl.color`, and `vl.tooltip` encodings. Data is loaded from a CSV file via `d3.csv`, and interactive tooltips are provided through vega-tooltip. The chart resizes to the window and uses a custom dark theme defined in `config.js`.

BBrian Olczak

78% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a bar chart of population by country for 2015, with tooltips displaying the population values. The visualization is built using the Vega-Lite API, which programmatically defines a markBar encoding with a categorical x-axis sorted by value and a quantitative y-axis. Data is loaded asynchronously via d3.csv from a Gist-hosted CSV file, and the chart is rendered as SVG through the Vega runtime. The code customizes axis and label styling via a config object and fits the chart to the browser window dimensions.

DDavid Beales

77% match

Loading thumbnail…

Fork of Vega-Lite API Template

This fork of a Vega-Lite API template displays a bar chart of fire counts by type, using data loaded from a CSV file via D3’s `csv` method. The visualization is built with the Vega-Lite API, registering Vega and Vega-Lite libraries, and renders to SVG with a custom dark theme and tooltip support from Vega-Tooltip. The chart fills the browser window and logs the first data row to the console for inspection, though the specific dataset source is the UCI Auto MPG repository.

SShiya

77% match