T

trissentety

@trissentety·35 public vizzes

Loading thumbnail…

Scatter Plot Including Species

This interactive scatter plot explores the Iris dataset, displaying measurements of sepal and petal dimensions for three flower species. Interactive dropdown menus dynamically select which quantitative or categorical attributes appear on each axis, with animated transitions smoothly repositioning circles. The visualization uses D3 v6’s selection.join and transition methods, along with scaleLinear and scalePoint for axes, while rendering as an SVG with a Share Tech font.

Loading thumbnail…

Animated Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris flower dataset, allowing users to select which measurement (sepal or petal length/width, or species) appears on each axis via two dropdown menus. The visualization uses a reusable chart pattern built with D3 v6, employing the `selection.join` API to animate circle positions and radii with `transition` delays. It also demonstrates a reusable menu component that communicates changes through a custom `dispatch` event, with SVG axes that transition smoothly alongside the data points.

Loading thumbnail…

Colored Scatter Plot Legend

This visualization displays the classic Iris dataset, plotting petal length against sepal width with points colored by species. The chart uses an SVG rendering approach with React components and D3 v5 scales. It employs D3's `scaleLinear` for the x and y axes, `scaleOrdinal` for the categorical species colors, and `extent` to derive domains. A color legend on the right maps the three species to orange, teal, and purple, with axes labeled and tick formatting applied.

Loading thumbnail…

Animated Reusable D3 Scatter Plot

This animated reusable scatter plot visualizes the Iris Dataset, cycling through four measured attributes (petal width, sepal width, petal length, and sepal length) on the x-axis while keeping sepal length on the y-axis. Built with D3 v6, the chart uses a custom reusable chart function with `scaleLinear`, `axisLeft`, and `axisBottom` to render axes as SVG. Each transition, triggered by `setInterval`, repositions circles with staggered delays via `transition.delay`, while the axes smoothly update using the standard D3 transition API.

Loading thumbnail…

Reusable D3 Scatterplot with Symbols

This reusable D3 scatterplot displays the Iris dataset, plotting petal width against sepal length with points colored by species. The visualization uses D3's `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `symbols`, and `symbol` APIs to generate scalable vector graphics (SVG) paths as scatterplot marks, with axis labels rendered as rotated text. Data is loaded asynchronously from a remote CSV file using `d3.csv`, and the plot is fully configurable through a fluent interface that accepts dimensions, margins, and value accessor functions.

Loading thumbnail…

Fork of Stylized Line Chart

This visualization shows the variation of temperature over time in San Francisco for a single week. The data comes from the Data Canvas Sense Your City dataset and is rendered as a smooth, stylized line chart using SVG. The code, built with React and D3 v5, employs `line()` with `curveNatural` from D3 to create the curved path, while `scaleTime` and `scaleLinear` set the axes. The chart’s visual style, including the teal line and soft gray ticks, is defined in CSS, with interactive tooltips currently disabled.

Loading thumbnail…

Reusable D3 Scatter Plot

This example presents a reusable scatter plot visualizing the Iris Dataset, mapping petal length to the x-axis and sepal length to the y-axis. It demonstrates a configurable D3 chart factory pattern, where the scatter plot function accepts chained setters for width, height, data, accessors, margins, and point radius. The code uses D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to render an SVG with circles and axes. The data loads from a GitHub Gist CSV file, and the visualization fills the entire browser window.

Loading thumbnail…

Missing Migrants Scatter Plot Log Scale

This interactive scatter plot visualizes the Missing Migrants Dataset, where each point represents a single event and shows the number of dead or missing individuals over time. The visualization uses a log scale on the y-axis to accommodate the wide range of values, with a time-based x-axis formatted as dates. Built with React and D3 v5, it renders as SVG and employs `scaleLog`, `scaleTime`, and `extent` from D3, with custom axis components and circle marks that display tooltips on hover.

Loading thumbnail…

Fork of Multiple Views With Brushing

This example combines a bubble map with a date histogram to visualize missing migrant incidents. Brushing the histogram filters the map’s displayed circles, linked through shared state. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for country boundaries, while the histogram applies `d3.bin` and `d3.brushX`. React manages the UI, and data comes from a CSV of global migrant records.

Loading thumbnail…

Fork of Missing Migrants on a Map

A world map displays missing migrant events as semi-transparent circles, with circle size scaled by the square root of the total dead and missing count per event. A time-series bar chart below aggregates the same metric by month. The visualization uses React for component structure, d3.geoNaturalEarth1 and d3.geoPath for map projection, d3.scaleSqrt for circle sizing, and d3.bin with d3.timeMonths for histogram binning. Data comes from the Missing Migrants Dataset, with country boundaries from World Atlas TopoJSON.

Loading thumbnail…

Missing Migrants on a Map

