Chris Fritz

@Christopher-Fritz-i2·7 public vizzes

Transaction Analysis with Time (Hopefully)

This visualization pairs a scatter plot of transaction amounts by category with a time-series view of the same data, enabling linked filtering through interval and point selections. The top chart plots logged amounts against categories, while the bottom chart displays amounts over time from a CSV file of personal financial transactions. Built with Vega-Lite and D3, the charts use cross-filtering to highlight correlated selections, with tooltips showing amount, description, date, credit/debit status, and category.

Jun 20, 2022

Loading thumbnail…

Transaction Analysis with Time

A financial dashboard combines a temporal scatter plot and a time-series bar chart to analyze personal transactions, with linked selections across both views. The upper chart displays credit/debit amounts over time, while the lower plot correlates category, amount, and date. Built using D3.js v7 and Vega-Lite API within React, it renders via the `vl.vconcat` layout, reads CSV data from a GitHub gist, and includes interactive interval and point selection parameters for coordinated filtering.

Jun 6, 2022

Loading thumbnail…

Fork of Menus with React

This example demonstrates two interactive dropdown menus for selecting X and Y values from a fixed set of pet options. Built with React 16.9.0, it uses the `useState` hook to manage the selected value, which is shared by both dropdowns. The reusable `Dropdown` component renders a native `<select>` element, updating the state via `onSelectedValueChange` whenever the user changes a selection. The console logs the currently chosen value.

Jun 3, 2022

Loading thumbnail…

Fork of Project Data Science

This visualization displays a linked view of personal financial transactions, with a scatterplot showing the amount and date of each transaction and a bar chart aggregating the total per transaction type. The displays are linked through interactive selections, where a brush or click on either chart filters the other. The chart uses the vega-lite API to build specifications from data fetched from a CSV file with d3.csv, and employs selectInterval and selectPoint parameters to create the interactive data queries.

May 17, 2022

Loading thumbnail…

Fork of Fatal Police Shootings In the U.S. Since 2015

This interactive visualization maps fatal police shootings in the U.S. since 2015, overlaid on state boundaries projected with `d3.geoAlbersUsa` and rendered as SVG paths. Users can colorize the points by attributes like race, gender, or threat level via a React dropdown, and hover over the ordinal color legend to fade unrelated points. A bar chart using `d3.scaleBand` and `d3.scaleLinear` shows event counts per selected category. Data comes from the Washington Post’s CSV, parsed with `d3.csv`, while state geometries load via `d3.json` and `topojson.feature`.

May 17, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes personal financial transactions as a scatter plot, with transaction dates on the x-axis and amounts on a logarithmic y-axis. The point size encodes the transaction amount, while tooltips reveal description, amount, and category details. Built with the Vega-Lite API, it registers Vega and Vega-Lite with a custom configuration that darkens labels and titles for improved readability. Data is loaded asynchronously from a remote CSV using d3.csv, and the visualization is rendered as an SVG that fits the full browser window.

May 16, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This is a React-based fork of a smiley face visualization, implemented with SVG. The app uses the `react` and `react-dom` libraries, along with the `window.innerWidth` and `window.innerHeight` properties to make the graphic responsive to the browser viewport. It draws a yellow circle with a black stroke for the face, and two smaller circles for eyes, all centered via a `transform` translation. The code also defines variables for facial features, though the mouth is not rendered in the final output.

May 11, 2022