Skip to main content
Log in
V

vangenned

@vangenned·18 public vizzes

Loading thumbnail…

World Map

This world map visualization displays global landmasses and country boundaries using an equal Earth projection. The React app loads geographic data from the world-atlas TopoJSON dataset via d3.json, then converts it to GeoJSON features using topojson’s feature and mesh methods. SVG rendering with d3.geoPath and d3.geoEqualEarth draws the sphere, graticules, land areas in teal, and interior borders in a lighter shade, with the projection computed through d3.geoGraticule.

Aug 17, 2022
Loading thumbnail…

Line Chart

A line chart displays temperature over time across a week in San Francisco, using a smooth curved path and circular markers for each data point. The visualization is built with React and D3 v5, leveraging `scaleTime` and `scaleLinear` for axes, `line()` with `curveNatural` for the path, and `csv()` to load the dataset. SVG renders the chart, with tooltips showing the day for each circle via `timeFormat`.

Aug 16, 2022
Loading thumbnail…

Working with Time

This scatter plot shows San Francisco temperature readings over a week, with time on the x-axis and temperature on the y-axis. Each circle represents a single hourly measurement, with a native SVG `<title>` element providing a tooltip on hover. The visualization uses React to render SVG elements, with D3's `scaleTime`, `scaleLinear`, and `extent` functions handling the scales and domains. Data is loaded asynchronously from a CSV file via the `d3.csv` method, and custom React components for the axes and marks keep the code modular.

Aug 16, 2022
Loading thumbnail…

Stylized Scatterplot

This stylized scatterplot visualizes the Iris dataset, plotting sepal length against sepal width. The React application uses D3.js scales and axes to render SVG circles, with a clean, modern aesthetic defined by the Poppins font and custom color palette. Data is loaded asynchronously from a CSV file via D3's `csv` function. Axis ticks and marks are generated as React components, with interactive tooltips displaying formatted values.

Aug 16, 2022
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the populations of the ten most populous countries using data from the UN Population 2019 dataset. The visualization is built with React and rendered as SVG elements, with D3 v5 handling the scaling and formatting of the bars. The x-axis uses a linear scale with SI-formatted labels, while the y-axis employs a band scale for country names. The D3 `scaleBand` and `scaleLinear` APIs position the bars, styled with a teal fill and distinct tick marks, with tooltips showing the exact population values.

Aug 15, 2022
Loading thumbnail…

Refactored Bar Chart

This example presents a horizontal bar chart of the top ten countries by 2020 population, sourced from a UN population dataset. It demonstrates a modular code organization using React components for the bottom axis, left axis, and the rectangular marks, each rendered with SVG. The chart specifically uses D3's `scaleBand` and `scaleLinear` to map the data to pixel coordinates, while the React `useData` hook fetches and parses the CSV file. The bars are scaled proportionally to each country's population value.

Aug 15, 2022
Loading thumbnail…

Axes with React and D3

This example uses React to render a horizontal bar chart of the top 10 most populous countries from a UN population dataset loaded via D3's `csv` function. The SVG output displays bars sized by population, with x-axis ticks and country labels positioned using D3's `scaleBand` and `scaleLinear` scales, while React's `useState` and `useEffect` manage the asynchronous data loading and UI updates.

Aug 12, 2022
Loading thumbnail…

The Margin Convention

