lscholz1

@lscholz1·7 public vizzes

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.

Apr 26, 2020

Loading thumbnail…

ILINet Flu Surveillance Data

This chart displays the national ILI total flu cases per week from 2015 to 2019, with each year drawn as a separate line to facilitate year-over-year comparison. The ordered color encoding (darker means more recent) makes it easy to distinguish the annual trends. It is built using the vega-lite-api and vega-lite, with data loaded from a CSV file via d3.csv. The aggregator sums ILITOTAL per region and week, and the plot supports tooltips for detailed data inspection.

Apr 26, 2020

Loading thumbnail…

Vega-Lite API Template

A scatterplot of age against number of convictions displays a dense, overlapping point cloud. Built with the Vega-Lite API, it composes the chart declaratively via `vl.markPoint` and `vl.encode`, then renders to SVG through vega and vega-lite. D3’s `csv` loads the dataset from a GitHub gist. A custom config sets dark labels on light-gray axes, with semi-transparent, filled points sized at 900 and tooltips showing age.

Apr 26, 2020

Loading thumbnail…

Vega-Lite API Template

This example visualizes the population of countries in 2015 using a bar chart, with countries sorted in descending order of population. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries, and uses D3’s `csv` loader to fetch the dataset from a GitHub gist. The chart renders in an SVG view, with a tooltip from `vega-tooltip` to display population values on hover, and uses a custom config for axis and label styling.

Apr 26, 2020

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.

Apr 26, 2020

Loading thumbnail…

Vega-Lite API Template

This example renders a scatterplot of individual-level data, plotting age against the number of convictions, using the Vega-Lite API. The visualization is built with the `vega-lite-api` library, which wraps Vega-Lite specifications in JavaScript, and relies on D3’s `csv` loader to fetch data from a GitHub gist. Circle marks are configured with size and opacity, and scales disable zero baselines for both axes. The chart’s appearance is customized through a config object, and the final SVG output is generated with Vega.

Apr 26, 2020

Loading thumbnail…

Scatter Plot with Small Points

This scatter plot visualizes the relationship between engine displacement and horsepower for a sample of automobiles. The small, solid points are rendered without strokes, with tooltips displaying the vehicle name on hover. Built using the vega-lite-api specification, the visualization loads data from a CSV file via d3.csv and renders through Vega-Lite’s SVG renderer. Axes and labels are customized in a separate config file, with the chart fitting the full window dimensions.

Apr 26, 2020