Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Question 4 bubble chart

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

aea1330f8fb34b6bb91c38d612394321

Open

Fork of Question 4 bubble chart

0 stars0🌍 Public
Nneeleshalapati@gmail.com
Last edited Apr 10, 2024
Created on Apr 10, 2024

This bubble chart uses a force-directed layout to visualize 25 data points from a CSV file, with each node's size and color encoded by the data's `size` and `groupid` values. The chart arranges the circles as a packed bubble diagram where larger bubbles tend toward the center, while smaller ones are pushed outward. The visualization is built with D3 v5 and the `d3.forceSimulation` API, combining many-body repulsion, X/Y centering forces, and collision detection to position the circles. Labels show each node's ID, and the simulation updates positions through a tick callback that adjusts circle and text attributes on an SVG canvas.

AI-generated description

visjs-bubble

This is Bubble chart using Vis.js.

In this project, I added dragging, moving, zooming, clustering functionalities.

VisJS

A dynamic, browser based visualization library. The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d.

Modules

  • Network : Display dynamic, automatically organised, customizable network views.
  • Timeline : Create a fully customizable, interactive timeline with items and ranges.
  • Graph2d : Draw graphs and bar charts on an interactive timeline and personalize it the way you want.
  • Graph3d : Create interactive, animated 3d graphs. Surfaces, lines, dots and block styling out of the box.
  • Dataset : Manage unstructured data using DataSet. Add, update, and remove data, and listen for changes in the data.

Download; getting started

Vis.js runs fine on Chrome, Firefox, Opera, Safari, IE9+, and most mobile browsers (with full touch support). This site contains documentation, downloads and live examples of vis.js. The sourcecode of vis.js is available at Github.

  • install with npm (recommended) npm install vis

  • install with bower bower install vis

  • link from cdnjs.com vis.min.js

vis.min.css

Showcase; see vis in action!

In this section you can see cool projects that vis was used in.