H

HowardHan99

@HowardHan99·24 public vizzes

Loading thumbnail…

Fork of Rendering Data with React & D3

The visualization displays CSS named colors as a radial burst of pie slices, with each slice filled by its corresponding RGB hex value. It loads color data from a CSV file using `d3.csv`, then uses React with hooks (`useState`, `useEffect`) to manage the asynchronous data fetching and rendering. The pie layout is computed with `d3.pie()`, and each slice is drawn as an SVG `<path>` using `d3.arc()`. The example combines React's declarative component structure with D3's data manipulation and geometry utilities, rendering entirely in SVG.

Loading thumbnail…

Fork of Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal dots, using the Natural Earth projection from `d3.geoNaturalEarth1`. The visualization renders landmasses, graticules, and interiors via `geoPath` and `geoGraticule`, with country boundaries from the World Atlas TopoJSON dataset and city coordinates from Simplemaps. Built with React, the code uses `d3.csv` for data loading and `topojson.feature` and `topojson.mesh` to process geographic topology, all rendered as SVG elements.

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data (horsepower versus displacement) as a scatterplot, with each point representing a car model. The visualization uses the Vega-Lite API to declaratively define the plot, while D3’s csv function loads the Auto MPG dataset from a remote URL. Vega and Vega-Lite handle rendering to SVG, and the vega-tooltip library provides interactive hover details. The code configures axes, point size, opacity, and tooltips, with the chart sized to fit the browser window.

Loading thumbnail…

Fork of Smiley Face Part III

This example displays a classic smiley face rendered as a yellow circle with black outline, two eyes, and a curved mouth, all composed using React components and SVG elements. The face is centered within a 960x500 viewport, with each feature positioned using absolute coordinates derived from center offsets. The code integrates React for component structure and d3’s `arc` generator to create the mouth path, which is drawn between fixed start and end angles. SVG shapes like `circle` and `path` are used for the visual output, with hardcoded dimensions for radius and stroke width.

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen smiley face using React and D3. It draws a yellow circle for the head, two smaller circles for eyes, and a curved mouth created with D3’s `arc` generator. The React component maps the SVG elements, while D3’s `arc()` computes the path for the mouth based on specified inner and outer radii and angles. All coordinates are dynamically calculated from the browser window size, and the SVG output scales to fill the viewport.

Loading thumbnail…

Fork of Let's Make a Face Part I

A stylized smiley face drawn with a single SVG canvas uses nested `<circle>` elements to render a yellow head, black outline, and two dark eyes. The circles are positioned with hardcoded `cx` and `cy` coordinates, with a computed `r` radius of 245 for the face and 50 for each eye. The page sets `overflow: hidden` and a 960x500 viewport, showing only static vector shapes without animation or interaction. The example demonstrates basic SVG placement and stroke styling in plain HTML.

Loading thumbnail…

Fork of Hello HTML

This fork of the basic Hello HTML template draws a single circle onto an SVG canvas. The circle is positioned near the right edge of the viewport with a fixed radius, and no additional styling or interaction is applied. The example uses inline SVG elements directly within the HTML body rather than relying on external JavaScript libraries, demonstrating the simplest possible vector rendering approach. The circle’s coordinates and radius are hard-coded in the markup, with the SVG height set to 500 pixels.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal starting point for a D3 visualization: a nearly blank page with the word "body" rendered in enormous, centered text. The page loads D3 version 7.0.4 from the unpkg CDN and immediately executes a separate script, `bundle.js`, which contains the visualization logic. The HTML sets up the document structure and basic styling, while the JavaScript file is responsible for any future graphical content. The example serves as a template for building more complex D3 projects, showing the initial setup of an HTML file, external script inclusion, and a body that currently contains only static text.

Loading thumbnail…

Data Visualization Assignment 3

This interactive scatterplot explores relationships between attributes of college majors, such as total graduates, gender distribution, employment numbers, and median salary. Users select the X and Y axes from dropdown menus or swap them, and hovering over the categorical color legend highlights a specific major category. Built with React and D3 v6, the visualization renders SVG circles positioned by linear scales, with a color legend encoding major categories. Data is loaded from a FiveThirtyEight CSV, which is processed with D3's `csv` function.

Loading thumbnail…

Fork of Interactive Color Legend Bar chart with tooltip for Alcohol Vs Life Expectancy

This chart plots alcohol consumption against life expectancy across continents, using an interactive color legend to filter data by year. Bars represent aggregated alcohol consumption on the x-axis and life expectancy on the y-axis, with a tooltip summarizing the correlation for each year. Built with D3.js v3, it uses `d3.layout.stack` for bar layout, `d3.legend.color` for the interactive legend, and `d3-tip` for tooltips. The SVG visualization animates on hover, highlighting layers while dimming the base bars, and includes custom axis formatting and tick filtering.

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes the relationship between population density and population in the largest city for various countries, using a stylized scatter plot. The visualization is rendered as an SVG using React, with D3.js functions `scaleLinear`, `extent`, and `format` to map data to coordinates and format axis tick labels. The code applies a custom CSV data source and styles the marks, axes, and labels with specific colors and the Poppins font.

Loading thumbnail…

Fork of dv.35 - interactive color legend

