sudeepmamidi

@sudeepmamidi·4 public vizzes

Social Network

This social network graph visualizes friendship connections between people, with each node labeled by name and linked by directed edges using arrow markers. The graph uses a force-directed layout via `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes and reveal clustering. Nodes are interactive circles with hover effects and dragging support, rendered as SVG using D3 v6’s `select` and `selectAll` APIs. The data is loaded from a JSON file containing nodes and links with relationship metadata.

Apr 10, 2023

Loading thumbnail…

Family Tree

This interactive family tree visualizes the hierarchical ownership structure of a car company, displaying parent companies and their subsidiaries as collapsible nodes. The diagram uses a tree layout from D3.js version 3.5, with orange diagonal links connecting nodes and white circular markers styled with steelblue strokes. Each node displays the company name in sans-serif text, and the SVG rendering is animated with a 750-millisecond transition duration, allowing users to expand or collapse branches by clicking on nodes. The example demonstrates basic D3 tree generation with custom margin and size configurations.

Apr 10, 2023

Loading thumbnail…

Country Map

This example visualizes a map of the United States, rendering individual state boundaries as green paths with dark strokes on a light blue SVG canvas. It uses the D3 v4 library with `d3.geoPath` and the `d3.geoAlbersUsa` projection to draw the map, while `topojson-client` converts TopoJSON data from the us-atlas dataset into GeoJSON features. The SVG is styled with a custom background color and positioned within a React-free HTML page, with margins and transform attributes controlling the layout.

Apr 10, 2023

Loading thumbnail…

Sudeep World Map with D3.js!

This example displays a world map using an equirectangular projection, rendering each country as a pink SVG path with black outlines on a blue sphere. The visualization uses D3 v5 functions `d3.geoEquirectangular` and `d3.geoPath` to project and draw the geography, while TopoJSON’s `feature` method converts country boundaries from the world-atlas TopoJSON file. Hovering over a country turns its fill white, highlighting the selected region.

Apr 10, 2023