A natural earth projection displays global migration routes, with circles sized by the square root of total dead and missing migrants from the Missing Migrants Global 2019 subset. The map shows land in gray, graticules, and ocean-colored points. Built with React and D3 v5, it uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` for the map, while `scaleSqrt` maps fatality counts to circle radii. Data is loaded via `csv` from a remote GitHub-hosted dataset.

Loading thumbnail…

Fork of Working with Time

This interactive bar chart visualizes the monthly cumulative total of dead and missing migrants from the Missing Migrants Global 2019 dataset, sourced via CSV from GitHub. The visualization aggregates daily records into monthly bins using D3’s `scaleTime`, `timeMonths`, and `histogram` functions, then renders the result as SVG rectangles within a React component. The chart includes labeled axes, styled tick marks, and hover tooltips showing the exact monthly count, all built with D3 v5 and rendered through React’s declarative SVG output.

Loading thumbnail…

Points on a Map

This map visualization plots world city populations using circles projected onto a Natural Earth base. It uses D3 v5’s `geoNaturalEarth1` and `geoPath` to render landmasses, graticules, and country interiors, while a sqrt scale maps population values to circle radii. The React-based component loads city data from a CSV and renders SVG marks, using a world atlas TopoJSON for geographic context.

Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset visualizes petal length against sepal width, with each point colored by species. An interactive color legend on the right highlights a selected species: hovering over a legend item fades non-matching points and re-renders the filtered subset on top. The example uses React with D3 scales (`scaleLinear`, `scaleOrdinal`) and renders SVG circles, while `onMouseEnter` and `onMouseOut` handlers drive the hover state and opacity transitions.

Loading thumbnail…

Scatter Plot with Color

This scatter plot visualizes the classic Iris dataset, displaying petal length against sepal width with each of the three species represented by a distinct color. Using React and D3 v5, the visualization leverages d3.scaleLinear for both axes and d3.scaleOrdinal for the categorical color mapping. The SVG rendering includes custom axis components (AxisBottom, AxisLeft) and circle marks with native tooltips. Data is loaded asynchronously via d3.csv from a remote gist URL.

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris Dataset, allowing users to explore relationships between sepal and petal measurements across species. Two dropdown menus control which numerical attribute maps to the x- and y-axes, dynamically rescaling the plot. Built with React and D3 v5, the visualization renders points as SVG circles using d3.scaleLinear for axes and d3.extent for domain calculation. The data is loaded asynchronously from a CSV file via d3.csv, with tick marks formatted using d3.format.

Loading thumbnail…

Fork of Scatter Plot with Menus

A scatter plot of the Iris dataset allows users to select which flower attributes appear on the X and Y axes via two dropdown menus. Built with React and D3 v5, it uses `scaleLinear` and `extent` to map data to SVG coordinates. Axis components render ticks and labels, while circular marks display each sample with tooltips. The dataset is loaded as CSV and all four numeric measurements plus species are available as axis options.

Loading thumbnail…

React Menus

A React component called `Dropdown` presents a select menu for choosing a pet from six hard-coded options. The app tracks the chosen value in state and logs each selection to the console. The `Dropdown` component is a reusable `<select>` element that maps over an options array to generate `<option>` elements and triggers a callback on change. The example uses `useState` from React and `ReactDOM.render` to mount the app, with a label and styled listbox.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders a plain text message, “Hello React!”, to the browser. It uses the React and ReactDOM libraries to create and mount a functional component called `App` into a `div` element with the ID `root`. The page is styled to remove margins and hide overflow, and the production builds of React are loaded from unpkg. No data visualization or external charting libraries are present; it serves purely as a starter template for integrating React into a visualization project.

Loading thumbnail…

World Map

This example displays a world map using an equal-area natural Earth projection. Landmasses are rendered in teal with lighter graticules and country borders drawn from the World Atlas TopoJSON dataset. It uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` to project geographic features, while TopoJSON’s `feature` and `mesh` methods process the topology into SVG paths. The visualization is built with React, which fetches the data via `d3.json` and renders the map as static SVG elements.

Loading thumbnail…

Working with Time

A line and scatter plot shows temperature readings in Celsius over a week in San Francisco, using a time-based x-axis and linear y-axis. React components render SVG elements, while D3 v5 scales, extents, and the `timeFormat` API handle data mapping and tick labeling. The chart loads comma-separated data from a remote GitHub gist, displays native tooltips via SVG `title` elements, and colors marks with teal strokes and fills.

Loading thumbnail…

Stylized Scatterplot

This example visualizes the Iris dataset as a scatterplot of sepal length against sepal width. Each flower is represented by a green circle with a native SVG tooltip showing the x-value on hover. The chart uses React components composed with D3 scales, rendering axes via custom `AxisBottom` and `AxisLeft` components that produce tick marks and labels. Data is loaded asynchronously with `d3.csv`, and linear scales map the measured values to pixel coordinates within fixed margins.

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the classic Iris Dataset, plotting petal length against sepal width as a scatter plot. The visualization uses React to render SVG circles and axes, with D3 (v5) for data loading, scaling, and axis generation. A `Poppins` font style is applied to the page, while the marks are styled with a teal fill and the axes use light gray tick lines. The code includes a formatted tick label function that abbreviates values using D3’s `format('.2s')`.

