Skip to main content
Log in
V

Vansh Patel

@vspatel927·15 public vizzes

Loading thumbnail…

US National Parks Map

This map uses D3.js to display the locations of US national parks, leveraging geographic projections from d3-geo to position markers across the United States. It incorporates animation and is designed as an interactive visualization of park distribution, drawing on data from public sources such as Wikipedia. The project, authored by vspatel927, is released under the MIT license and was created as a final project for a data visualization course.

Aug 26, 2024
Loading thumbnail…

VP First Visual With Water Droplets

This animated scatter plot visualizes New York City water consumption and population data from the City of New York dataset, with each data point rendered as a water droplet shape using SVG path commands. The droplets drop into place sequentially via `transition().delay()`, scaling from zero to full size. A linear gradient fills each droplet with a water-like blue, while a background pattern displays a rain cloud image. Hovering a droplet reveals its year, consumption, population, and per-capita values through an HTML tooltip. The visualization uses D3 scales, axes, and custom SVG patterns to convey the relationship between consumption and population over time.

Mar 27, 2024
Loading thumbnail…

VP National Park 2023 Visitation Dataset

The visualization shows the first record of the National Park Service 2023 visitation dataset, with park name, visitor counts for 2022 and 2023, and geographic coordinates displayed as formatted JSON text. The code imports the CSV data, parses visitor counts by removing commas and converting to numbers, and renders the parsed first entry in a monospaced preformatted block. It uses the dataset directly from the loaded CSV file, with a fixed font size for readability. The example demonstrates data cleaning and JSON serialization without additional visualization libraries.

Mar 27, 2024
Loading thumbnail…

US Cities Map At Night

This example visualizes the geographic distribution of over 1,000 US cities as glowing dots on a dark, night-time map of the United States. The map renders state boundaries from US Atlas TopoJSON data using `d3.geoAlbersUsa` and `d3.geoPath`, while city coordinates are parsed from a CSV file with `d3.csvParse` and projected onto the map. Each city appears as a semi-transparent, pale yellow circle, with an overlaid graticule and outline providing spatial context. The visualization updates dynamically through a state-driven render loop, fetching both datasets asynchronously via the Fetch API.

Mar 27, 2024
Loading thumbnail…

US National Parks

This visualization displays the locations of US National Parks as glowing dots across a dark map of the United States. It uses the Albers USA projection from `d3.geoAlbersUsa` and renders map features with `d3.geoPath`. Park coordinates are loaded from a CSV file, and each park appears as a small, semi-transparent circle. The map outline and graticule are drawn using `d3.geoGraticule`, while state boundaries come from a TopoJSON file fetched from the `us-atlas` package. The visualization is built with D3.js version 7 and TopoJSON for geographic data processing.

Mar 27, 2024
Loading thumbnail…

VP Parallel Coordinates with Brushing

This interactive parallel coordinates visualization explores National Highway System traffic speeds, distinguishing vehicles by type and area (rural vs. urban). Built with D3.js in React, it animates filtered data as users brush along any axis to highlight matching trips, with color encoding by vehicle type and a dark, screen-blended design for readability.

Mar 20, 2024
Loading thumbnail…

VP Dataset 2 (National Park Recreational Visits)

This example demonstrates National Park Service recreational visit data from 1979 onward, showing raw CSV rows converted into JavaScript objects with numeric fields. It displays the first data record as formatted JSON in a preformatted text block using a browser’s HTML container. The code parses the CSV via an imported data module, converts string values with unary plus operators, and sets a fixed font size for presentation. No charting library is used; it simply reveals the dataset’s structure for inspection.

Mar 20, 2024
Loading thumbnail…

VP National Parks Bar Chart

This animated bar chart displays the top six most visited U.S. National Parks as of 2022, ranking them by visitor count using interactive bars. Built with D3.js, it uses `scaleBand` and `scaleLinear` for positioning, with axes rendered via helper functions. The visualization responds to mouse movement by tracking `hoveredX` and `hoveredY` coordinates, triggering tooltips that show each park’s name and visitor totals. Data comes from the `@vspatel987/national-park-2022` package, and the chart animates through a resize observer, updating the SVG dimensions dynamically.

Feb 19, 2024
Loading thumbnail…

VP First Visual

This scatter plot shows the relationship between New York City’s water consumption and its population over time, using data from the NYC Open Data portal. Each point pairs annual consumption with population figures, plotted on linear scales with labeled axes. The visualization uses D3’s `scaleLinear` for positioning, `axisLeft` for the y-axis, and SVG circles with adjustable radius and opacity. A gray inner rectangle frames the plotting area, while the chart resizes responsively via `observeResize`, and axes and labels come from shared helper functions.

Feb 12, 2024
Loading thumbnail…

VP Iteration on First Visual

This D3.js visualization displays New York City water consumption and population data from 1979 to 2022. It plots two lines over time: one black line for water consumption (in millions) and one red line for population, each scaled to its own y-axis using `d3.scaleLinear`. The SVG chart is rendered with `d3.line` for the paths, `d3.axisLeft` and axis label helpers from `@curran/axis-labels`, and a light gray inner rectangle background. Data originates from the NYC Open Data water consumption dataset.

Feb 7, 2024
Loading thumbnail…

VP National Park 2022 Visitation Dataset

This example showcases a parsed CSV dataset from the National Park Service Annual Visitation Dataset, displaying the first record's raw structure in a preformatted block. The code reads the `data.csv` file, strips commas from numeric fields, and converts them to numbers. It then selects the first object and renders its JSON representation using string interpolation within the container's innerHTML. The visualization is purely textual, demonstrating data loading and transformation without any graphical charting library.

Feb 4, 2024
Loading thumbnail…

Fork of Circles with D3

This visualization recreates Conch Street from SpongeBob SquarePants using geometric SVG shapes. Simple rectangles form the buildings and street, while semi-circular arcs create doorways, and ellipses depict trees and character details. The D3 code uses `arc()` to generate path data for the doors and `select()` with joins to build the SVG, applying a consistent opacity and a pastel color palette. The scene is composed from static, hardcoded data arrays for each shape type.

Jan 29, 2024
Loading thumbnail…

VP Vizualize Numbers

Five bubbles represent the five largest U.S. national parks by land area, scaled proportionally and labeled with each park's name and acreage. Animated with D3 transitions, circles expand sequentially while text fades in. Distances between bubbles are not to scale, but radii accurately compare park sizes. Data originates from Wikipedia's list of national parks, and the visualization uses d3's `select`, `transition`, and `easeLinear` APIs.

Jan 29, 2024
Loading thumbnail…

VP Dataset 3 (End Year National Highway System Median Traffic Speeds)

This visualization examines median traffic speeds on the National Highway System, showing how speeds differ between urban and rural areas, vary between AM and PM periods, and change over time before and during the pandemic. The code loads data from a CSV file, parses numeric fields, and displays the first data row as JSON in a formatted block using a template literal. The example uses the JavaScript array `map` method for data conversion and displays the rendered output in the container element.

Jan 23, 2024
Loading thumbnail…

VP Dataset 1 (NYC Water Consumption)

This example displays the first record of New York City water consumption data from the NYC Open Data portal, showing fields like population, consumption in millions of gallons per day, and per-capita usage. The code parses the CSV file, converts numeric strings to numbers, and renders the first data object as formatted JSON text inside an HTML pre element. It uses JavaScript with the `JSON.stringify` method to display the structured data directly in the container.

Jan 23, 2024