t_tannenbaum@coloradocollege.edu

@JTTannenbaum·8 public vizzes

line Chart Vega-Lite API Template

This visualization uses the Vega-Lite API to overlay two area charts tracking economic and military aid to Israel over time, filtered to values above ten million constant dollars. The charts plot Fiscal Year on the x-axis and Constant Dollar Amount on the y-axis, with blue and red semi-transparent areas distinguishing aid categories. Data is loaded via d3.csv from a GitHub-hosted CSV file, and the rendered SVG view includes tooltips and a titled legend. The example demonstrates layering marks with `vl.layer`, encoding time and quantitative fields, and customizing axes and typography through a config object.

May 13, 2024

Loading thumbnail…

Fork of Racing Bar Chart Animation Test

A racing bar chart animates six ranked entries—alpha through foxtrot—as their values incrementally grow by ten meters per tick. The React component uses a custom `useInterval` hook to trigger state updates every 750 milliseconds, while D3's `scaleBand` and `scaleLinear` position bars and labels. Each transition runs over 750 milliseconds via `transition.attr`, re-sorting the array by value before rendering. The visualization highlights dynamic ranking changes and iterative data updates within an SVG canvas.

May 10, 2024

Loading thumbnail…

Fork of React Starter

This fork of a React starter demonstrates a real-time, interactive particle system rendered on an HTML canvas. It uses `d3.forceSimulation` to manage particle physics, with forces like charge and collision driving movement across the viewport. The `useRef` and `useEffect` React hooks manage the animation loop, continuously updating the canvas via `requestAnimationFrame`. The display shows a dense cluster of small circles that slowly dissipates and re-forms based on the configured force parameters, providing a live example of force-directed layout in a React component.

May 9, 2024

Loading thumbnail…

Fork of Responsive Bar Chart

This example presents a racing bar chart that animates changes in foreign aid allocations over time, using a responsive design that adapts to screen size. The visualization relies on D3 v7 to bind data, update bar dimensions, and orchestrate transitions between states. It uses `d3.interval` to cycle through dataset years, while `transition` and `duration` handle the smooth movement of bars as values shift. The bars are scaled using `d3.scaleLinear` and `d3.scaleBand`, with axis updates driven by `d3.axisBottom` and `d3.axisLeft`. Data originates from an external CSV loaded via `d3.csv`, and the layout recalculates on window resize via `d3.select` event handlers.

May 9, 2024

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes foreign assistance expenditures over time, plotting each record as a semi-transparent circle with fiscal year on the x-axis and constant dollar amount on the y-axis, colored by assistance objective and revealing tooltips on hover. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip, loads CSV data from a GitHub repository via D3’s `csv` function, and uses `vl.markCircle` with `encode` mappings to configure the visualization. The code sets a fixed circle size, applies a custom dark-themed config, and renders the chart as SVG, fitting it to the full browser window.

May 9, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data using D3 v5 within a React framework. It fetches a remote CSV file containing Israel Detail Aid data and displays the file size in kilobytes, row count, and number of columns in a large text element. The code primarily uses `d3.csv` with a promise-based `.then()` handler, while alternative approaches using `fetch` with `async`/`await` and `d3.csvParse` are included as commented-out sections. The visual output focuses on textual statistics rather than chart rendering.

May 8, 2024

Loading thumbnail…

Fork of Simple Bar Chart

This fork of the Simple Bar Chart example visualizes the top 10 most populous countries on Earth as of January 1st, 2024. The bar chart uses D3 scaleBand for categorical x-axis positioning and scaleLinear for the numeric y-axis, with each bar’s height encoding the population value. The code imports data from a raw CSV file hosted on GitHub and applies an inner rectangle fill for chart background styling. Axes and labels are rendered using D3’s axis functions and the @curran/axis-labels library, making the chart a straightforward adaptation of the original template to new data.

May 8, 2024

Loading thumbnail…

Fork of Second Draft DATA VIZ

This example combines a choropleth map of world countries with a scatter plot of data points for Israel, using two separate SVG canvases. The map encodes the `current_amount` attribute with a green-to-grey color scale, while the scatter plot maps `Fiscal Year` and `current_amount` to x and y positions, with point radius scaled by `constant_amount` and colors from an ordinal palette. The code uses `d3.geoEqualEarth` and `d3.geoPath` for map projection and rendering, `d3.scaleLinear` and `d3.scaleOrdinal` for visual channels, and a tooltip div for interactivity.

May 7, 2024