H

hung2606

@hung2606·21 public vizzes

Loading thumbnail…

point on a Map

This example displays a world map with country boundaries, graticules, and city points sized by population. The map uses D3’s `geoNaturalEarth1` projection with `geoPath` to render land, interiors, and sphere outlines from World Atlas TopoJSON data. City coordinates from a CSV are projected onto the map, with circles scaled via `scaleSqrt` based on population. The visualization is built with React, rendering SVG elements, and uses D3 v5 for data loading and geo utilities. Styling is applied through CSS to differentiate land, graticules, and interiors.

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot shows the Iris dataset, mapping petal length and sepal width while coloring points by species. A color legend to the right of the plot allows hovering over a species name to highlight the corresponding points and fade all others. The visualization is built with React and D3's scaleLinear, scaleOrdinal, and csv loading functions, rendering SVG marks and axes. Hover interactions are managed through React state, with fading applied by adjusting opacity on both the legend entries and data circles.

Loading thumbnail…

Point on a map

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width for three species of iris flowers. Circles are colored by species using a D3 ordinal color scale, with a color legend that highlights and fades data points on hover. Built with React and rendered as SVG, the visualization uses D3 scales for axes and color, and encodes tooltips using SVG title elements.

Loading thumbnail…

Fork of Scatter Plot with Menus

This is an interactive scatter plot of the classic Iris Dataset, featuring dropdown menus to select which quantitative attribute is mapped to the x and y axes. The visualization displays all 150 flowers, with each point’s species identifiable through the available attributes. Built with React and d3, the code uses React’s `useState` hooks to manage selected axes, d3’s `scaleLinear`, `extent`, and `csv` for data loading and scaling, and custom React components for the axes and marks. SVG circles render the data points, with axis labels updating dynamically based on menu selections.

Loading thumbnail…

Fork of Polished World Map

This example displays a polished world map with country boundaries, graticules, and a sphere outline, rendered as an SVG using React. It fetches TopoJSON data from the World Atlas and converts it to GeoJSON with `topojson.feature` and `topojson.mesh`. The visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw paths, with custom styling for land, interiors, and graticules in CSS.

Loading thumbnail…

world map

This example displays a world map rendered as an SVG using React. Countries are filled with turquoise against a darker teal ocean, projected using the equal Earth projection from d3.geoGeoEqualEarth and d3.geoPath. The map visualizes geographic boundaries from the World Atlas TopoJSON dataset, loaded via d3.json and converted with topojson.feature. The code imports d3 functions directly and uses React hooks (useState, useEffect) to fetch and manage the data.

Loading thumbnail…

Making a Scatter Plot

This example displays a scatter plot of Iris flower measurements, mapping sepal length on the x-axis and sepal width on the y-axis. The visualization loads data from a CSV file using D3’s `csv` function and renders circles as SVG marks positioned with `scaleLinear` scales. React components structure the axes and marks, while D3’s `format` helper and `extent` method compute tick labels and scale domains. The chart includes labeled axes and tooltips via SVG `<title>` elements, with data sourced from the standard Iris dataset.

Loading thumbnail…

Fork of Stylized Bar Chart

This chart displays the top 10 most populous countries as horizontal bars, using red bars on a white background with blue axis labels. The chart loads United Nations World Population Prospects 2019 data from a GitHub gist via a CSV file. The visualization is built with React and d3-scale functions like `scaleBand` and `scaleLinear` for layout, while rendering SVG elements. Interactive hover tooltips show population values in billions, and the styling uses the Poppins font.

Loading thumbnail…

Mergins and Axes

This example visualizes the top 10 most populous countries using a bar chart built with React and SVG. The chart displays horizontal bars representing each country’s 2020 population, with tick marks and labels for the x-axis scale and country names on the y-axis. Data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The code uses `scaleBand` and `scaleLinear` from D3 v5 to compute positions, while margins and inner dimensions are manually defined to align axes correctly.

Loading thumbnail…

The Margin Convention

This example shows a bar chart of the top 10 most populous countries from the United Nations World Population Prospects 2019 dataset, with the bars rendered using React and SVG. It demonstrates the margin convention by defining a `margin` object and using it to offset an inner `<g>` group, allowing the chart to fit within a 960×500 viewport. The code uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and `d3.csv` to load and parse the data. Notably, the chart lacks axes, making it intentionally primitive and focusing purely on the spatial layout.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes the CSS named colors dataset as a radial burst of pie slices, with each slice’s fill color matching its corresponding data value. The code loads CSV data via `d3.csv` and uses `d3.pie` and `d3.arc` to compute slice geometry, while React (with `useState` and `useEffect`) manages the asynchronous data loading and renders the SVG paths. The visualization demonstrates a hybrid React-D3 workflow, where D3 handles data processing and shape generation, and React handles component updates and DOM rendering.

