A

afcchilders

@afcchilders·39 public vizzes

Loading thumbnail…

Fork of Scatterplot with Select

This interactive scatterplot displays the Iris flower dataset, allowing users to select which numerical attributes appear on the x- and y-axes via two dropdown menus. The visualization updates the scales and circles dynamically based on user choices, with axes and labels reflecting the selected measurements. Built with React and D3 v7, the code uses `scaleLinear` from `d3-scale` to map data values to screen coordinates and renders circles as SVG marks. The data is loaded asynchronously from a CSV file using `d3.csv`, with each point representing a flower sample.

Loading thumbnail…

Polished Scatterplot with Menus

This interactive scatterplot lets users explore the classic Iris flower dataset by using dropdown menus to select which measurements to plot on the X and Y axes. The visualization loads data via the `d3.csv` API and renders circles as SVG marks, with axis ticks generated through custom React components. The app, built with React hooks like `useState` and `useEffect`, uses `d3.scaleLinear` and `d3.extent` to map data values to pixel coordinates, while `d3.format` handles tick label formatting. Dropdown selection updates the chart state, redrawing positions and axis labels accordingly.

Loading thumbnail…

Fork of data into components 1122

This example presents a coordinated multi-view of the classic Iris dataset, allowing a user to highlight a quantitative and a categorical attribute via dropdown menus. The system dynamically renders one of three chart types: a scatter plot for two quantitative dimensions, a histogram for a single numerical dimension, and a dot plot overlaid with boxplots for a single quantitative variable grouped by a categorical one. Written in React with SVG for rendering, the visualization leverages D3 modules such as `scaleLinear`, `scaleBand`, `scaleOrdinal`, `bin`, and `quantile` to compute positions, bin data, and calculate statistical summaries. A "Activate Lasers" button toggles the visibility of the boxplot elements, demonstrating interactive control over chart layers.

Loading thumbnail…

Rendering data with React

A React application renders rows of colored bars from a dataset of CSS color names and their hex values, loaded via D3's `csv` function. The visualization uses React state and the `useEffect` hook to fetch and store the data, then maps each row to a `<div>` element styled with the corresponding background color. A second dataset, the Iris flower dataset, is also loaded and logged to the console, though it is not displayed. The page uses React 16.9, ReactDOM, and D3 v7, with SVG rendering available but unused.

Loading thumbnail…

Work on Data

This interactive scatter plot explores the Iris flower dataset, letting users select which quantitative measurements appear on the X and Y axes via dropdown menus. The visualization adapts to arbitrary tabular CSV data by programmatically detecting whether each column contains numeric or categorical values. The React-based app builds SVG axes with `d3.scaleLinear` and renders bubbles using `d3.csv` for data loading and custom React components for ticks and marks, with hover tooltips revealing exact values.

Loading thumbnail…

Fork of Scatter Plot with Colors

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between four measured attributes (sepal and petal length and width). Two dropdown menus control which numeric attributes are mapped to the x and y axes, dynamically updating the visualization. Color is not used for encoding; all points are rendered as teal circles. The visualization uses React for the interface and D3.js for data loading and scale computation (d3.csv, d3.scaleLinear, d3.extent, d3.format). SVG circles are mapped to data points, with mouse-over tooltips showing the exact x-axis value. The data is loaded client-side from a CSV file.

Loading thumbnail…

Fork of Fork of Scatterplot with Iris Data - cat input2

This interactive scatterplot displays Iris flower measurements, encoding sepal width on the y-axis and jittered sepal length on the x-axis, with species indicated by color. The visualization uses React and d3.v7 to render SVG circles, with the x-axis positioned by a categorical scale based on species and the y-axis showing sepal width. Data comes from a CSV of Iris measurements, parsed via d3.csv.

Loading thumbnail…

dropdown play

This visualization displays the Iris dataset, allowing users to dynamically select the X and Y attributes from dropdown menus. The interface presents two SVG panels: one showing static circles and the other empty, with a button that removes elements from the second panel when clicked. The code loads data using d3.csv, structures attribute types programmatically, and utilizes React with the react-dropdown component. Both SVG containers are rendered with React elements, and D3 v7 handles data processing while CSS styling applies to the marks.

Loading thumbnail…

data into components

This interactive scatterplot explorer visualizes the Iris flower dataset, allowing users to select which quantitative attributes to plot on the X and Y axes via dropdown menus. The visualization dynamically determines the appropriate statistical test (e.g., t-test, ANOVA, chi-squared) based on the data types of the selected variables, displaying the test type as a header. Built with React and D3 v7, the SVG rendering uses `scaleLinear` and `extent` for axis scaling, while data classification and parsing are handled through custom logic in `useData.js` using `csv` loading.

