Skip to main content
SimilarExport ZIP
100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public
Ssridhardubala106@gmail.com
Last edited Apr 3, 2024
Created on Apr 3, 2024

This network graph shows the hierarchical relationship between mobile phone brands and their models, with a central “Mobiles” root node connecting to brand nodes (apple, samsung, oneplus, etc.), which in turn link to individual phone models. The visualization uses a force-directed layout powered by `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` components to position nodes dynamically. Nodes are rendered as SVG circles with labels, and links as lines, with colors distinguishing the root node from brand/model nodes. The data consists of 28 phone records with brand and processor information, though the processor attribute is not visualized.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of -scatter

This example visualizes a hierarchical tree of mobile phone data, organized by brand, model, and processor type. It uses the D3.js v7 library to construct a tree layout from the nested dataset and renders it as an SVG. The tree layout is applied with d3.tree() and d3.hierarchy(), with links drawn using d3.linkHorizontal() and nodes displayed as circles with labels. The visualization groups phone models under their respective brands, with processor brands as leaf nodes, and styles the connections with red links and black nodes.

Ssridhardubala106@gmail.com
88% match
Loading thumbnail…

-scatter

This example shows a social network graph of smartphone brands and models, where each phone is plotted as an orange node with labels combining brand and model names. The visualization uses D3.js v7 with the `d3.forceSimulation` API to position nodes through a force-directed layout, applying link, charge, and centering forces. Data is drawn from an inline array of smartphone objects. The graph renders as an SVG with edges and labels, updating positions on each simulation tick through the `ticked` function.

Ssridhardubala106@gmail.com
83% 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
83% match
Loading thumbnail…

Generating Tree Graph

This tree graph visualizes the hierarchical relationship between smartphone brands and their models, using processor speed as a secondary attribute for each leaf node. The d3.stratify layout transforms flat JSON data into a hierarchy, which is then rendered as horizontal links and circles connected by the d3.tree layout. Nodes are positioned using the tree layout’s x and y coordinates, with d3.linkHorizontal generating smooth curved paths for the edges. The SVG canvas displays each phone model as a labeled circle, with brand names appearing as parent nodes, all styled with steelblue fills and white strokes.

Ssridhardubala106@gmail.com
82% match
Loading thumbnail…

MOBILE TREE GRAPH

This radial tree graph shows the hierarchical relationships between smartphone brands, their models, and processor types. The visualization uses d3.tree() and d3.hierarchy() to compute the tree layout, with d3.linkHorizontal() rendering curved links between nodes. Each node is drawn as a circle with a text label, colored green and red respectively within the SVG canvas. The data originates from static JavaScript arrays, and the graph updates positionally based on the D3 hierarchy API.

Ppraveennayak1702@gmail.com
81% match
Loading thumbnail…

ICE -8 Network Graph

This visualization uses a force-directed network graph to show the relationships between mobile phone brands and their models, connected through a central “Mobiles” root node. The graph is built with d3.forceSimulation, using forceLink for edges, forceManyBody for repulsion, and d3.forceCenter for positioning. Nodes are rendered as circles with orange for brands and models, blue for the root, and labeled with text. The input data is a static array of objects pairing brand names with corresponding processor brands, which determines the node and link structure.

Ppraveennayak1702@gmail.com
80% match
Loading thumbnail…

Tree

A tree diagram visualizes a hierarchy of mobile phone brands and their models, with each leaf node labeled by model name and processor speed in gigahertz. The layout is computed using `d3.tree` and `d3.hierarchy`, with `d3.linkHorizontal` generating curved link paths between nodes. The SVG rendering supports zooming via `d3.zoom`, and text styling uses the Playfair Display font with a light orange background. The dataset contains nine brands and fourteen specific phone models, each with a processor speed value displayed alongside its name.

Ssrividyamadas@gmail.com
80% match
Loading thumbnail…

Scatter plot

This dark-themed scatter plot shows the relationship between units sold and total sales for smartphone models, with each point colored by brand and sized by average rating. Hovering reveals a tooltip with model details. Built with D3 v7, the visualization loads CSV data, applies linear scales for axes and a color scale for brands, and uses SVG circles with mouse events for interactivity.

Llohitsai62@gmail.com
77% match