yoav95 (@yoav95), VizHub

Fork of La Ola Group

A network graph of an organizational structure shows nodes for departments like Coordinacion, Comercial, and IT, connected by colored links. Larger nodes represent main groups, while smaller nodes branch into child categories and leaf labels. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to position elements, and SVG circles and lines for rendering. Nodes are draggable via d3.drag, with data defined in separate JavaScript files.

Oct 16, 2023

Loading thumbnail…

Fork of Social Network ICE 8

This example shows a social network of eight people as a force-directed graph, with nodes representing individuals and links showing weighted connections between them. The visualization uses D3 v4’s `d3.layout.force` (from the `d3` module) to simulate physical forces like gravity, charge, and distance, positioning nodes dynamically. Circles are drawn as SVG elements, with text labels and blue link lines styled via CSS. Data comes from a local `data.json` file, loaded asynchronously with `json()`, and node dragging is enabled through the force layout’s drag behavior.

Oct 16, 2023

Loading thumbnail…

Fork of My Knowledge Graph with taxo data

A force-directed knowledge graph maps thirteen labeled nodes across five color-coded groups, with directed arrows showing relationships between concepts like Aggregation, Eligibility, and Reporting. Links are drawn as lines with arrowhead markers and text paths for edge labels. The layout uses `d3.forceSimulation` with `forceX` and `forceY` to position nodes by group, while `d3.forceLink` and `d3.forceManyBody` manage link distances and repulsion. Click-drag interaction enables node repositioning.

Oct 16, 2023

Loading thumbnail…

Fork of Grakn Force Graph

This example visualizes a knowledge graph using a force-directed layout, displaying entities, attributes, and relations from a JSON dataset. The graph uses colored, rounded rectangles for entities and attributes, and circles for relations, with text labels for each node. It implements interactive features, such as a right-click context menu that appears at the node's location. The visualization is built with React and uses D3 v6 APIs including `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to simulate the physics, while the graph is rendered as SVG.

Oct 16, 2023

Loading thumbnail…

Fork of Fork of ICE8 network graph

This network graph visualizes relationships between countries, with nodes representing nations and links showing connections. The node positions are determined by a force-directed layout, and users can click and drag nodes to rearrange them. The graph uses D3 v4’s force simulation API, along with SVG rendering, to display circles for nodes and lines for links, with link thickness reflecting the weight data from the JSON file.

Oct 16, 2023

Loading thumbnail…

Fork of ICE-8 (Social Network Graph)

This example shows a small social network of named individuals and brands, with green curved links connecting the nodes. Node size and color intensity reflect the number of connections each node has. The graph uses `d3.forceSimulation` with link, charge, and centering forces, and renders as SVG. Links are drawn as curved paths using a quadratic arc formula. Nodes are draggable via `d3.drag`, and labels are positioned beside each circle.

Oct 16, 2023

Loading thumbnail…

ass

This example loads the classic Iris dataset from a GitHub gist using d3.csv and logs each parsed row to the browser console. The page renders only a large static title and no visualization, highlighting data loading and parsing with D3 v7 in a React context. The code constructs the CSV URL by joining string fragments, then applies a parseRow function that currently returns the raw row unchanged. The example demonstrates a minimal setup for fetching and inspecting tabular data before any charting logic is added.

Oct 8, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on a plain white page, styled with a large font size. It demonstrates the minimal structure of an HTML document, using a `<style>` block for CSS styling and a `<div>` element for content. No JavaScript libraries or data sources are involved, as the page relies solely on static markup and CSS. The rendering approach is straightforward browser rendering of the HTML and CSS, with no dynamic behavior or external dependencies.

Oct 8, 2023

Loading thumbnail…

Fork of so lewit reproduction using D3.js inbuilt shape

This example visualizes a sunrise and sunset pattern as a 500-by-500 pixel square using D3.js’s built-in shapes. It renders a single visual root element via the `select`, `selectAll`, `range`, and `scale` functions from the D3 v7.6.1 library, drawing geometric forms that represent the day-night cycle. The code relies on a simple HTML container with linked CSS, and the graphic is generated entirely on a blank canvas without external data files.

Oct 8, 2023

Loading thumbnail…

Fork of so lewit reproduction D3.js fundamental