Loading thumbnail…

Stylized Bar Chart

This example displays the ten most populous countries as horizontal bars, with population values along a linear scale and country names along a categorical band scale. The chart uses React for component structure and d3.scaleBand, d3.scaleLinear, and d3.format for scales and tick formatting, rendering SVG rectangles with native `<title>` tooltips. Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv and filtered to the top ten entries.

Loading thumbnail…

Refactored Bar Chart

This example shows the ten most populous countries in 2020 using a horizontal bar chart, rendered with SVG elements inside a React application. The chart deliberately appears "pathetic" with no axes or value labels, presenting only the country names on the left and proportional bars extending rightward. The code builds the visualization using React’s `useState` and `useEffect` hooks alongside D3 v5 utilities, including `scaleBand`, `scaleLinear`, and `max`, while loading data from a CSV file via D3’s `csv` function. The data source is the United Nations World Population Prospects 2019.

Loading thumbnail…

Fork of Rendering Data using React and D3

A horizontal bar chart visualizes UN population estimates for 2020, with each country’s bar length proportional to its population. The React app loads CSV data via D3’s `csv` utility, then uses D3’s `scaleBand` and `scaleLinear` to map countries and population values to SVG `rect` coordinates. The chart renders directly in SVG, with bars positioned by country name along the y-axis and population magnitude along the x-axis.

Loading thumbnail…

React D3 Axes

This example displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset as a horizontal bar chart, using React for component structure and d3.scaleBand, d3.scaleLinear, and d3.max for scaling. The SVG rendering includes manually constructed axes, with x-axis ticks generated via xScale.ticks() and y-axis labels positioned using scaleBand's bandwidth. The code loads CSV data via d3.csv in a useEffect hook and renders rectangles for each bar.

Loading thumbnail…

Margin Convention

This visualization displays the top 10 most populous countries as horizontal bars using D3 scales and React. It loads UN population data from a CSV via `d3.csv` and renders SVG rectangles with `scaleBand` for country positioning and `scaleLinear` for population values. The chart applies a margin convention by translating the SVG group to ensure padding around the plot area.

Loading thumbnail…

Rendering Data using React and D3

A radial pie chart displays CSS named colors as a seamless ring of colored arcs. The visualization loads color data from a CSV file using `d3.csv` and renders each color as an SVG path segment, with the fill color set to the color’s hex value. React manages the component state and rendering, while D3’s `pie()` generator and `arc()` shape function calculate the arc geometries. The chart adapts to the data dynamically once the async data loading completes.

Loading thumbnail…

Rendering Data with React

This example renders a vertical stacked bar chart of CSS named colors, with each row displaying a color’s hex value as a background swatch. The code loads a CSV of color data from a GitHub gist using D3’s `csv` utility and manages the asynchronous data fetching with React hooks (`useState`, `useEffect`). Once loaded, the data is mapped to React `<div>` elements, each styled with an inline `backgroundColor` property and fixed dimensions. The visualization demonstrates a simple integration of D3 for data loading and React for declarative DOM rendering.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization uses the Vega-Lite API with D3.js to render a scatter plot of global religious demographics, showing the population sizes of various religions by country. The chart applies circular marks with size encoding to represent population values, sorted by country on the x-axis, with tooltips revealing exact population figures. Data is loaded asynchronously from a UCI Machine Learning Repository CSV via `d3.csv`. The code customizes the visual style through a Vega-Lite configuration object, adjusting axis labels and title fonts, while the Vega tooltip handler provides interactive hover details.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates a minimalist loading screen that displays only text statistics about a CSV file. It shows the file size in kilobytes, the number of rows, and the number of columns after fetching the data. The visualization uses React’s `useState` and `useEffect` hooks to manage asynchronous data loading, with D3’s `csv` function retrieving the dataset from a GitHub gist URL. The `d3.csvFormat` API calculates the data size, while the message module processes the fetched table to extract row and column counts.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing a remote CSV file with D3 v7. It fetches the data using `d3.csv` and displays the formatted size, row count, and column count in a large `<pre>` element. The code also includes commented alternatives using `d3.csvParse` and the Fetch API for manual text processing. The data source is a GitHub Gist containing CSS named colors.

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor inside an SVG canvas, updating its position in real time as the pointer moves. The example combines React state management with D3.js v7 for SVG rendering, using the `useState` hook to track mouse coordinates and a `useCallback` event handler to update them on `mousemove`. The circle is drawn with hardcoded width and height values, and the mouse position is captured via `clientX` and `clientY` from the native browser event.

Loading thumbnail…

Happy Face Part 1

A grid of eighteen smiling faces appears, each with randomized facial features generated by React components. The faces use SVG circles for the head and eyes, and a D3 arc path for the mouth, with varying stroke widths, eye offsets, radii, and mouth dimensions. The `range` function from D3 creates the array, while React renders each `Face` with randomly assigned props inside an SVG container, producing a playful, varied pattern.