DaMei1993

@DaMei1993·7 public vizzes

Fork of Network Graph

A fork of a D3.js network graph visualizes a small crime scenario with nodes for a murder, victims, suspects, and a witness. The force-directed layout, created with `d3.layout.force`, positions these nodes and links them by weighted connections. Purple links have stroke widths proportional to the square root of each link’s weight, while yellow circular nodes are draggable. Node labels display each role. The graph loads data from `graphFile.json` and renders entirely as SVG elements, with links as lines and nodes as groups containing circles and text.

Apr 11, 2022

Loading thumbnail…

Fork of SVG Animation Playground

This example demonstrates a CSS-driven SVG animation playground where the phrases “GETIT” and “RIGHT” scale, fade, and rotate in three-dimensional space against a starfield background, accompanied by a spinning “IN BLACK AND WHITE” byline. The code uses pure CSS keyframe animations (`@keyframes getit`, `right`, `spin-letters`, `move-byline`) with transforms like `rotateY`, `translateZ`, and `scale`, along with `perspective` to create depth. It relies on the browser’s built-in CSS animation APIs rather than a JavaScript visualization library, embedding two external SVG images fetched from GitHub gists. A textarea and send button provide a simple user interface, though no JavaScript logic is visible in the provided files.

Apr 11, 2022

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and display CSV data using React state and D3 utilities. The application fetches a dataset of CSS named colors from a GitHub URL, tracking the loaded data with React’s `useState` and `useEffect` hooks. It renders a text-based summary showing the file size in kilobytes, row count, and column count, formatted via `d3.csvFormat` and `d3.csv`. The visualization uses a React component with SVG rendering, powered by D3 v7 and React 17.

Aug 10, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower in the auto-mpg dataset, with tooltips showing car model names for each point. The visualization uses the Vega-Lite API to declare a scatter plot with semi-transparent points, while D3’s csv loader fetches the data from a GitHub gist. The code registers Vega, Vega-Lite, and vega-tooltip through the vl API, customizes axes and label styling via a config object, and renders an SVG chart that fills the browser window.

Jul 29, 2021

Loading thumbnail…

Smiley Face Part1

A grid of eighteen randomly varied smiley faces is rendered as SVG in React, with each face showing yellow circular backgrounds, eyes with blue rectangular glasses, square noses, and arched mouth paths built from d3.arc. The faces are generated by the App component mapping over d3.range, passing randomized stroke widths, eye radii, glasses dimensions, nose sizes, and mouth parameters to the Face component. Child components like BackgroundCircle, EyePlusGlasses, and Mouth use SVG primitives, while Nose relies on d3.symbol to draw the square shape.

Jul 28, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatter plot of automobile displacement against horsepower, with tooltips revealing vehicle names. Each point uses a semi-transparent fill to visualize overlapping data. The visualization is built using the Vega-Lite API, with custom configuration for axis styling and label fonts. Data is loaded asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG using Vega-Lite’s `markPoint` encoding with quantitative scales for both axes.

Jul 27, 2021

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load and parse CSV data from a remote URL using D3.js v7. It displays a summary of the dataset, including its approximate size in kilobytes, row count, and column count, in a large text element. The code uses the `d3.csv` method to fetch and parse the data, then accesses the resulting array's `length` and `columns` properties. The data source is a GitHub Gist containing CSS named colors. The script also includes commented-out alternatives using the Fetch API with `d3.csvParse`.

Jul 27, 2021