T

trwMK

@trwMK·42 public vizzes

Loading thumbnail…

Fork of World Map

This fork of a world map renders the globe using a natural Earth projection, displaying continents in teal, graticules, and interior boundaries derived from the World Atlas dataset. It shows the landmasses as filled paths and the country borders as outlined strokes, all within a light gray sphere. The visualization is built with React and D3 v5, employing `geoNaturalEarth1()`, `geoPath()`, `geoGraticule()`, and the TopoJSON `feature()` and `mesh()` functions to process the `world-atlas` GeoJSON topology.

Loading thumbnail…

World Map

This world map visualization displays Earth’s landmasses in teal against a light gray sphere, with graticule lines and interior borders in subtle contrasting strokes. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` to project features from the World Atlas TopoJSON dataset, while `geoGraticule` generates the coordinate grid. The `Marks` component renders SVG paths for the sphere, graticules, land, and country interiors, and the data is processed with the TopoJSON `feature` and `mesh` APIs.

Loading thumbnail…

Fork of Fork of Working with time

This fork of Curran’s working-with-time example visualizes a week of San Francisco temperature readings from the Data Canvas Sense Your City dataset. The vertical axis shows temperature in degrees, while the horizontal time axis is formatted by day of the week. React renders SVG marks and axes, with d3.scaleTime and d3.scaleLinear mapping the data, d3.line with curveNatural drawing the smooth path, and d3.csv loading the remote CSV file.

Loading thumbnail…

Fork of Working with time

This example visualizes temperature over time for a week in San Francisco, showing a smooth line through the data points. The chart is built with React and rendered as an SVG, using the D3.js library (d3.v5) for scales, axes, and the line generation. The line is drawn using the `line` function from D3, with the `curveNatural` method to create a natural cubic spline. The x-axis displays time formatted as abbreviated weekday names, while the y-axis shows temperature values.

Loading thumbnail…

Working with time

A scatter plot shows temperature readings over time for San Francisco, with each circle representing a daily measurement. The x-axis displays weekdays using a time scale, while the y-axis maps temperature values on a linear scale. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `extent` to set domains, with custom axis components rendering SVG ticks and labels. Data loads asynchronously via the `csv` function from Data Canvas Sense Your City.

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot

This example visualizes the classic Iris dataset, plotting petal length against petal width in a scatter plot where each flower is represented by a circle. The visualization uses d3.scaleLinear to map data values to positions, with React components for rendering axes and marks as SVG elements. The code fetches data via d3.csv from a GitHub gist, implements custom AxisBottom and AxisLeft components, and includes interactive hover tooltips through SVG <title> elements. Styling uses the Poppins font with a distinct color scheme.

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the Iris flower dataset, plotting petal length against petal width in a scatter plot. The visualization uses a custom React component structure that leverages D3's `scaleLinear` for axis scaling and maps data points to SVG circles. The rendering relies on D3 utilities for data loading (`csv`) and domain calculation (`extent`), while the React hooks manage asynchronous data fetching. The plot features styled axes with tick marks and labels, and each data point includes a tooltip showing its petal length value, all rendered as SVG elements within a React-driven interface.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Data Set, plotting petal length against petal width for individual flowers. The SVG rendering uses React components to structure axes and marks, while d3-scale’s `scaleLinear` maps data values to pixel coordinates. The axis labels and tick marks are generated with custom React components, and d3’s `csv` loader parses the dataset. Each point is a circle with a native SVG `<title>` element for tooltip display, styled with a teal fill and Poppins font for a clean, modern aesthetic.

Loading thumbnail…

Fork of Fork of Stylized Bar Chart

This visualization displays the populations of ten countries as horizontal bars, rendered as SVG rectangles through React components. The chart loads UN population data for 2020 from a CSV file using D3’s `csv` parser, then maps it with `scaleBand` and `scaleLinear`. Axes are drawn by custom React components, with tick formatting via D3’s `format` to abbreviate values (e.g., “1.2B”). A `title` element in each rectangle provides a native tooltip, and the layout follows a clean, styled design using the Poppins font.

Loading thumbnail…

Fork of Stylized Bar Chart

This example displays a horizontal bar chart of United Nations population data for ten countries, ranking them by 2020 estimated population. The visualization uses React components to render SVG marks and axes, with D3 v5 utilities like `scaleBand`, `scaleLinear`, and `csv` handling data loading and scaling. Population values are formatted using D3’s `format` function, and hover tooltips appear via SVG `<title>` elements. The chart features a clean design with styled tick lines, a Poppins font, and teal-colored bars.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the population of ten countries from a UN 2019 dataset, rendered as horizontal bars with a custom Poppins font and teal color scheme. The visualization uses React to manage component state and D3 v5 utilities including `scaleBand`, `scaleLinear`, and `csv` for data loading. SVG elements are generated via React components for axes and marks, while the bottom axis formats population values in billions using D3's `format` function.

Loading thumbnail…

Fork of Refectoring a Bar Chart

This visualization displays the population of ten countries as a horizontal bar chart, rendered as SVG elements within a React application. The chart uses D3 scales (`scaleBand` and `scaleLinear`) to map country names and population values to screen coordinates, while React components like `AxisBottom`, `AxisLeft`, and `Marks` manage the rendering of axes and rectangles. Data is loaded asynchronously from a CSV file using D3’s `csv` utility, with population values parsed from the 2020 column.

Loading thumbnail…

Refectoring a Bar Chart

A bar chart displays the top 10 countries by population from a United Nations dataset loaded via `d3.csv`. React components render the SVG axes and bars, with scales created using `d3.scaleBand` and `d3.scaleLinear`. The chart is refactored into reusable modules for the bottom axis, left axis, and marks, demonstrating a clean separation of visualization logic.

Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of the top 10 most populous countries in 2020, rendered with React and D3. It loads CSV data from a GitHub gist using D3’s `csv` function, then uses `scaleBand` and `scaleLinear` to map country names and population values to pixel positions. React renders SVG elements, including manually drawn axes with `xScale.ticks()`, grid lines, and text labels, while D3’s `max` computes the domain. The chart updates from a loading state to display the final visualization.

Loading thumbnail…

Fork of Fork of The Margin convention

A bar chart displays the populations of the top 20 countries for 2020, sourced from UN population data loaded via D3’s `csv` utility. React renders each country as a horizontal `rect` using `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with widths proportional to population. The SVG is positioned within a 20-pixel margin, and the visualization updates once the asynchronous data fetch completes.

