coltonjcox92

Pokemon Base Stats

A horizontal strip of circles displays Pokemon base stats, with the size of each circle proportional to the total stat sum. Hovering reveals a tooltip with individual HP, attack, defense, special attack, special defense, and speed values. The visualization sorts Pokemon by their total in descending order and encodes their primary type with a solid color, while dual-type Pokemon use a linearGradient that blends both types. The code loads a CSV, processes numeric fields, and renders the static SVG layout without a force simulation, using `d3.csv`, `d3.scaleLinear`, and mouse event handlers for the tooltip.

Mar 18, 2023

Working With Time

This example shows a scatter plot of temperature readings over one week in San Francisco. Time is plotted on the x-axis using d3.scaleTime, while temperature appears on the y-axis with d3.scaleLinear. The SVG rendering displays a blue path connecting data points, with individual circles that reveal the day of the week as a tooltip via a native `<title>` element. Data loading relies on d3.csv and React’s useEffect hook. Axes are built from custom React components using d3’s tick generation and timeFormat for weekday labels.

Feb 5, 2022

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using United Nations World Population Prospects 2019 data, sorted by population with blue bars and a "Population" axis label. It is rendered as SVG through React, using D3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the x-axis, and `format` to convert population values into abbreviations like "1.4B". The chart includes custom `AxisBottom` and `AxisLeft` components that render ticks, gridlines, and labels, with a tooltip on each bar showing the formatted population value via a native SVG `<title>` element.

Feb 5, 2022

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis. The React-based implementation uses d3.scaleLinear for both axes and renders circles as SVG marks with native tooltips. Styling applies a Montserrat font, light gray grid lines from custom axis components, and blue circles with a fixed radius. Data is loaded asynchronously via d3.csv and parsed into numeric fields before scaling.

Jan 30, 2022

Refactored Bar Chart

A bar chart from D3 v5 displays the top 10 most populous countries using React primitives, rendering country names and population values as SVG elements. Data comes from the United Nations World Population Prospects 2019. The chart refactors typical D3 components into separate React modules for axes and marks, using `scaleBand` and `scaleLinear` for positioning, with the `Marks` component drawing rectangles.

Jan 30, 2022

Axes with React & D3

This example shows the top 10 most populous countries as a horizontal bar chart. React manages the component state and SVG rendering, while D3 provides the scales and data loading. The chart maps country names to a `scaleBand` for the y-axis and population values to a `scaleLinear` for the x-axis. Ticks for both axes are manually generated using `xScale.ticks()` and the domain of the y-scale, with population data sourced from the United Nations World Population Prospects 2019 CSV via `d3.csv`.

Jan 30, 2022

The Margin Convention

This example presents the top 10 most populous countries as a bar chart, deliberately omitting axes and labels to highlight the importance of margins in visualization layout. Built with React and D3 v5, it uses `scaleBand` for the y-axis positioning and `scaleLinear` for bar widths, with data from the United Nations World Population Prospects 2019. The SVG rendering applies a 20-pixel margin on all sides via a translated `<g>` element, demonstrating how padding frames the chart area. The visualization intentionally looks incomplete to emphasize that proper margins are a foundational convention for readable charts.

Jan 28, 2022

United Nations Population Prospects Data Viz

This interactive bar chart displays the top ten most populous countries in 2020, based on data from the 2019 United Nations Population Prospects, loaded via a CSV file. The visualization uses React hooks to fetch and manage the data, while D3’s `scaleBand` and `scaleLinear` position and size each rectangular bar within an SVG canvas. The chart renders directly in the browser, with country names on the y-axis and population values mapped to bar widths.

Jan 28, 2022

Fork of Pathetic Bar Chart

This fork of the Pathetic Bar Chart displays the ten most populous countries using population data from the United Nations World Population Prospects 2019. The visualization renders horizontal bars without axes or labels, using React for component structure and d3.scaleBand and d3.scaleLinear to map countries and populations to SVG rectangles. The data is loaded asynchronously via d3.csv and limited to the first ten rows. The chart updates from a loading state to the final graphic once the dataset is fetched and parsed.

Jan 27, 2022

Fork of Rendering data with React

This visualization displays all named CSS colors as equal-sized slices in a full circular pie chart, with each slice filled with its corresponding hex color value. Built with React and D3 utilities, the program fetches color data from a CSV file using `d3.csv` and renders the chart as SVG paths. It uses a D3 arc generator (`d3.arc`) to compute the path geometry, while the React component manages state and maps the data to SVG `<path>` elements after processing the API response.

Rendering data with React

A range of CSS named colors is displayed as horizontal stripes in a full-width column, each stripe labeled by its color name. The example uses D3's `csv` method to fetch `cssNamedColors.csv`, which provides the color names and their RGB hex values. React manages the application state with hooks like `useState` and `useEffect`, conditionally rendering a loading message before mapping the data to styled `div` elements. This demonstrates integrating D3 data loading with React component rendering.

