Skip to main content
SimilarExport ZIP
100%

Document

✓ Published0🌍 Public
SSaurabh Gupta
Last edited Mar 13, 2022
Created on Mar 13, 2022
Forked from Hello VizHub

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.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Network

This network visualization displays the adjacency relationships among contiguous US states, with each state represented as a colored node and borders as links. The layout is computed using d3.forceSimulation with forceLink and forceManyBody, while state geometries come from TopoJSON data loaded via d3.json. Node colors are assigned by approximate longitude-based regions, and state names are drawn as SVG text labels. The code uses d3.geoPath to calculate centroids for region classification, and the final SVG rendering updates positions on each simulation tick.

Sson.sultan@yahoo.com
82% match
Loading thumbnail…

Untitled

This example uses D3.js v3 and TopoJSON to render a force-directed layout of U.S. state centroids, with Voronoi links connecting neighboring states. The code loads a U.S. map from a JSON file, filters out non-continental states, and computes centroids via `d3.geo.path().centroid()`. A `d3.layout.force()` simulation positions the nodes while maintaining link distances derived from the Voronoi cells. SVG paths draw each state’s shape, and lines represent the Voronoi links, updating on each tick. The visualization highlights geographic adjacency through network topology rather than choropleth coloring.

Tthanhtrant219
79% match
Loading thumbnail…

State Graph

This example displays a choropleth-style map of the United States, with each state rendered as a light gray polygon and white borders separating them. It loads the US TopoJSON data from `us-10m.v1.json` and uses `d3.geoPath` to project the state features. The code applies a scale transform to the SVG to adjust the map’s size and vertical position. The visualization uses D3 v4 and TopoJSON v2, with the map drawn as SVG paths.

SSelena Ding
76% match
Loading thumbnail…

country map

This visualization displays a choropleth map of the United States, coloring each state in red with thin black internal borders. The map is rendered using React and D3 v5, with geographic shapes generated through `d3.geoAlbers` projection and `d3.geoPath`. State boundaries come from the US Atlas TopoJSON dataset, processed via `topojson.feature` and `topojson.mesh`. The SVG paths change to sky blue on hover using CSS, providing simple interactivity.

SSai Kaushik
76% match
Loading thumbnail…

Untitled

This example presents two linked views of the same network of U.S. states: a node-link force-directed diagram and an adjacency matrix. The matrix cells are colored by the states’ regional group, and the visualization animates reordering between sorted and categorical arrangements. Built with D3 v3, it uses `d3.layout.force` for the node layout, while the matrix uses `d3.scale.ordinal` for axes and `transition.attr` for smooth reordering.

Pprateekvasi
75% match
Loading thumbnail…

D3 map

This visualization presents a map of the United States, with each state’s geographic boundary drawn as a vector path. The code defines state outlines using SVG path data within a JavaScript object, where each state’s shape is specified as a series of coordinates. Built with React, the visualization leverages D3.js to render the map, using the path data to generate the geographic shapes through the `d3.geoPath` API. The animation-driven rendering brings the map to life, dynamically displaying the state boundaries on the canvas.

00506Zhengyi
75% match
Loading thumbnail…

Untitled

This example displays a choropleth-style map of the United States using SVG paths. It renders state boundaries and fills each state as a separate path, with a hover effect that turns states red via CSS. The visualization loads TopoJSON data from a remote URL and converts it to GeoJSON using the `topojson.feature` and `topojson.mesh` APIs. It relies on `d3.geoPath` to project and draw the geographic shapes, while `d3.json` fetches the data asynchronously. State borders are drawn as a white stroke overlay for visual separation.

MMina Rezaei
75% match
Loading thumbnail…

US_Map

A choropleth-style map displays the contiguous United States with state boundaries, rendered in SVG using React. The visualization uses `d3.geoAlbers` for projection and `d3.geoPath` to draw geographic features, with `d3.geoGraticule` generating graticule lines. Land areas are filled pink, interiors stroked darkblue, and the sphere background is yellow, styled via CSS. Geographic data comes from the US Atlas TopoJSON, processed with `topojson.feature` and `topojson.mesh`.

AAkrutiKhurana2103
75% match