Loading thumbnail…

Fork of The Margin convention

This example shows a horizontal bar chart of the top 20 countries by 2020 population from the UN Population dataset, loaded via `d3.csv`. React renders SVG `rect` elements scaled with `d3.scaleLinear` for width and `d3.scaleBand` for vertical positioning, respecting a margin convention. The chart updates asynchronously after data loads, with a loading state shown before render.

Loading thumbnail…

The Margin convention

This example demonstrates the margin convention in D3 by rendering a horizontal bar chart of the top 20 countries by 2020 population from a UN dataset. The chart displays country names along the y-axis and population values along the x-axis, with bars colored uniformly. The code uses React hooks to load CSV data via `d3.csv`, then employs `d3.scaleBand` and `d3.scaleLinear` for scaling, while rendering SVG rectangles inside a transformed group element to accommodate the specified margins.

Loading thumbnail…

Fork of Fork of Fork of Make a bar chart with react and d3

This example shows a horizontal bar chart ranking the top 20 countries by 2020 population, rendered as SVG rectangles in React. The code loads data from a CSV of UN population statistics using `d3.csv`, then uses `scaleBand` for the categorical country axis and `scaleLinear` for the population values. React’s `useState` and `useEffect` manage the asynchronous data loading, while JSX maps each country to a `<rect>` element. The chart updates purely through React’s render cycle, with D3 providing only scales and data parsing utilities.

Loading thumbnail…

Fork of Fork of Make a bar chart with react and d3

This example visualizes United Nations population data for 2020, rendering country names on a vertical band scale using React and D3. It loads the CSV dataset via `d3.csv`, parses population values, and maps countries to a `scaleBand` range. The React component uses `useState` and `useEffect` to asynchronously fetch and store the data, displaying a loading message until the dataset arrives. The chart’s axes and layout remain static, with only the parsed data structure prepared for further rendering, as the code does not include bar geometry or other visual marks.

Loading thumbnail…

Fork of Make a bar chart with react and d3

This example shows a bar chart of the 2020 UN population estimates for each country, fetched as a CSV via `d3.csv` and rendered with React as a collection of SVG `<rect>` elements. The code uses `d3.scaleBand` to map country names to vertical positions, with the x-axis width intentionally left incomplete. Data loading is handled through React’s `useState` and `useEffect` hooks, displaying a loading message until the dataset arrives. The visualization relies on React’s state management for updates, while D3 utilities handle data parsing and scaling.

Loading thumbnail…

Make a bar chart with react and d3

This example shows a radial burst of CSS named colors, with each color represented as a slice of a pie chart. The visualization uses React to manage state and render SVG paths, while D3 utilities load the color data from a CSV file and compute the pie geometry via `d3.pie` and `d3.arc`. The code fetches the data using `d3.csv` inside a `useEffect` hook, displaying a loading message until the data arrives. The final chart fills the entire window, with each slice’s color determined by its RGB hex value from the dataset.

