Vega-Lite API: NACRO Survey Data

Vega-Lite API: NACRO Survey Data

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.

CCurran Kelleher

94% match

NACRO Membership by Region

This bar chart shows the number of NACRO member institutions per region, using a count aggregation on the REGION field. The visualization is built with Vega-Lite and rendered through the vega-lite-api library, with data loaded asynchronously from a CSV file using d3.csv. The chart employs a custom configuration that disables axis domain lines and adjusts label and title font sizes for improved readability, while the view is fit to the full window dimensions.

79% match

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

77% match

NACRO Membership by Office Type with Menus

This interactive bar chart visualizes NACRO membership counts by office type, filtered through three dropdown menus for enrollment size, Carnegie classification, and public/private status. The visualization uses React for the interface and d3-scale for axes and bar positioning, rendering as SVG. Data comes from the 2018 NACRO member survey, with counts aggregated from the CSV source. The dropdowns filter the displayed data, though the filtering logic in the provided code is incomplete, with the chart currently showing fixed counts up to 82.

76% match

NACRO Membership by Office Type with a Menu

This interactive bar chart shows NACRO membership counts by office type, filtered by institutional enrollment category through a dropdown menu. The React-based visualization uses D3 v5 scales (scaleBand, scaleLinear) to render SVG rectangles, with axes built from custom AxisBottom and AxisLeft components. Data comes from the 2018 NACRO member survey, loaded via d3.csv, and the menu selection updates the x-value attribute for the displayed bar lengths.

NACRO Members by Office Type

This bar chart displays the number of NACRO members by office type, using horizontal bars sorted by category. The visualization uses React with D3 v5, rendering SVG elements through scaleBand and scaleLinear to position bars and axes. Member counts come from the NACRO Member Survey 2018-2019 dataset, loaded via d3.csv. Tooltips appear on hover using the SVG title element, while custom AxisBottom and AxisLeft components build the tick marks and labels.

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

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.

Llscholz1