This example displays the top ten countries from a UN population dataset as a horizontal bar chart. The bars are rendered as SVG rectangles, with their lengths encoding the 2020 population figures. The chart uses a margin convention to position the plotting area within the SVG canvas. The code employs d3’s `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `csv` for data loading, while React manages the component’s state and renders the SVG output.

Aug 12, 2022
Loading thumbnail…

UN Visualization

This example presents a horizontal bar chart of the ten most populous countries in 2020, using data loaded from a CSV file of UN population estimates. The visualization maps each country's name to a vertical band with d3.scaleBand, and its population count to a horizontal bar length with d3.scaleLinear. React hooks manage the asynchronous data loading state, displaying a “Loading...” message until the CSV is fetched, after which the SVG bars are rendered. The chart uses d3.csv for data parsing and ReactDOM to render the SVG elements.

Aug 11, 2022
Loading thumbnail…

Pie chart of CSS colours

This example displays a pie chart where each slice corresponds to a CSS named color, filled with its own RGB hex value. The chart uses d3.csv to load color data from a GitHub gist, d3.pie to compute arc angles, and d3.arc to generate SVG path shapes. React manages the component state and renders the SVG elements, with a loading message shown before data arrives. The chart is rendered at 960 by 500 pixels with the pie centered and extending to the full chart width.

Aug 11, 2022
Loading thumbnail…

Rendering Data with React

This example demonstrates a list of CSS named colors from a GitHub-hosted CSV file, rendered as horizontal color swatches. The visualization loads the data with `d3.csv` and uses React hooks (`useState`, `useEffect`) to manage state, while React components generate the visual output as styled HTML `<div>` elements. The code does not use SVG despite the page’s metadata; instead, each row becomes a colored block whose background is set via inline styles from the `'RGB hex value'` column, producing a full-width stacked spectrum. A loading message appears until the data is fetched.

Aug 11, 2022
Loading thumbnail…

Load data into React

This example demonstrates how to load a dataset of CSS named colors into a React application using D3’s `csv` method, with React state managing the fetched data. The app displays basic metadata about the dataset, including its size in kilobytes, row count, and column count. It uses React hooks (`useState` and `useEffect`) to handle asynchronous data loading and rendering, with D3 v5 and React 16.9 loaded via UMD scripts. The visualization outputs plain text statistics in a `<pre>` element, switching from a “loading” message to the formatted summary once data arrives.

Aug 11, 2022
Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the top five religions by country using a stacked bar chart, with bars sorted by total population and colored by religious affiliation. The visualization is built with the Vega-Lite API, which programmatically constructs a bar mark with x, y, color, and tooltip encodings from CSV data loaded via d3.csv. The chart auto-sizes to the browser window and applies custom axis and label styling from a configuration object. Vega tooltips display temperature values on hover, though the underlying dataset contains population and religion fields.

Aug 11, 2022
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to asynchronously load and parse a CSV file using D3. It fetches a remote dataset of CSS named colors and then displays summary statistics about the parsed data, including its size in kilobytes, the number of rows, and the number of columns. The core functionality relies on the `d3.csv` and `d3.csvFormat` APIs from d3.v5, which handle the network request and CSV parsing. The visual output is simple, presenting the computed metrics as large text within an HTML `<pre>` element.

Aug 8, 2022
Loading thumbnail…

Mouse Follower

A React component renders an SVG circle that tracks the mouse cursor across a 960-by-500 viewport. The circle’s position updates in real time through React’s `useState` hook and an `onMouseMove` event handler on the `<svg>` element, which captures the cursor’s `clientX` and `clientY` coordinates. The example demonstrates interactive SVG rendering with React 16.9, using the `ReactDOM.render` method to mount the application, and relies on a production build from unpkg. The circle maintains a fixed radius of 30 pixels while following the pointer.

Aug 8, 2022
Loading thumbnail…

Refactor for React

This example shows a grid of six-by-three smiling faces rendered as React components, each with randomized eye radii. The visualization demonstrates how D3’s `arc` generator creates the mouth path within a React component hierarchy, while `range` from D3 generates the array of faces. React and ReactDOM render the SVG elements, with each face composed of reusable components like `BackgroundCircle`, `Eyes`, and `FaceContainer` that handle translation and sizing. The code imports `arc` and `range` from D3 v5, and uses React’s production build to compose the SVG output.

Aug 4, 2022
Loading thumbnail…

Face Part1

A face rendered with SVG shapes: a yellow circle for the head, two black circles for eyes, and a curved mouth path. The drawing is constructed using React to define the SVG elements and D3's `arc` function to generate the mouth's path with specified inner and outer radii and angles. The face is centered with relative positioning, and the code leverages ReactDOM to render the component into the page.

Aug 4, 2022
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js visualization that renders the text “Hello VizHub!” inside a centered HTML div. It shows how to combine a modern ES6 module structure with a library loaded from a CDN, importing the `select` function from D3 and a custom string from a local `myMessage.js` module. The code uses `select('#message').text()` to update the DOM, with styling defined in `styles.css` for large, centered typography. It serves as a foundational template for building interactive visualizations within the VizHub platform.

Aug 2, 2022