Skip to main content
SimilarExport ZIP
100%

NYC programming project

✓ Published0🌍 Public
DDasbach.EJ
Last edited Jun 20, 2021
Created on Jun 19, 2021
Forked from HTML Starter

This example pairs two SVG charts to explore airline routes in the New York City area. The left panel displays a force-directed network of airlines, while the right panel shows a geographic map of airports. The code uses d3.forceSimulation for the network layout and d3.geoPath for the map projection, with data drawn from a local source. A flexbox layout positions the views side by side, and CSS borders highlight the SVG canvases.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

NYC 2

This example visualizes airline routes in the New York City area, displaying a bar chart of route counts per airline alongside a map of airports. The page uses D3.js to load and parse the `routes.csv` data, aggregate routes by airline, and render the two SVG charts. The layout is styled with CSS flexbox, while the SVG elements are given a thin black border. The code is structured for the React framework but currently uses raw JavaScript within an HTML page.

DDasbach.EJ
85% match
Loading thumbnail…

Fork of React & D3 Starter

A force-directed network diagram visualizes flight routes among seven cities, with node size reflecting degree centrality and color mapping to geographic region. The visualization uses D3 v7's `forceSimulation` with `forceLink`, `forceManyBody`, `forceCenter`, and `forceCollide` to position nodes, while SVG circles, lines, and text labels render the graph. Interactive drag behavior is implemented via D3's `drag` function, and a legend identifies the four region categories. The data originates from a hardcoded JavaScript array of city nodes and weighted route links.

Ssharathchandrareddymuthyam
76% match
Loading thumbnail…

8-2B-Network

This network graph visualizes conceptual flight routes connecting major hub cities (New York, London, Dubai) with smaller cities using a force-directed layout in D3 v7. The SVG rendering uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes dynamically. Major routes are distinguished by thicker, blue strokes, while hubs appear as larger, teal circles. City labels accompany each node, with drag interaction enabled via a custom drag function.

SSreedevi Itta
75% match
Loading thumbnail…

React & D3 Vibecoding Starter

A force-directed network diagram maps six Texas cities as movable nodes connected by route edges. The SVG visualization uses `d3.forceSimulation` with link, charge, and centering forces to position the graph, while nodes are rendered as blue circles with city-name text labels. The code implements dragging via `d3.drag`, updates positions on each simulation tick, and uses `data.forceLink` to bind node IDs to the specified city-pair relationships.

SSathviKankanala@my.unt.edu
74% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example shows a small force-directed network of six Texas cities connected by routes, rendered as circles and lines on an SVG canvas. D3’s `d3.forceSimulation` drives the layout with `forceLink`, `forceManyBody`, and `forceCenter`, while `d3.drag` enables interactive node repositioning. Tick updates synchronize link coordinates and node positions, with city labels drawn as text elements. The data is hardcoded as `nodes` and `links` arrays, and all rendering uses D3 v7 selections with SVG primitives.

Ssaisanthoshravula@my.unt.edu
74% match
Loading thumbnail…

Airports - Network

This example visualizes the flight route network for each airline from a CSV dataset, using a force-directed layout. Nodes represent individual airports, while lines depict the connections between them, colored in the airline’s signature maroon. The visualization is built with D3.js v5 and renders as an SVG. It employs `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position the nodes. The code also integrates `d3.ForceEdgeBundling` to bundle edges, reducing visual clutter in the dense network.

Aala-wahibi
74% match
Loading thumbnail…

Graph to map

This example visualizes a graph of airport connections layered over a map of the United States. It shows how nodes can be positioned geographically on a map or rearranged using a force-directed simulation, with a toggle button switching between the two modes. The code uses D3 v4’s `d3.forceSimulation`, `d3.forceLink`, and `d3.forceManyBody` for layout, while `d3.geoPath` and `d3.geoAlbersUsa` project map features. Node positions come from longitude and latitude data in `data.json`, and the map uses `continental-us.json` GeoJSON features. Elastic transitions animate the shift between map and simulation layouts.

Bbrett@cloudaccelerator.co
74% match
Loading thumbnail…

Fork of React & D3 Starter

This example visualizes a city connection network, showing six cities as nodes and the routes between them as links. The graph is rendered as an SVG and is interactive, allowing users to drag nodes, which triggers a force-directed layout simulation. The code uses D3 v7 APIs such as `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position the nodes, with labels displaying each city's name. The visualization is built within a React framework, as demonstrated by the `index.jsx` file using `useRef` and `useEffect` to integrate D3.

Rrajivkarri98@gmail.com
73% match