Loading thumbnail…

Fork of Histogram with Iris Data - Data Decoder - July18

This visualization displays the Iris dataset as a histogram, with bars representing the frequency of measurements for a selected attribute. Users can interactively choose which attribute to bin along the X and Y axes using dropdown menus, with bar colors indicating the three Iris species. The visualization renders as an SVG using React, with the D3 v7 library handling data loading, binning via `d3.bin`, and scale construction with `scaleLinear` and `scaleOrdinal`. The bars are drawn as `<rect>` elements, and circles overlay the bars at their right edges, providing a secondary visual mark.

Loading thumbnail…

Loading Data with React and d3

This example shows a React application that loads and renders a smiley face using SVG. The app tracks mouse movement and updates the position of a circle in real time, while also maintaining a click counter. It uses React hooks like `useState`, `useCallback`, and `useEffect` to manage state and side effects, with ReactDOM rendering the components. The SVG elements are drawn directly in JSX, and d3 is referenced for handling data loading in the broader context of the example.

Loading thumbnail…

Fork of Fork of Histogram with Iris Data - Data Decoder - Scatter

This interactive scatterplot uses the Iris flower dataset to explore relationships between sepal and petal measurements. Dropdown menus let viewers choose which quantitative attributes appear on the X and Y axes, with histograms overlaid on both axes showing the distribution of each selected variable. The visualization renders as SVG using React components and D3 v7's `scaleLinear`, `bin`, and `count` APIs, with points colored by species via `scaleOrdinal`. A button removes the X-axis histogram marks. Data loads asynchronously from a CSV file using D3's `csv` function.

Loading thumbnail…

NEW WORLD

This interactive scatterplot, built with React and D3 v7, visualizes the Iris flower dataset. Users can select different attributes for the X and Y axes from dropdown menus, and the view updates to show the distribution of data points. The visualization combines two histogram-based bar charts, one for each selected axis, overlaid with a scatterplot of individual flowers. The bars and circles are colored by species using an ordinal scale, and D3's `bin` and `scaleLinear` functions are used to compute the histogram and coordinate mappings.

Loading thumbnail…

Refactored bar chart

This example shows a horizontal bar chart of population data for the top 10 countries in 2020, sourced from a CSV file via `d3.csv`. The visualization is built with React components, using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis, rendered as SVG rectangles. The chart is refactored into modular functions for the axes and marks, with data loading handled by a custom `useData` hook that parses the population field.

Loading thumbnail…

Scatterplot with Iris Data

This scatterplot visualizes the Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis, with each flower’s species encoded by a circular mark. The React-based chart uses d3.scaleLinear for both axes, d3.extent to compute domains, and custom SVG axis components with tick labels formatted via d3.format. Data loads asynchronously through d3.csv, and each circle includes a native SVG title tooltip showing the sepal length value.

Loading thumbnail…

Fork of Loading Data with React and d3

This example demonstrates a React component that loads CSS color data from an external CSV file and displays a short summary of its contents. The interface shows a loading message while the data is being fetched, then renders statistics including the file size in kilobytes, the number of rows, and the number of columns. The code uses React hooks like `useState`, `useEffect`, and `useCallback` to manage the data-fetching lifecycle, with the `csv` function from d3.v7 retrieving the dataset from a GitHub gist. The `message` utility formats the summary using `d3.csvFormat` to calculate file size.

Loading thumbnail…

Fork of Scatterplot with Iris Data - cat input

This interactive scatterplot displays the classic Iris dataset with sepal length on the x-axis, sepal width on the y-axis, and species information as a categorical input. The visualization uses React components alongside D3.js v7, employing `scaleLinear` for continuous axes and `scaleBand` for categorical species positioning, though the band scale currently maps to the vertical range rather than a separate axis. SVG circles represent individual flowers, colored in teal, with native tooltips showing formatted values. The data loads asynchronously via D3's `csv` parser from a GitHub gist, and the axes are rendered as custom React components.

Loading thumbnail…

Histogram with Iris Data - Data Decoder

This interactive histogram visualizes the Iris dataset, allowing users to explore the distribution of any two flower measurements via dropdown menus. The chart displays overlapping colored bars for each species, with circles marking bin boundaries and midpoints. Built with React and D3 v7, it uses `d3.bin` for histogram generation, `scaleLinear` for axes, and renders SVG elements. Data loads from a CSV file containing sepal and petal dimensions for three iris species.

Loading thumbnail…

Histogram with Iris Data