Loading thumbnail…

Fork of Fork of Fork of Rendering Data with React & D3

A radial burst visualization of CSS named colors, rendered as an SVG donut chart using React for component structure and D3 utilities for data processing and shape generation. It loads color data from a CSV file via `d3.csv`, then uses `d3.pie` to compute arc angles and `d3.arc` to generate the path geometry, with each slice filled by its corresponding hex value. React's `useState` and `useEffect` hooks manage the asynchronous data loading and re-render the chart once the data arrives.

Loading thumbnail…

Fork of Fork of Rendering Data with React & D3

A radial burst of colored wedges visualizes CSS named colors, with each wedge representing one color from a CSV dataset loaded via `d3.csv`. The React app uses `useState` and `useEffect` to fetch the data, then renders SVG paths generated by `d3.arc` and `d3.pie`. Each path’s fill is set to the color’s RGB hex value, creating a full circle where adjacent wedges show the color spectrum. The chart spans the entire viewport, centered dynamically, demonstrating React’s component lifecycle managing D3’s geometry utilities.

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays CSS named colors as a horizontal sequence of colored blocks, each block representing a data row from the CSS named colors dataset. The React app loads the data using `d3.csv` from a remote URL, then maps each row to a `<div>` element with a background color set to the row's `RGB hex value`. The rendering uses React's `useState` and `useEffect` hooks to manage the asynchronous data loading, with a loading message shown before the data arrives.

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of Auto MPG data, showing relationships between vehicle attributes through a dense cluster of points. It uses the Vega-Lite API to construct the chart, with D3.js handling data loading via `d3.csv`. The visualization features tooltips that display RGB hex values when hovering over points. The chart is rendered dynamically, adapting its size to the browser window using the `vl.width()` and `vl.height()` methods from the vega-lite-api library, and includes custom styling from the config file for improved readability.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how React and D3 can work together to load and summarize CSS named color data. The app uses React hooks including `useState` and `useEffect` to manage asynchronous data loading, while D3's `csv` function fetches the dataset from a GitHub gist. Once loaded, the data is passed to a custom `message` function that calculates and displays three key statistics: the file size in kilobytes, the number of rows, and the number of columns. The visualization renders this summary as large formatted text, showing a "Loading..." message until the data arrives.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors. It displays a summary of the loaded data, including the file size in kilobytes, the number of rows, and the number of columns. The visualization uses the D3.js `d3.csv` and `d3.csvFormat` functions to fetch and parse the remote dataset, then renders the results as text. The code also includes commented-out alternatives using the Fetch API with async/await and a “pyramid of doom” callback pattern for comparison.

Loading thumbnail…

Fork of Mouse Follower

A single circle reacts to the mouse position within a full-window SVG. The circle's center coordinates update directly from the mouse event's clientX and clientY properties. The application uses React's useState and useCallback hooks and an onMouseMove handler to manage state changes. Rendered via ReactDOM, the example demonstrates a minimal SVG-based interactive visualization with no additional data source.

Loading thumbnail…

Mouse Follower

This example shows a circle that continuously follows the mouse cursor across a full-window SVG canvas. Built with React, it tracks the cursor’s `clientX` and `clientY` coordinates through an `onMouseMove` event handler, storing the position in state via `useState` and updating the circle’s `cx` and `cy` attributes accordingly. The `useCallback` hook optimizes the event handler, and the component renders a single SVG `<circle>` element without any data source.

Loading thumbnail…

Mouse Follower

This example shows a single circle that follows the mouse cursor across the full browser window. The circle’s position updates live through React state, using the `clientX` and `clientY` values from the `onMouseMove` event on an SVG element. The code renders the circle as an SVG `<circle>` with React 16.9, and the state hook `useState` manages the cursor coordinates. The visualization demonstrates a simple interactive mapping between pointer movement and SVG shape placement.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays a large-font summary of a remote CSV file containing CSS named colors, reporting its size in kilobytes, row count, and column count. The primary data loading method uses D3 v5’s `d3.csv` function, which fetches and parses the file asynchronously via a promise chain. It also demonstrates alternative approaches in commented-out code, including using `fetch` with `async` and `await` and a nested "pyramid of doom" pattern, highlighting different ways to handle asynchronous text parsing with `d3.csvParse`. The output is rendered into an HTML `<pre>` element.

Loading thumbnail…

Fork of Fork of Fork of Smiley Face Part V

