J

jackcaldwellnichols

@JackCaldwellNichols·21 public vizzes

Loading thumbnail…

Styled Scatter plot WITH COLOUR

This styled scatter plot visualizes the Iris dataset, mapping sepal length and width along the x- and y-axes while encoding species with a categorical color scale. The React-based SVG rendering uses d3.scaleLinear for axes, d3.scaleOrdinal for the three-color species palette, and custom axis components. Interactive tooltips appear on hover via SVG `<title>` elements. The chart is built with d3.v7 and React 18, reading the dataset from a remote CSV file.

Loading thumbnail…

Scatter plot with colour

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across flower species. Two dropdown menus dynamically select which numeric attributes appear on the x and y axes, with the chart updating through React state management. The visualization uses d3.scaleLinear for both axes, d3.extent for domain calculation, and renders SVG circles through a reusable Bars component. Data loads asynchronously via d3.csv from a remote gist, with axis ticks styled through CSS classes and formatted using d3.format.

Loading thumbnail…

Polished scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, allowing users to choose which measurements appear on the x and y axes via dropdown menus built with ReactDropdown. The SVG chart renders circles using the `Bars` component, with scales created by d3’s `scaleLinear` and domains set from `extent`. Axis components from d3 generate tick marks, while titles and labels update dynamically based on selected attributes, enabling exploration of relationships between sepal and petal dimensions.

Loading thumbnail…

Scatter Plot with menus

This interactive scatter plot displays the Iris dataset, allowing exploration of relationships between sepal and petal measurements. Users select which attributes to plot on the x and y axes using dropdown menus, with axis labels updating to reflect the chosen variables. The visualization is built with React and rendered as SVG using d3.v7's scaleLinear function for coordinate mapping. The data is loaded from a CSV file using d3.csv, and the plot includes title formatting, axis ticks, and tooltips for data point inspection.

Loading thumbnail…

Menus with react

This example shows how to create an interactive menu in React using controlled components. The app renders a dropdown of pet options, and the selected value is managed by React’s `useState` hook, logging each choice to the console. The reusable `Dropdown` component receives `options`, `id`, `selectedValue`, and an `onSelectedValueChange` callback, using the native HTML `select` element. The code relies on React 18 and ReactDOM for rendering, while D3 v7 is loaded but not explicitly used in the visible logic.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a static SVG element containing the text “Hello” inside a 960×500 viewport. It shows how React and D3 can coexist in a single page, with React managing the DOM structure and D3 v7 loaded for potential data visualization use. The code uses React 18’s `ReactDOM.render` method to mount the component into the `#root` div, while the surrounding HTML includes an SVG container. No data or interactive behavior is present; it serves purely as a starting template for combining these libraries.

Loading thumbnail…

World Map

This world map displays global landmasses and country borders using a natural Earth projection. Built with React and D3 v7, it renders SVG paths via `d3.geoPath` and `geoNaturalEarth1`, overlaying a graticule grid and sphere outline. The visualization loads GeoJSON from the world-atlas TopoJSON dataset, converting it with the `topojson` library’s `feature` and `mesh` functions. Land areas are filled in teal, with interiors highlighted by a distinct stroke color.

Loading thumbnail…

SF Temperature Line chart

A line chart displays temperature readings over time in San Francisco, with a smooth curved path and circular markers for each data point. The visualization uses React with D3 v7, employing `scaleTime` and `scaleLinear` for the axes, `line` with `curveNatural` for the path, and SVG circles with tooltips. Data comes from a CSV file containing weekly temperature timestamps.

Loading thumbnail…

Styled scatter plot

This example shows a styled scatter plot of the Iris dataset, mapping sepal length and width as quantitative axes with circular marks. The visualization uses React to render SVG elements, with d3.scaleLinear for both axes and d3.extent to compute domains from the CSV data loaded via d3.csv. Axis ticks are generated with d3.js scale methods, and tooltips are provided through SVG title elements. The chart includes custom font styling, axis labels, and a teal color scheme applied via CSS classes.

Loading thumbnail…

Styled BarChart

A styled horizontal bar chart displays population figures for ten countries from a UN population prospects dataset. Rendered as an SVG in React, the chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Headers, tick marks, and hover tooltips are drawn with React components. The title and axis labels use the Poppins font, while CSS styles define the chart's color scheme.

Loading thumbnail…

Refactored BarChart

