R

Ruanzhenglin

@Ruanzhenglin·25 public vizzes

Loading thumbnail…

Fork of Fork of Map of India with D3 - chloropleth map

This choropleth map of India visualizes the country’s states, each filled with a distinct color from the `d3.scaleOrdinal` and `d3.schemeCategory10` palette. State names are rendered as labels at the centroid of each shape, computed with `d3.geoPath.centroid`. The code loads TopoJSON data from a remote GitHub source and converts it using `topojson.feature`. The map uses a `d3.geoMercator` projection, and all elements are drawn as SVG paths with black stroke outlines.

Loading thumbnail…

network graph

This example displays a network graph visualization using D3.js version 5. The code loads the D3 library from UNPKG and imports utility functions from a local ES6 module to populate text elements. The visualization uses D3's selection API to set text content on HTML elements, demonstrating basic D3 integration with local modules.

Loading thumbnail…

Word Map Yeah

This example visualizes temperature readings over time from the Data Canvas Sense Your City dataset as a smooth line chart. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map data to SVG coordinates, `line()` with `curveNatural` for the path, and custom axis components. The graph displays time on the x-axis and temperature on the y-axis, with tick marks formatted using `timeFormat`.

Loading thumbnail…

Vega-Lite API Template for stacked bar chart

This example demonstrates a stacked bar chart using the Vega-Lite API, visualizing the relative populations of religious groups across countries. The visualization encodes country on the x-axis, religion on the y-axis, and population as the circle size, with tooltips showing population values. The code uses the `vega-lite-api` library, registered with Vega and Vega-Lite, and loads data from a CSV file via `d3.csv`. The chart is rendered as an SVG with a custom configuration for axis styling and tooltip formatting, adapting to the full window size.

Loading thumbnail…

Vega-Lite API Template for bar chart

This example renders a bar chart of country populations using the Vega-Lite API, with data loaded from a CSV via D3’s `csv` function. The chart shows population counts per country, sorted descending, using `vl.markBar()` and encoding fields for country and population. The code integrates Vega-Lite with D3 v6, configures axis styling and tooltips via Vega Tooltip, and resizes the visualization to fit the window. The data originates from the UCI Auto MPG dataset, though the actual values shown come from a population-by-country gist.

Loading thumbnail…

Vega-Lite API Template for week temperature

This visualization shows a week of temperature readings in San Francisco as a stacked area chart, with temperature mapped to the vertical axis and timestamps along the horizontal axis. The chart is rendered using the Vega-Lite API, which registers Vega and Vega-Lite with `vl.register` and renders to SVG via the `vega` view. Data is loaded asynchronously from a CSV file using `d3.csv`, while tooltips are enabled through the `vega-tooltip` Handler. The appearance is customized through a config object that adjusts axis and label styling.

Loading thumbnail…

Vega-Lite API Template for practise

This example demonstrates how to build interactive scatter plots using the Vega-Lite API in a D3.js context. The visualization displays automobile data from the UCI Machine Learning Repository’s Auto MPG dataset, plotting horsepower against the car’s origin with tooltips showing vehicle names. The code uses the `vega-lite-api` library to construct the chart programmatically, registering it with Vega and Vega-Lite, and applies a custom configuration for axis styling and fonts. Data loading relies on `d3.csv` to fetch the dataset, while Vega Tooltip handles interactive hover information.

Loading thumbnail…

Fork of Loading data with React & D3

This example demonstrates the fundamental pattern of integrating D3 data loading with React state management. It displays a text summary showing the size, row count, and column count of a CSV file containing CSS named colors, loaded from a GitHub gist via `d3.csv`. The application uses React hooks (`useState`, `useEffect`) to trigger the asynchronous data fetch and render the results, while a helper function in `message.js` formats the statistics using `d3.csvFormat` and string concatenation. The rendered output is a simple `<pre>` element displaying the calculated metrics.

Loading thumbnail…

Loading data with React & D3