A grid of eighteen smiley faces, each with randomly generated eye positions, eye radii, mouth dimensions, and stroke widths, displays the variability possible from a single parametric design. The example demonstrates splitting React components into separate ES6 modules using JSX and React Fragments for combining the face elements. D3 is used for the arc generator that creates the mouth path and for the range sequence that produces the array of faces in the index.

Loading thumbnail…

Fork of Fork of Smiley Face Part V

A grid of smiley faces renders in SVG, each with randomized eye offsets, radii, stroke widths, and mouth shapes. The visualization demonstrates modular React component composition with ES6 modules and React Fragments, splitting faces into `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`. It uses `d3.arc` to generate mouth paths and `d3.range` to create the 6×3 array of faces, with ReactDOM rendering the full set.

Loading thumbnail…

Fork of Smiley Face Part V

This example renders a 6x3 grid of procedurally generated smiley faces using React and D3.js (v5). Each face is composed of modular React components—BackgroundCircle, Eyes, and Mouth—assembled within an SVG container. The mouth is drawn using D3’s `arc` API, while facial features, stroke widths, and radii vary randomly per face. The data source is a D3 `range` array driving the grid layout, with randomness applied for visual variety.

Loading thumbnail…

Fork of Smiley Face Part III

This example shows a classic smiley face rendered as a composite of React components: a yellow background circle, two black eyes, and an arc-shaped mouth. Each facial feature is a separate SVG element positioned using props passed from a parent `App` component. The mouth is generated with the `d3.arc()` shape generator, while the circle and eye positions are defined declaratively via JSX. The visualization uses React for component structure, D3 v5 for the arc path calculation, and SVG for final rendering.

Loading thumbnail…

Fork of Smiley Face Part V

A yellow smiley face rendered as an SVG in React, composed of a background circle, two eyes, and an arc-based mouth. The visualization demonstrates modular component structure by splitting React components across separate files, using React Fragments for grouping. The code employs d3.arc to generate the mouth path with specified inner and outer radii, while all geometry is positioned via SVG group transforms with hardcoded dimensions.

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a classic smiley face using React components and D3.js, displaying a yellow circle with black stroke, two eyes, and an arc-shaped mouth on an SVG canvas. The code defines a `BackgroundCircle` React component for the face, while the mouth is generated using D3’s `arc` API with specified inner and outer radii and start/end angles. The visualization is positioned at the center of a 960-by-500 viewport, with eye offsets and radius values hardcoded. It demonstrates integrating React’s declarative component structure with D3’s geometry helpers to produce static vector graphics.

Loading thumbnail…

Fork of Fork of Smiley Face Part II

This example shows a smiling face rendered as a full-screen SVG, with a yellow-to-red radial gradient filling the head, black stroke outlines, two eyes, a small nose line, and a curved mouth created using a D3 arc generator. The visualization is built with React components react and react-dom, while D3.js provides the `arc` function for mouth geometry and handles the SVG coordinate transformation. The face scales dynamically to the browser window size, using `window.innerWidth` and `window.innerHeight` for centering and radius calculations.

Loading thumbnail…

Fork of Smiley Face Part II

This example displays a large, full-screen smiley face rendered as an SVG in React. The face fills the viewport, with a radial gradient from gold to red, black eyes positioned symmetrically, and a mouth formed by a D3 arc path. The code leverages ReactDOM to mount the component and uses D3’s `arc` generator to define the mouth’s shape based on radius and angle calculations, while circles handle the face and eyes, and a line adds a nose.

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a simple smiley face using React and SVG. Two black circles form the eyes, positioned symmetrically on either side of the canvas center, while a larger yellow circle with a black stroke serves as the face. The code defines the layout with constants for width, height, and eye offsets, then uses ReactDOM’s `render` method to draw the shapes into the root element. The SVG output is generated declaratively through React’s JSX syntax.

Loading thumbnail…

Fork of Smiley Face Part 1

This example shows a simple yellow smiley face drawn with three circles on a 960-by-500 SVG canvas. It uses the SVG `<circle>` element directly, with a large yellow circle for the head, two smaller black circles for eyes, and an implied mouth left out. The rendering is static, using inline SVG attributes for position, radius, fill, stroke, and stroke width. No JavaScript libraries or APIs are present; the visualization relies solely on declarative SVG markup within the HTML file.

Loading thumbnail…

Smiley Face Part 1

A static SVG smiley face rendered on a yellow circle with a black stroke, featuring two smaller black circles as eyes. The page uses raw SVG elements (`<circle>` tags) with explicit `cx`, `cy`, and `r` attributes to position shapes. The thick stroke and background are set via SVG presentation attributes. This example demonstrates basic vector drawing without any JavaScript libraries or data sources.