This example displays the top ten countries by population from the United Nations population prospects dataset, drawn as circles mapped along a linear scale. The React visualization uses D3 version 7 functions such as `scaleBand`, `scaleLinear`, and `max` to compute scales, while SVG elements are generated through React components for axes and marks. Country names are listed on the y-axis, and the chart loads CSV data via D3's `csv` method, with hover tooltips formatted from the parsed numerical values.

Loading thumbnail…

Axes with React and D3

This example renders a horizontal bar chart of population data for ten countries, sourced from a CSV file. It uses React to manage the data state and D3 scales (scaleBand and scaleLinear) to position bars and axes. The chart displays x-axis ticks with grid lines and y-axis country labels, with bars sized by the population value from the 2020 column. The visualization is drawn as SVG, with D3’s csv function fetching and parsing the data before React renders the elements.

Loading thumbnail…

The MArgin convention

This example displays a bar chart comparing the 2020 population of ten countries from a UN population prospects dataset. Each bar’s width is proportional to the country’s population, and the countries are arranged vertically using a band scale. The visualization is rendered with React and SVG, using D3 v7’s `scaleBand` and `scaleLinear` to map data to coordinates, and D3’s `csv` loader to fetch and parse the remote data. The code shows a fixed chart size with a 20-pixel margin on each side.

Loading thumbnail…

UN Pop data basic bar chart top 10

This example displays the top 10 countries by 2020 population from a UN population prospects CSV, rendered as horizontal bars in an SVG. It uses React with D3 v7, loading and slicing the data via `d3.csv`, then mapping it through `scaleBand` for the y-axis and `scaleLinear` for the bar widths. The chart updates responsively, showing each country’s name alongside its population, with the data retrieved from a GitHub gist.

Loading thumbnail…

Rendering colors with react and D3

A full-screen color wheel renders all 148 CSS named colors from a CSV dataset, with each color occupying an equal arc around the center. The React app loads the data using `d3.csv`, then applies `d3.pie().value(1)` and `d3.arc()` to generate SVG path elements. Each path is filled using the `RGB hex value` column, creating a complete circular spectrum. The example demonstrates combining React state management with D3's data-joining and geometric layout functions.

Loading thumbnail…

parse cvs data with react

This example renders the CSS named color palette as a vertical sequence of colored strips, one row per color. Built with React and D3 v7, it loads CSV data from a remote gist using `d3.csv`, then maps each record to a full-width `div` whose background color is set to the parsed `RGB hex value`. The displayed message summarizes the dataset size, row count, and column count using `d3.csvFormat`.

Loading thumbnail…

Jack's Vega-Lite API Template

This example demonstrates a bar chart of U.S. state populations in 2014, with bars sized and colored by state and sorted by population. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite, and rendered as SVG via D3. It fetches CSV data from a Gist, applies a custom configuration for axis and label styling, and uses vega-tooltip for interactive hover details. The chart fills the entire browser window and updates its dimensions dynamically.

Loading thumbnail…

Load and parse CSV

This example demonstrates the core steps of loading and parsing a CSV file with D3.js. It fetches a remote CSV containing CSS named colors from a GitHub gist using `d3.csv`, then calculates and displays summary statistics—file size in kilobytes, row count, and column count—within a styled `<pre>` element. The code also includes commented-out alternatives using the Fetch API and `d3.csvParse`. A separate `index.js` file shows importing from the D3 library and local ES6 modules, though it is not actively used by the main script.

Loading thumbnail…

Fork of creative face

A playful face follows the mouse cursor across an SVG canvas, tracking pointer movement via React state updates. The face is composed of reusable SVG components—a yellow circular background, two eyes, and a mouth arc—rendered through React and D3's `arc` generator. Mouse position drives the face's coordinates, while the D3 arc API creates the smile shape with specified radii and angles.

Loading thumbnail…

creative face

A grid of 18 smiling faces, each rendered in yellow with black outlines, displays slight random variations in eye offset, eye radius, and mouth width. The faces are built from reusable React components, including `BackgroundCircle`, `Eyes`, and `Mouth`, composed within a `Face` component. The mouth is drawn using the `d3.arc` path generator, while React 18 handles the DOM rendering into SVG elements.

Loading thumbnail…

Part 1 html only

A yellow circle with a black outline forms a smiling face, featuring two black eyes and a curved mouth drawn as an arc. The visualization uses React components to generate SVG elements, with D3's `arc()` generator computing the mouth path based on specified inner and outer radii and angle ranges. The face is centered on a 960 by 500 canvas, with all shapes positioned relative to that central point.