This example manipulates SVG masks to create a dynamic visual composition of overlapping horizontal and vertical stripes. The main view is a grid of 100 rectangles that cycle through a circular mask, revealing a sunburst-like pattern from the center. A second set of rectangles uses an inverted mask to create a contrasting cross-hatch effect. The code uses the D3.js library (v7) to construct the SVG elements and apply the masking logic via the `append` and `attr` methods.

Oct 7, 2023

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays the message “Hello HTML!” centered in a large, responsive font size. It uses plain HTML with a CSS class to control the text’s visual styling, demonstrating a minimal setup for web-based rendering. JavaScript is not present in the code, so no dynamic behavior or data handling occurs beyond the static markup. The page relies solely on the browser’s native HTML and CSS rendering, without any external libraries or frameworks.

Oct 7, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on a plain white page, styled with a large font size. It demonstrates the minimal structure of an HTML document, using a `<style>` block for CSS styling and a `<div>` element for content. No JavaScript libraries or data sources are involved, as the page relies solely on static markup and CSS. The rendering approach is straightforward browser rendering of the HTML and CSS, with no dynamic behavior or external dependencies.

Oct 7, 2023

Loading thumbnail…

Fork of D3 Selection Exploration

A looping animation renders a row of colored circles that undulate and change radius over time while a black line traces their connected path. The example demonstrates D3’s data-join and selection methods, using `selectAll` and `join` to update SVG circles and a `d3.line` generator for the path. Circle positions and sizes are computed from sine functions, with colors shifting through a custom shading function. The animation runs at 60 frames per second via `setInterval`, and the SVG canvas fills the browser window.

Oct 7, 2023

Loading thumbnail…

Fork of D3 Selection Exploration

D3 selection exploration demonstrates animated circles and paths within an SVG canvas. Each of 20 circles moves vertically and changes radius based on a sine wave, while its color randomly updates every frame using a hexadecimal generator. A blue path element is appended with static coordinates but never updated. The visualization runs at 60 frames per second via `setInterval`, calling the custom `vizData` function with newly generated data from `makeData`. It utilizes D3 v6’s `select` and `selection.enter()` API for data joins.

Oct 7, 2023

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

A circle of animated SVG nodes moves and changes radius in a generative pattern inspired by Sol LeWitt's geometric art. Each circle’s position and size shift continuously via a sine-wave function, creating a flowing, rhythmic composition. The visualization uses D3’s `select`, `range`, and data joins to update the rendered circles every frame, driven by a `setInterval` loop that recomputes the data with a time-based parameter.

Oct 7, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on a plain white page, styled with a large font size. It demonstrates the minimal structure of an HTML document, using a `<style>` block for CSS styling and a `<div>` element for content. No JavaScript libraries or data sources are involved, as the page relies solely on static markup and CSS. The rendering approach is straightforward browser rendering of the HTML and CSS, with no dynamic behavior or external dependencies.

Oct 7, 2023

Loading thumbnail…

Fork of HTML Starter

This example creates an animated SVG grid of horizontal and vertical rectangles, revealing a circular aperture at the center through the use of D3.js masks. The code uses `d3.select`, `d3.range`, and `d3.join` to generate 100 rects in each direction, with two distinct mask groups to alternate light and dark circle patterns. A repeated `window.setInterval` triggers an alert dialog, interrupting the visual. The composition relies on SVG `<mask>` elements to blend the overlapping lines.

Oct 7, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on a plain white page, styled with a large font size. It demonstrates the minimal structure of an HTML document, using a `<style>` block for CSS styling and a `<div>` element for content. No JavaScript libraries or data sources are involved, as the page relies solely on static markup and CSS. The rendering approach is straightforward browser rendering of the HTML and CSS, with no dynamic behavior or external dependencies.

Oct 7, 2023

Loading thumbnail…

Svg Practice

This example demonstrates a basic visual composition using SVG, featuring a single circle positioned at the center of the canvas. The code relies on standard SVG elements within an HTML page, with no external data sources. It shows how to render a simple geometric shape using the `<svg>` and `<circle>` tags. The implementation is minimal, using plain HTML and CSS without any JavaScript libraries or interaction, serving as a starting point for understanding SVG rendering in a React-based gallery context.

Oct 3, 2023