This example demonstrates how to load and display CSV data in a React application using D3. It fetches a dataset of CSS named colors from a GitHub gist via `d3.csv`, then displays summary statistics—file size in kilobytes, row count, and column count—as text in the browser. The React component uses the `useState` hook to manage the asynchronous data loading state, showing “loading” until the data arrives. The visualization itself is minimal, presenting the data’s metadata rather than a graphical chart.

Loading thumbnail…

Parsing data with D3 csv

This example demonstrates how to parse CSV data from a remote URL using D3’s `d3.csv` method, then summarizes the dataset’s size and structure in plain text on a web page. The code fetches CSS named colors from a GitHub gist, counts the number of rows and columns, and calculates the formatted data’s size in kilobytes. It then displays these statistics in a large `<pre>` element, using `d3.csvFormat` and `data.columns` to inspect the parsed result. The page uses D3 v6 and vanilla JavaScript, with styling controlled by CSS.

Loading thumbnail…

Parsing data with D3 csvParse

This example demonstrates how to parse CSV data using D3’s `csvParse` method and display basic summary statistics. It fetches a remote CSV file containing CSS named colors, then shows the file size in kilobytes, the number of rows, and the number of columns in a large `<pre>` element. The code uses the Fetch API to retrieve the text, D3 v6’s `csvParse` to convert it into an array of objects, and plain DOM manipulation to update the message container.

Loading thumbnail…

React callback

A React component renders an SVG circle that follows the mouse cursor across a 960×500 viewport. The app uses React hooks `useState` and `useCallback` to track pointer coordinates from `onMouseMove` events, updating the circle’s `cx` and `cy` attributes. The example demonstrates integrating D3’s `arc` import while relying on React’s declarative rendering for state-driven SVG updates, with a static yellow circle illustrating callback-driven interactivity.

Loading thumbnail…

React interactive

A yellow circle follows the mouse cursor across an SVG canvas, updating its position in real time as the user moves the pointer. The visualization demonstrates React state management with D3, using the `useState` hook to track mouse coordinates and passing them as `cx` and `cy` attributes to the circle element. The app renders through ReactDOM, while the SVG is defined directly in JSX, with no external data source.

Loading thumbnail…

mouseMove

This example shows a single yellow circle centered in an SVG canvas that responds to mouse movement. The visualization uses React to render the SVG element and attaches a `handleMouseMove` event handler that logs the cursor’s client coordinates to the console, though no visual feedback is drawn. The circle has a fixed radius of 30 pixels, and the canvas dimensions are set to 960 by 500. The code imports the `arc` function from D3 v6 but does not use it; instead, it relies on React’s event system and SVG circle element for the core interaction.

Loading thumbnail…

interactive react

A stylized smiley face rendered as an SVG in React, using D3's `arc` generator to create the mouth path. The face is composed of a yellow circle with a blue stroke, two black eyes positioned symmetrically, and a semicircular mouth. React components define the background circle and face elements, while D3 v6 handles the arc calculation, with all shapes centered via SVG transformations.

Loading thumbnail…

Loading data with fetch

This example demonstrates how to load external data into a web page using the built-in Fetch API. It defines an asynchronous function, `fetchText`, that retrieves a CSV file containing named CSS colors from a GitHub Gist URL. The fetched text is then logged to the browser console. The code uses vanilla JavaScript within an HTML file, showcasing the `fetch` and `response.text()` methods without any additional libraries or frameworks.

Loading thumbnail…

Fork of Fork of Fork of Fork of Hi vizhub Smiley Face Part VII

A small grid of 18 smiley faces, each randomly varied in stroke width, eye position, eye radius, and mouth dimensions, is drawn as overlapping SVG circles and paths. The faces use a yellow circle with a blue stroke, two black eyes, and an arc mouth. The React components `Face`, `BackgroudCircle`, `Eyes`, and `Mouth` compose the shape, while `d3.arc` computes the mouth path. The `d3.range` utility generates the fixed 18-item array, and each face renders independently with randomized parameters.

