Skip to main content
SimilarExport ZIP
100%

ForkForNetWork_SDV

✓ Published0🌍 Public
BBlueT
Last edited Apr 3, 2024
Created on Apr 2, 2024

This example visualizes a network of battery electric vehicle (BEV) categories, countries, years, and use types for India and China from 2013 to 2015. It uses a D3.js force-directed graph with `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` to position nodes and links, rendered as SVG circles and lines. Node colors distinguish categories, years, and countries, while light blue links show connections. The visualization supports interactive dragging via D3’s `drag` behavior, and layout updates continuously through simulation ticks.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork for plotting tree

This example visualizes the distribution of electric vehicle (EV) stock values for 2011 across four countries—China, India, the United Kingdom, and the USA. The hierarchical tree diagram branches into vehicle types (buses and cars) and further into powertrain categories (BEV and PHEV), with each leaf node’s value represented by its label. The chart uses a bespoke D3.js API (`d3.tree()`) to compute the layout, while custom SVG paths with quadratic Bézier curves draw the connecting links. Node and link colors are explicitly set via inline hex codes in the data structure, rendered as an SVG. The visualization is a fork of an existing tree-plotting example, demonstrating a custom layout approach.

BBlueT
79% match
Loading thumbnail…

Fork of Tree graph

This example shows a hierarchical tree graph of electric vehicle stock values across countries in 2024, with branches for China, India, the United Kingdom, and the USA, each dividing into buses and cars with leaf nodes for BEV and PHEV counts. Using d3.hierarchy and d3.tree, the visualization renders an SVG with curved cubic Bézier paths for links, whose colors derive from node data. Nodes are positioned via the tree layout, with colors indicating country, category, or vehicle type.

Rreddysushma994@gmail.com
78% match
Loading thumbnail…

Fork of Fork for plotting tree

This example displays a hierarchical tree of 2011 electric vehicle stock values, organized by country (China, India, United Kingdom, USA) and vehicle type (Buses, Cars), with leaf nodes representing BEV and PHEV quantities. The tree uses d3.hierarchy and d3.tree to compute node positions, with curved paths drawn between nodes via a cubic Bézier command in the `d` attribute. Node colors vary by depth—dark red for root and country levels, indigo for vehicle types, and green for leaf values—while links inherit their stroke color from the target node’s type. The SVG is rendered inside a styled container with a gradient background.

BBALAJI MANDAVA
77% match
Loading thumbnail…

Fork of Fork of React & D3 Vibecoding Starter

This interactive network graph visualizes relationships among car types, transmission types, and door counts. Using D3.js, it loads a CSV dataset and constructs a hierarchical node-link diagram with red, steelblue, and orange circles representing the categories. The `d3.forceSimulation` API handles physics-based layout with `forceLink` for edges, `forceManyBody` for repulsion, and `forceCenter` for positioning. Users can drag nodes via `d3.drag`, with the simulation adjusting in real time. The visualization renders as an SVG with labeled nodes and gray connecting lines.

NNaveen Kumar Kolla
76% match
Loading thumbnail…

plotting tree

This visualization displays 2011 EV stock values as a hierarchical tree chart, with countries (China, India, UK, USA) branching into vehicle categories (buses, cars) and then into BEV and PHEV types with labeled numeric values. The code uses d3.hierarchy and d3.tree to compute the layout, then draws cubic Bezier curves as links. Node and link colors are encoded directly in the JSON data structure, with SVG rendering and a linear-gradient CSS background.

SSubhas Ramdass
74% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

A force-directed network graph reveals the hierarchical relationships among car types, transmission styles, and door counts using data from a CSV file. The visualization builds nodes for transmission types (Automatic, Semi-Automatic, Manual) and their associated door variations, linking them in a tree-like structure. Using d3.forceSimulation with forceLink, forceManyBody, and forceCenter, the SVG elements (circles, lines, and text labels) update positions on each tick. Nodes are color-coded by category—red for the root, steelblue for transmissions, and orange for door counts—and are interactive through d3.drag.

NNaveen Kumar Kolla
73% match
Loading thumbnail…

Fork of D3 Starter

This example shows a mobile network graph with green circular nodes representing phone models and red links connecting them to their respective brands. The visualization uses a force-directed layout powered by `d3.forceSimulation`, with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position the nodes. Nodes are rendered as SVG circles via D3 selections, and the drag interaction is implemented with `d3.drag`. The graph is built with D3 v7 and displays data embedded in the script, with node coordinates updated on each simulation tick.

Ppraveennayak1702@gmail.com
73% match
Loading thumbnail…

Fork of Social Network graph

This example presents a social network graph of Bengaluru locations, where colored nodes represent places like Silk Board Junction and Majestic, and blue links show connections between them with stroke width proportional to link weight. It uses the D3.js v2 force layout (`d3.layout.force`) to simulate node positioning, with drag interaction enabled via `force.drag`. The SVG rendering reads node and link data from an external `data.json` file, displaying each location’s name as text alongside a circular marker. The visualization updates positions on each tick of the force simulation.

Rreddysushma994@gmail.com
72% match