hagerka

@hagerka·4 public vizzes

Greenhouse Gas Producers - Map

This visualization maps greenhouse gas producers across the United States using a dot plot overlaid on an Albers USA projection. Each circle represents a facility, with its size and opacity scaled by reported 2020 direct emissions and its color indicating the state. The Vega-Lite API builds the mark encoding, while D3 loads the CSV data. Custom configuration adjusts axis and label styling with a dark theme.

Jun 2, 2022

Loading thumbnail…

Greenhouse Gas Producers - Bar Graph

This visualization presents a bar graph of greenhouse gas emissions by state for the year 2020, with each bar segmented by facility name and interactive tooltips revealing facility details. The chart uses the Vega-Lite API, built with `vl.markRect()` and encoding functions for the x-axis state field, y-axis emissions quantity, and color mapping by facility. Data is fetched asynchronously via D3’s `csv()` from a GitHub Gist, while the Vega tooltip handler and custom config adjust axis styling and text colors for improved readability.

Jun 2, 2022

Loading thumbnail…

Rendering Data with React - Pinwheel

This visualization renders a pinwheel of CSS named colors using React for the user interface and D3 utilities for data loading and arc generation. It fetches color data from a CSV file via `d3.csv`, then maps each row to an SVG `<path>` element with a fill color derived from the `RGB hex value`. The pinwheel shape is created by varying the `outerRadius` based on the index modulo 25, while angular slices are computed with a custom `pieArc` function using start and end angles proportional to the data length.

Jun 2, 2022

Loading thumbnail…

Making Sense of the Senseless

This visualization, titled “Making Sense of the Senseless,” displays U.S. mass shooting incidents as a bar chart of total victims per year, with bar colors encoding the shooter’s age. It uses the vega-lite-api to construct the chart, with d3.csv loading the dataset from a GitHub gist. The chart is rendered as an SVG via vega and vega-lite, with custom configuration for axis styles and tooltips enabled through vega-tooltip. The visualization emphasizes readability with a dark color scheme and large fonts.

May 27, 2022