This interactive visualization presents the distribution of sepal lengths in the Iris dataset using a histogram. Two layers of bins display frequencies, one as semi-transparent teal bars and another as orange bars with overlaid circular markers that add redundant encoding. The chart uses React with D3 v7 for data processing and SVG rendering. The `bin` function computes histogram bins, while `scaleLinear` and `scaleOrdinal` handle axes and color encoding. Data is loaded asynchronously from a CSV file via `d3.csv`.

Loading thumbnail…

Getting Headers

This visualization displays the distribution of iris flower measurements using a histogram with overlaid circles. The chart uses D3’s `scaleLinear`, `scaleOrdinal`, and `bin` functions to compute frequency counts, rendering bars and markers as SVG elements via React components. Data loads asynchronously from a CSV file through the custom `useData` hook, which parses numeric columns. Axes are generated with reusable `AxisBottom` and `AxisLeft` components, using D3’s tick generation and scale functions to position labels and lines.

Loading thumbnail…

Fork of Rendering data with React

This example demonstrates loading and rendering CSS color data from a CSV file. The React app fetches the dataset using d3.csv, displays a loading state while the data is being retrieved, and then renders the results. The visualization uses React 16.9 with hooks (useState and useEffect) to manage the asynchronous data loading, while d3.v7 handles the CSV parsing. The SVG output is rendered through ReactDOM into a root div element, following the pattern shown in the accompanying video tutorial on rendering data with React.

Loading thumbnail…

Sylized Bar Chart

This stylized bar chart displays the top 10 countries by population using data from the UN Population 2019 CSV. The horizontal bars are rendered as SVG rectangles, with country names along the y-axis and population values on the x-axis, formatted using D3's `format` function to convert values into billions. The chart uses React components for the axes and marks, with D3's `scaleBand` and `scaleLinear` for positioning, and includes a tooltip on each bar showing the population value via a native SVG `<title>` element.

Loading thumbnail…

Fork of Sylized Histogram

This example visualizes the population of the top 10 countries in 2020 as a horizontal bar chart. The code uses React to render SVG elements, with D3 v7’s `scaleBand` for the y-axis and `scaleLinear` for the x-axis, and formats tick labels using D3’s `format`. Data is loaded as CSV via `d3.csv` from the UN Population 2019 dataset. Tooltips display formatted values, while axes are custom-built using D3’s scale ticks.

Loading thumbnail…

Scatter Plot with Colors

A scatter plot of the Iris Dataset with interactive dropdown menus for selecting which flower attributes to plot on the X and Y axes. The visualization uses D3's linear scales for axis mapping, with React rendering the SVG circles and axes. Users can compare sepal and petal measurements across species, with tooltips showing exact values on hover. The chart includes labeled axes and a clean, minimalist design with Poppins typography.

Loading thumbnail…

RC Scatter Plot with Colors

This interactive scatter plot explores the classic Iris Dataset, allowing users to select which flower measurements (sepal length, sepal width, petal length, petal width) to plot on each axis via dropdown menus. Built with React and D3 v5, the visualization renders circles in SVG, with axes and tick marks drawn as React components using D3 scales and the `scaleLinear` function. Hovering over any point reveals its X-axis value as a tooltip, while the CSV data is loaded asynchronously through D3's `csv` method.

Loading thumbnail…

Interactive Color Legend

This interactive scatter plot displays the Iris dataset, plotting sepal length against sepal width. Users can hover over the color legend to highlight data points of a specific species, which fade all other points to 20% opacity. The visualization uses D3.js scales for positions and colors, rendered as SVG through React components. The legend is built using D3's `scaleOrdinal` domain mapping, with hover events managed by React's `useState` hook.

Loading thumbnail…

Scatterplot with Color Legend

This scatterplot visualizes the Iris flower dataset, plotting sepal length against sepal width with points colored by species. A color legend maps species names to distinct hues, while axis labels and tick marks provide scale context. Built with React and D3 v7, the example uses `scaleLinear` for positioning, `scaleOrdinal` for categorical colors, and custom reusable components like `AxisBottom`, `AxisLeft`, and `ColorLegend` to render SVG elements. Data is loaded asynchronously via `csv` from a remote URL.

Loading thumbnail…

Scatterplot with Color

This scatterplot visualizes the Iris flower dataset, mapping sepal length and width across the x- and y-axes while encoding species with a categorical color scale. Each point is an SVG circle rendered through React components, with axes built using custom `AxisBottom` and `AxisLeft` components that leverage `d3.scaleLinear` for positioning. The code loads the CSV via `d3.csv`, applies numeric parsing, and uses `d3.scaleOrdinal` to assign distinct colors to each species. Hovering reveals tooltips formatted with `d3.format` to abbreviate large numbers.

Loading thumbnail…

Fork of Smiley Face Part II