Loading thumbnail…

Redering Data with React & D3

This example renders a horizontal stacked bar chart of CSS named colors. It loads color data from a remote CSV file using D3’s `csv` utility, then uses React’s `useEffect` and `useState` to fetch and store the data, displaying a loading message until it arrives. The chart is drawn as SVG, with each color represented as a thin rectangle whose background is set from the `RGB hex value` field. React renders the SVG elements, while D3 handles the data acquisition.

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color occupying an equal angular slice radiating from the center. Using React for component rendering and SVG for drawing, the code loads color data from a remote CSV file via `d3.csv`. D3’s `pie` and `arc` generators compute the slice geometries, while each `<path>` is filled with its corresponding hexadecimal value from the dataset. The visualization demonstrates a hybrid approach where D3 handles data loading and layout calculations, while React manages the DOM updates.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5. It fetches a dataset of CSS Named Colors from a GitHub gist and displays key statistics: the file size in kilobytes, the number of rows, and the number of columns. The code primarily uses `d3.csv()` with a Promise-based `.then()` callback, though commented-out alternatives show fetching text with `fetch()` and `async/await`, plus `d3.csvParse()` for manual parsing. The output renders as plain text inside a `<pre>` element.

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor within an SVG canvas, updating its position in real time to mirror pointer movement. The React application tracks mouse coordinates via the `onMouseMove` event handler and stores them in component state, then renders the circle at those coordinates using SVG elements. The visualization uses React and ReactDOM to manage the interactive behavior, with the circle’s position tied directly to the `clientX` and `clientY` values from the mouse event.

Loading thumbnail…

Fork of Fork of Smiley Face Part-3 (React and d3)

This example renders a yellow smiley face as an SVG graphic using React and D3. It demonstrates the `arc` helper from the `d3-shape` package to draw the mouth as a path, alongside circle elements for the eyes and face. The face is centered using an SVG group with a `transform` attribute and ES6 template literals for the translation. D3 v6 and React 16 are loaded via UMD bundles, with all geometry defined through numeric constants.

Loading thumbnail…

Fork of Smiley Face Part-3 (React and d3)

This example shows a smiling face built with React and D3, rendered as an SVG. The face consists of a yellow circle with a black stroke, two black eyes, and a mouth drawn using the `arc` helper from the `d3-shape` package. The mouth’s path is generated by configuring the arc’s inner and outer radii and start and end angles, then passing the result to an SVG path element. Grouping and positioning rely on SVG group elements with a transform attribute using ES6 template literals.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the JavaScript `fetch` API. The code defines an asynchronous function, `fetchText`, which retrieves the text content of a specified file and logs it to the browser console. It specifically targets a CSV dataset containing CSS named colors, hosted as a GitHub Gist. The visualization itself is not rendered on the page; instead, the focus is on the initial step of acquiring and inspecting raw tabular data for subsequent processing.

Loading thumbnail…

Fork of smile face part 1

This example displays a simple smiley face drawn as a yellow circle with black stroke, two eyes, and an arc-shaped mouth, all centered in an SVG. It shows how reusable React components define each facial part, with the `BackgroundCircle` and `Eyes` components accepting props for sizing and positioning. The code uses D3’s `arc` generator to create the mouth path, while React 17 and D3 v7 render the static SVG output. The viewport is fixed at 960 by 500 pixels, with a hidden overflow style.

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor within an SVG canvas, updating its position in real time to mirror pointer movement. The React application tracks mouse coordinates via the `onMouseMove` event handler and stores them in component state, then renders the circle at those coordinates using SVG elements. The visualization uses React and ReactDOM to manage the interactive behavior, with the circle’s position tied directly to the `clientX` and `clientY` values from the mouse event.

Loading thumbnail…

smile face part 1

A simple smiley face is rendered as an SVG inside a React component, with a yellow circular face, two black eyes, and a mouth shaped using D3's `arc` generator. The `BackgroundCircle` and `Eyes` components are reusable, receiving props for radius, stroke width, and eye offsets. The face is centered using an SVG `<g>` transform, and the arc’s inner and outer radii and angles define the mouth’s thickness and open shape.