Skip to main content
SimilarExport ZIP
100%

Vega-Lite API: NACRO Survey Data

✓ Published7🌍 Public
CCurran Kelleher
Last edited Sep 16, 2019
Created on Sep 16, 2019

This visualization displays the distribution of survey responses by age, with bars colored by gender, using a bar chart. It is built with the Vega-Lite API, which registers Vega, Vega-Lite, and Vega-Tooltip to render the chart as SVG. The data is loaded asynchronously from a CSV file of NACRO member survey responses using d3.csv, and the chart dimensions adapt to the window size. A custom config object styles the axes and text with darker colors for readability.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite API: NACRO Survey Data

This chart visualizes NACRO membership distribution by age, with results from the NACRO Member Survey rendered as a bar chart of participant counts per age category. Built with the Vega-Lite API, it uses `markBar`, `x().fieldN('Age')`, and `y().count()` to encode the data, while D3’s `csv` function loads the remote survey dataset. The visualization is generated as SVG, with the display size fitted to the viewport and a custom configuration adjusting font sizes and axis styling for improved readability.

JJCarpenter-WPI
94% match
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
79% match
Loading thumbnail…

Vega-Lite API Template

This bar chart displays population by country from a 2015 dataset, using Vega-Lite’s API to build the visualization with horizontal bars sorted by value. The code loads CSV data via `d3.csv`, configures axes and styling through a custom config object, and renders SVG using vega-lite and vega-tooltip for interactive hover details. The example demonstrates programmatic chart construction and React state management for handling asynchronous data.

Hhamzavg
78% match
Loading thumbnail…

Vega-Lite API Template

This example shows a stacked bar chart of population by country, colored by religion, using a Vega-Lite specification written in JavaScript. The visualization queries data from a CSV file hosted on GitHub, loads it via `d3.csv`, and renders with an SVG backend. It demonstrates the vega-lite-api library’s fluent encoding methods, along with vega-tooltip for interactive hover details, and custom axis and label styling from a shared config object.

CCurran Kelleher
77% match
Loading thumbnail…

Vega-Lite API Template

This example renders an interactive bar chart of population by country for 2015, using data from a Gist CSV file. It visualizes the rank-ordered values with a dark theme and custom axis styling. The visualization is built with the Vega-Lite API, which composes specifications programmatically in JavaScript, integrated with Vega and Vega-Lite libraries. It also uses D3’s `csv` loader for data ingestion, and Vega Tooltip for hover interactions, with the chart fitted to the full viewport.

TTengHoo3
76% match
Loading thumbnail…

Vega-Lite API Template

This example presents a horizontal bar chart of population by country, with bars colored by religion and tooltips displaying the religion attribute. It is built using the Vega-Lite API along with Vega, Vega-Lite, and D3’s CSV loader, rendering to SVG via Vega’s view system. The chart fetches data from a GitHub-hosted CSV file and configures axes and label styling through a shared configuration object.

Aazharahmad0
76% match
Loading thumbnail…

Vega-Lite Bar Chart

This bar chart visualizes population by country for 2015, using the Vega-Lite grammar to map countries to the x-axis and population to the y-axis. Built with the `vega-lite-api` and rendered via the `vega` and `vega-lite` libraries, it loads data from a CSV file using `d3.csv` and displays interactive tooltips via `vega-tooltip`'s Handler. The chart is styled with a custom config for improved readability.

Bbakstorage00001
76% match
Loading thumbnail…

Vega-Lite API Template

This example shows a bar chart of religious demographics by country, with each bar colored by religion and tooltips revealing population counts. The visualization is built using the Vega-Lite API, which wraps the higher-level vl.encode patterns for declarative chart specification. The code uses `vl.markBar()` with `vl.x()`, `vl.y()`, `vl.color()`, and `vl.tooltip()` to define the visual channels, while data is loaded via `d3.csv` from a remote URL. The chart renders as SVG, with custom axis and label styling configured through the `config` object and displayed in a full-window view.

AAnthony Ynami
76% match