This example demonstrates a pet-selection interface built with React and D3. It displays a dropdown menu that lets users choose from six pet options, with the selected value managed through React’s `useState` hook. The UI uses a reusable `Dropdown` component that maps over option objects and triggers state updates via an `onSelectedValueChange` callback. The page loads D3 v7, React 16.9, and ReactDOM from CDNs, while the app logic in `index.js` renders the component hierarchy into a root element.

Loading thumbnail…

Working with Time

Working with Time shows temperature readings from a week in San Francisco as a smooth line chart. The visualization uses React to render SVG elements, with D3's `scaleTime` and `scaleLinear` mapping timestamps and temperatures to coordinates. A natural curve connects the data points, which are marked with small circles that display tooltips via SVG `<title>` elements. The CSV data is loaded with D3's `csv` function, while custom axis components and a `line` path generator with `curveNatural` handle the plotting.

Loading thumbnail…

Axes with React

This example shows a bar chart of the top ten countries by population in 2020, with vertical gridlines and horizontal x-axis tick labels created manually using React JSX elements rather than D3’s axis component. The y-axis uses d3.scaleBand for country names, while d3.scaleLinear maps population values to bar widths. Data is loaded as CSV from a GitHub gist using d3.csv, and the visualization renders as SVG in a React component with d3.v7.

Loading thumbnail…

Margin Bar Chart

A margin bar chart displays the top 10 countries by 2020 population, with horizontal bars ranking the data from the UN Population dataset loaded via `d3.csv`. The React component uses `useState` and `useEffect` to fetch and parse the CSV, then renders an SVG with `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the numerical population axis. Fixed margins position the plot area within a 960x500 viewport, and each bar is drawn as an SVG `rect` whose width is scaled by the population value. The chart updates after the data loads, showing a simple loading state beforehand.

Loading thumbnail…

Bar chart

This bar chart displays the top 10 countries by population for 2020, using horizontal rectangles whose widths are proportional to each country’s population. The visualization is built with React and D3 v7, leveraging `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded asynchronously from a CSV file via `d3.csv`, filtered to the first ten rows, and rendered as SVG `<rect>` elements. The chart updates reactively once the data arrives, showing a loading message initially.

Loading thumbnail…

Fork of Rendering data with React

This example visualizes CSS color names as a pie chart, with each wedge filled using its corresponding RGB hex value. The visualization loads data from a CSV file containing named CSS colors, then maps each color to a slice of the pie using the `d3.arc` generator. React manages the component state and rendering, while D3’s `csv` function asynchronously fetches and parses the data. The pie chart is drawn as SVG paths within a React component, with the arc angles calculated proportionally based on the data array’s length.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization shows the distribution of religious populations across countries using a bubble chart, with circle size encoding population quantity and tooltips revealing exact values. The chart is built with the Vega-Lite API, which wraps Vega and Vega-Lite to generate an SVG rendering. The code imports data from a CSV file using D3's `csv` function, then configures axes, tooltips, and a dark color scheme for readability. The visualization occupies the full viewport and updates its size dynamically based on the window dimensions.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using D3’s `d3.csv` method. It displays a summary of the dataset in a large monospace font, showing the approximate file size in kilobytes, the number of rows, and the number of columns. The data source is a CSV file of CSS named colors hosted on GitHub Gist. The code uses `d3.csvFormat` to calculate the data size and accesses the parsed array’s `length` and `columns` properties.

Loading thumbnail…

Mouse Follower

A static smiley face fills the browser window, centered and sized to the viewport’s width and height. The face comprises a yellow circle with a thick black stroke, two small black eyes, and a curved mouth implied by the circle’s lower edge. The example demonstrates React’s declarative approach to SVG rendering, using ReactDOM to mount a component that directly outputs SVG elements like `<circle>` and `<g>` with transforms, without any dynamic interaction or mouse tracking.

Loading thumbnail…

Smileyface part 1

A grid of eighteen independently styled smiley faces, each rendered as an SVG with a yellow circular face, black stroke, two eyes, a red nose, and a curved mouth. The faces are generated in React, with random values for eye radius and nose radius set via `Math.random()`. The mouth shape is created using D3's `arc` generator, while reusable React components like `BackgroundCircle`, `Eyes`, and `Nose` compose the face structure inside a shared `FaceContainer`.

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of "Let's Make a Face Part I" is an SVG drawing of a simple yellow smiley face, composed of three circular shapes: a large outlined head and two smaller unfilled eyes. The code draws the shapes directly in HTML using inline SVG elements, setting explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes for each circle. It demonstrates basic static vector graphics layout, centering the head at (480, 250) within a 960 by 500 viewport, with the eyes positioned symmetrically around that center. No interactivity or dynamic behavior is present.