Saurabh Gupta

@saurabhgupta11·5 public vizzes

Document

A network graph and a choropleth map display U.S. state names and connections. The network uses a force-directed layout with D3’s `d3.forceSimulation` to position linked nodes, while the map renders geographic boundaries via `d3.geoPath`. The visualization loads state data from a JSON file and draws SVG elements, with styling applied through Montserrat font and custom classes.

Mar 13, 2022

Loading thumbnail…

experiment Map

This example displays a map of the United States rendered as SVG paths, with state boundaries drawn from TopoJSON data loaded from the us-atlas dataset. It uses D3 v5’s `json`, `geoPath`, and `geoMercator` functions along with the `feature` method from topojson to convert the TopoJSON topology into GeoJSON features. The visualization demonstrates basic geographic projection and path generation, outputting a static map without additional interactivity or styling.

Mar 12, 2022

Loading thumbnail…

United States Map

This example displays a world map with countries rendered in light green against a dark blue ocean sphere, using a natural Earth projection. It loads geographic data from the World Atlas TopoJSON dataset via unpkg and converts it to GeoJSON using the `feature` function from Topojson. The visualization leverages D3 v5 APIs including `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.json` to project and draw the country boundaries as SVG paths.

Mar 12, 2022

Loading thumbnail…

Untitled

This example renders a network graph using React and D3’s force simulation. The visualization shows nodes and links positioned through `d3.forceSimulation`, with each node rendered as a circle and links as lines. The code uses `d3.forceLink` for edge constraints and `d3.forceManyBody` for repulsion, updating positions via `requestAnimationFrame`. The graph is generated from hardcoded data arrays for nodes and links, demonstrating a basic interactive layout with drag-and-drop support.

Mar 12, 2022

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple, animated emoticon drawn with SVG shapes, including a yellow circle, eyes, and eyebrows. It shows how to use D3.js version 5 to select and append SVG elements, set their attributes, and apply basic transitions. The code uses `select`, `append`, `attr`, and the `arc` generator from D3, along with the `transition().duration()` API to animate the eyebrows' vertical position. The view consists of a static face with moving eyebrows, rendered directly in the browser.

Mar 11, 2022