Skip to main content
SimilarExport ZIP
100%

Generating Social Network Graph

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

This graph displays a social network of mobile phone brands, categorized by whether they support 5G technology. It presents two distinct clusters of nodes, each connected to a central hub representing either "Has 5G" or "No 5G". Built with D3.js v5, the visualization uses SVG elements and employs a force-directed simulation via `d3.forceSimulation` and related APIs to position the nodes. Users can interact by dragging the nodes, and the view can be zoomed, with all data hardcoded in the JavaScript file.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Generating Tree Graph - ICE8

This interactive tree graph classifies mobile phone brands into two categories: "Has 5G" and "No 5G". It uses D3.js v5 with a hierarchical layout, rendering nodes as circles with labels on an SVG canvas. The visualization is animated, with smooth transitions when clicking a node to collapse or expand its children. The code constructs the tree via `d3.hierarchy` and `d3.tree()`, and implements custom transition logic using the `.transition().duration()` API to animate node and link movements. The static dataset is hardcoded in JavaScript, and the page’s styling is defined in an external CSS file.

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

Fork of Reusable D3 Scatter Plot

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.

Ssridhardubala106@gmail.com
75% match
Loading thumbnail…

Ice-8

This is a social network graph of mobile phone brands, showing the connections between a central "Mobiles" node and various manufacturers like Apple, Samsung, and OnePlus. The visualization uses a force-directed layout with repulsive charges and link distances to position the nodes. Built with D3.js, it employs `d3.forceSimulation` for physics, `d3.drag` for node interaction, and `d3.zoom` for scaling. The graph is rendered as SVG, with the central node colored red and connected nodes in blue, allowing users to explore relationships through pan and zoom.

Ssrividyamadas@gmail.com
75% 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
73% 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
73% match
Loading thumbnail…

Social Network Chart

A force-directed social network chart visualizes five named nodes and five edges representing connections. The graph is rendered as SVG elements, including circles for nodes, lines for links, and text labels positioned above each circle. The layout is computed using `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceLink`, and `d3.forceCenter` forces. D3 version 5 is loaded via UNPKG, and the example demonstrates importing from the `"d3"` module and a local ES6 module.

VVenkat-Sumith-Thota
71% 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
70% match