This interactive scatter plot visualizes the Iris dataset, mapping population attributes via dropdown menus with an axis-swap control. The color legend, built with D3’s `scaleOrdinal`, highlights points by country, dimming non-hovered marks via opacity changes. React manages state and renders SVG circles, axes, and labels, while D3’s `csv` loads the external data file.

Loading thumbnail…

Fork of dv.35 - interactive color legend

This interactive scatter plot of the Iris dataset lets users explore relationships between sepal and petal measurements. The visualization uses a color legend for species, which supports hover interactions that dim non-matching data points. Users can swap the X and Y axes via a dedicated control, with dropdowns to select attributes. Built with React and D3 v6, the SVG renderings use `scaleLinear` and `scaleOrdinal` for positioning and color encoding, with data loaded from a CSV file.

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal width for individual flowers. Rendered as an SVG using React and D3 v5, the chart employs `scaleLinear` for both axes and displays each data point as a fixed-radius circle. The code uses `AxisBottom` and `AxisLeft` components to generate axis ticks and labels, while tooltips show formatted values on hover. The visualization is styled with a custom color palette and Poppins font, with axis labels and tick marks colored in muted grays and teal.

Loading thumbnail…

Data Visualization Assignment 3

This interactive scatter plot explores correlations among life expectancy indicators including HIV/AIDS, GDP, BMI, and adult mortality, with dropdown menus controlling the X and Y axes. A color legend by continent filters data on click, while hover tooltips display the continent, year, and current axis values. The visualization uses d3.v5 with scaleLog axes, d3.scaleOrdinal for coloring, and animated circle transitions via d3.transition. Data comes from a CSV of global life expectancy statistics, rendered as SVG with reusable d3 modules for the scatter plot, dropdown menu, and color legend.

Loading thumbnail…

Fork of Menus with React

This example demonstrates a pet-selection interface with React, showing a dropdown menu bound to a live state update. The app uses React’s `useState` hook to track the chosen value, initialized as “hamster,” and logs each selection to the console. The custom `Dropdown` component receives options, an id, the current value, and an `onSelectedValueChange` callback, rendering a styled `<select>` element. ReactDOM renders the `App` component into the `#root` div, with options listed as dog, cat, hamster, parrot, spider, and goldfish.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how React and D3 can work together to load and summarize a dataset of CSS named colors. The application uses D3’s `csv` utility to fetch the remote data and React’s `useState` and `useEffect` hooks to manage the asynchronous loading state. Once the data arrives, a custom `message` function computes and displays the file size in kilobytes, the number of rows, and the number of columns using `d3.csvFormat` and array properties. A large monospaced `pre` element renders the result, with “Loading...” shown before the fetch completes.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data from a remote source, then displaying summary statistics about the dataset. It uses D3 v5’s `d3.csv` method to fetch and parse the CSS Named Colors dataset from a GitHub gist, and computes the file size in kilobytes, the number of rows, and the number of columns. The resulting message is rendered into a `pre` element using vanilla DOM manipulation. The code also includes commented alternatives using `fetch` with `async/await` and `d3.csvParse`.

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face rendered as an SVG using React and D3. The face is centered on the screen and resizes to fit the browser window, with two black eyes and a curved mouth drawn using the D3 `arc()` generator. The code uses React functional components and ReactDOM to render the SVG, while D3 v5 provides the arc path generation. Static values define the eye offset, eye radius, mouth radius, and stroke width, making the face fixed in proportion rather than interactive.

Loading thumbnail…

Fork of Let's Make a Face Part I

A yellow smiley face is rendered on an SVG canvas, with two black eye circles positioned symmetrically around the center. The face uses React components to define SVG circle elements, with hardcoded values for the face radius, eye offsets, and stroke width. The code imports React and ReactDOM, and ReactDOM.render mounts the App component to the root div. Dimensions are set via constant variables for width, height, and center coordinates.

Loading thumbnail…

Fork of Mouse Follower

A React application renders an SVG circle that follows the mouse cursor across a 960×500 viewport. The component tracks pointer movement via React's `onMouseMove` event handler and updates the circle's `cx` and `cy` coordinates using the `useState` hook. The example uses React 16.9.0 and ReactDOM to manage state and render the SVG directly in the browser.

Loading thumbnail…

Fork of Mouse Follower1

This example demonstrates a simple interactive visualization where a circle follows the mouse cursor within an SVG canvas. The code, written in React, uses the `useState` hook to track the mouse position and updates the circle’s `cx` and `cy` properties on every mouse move event. Rendered through ReactDOM and SVG, the visualization responds directly to cursor movement, with no data source beyond the live pointer coordinates. The circle’s radius is fixed, and the canvas dimensions are set to 960 by 500 pixels.

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the 2018 population estimates for the top 10 most populous countries, sourced from United Nations World Population Prospects. It uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom to render country labels and population values in SVG. The chart applies a steelblue fill to rectangles and a custom margin layout, with data loaded via d3.csv.

Loading thumbnail…

Untitled

This example demonstrates how to begin using D3 version 6 by loading and logging a CSV dataset of country populations. It uses `d3.csv` to fetch `data.csv`, which contains population figures for ten countries, and logs the parsed array to the console. The code initializes an SVG selection with `d3.select` and reads its width and height attributes, though no visual output is rendered yet. The example serves as a minimal starting point for integrating D3’s data-handling and selection APIs in a project.