Skip to main content
SimilarExport ZIP
100%

Fork for plotting tree

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

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.

AI-generated description
MIT Licensed

Similar vizzes

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
92% 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
91% 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
91% match
Loading thumbnail…

ICE8-Tree graph

This interactive tree diagram, titled "EV Data Based on Countries," visualizes a nested hierarchy of electric vehicle statistics. It displays a root node for overall EV data, which branches out to country-level nodes (Australia, Austria, Belgium), then to vehicle type categories (Cars, Buses, Trucks), and finally to powertrain types (BEV, PHEV, EV). The code constructs the visualization using D3.js version 7, and the page structure is defined in `index.html` with styling from `style.css`. The JavaScript builds the tree layout and renders it as SVG elements, with links styled as gray lines and circular nodes colored according to their level in the hierarchy.

AArun
81% match
Loading thumbnail…

Fork of Visualization of Spatial Data - Tree Graph

This interactive tree diagram visualizes hierarchical EV data by country, vehicle type, and parameter, with collapsible nodes that let users explore nested branches. Built with D3.js v6, the visualization uses `d3.hierarchy` and `d3.tree` to compute node positions, renders nodes as SVG circles with text labels, and draws curved links via path elements. Clicking a node triggers a smooth animated transition that expands or collapses its children, while branches beyond the second level start collapsed to reduce clutter. All rendering is SVG-based with CSS styling applied to node fills and cursor states.

AArun
80% match
Loading thumbnail…

ForkForNetWork_SDV

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.

BBlueT
79% match
Loading thumbnail…

Fork of Fork 1

This example shows a hierarchical tree of car types, branching into transmission categories (Automatic, Manual, Semi-Automatic) and then door counts, with nodes rendered as distinct shapes (rectangles, circles, rotated squares) and colored per depth level. It uses d3.csv to load a remote dataset, then processes the data into a nested structure before applying d3.tree and d3.hierarchy to compute the layout. The visualization renders as SVG, drawing curved links via d3.linkHorizontal and positioning nodes with explicit translate transforms, while each node’s shape and fill color are assigned conditionally based on its depth.

NNaveen Kumar Kolla
77% match
Loading thumbnail…

Fork of Tree - dv - ice_8

This interactive tree map displays a hierarchical classification of different vehicle types, from the root "VEHICLE" down to specific models like the Lamborghini Diablo and Ferrari Testarossa. The static dataset builds a two-level branching structure separating two-wheelers from four-wheelers, with each node color-coded by its fill property. Rendered as an animated SVG using D3.js version 3.5.17, the visualization employs the `d3.layout.tree()` and `d3.svg.diagonal()` APIs to position nodes and draw connecting links, while node transitions are handled through the `.transition().duration()` method.

HHema1430
76% match