Skip to main content
Log in
H

hassanraza1552

@hassanraza1552·4 public vizzes

Loading thumbnail…

Untitled

This example visualizes a force-directed network graph, showing how nodes with varying sizes and link connections settle into a stable layout. The graph uses `d3.forceSimulation` and `d3.forceLink` to compute the node positions and link distances, while `d3.select` and `d3.zoom` handle the interactive panning and zooming. The visualization is rendered with SVG elements using the `d3.drag` behavior for node repositioning. The data is loaded from a CSV file containing node and link information, and the color of each node is assigned based on a categorical scale.

Jun 14, 2020
Loading thumbnail…

Untitled

This example visualizes the hierarchical structure of a dataset from `data.json` as a radial tree. The layout is computed using a force-directed simulation via D3’s `d3.forceSimulation` API, which positions nodes based on repulsion and attraction forces. The root node is highlighted, and hover interactions reveal child node details and highlight the direct ancestry path, while non-related nodes are dimmed. The visualization is rendered using D3’s SVG-based `d3.geoPath` for the curved links, with the entire graph adapting to window resizing.

Jun 14, 2020
Loading thumbnail…

Untitled

This example visualizes a force-directed network using D3.js, showing the interconnections between nodes as a dynamic, physics-based simulation. It employs `d3.forceSimulation` with custom link and node forces to position the elements, while the underlying graph data is loaded from a local JSON file (`data.json`). The nodes are rendered and dragged interactively, and the simulation runs in real time, updating the layout continuously. The visualization also includes a legend and color-coded connections to indicate different relationship types, providing a clear view of the network’s structure and cluster formation.

Jun 14, 2020
Loading thumbnail…

Testing Pie Chart

This example presents a pie chart visualizing the distribution of new COVID-19 cases across Pakistani regions, based on data from an `abc.json` file. The chart shows proportional slices for each region, with the data aggregated from daily reports. The visualization is built with D3.js v2 and React, using `d3.layout.pie` and `d3.svg.arc` to generate the SVG paths. Animated transitions adjust the inner radius from full to a donut shape, and the chart updates dynamically as the data is fetched and processed.

Jun 13, 2020