Skip to main content
Log in
H

hhhheeee

@hhhheeee·13 public vizzes

Loading thumbnail…

Map Trial

This example uses D3.js version 5 with a force-directed simulation to visualize a small network of six system nodes and their connections. The graph renders on a 500×500 Canvas element, with nodes and edges drawn using the Canvas 2D API. The simulation employs `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, `d3.forceCollide`, `d3.forceManyBody`, and `d3.forceLink` to position vertices and edges. Data comes from a local `response.json` file, containing node and edge objects with system IDs and labels.

Aug 22, 2019
Loading thumbnail…

Let's make a face with D3.js!

A face drawn from a network graph animates as force-directed simulation moves its nodes. The D3.js code uses `d3.forceSimulation` with `forceX`, `forceY`, `forceCollide`, `forceManyBody`, and `forceLink` forces to arrange vertices from a JSON data file. The Canvas rendering updates on each tick, drawing edges with `drawEdge` and circular nodes with `drawNode` to form the face’s features.

Aug 21, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an interactive smiley face whose eyebrows move in response to a data-driven simulation. It renders the face as SVG elements using `d3.select` and chained attribute setters, while the eyebrow motion relies on D3’s `transition.attrTween` to interpolate positions. The code loads D3 v5 from a CDN and integrates a JSON dataset containing vertices and edges, though the visible visualization focuses solely on the SVG face rather than the network data. The page uses a full-screen SVG canvas with a stylesheet that hides overflow.

Aug 21, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an interactive smiley face whose eyebrows move in response to a data-driven simulation. It renders the face as SVG elements using `d3.select` and chained attribute setters, while the eyebrow motion relies on D3’s `transition.attrTween` to interpolate positions. The code loads D3 v5 from a CDN and integrates a JSON dataset containing vertices and edges, though the visible visualization focuses solely on the SVG face rather than the network data. The page uses a full-screen SVG canvas with a stylesheet that hides overflow.

Aug 21, 2019
Loading thumbnail…

Let's make a face with D3.js!

A D3.js example builds a force-directed graph visualization of a network, rendered on a Canvas element with red circular nodes and connecting edges. The simulation uses `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, `d3.forceCollide`, `d3.forceManyBody`, and `d3.forceLink` to position nodes and links. Data is loaded from a JSON file via `d3.json`, and the `tick` event updates the Canvas drawing. The code demonstrates combining SVG markup with Canvas rendering for network exploration.

Aug 21, 2019
Loading thumbnail…

Network Layer

This example shows a simple network of nodes and edges drawn on an HTML5 Canvas element. The visualization initially places nodes at random coordinates and renders them as circles, while the code defines edges between named nodes. It uses D3.js to select the canvas element and its 2D context for drawing, with manual JavaScript handling the node and edge drawing routines. The project includes a JSON data structure with system vertices and connections, which appears intended for a force-directed layout.

Aug 21, 2019
Loading thumbnail…

Lets see

This example demonstrates a minimal D3.js setup that displays a custom text message on a webpage. It uses the `select` method from the D3 v5 library to target a specific DOM element and set its textual content. The message itself is imported from a separate local module, showcasing how to structure code with modular imports. The page is styled with an external stylesheet and presents the message in a large, readable font size. The visualization highlights basic DOM manipulation with D3 without any data or complex rendering logic.

Aug 21, 2019
Loading thumbnail…

Hello VizHub

This example displays a simple text message, “Hello VizHub,” centered on a dark blue background with a large Ubuntu font. It shows how to set up a basic D3.js v5 project within the VizHub environment. The code imports the `select` function from D3 to target the `#message` element and uses a local module, `myMessage.js`, to supply the text content. Styling is applied via an external CSS file that imports the Ubuntu typeface from Google Fonts.

Aug 21, 2019
Loading thumbnail…

Hello VizHub

This example displays a simple text message, “Hello VizHub,” centered on a dark blue background with a large Ubuntu font. It shows how to set up a basic D3.js v5 project within the VizHub environment. The code imports the `select` function from D3 to target the `#message` element and uses a local module, `myMessage.js`, to supply the text content. Styling is applied via an external CSS file that imports the Ubuntu typeface from Google Fonts.

Aug 21, 2019
Loading thumbnail…

Network Layer

This visualization demonstrates a force-directed network simulation rendered on an HTML canvas. A set of nodes, initially assigned random positions, is drawn as red circles using the Canvas 2D API. The example uses D3 v5’s force simulation capabilities, though the visible code primarily focuses on the update loop that clears the canvas, iterates through the node array, and redraws each node with an arc path.

Aug 21, 2019
Loading thumbnail…

Untitled

This example visualizes an interactive network of nodes and links using a force-directed layout. The simulation, powered by `d3.forceSimulation` with collision and centering forces, positions circular elements on a canvas. Node colors and sizes vary, while links connect them based on imported data from an external source (v3). The rendering approach uses Canvas 2D drawing commands, with pointer events likely enabling drag and hover interactions, though no explicit tooltips or labels appear in the code.

Aug 21, 2019
Loading thumbnail…

Play with CSS and SVG

This example demonstrates how CSS and SVG can be combined to create interactive visual effects. It uses d3-force for simulation and D3’s selection and transition methods to animate SVG elements. The visualization manipulates CSS properties and SVG attributes in response to user interaction, with the underlying data generated dynamically in JavaScript. The code leverages D3 v3, applying force-directed layouts and custom styling through an external stylesheet.

Aug 16, 2019
Loading thumbnail…

First Project with SVG and CSS

This example shows a simple car brand report using three colored pairs of circles and rectangles in an SVG graphic, alongside a list of car manufacturers. It demonstrates hand-authored SVG shapes with CSS styling applied to the HTML list and body. The SVG elements are positioned with raw coordinates, and one group uses a `transform` attribute to reposition a duplicate shape pair. The rendering relies purely on inline SVG markup and a linked CSS stylesheet, with no JavaScript libraries.

Aug 16, 2019