Loading Data with React and D3

This example shows how React state manages asynchronous data loading from a CSV file of CSS color names. The app displays a text summary indicating the file size in kilobytes, row count, and column count. Using React’s `useState` and `useEffect` hooks, it calls `d3.csv` to fetch the remote dataset and stores the parsed result in state. While loading, the interface shows “Loading…”; once resolved, it passes the data to a helper function that computes the statistics using `d3.csvFormat`. The visualization renders as plain text within a `<pre>` element.

Displaying CSS Colors

This example demonstrates how to load a CSV file of CSS named colors into a web page, then display the file size in kilobytes, the number of data rows, and the number of columns. The visualization relies on D3.js v7 utilities such as `d3.csv` for fetching and parsing the data and `d3.csvFormat` for measuring the raw text length. The resulting numeric message is rendered in a large `<pre>` element, with React state management implied by the application structure.

Mon Defense by Type

This scatterplot maps Pokémon types and their defensive stats, with each circle representing a creature positioned by primary type on the x-axis and HP on the y-axis, while circle size encodes total stat sum and color repeats the type category. Tooltips reveal individual names. The visualization uses vega-lite-api to construct the specification, d3.csv for data loading, and vega-tooltip for interaction, with data sourced from a remote GitHub gist.

Jan 25, 2022

Mon Scatter Comp

A scatter plot of Pokémon compares Attack against Speed, with point size encoding total stats and color encoding primary type, plus tooltips revealing names. Built with vega-lite-api and d3, it loads CSV data from a GitHub gist, renders as a full-window SVG, and applies a custom dark-themed config for readability.

Jan 25, 2022

Vega-Lite API Pokedamage

This example visualizes Pokémon move statistics by plotting Base Power against Accuracy, with color encoding by move Type and tooltips revealing the move names. The scatterplot uses Vega-Lite API’s markSquare encoding to map quantitative fields and a nominal color field, adjusted to fit the browser window. Data is loaded asynchronously from a CSV URL via d3.csv, while axes and label styling are customized through Vega-Lite configuration options to improve readability.

Jan 25, 2022

Fork of Vega-Lite API Template

This example visualizes the relative populations of religious groups across countries using a bubble chart. Circles are positioned along categorical axes for country and religion, with circle size encoding population magnitude. The visualization is built using the Vega-Lite API, which compiles specifications to Vega and renders with SVG via D3. Data is loaded asynchronously using D3’s `csv` function from a gist. Custom axis styling and a dark label color improve readability, and a tooltip displays the population value when hovering over a circle.

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data, using the Vega-Lite API abstraction over the Vega and Vega-Lite libraries. The visualization encodes vehicle weight and horsepower on the x and y axes, with color mapping to origin and point size reflecting miles per gallon. Data is loaded asynchronously from a CSV via d3’s csv method. The API’s programmatic interface constructs the mark specification, while a custom config enhances readability.

Fork of Loading and Parsing CSV data

This example displays loading and parsing results of a remote CSV file, showing the file size in kilobytes, row count, and column count in a large text output. It uses `d3.csv` to fetch and parse the data, then `d3.csvFormat` to compute the formatted string length for size estimation, with the final message rendered as plain text in a `<pre>` element. The data source is a CSS-named-colors gist from the author’s GitHub. A commented-out alternative implementation using `fetch` and `d3.csvParse` is also included.

Fork of CJC Let's Make a Face

A grid of 18 smiley faces demonstrates reusable React components for data-driven SVG visualization. Each face combines a background circle, two eyes with pupils, and a mouth arc, with randomized dimensions for eye radius, pupil radius, and mouth width. The code builds the faces using React components like `Face`, `BackgroundCircle`, and `Eyes`, while the mouth path is generated with the d3.arc API. The SVG container uses a transformed group element to position each face at its center coordinates.

Mouse Follower

A circle rendered as an SVG element follows the mouse cursor in real time. The React application tracks the pointer’s coordinates through the `onMouseMove` event on the SVG canvas and updates the circle’s `cx` and `cy` attributes accordingly. The visualization uses React’s `useState` hook for state management and `useCallback` for the event handler, with the SVG width and height fixed at 960 by 500 pixels.

Jan 22, 2022

Loading and Parsing CSV data

This example demonstrates how to load and parse CSV data from a remote URL using the Fetch API. It fetches a text file containing CSS named colors from a GitHub gist and logs the raw contents to the browser console. The code defines an asynchronous `fetchText` helper that retrieves the resource and converts the response to text, then calls it with the CSV URL. No visualization is rendered; the example focuses solely on the data-loading and parsing workflow.

Jan 22, 2022