Loading thumbnail…

Fork of Fork of Fork of Hi vizhub Smiley Face Part VI

This example shows a modular, React-based smiley face composed of reusable SVG components for the background circle, eyes, and mouth. The face is drawn using D3’s `arc` generator to create the mouth path, with all geometry parameterized by props for position, size, and stroke width. A `FaceContainer` wraps the SVG and applies a translation transform to center the drawing. The code demonstrates a component-driven approach to D3 visualization within a React framework, rendering static SVG without data binding.

Loading thumbnail…

Fork of Fork of Hi vizhub Smiley Face Part V

This example builds a smiley face from modular React components, rendered as SVG shapes. A yellow circle with a blue stroke forms the head, while two black circles serve as eyes and an arc generated with d3.arc creates the mouth. The code imports React and ReactDOM to mount the app and relies on D3 v6 for the mouth’s arc path geometry. All proportions, such as radius and offsets, are defined as constants in index.js, and the components receive them as props.

Loading thumbnail…

Fork of Hi vizhub Smiley Face Part II

This example displays a simple smiley face composed of a yellow circle with a blue stroke, two eyes, and a curved mouth, all rendered using React and D3.js within an SVG. The visualization centers the face using a translated `<g>` group, while the mouth is generated with the `d3.arc()` function using specified start and end angles. The code imports `arc` directly from D3 v6 and uses React components to define each facial feature, demonstrating a functional approach to combining React's declarative UI with D3's geometric utilities.

Loading thumbnail…

Hi vizhub Smiley Face Part I

This example displays a yellow smiley face with blue eyes and a curved mouth, centered on an SVG canvas. The face is built using React components that render SVG circles and a path, with D3’s `arc` generator defining the mouth’s shape from specified start and end angles. The code uses React 17 and D3 v6, positioning all elements relative to the canvas center via a translation group.

Loading thumbnail…

Fork of Let's make a face with D3.js for practice!

A smiling face rendered in SVG animates its rectangular eyebrows upward and back downward in a looping motion. Built with D3.js v5, the example demonstrates fundamental DOM selection and manipulation, using `d3.select`, `circle` and `rect` elements, and a mouth path created with `d3.arc`. The eyebrow animation uses chained `transition.attr` calls with 2000-millisecond durations, shifting the group’s vertical transform. The code separates geometric constants for eye spacing, radius, and eyebrow placement, showing a clear, readable approach to constructing and animating SVG scenes.

Loading thumbnail…

Fork of Stylized Bar Chart

A horizontal bar chart displays the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset. Bars extend left-to-right proportional to 2020 population estimates, with country names on the y-axis and formatted tick labels on the x-axis. React renders SVG marks and axes, while D3 v5 scales (`scaleBand`, `scaleLinear`), `max`, `format`, and `csv` handle data loading and layout. CSS customizes tick lines, text, and bar colors, with a Poppins font family.

Loading thumbnail…

Fork of Fork of Fork of Map of India with D3 - chloropleth map

This choropleth map displays the states of India, each filled with a distinct color from a categorical scale and labeled with its name at the centroid of its shape. The visualization uses D3 v5 to load TopoJSON data from a remote GitHub repository, converting it to GeoJSON via the `feature` method, and projects it with the Mercator projection. State paths are rendered as SVG elements using `d3.geoPath`, while text labels are positioned with `pathGenerator.centroid`. The state boundary stroke is styled with gray, and the map canvas is set to an SVG size of 960 by 1000 pixels.

Loading thumbnail…

Fork of Hello VizHub

This example displays the text messages “Hello VizHub!” and “Good” in large, centered text using D3.js. It demonstrates loading D3 v5 from UNPKG and using ES6 module imports, including a local module that exports the message strings. The code uses `select` from `d3` to target the `#message` and `#look` divs in the HTML and set their text content via the `text` method. Styling is applied through an external CSS file.