Skip to main content
SimilarExport ZIP
100%

Interactive and attempting to be more DRY with the code

✓ Published0🌍 Public
AAlexDaGr8
Last edited Apr 4, 2019
Created on Mar 28, 2019

This interactive visualization tracks a SmarTrip fare card’s balance over time, plotting each transaction from a Metro rail CSV as an animated SVG line chart. The code organizes shared logic (axes, scales, and rendering) into reusable functions, avoiding repetition. Data points—entries, exits, and sales—are distinguished by color and shape, with tooltips showing route segments and fare changes. The animation plays through the chronological sequence, highlighting the card’s declining balance as the commuter taps in and out between Tenleytown-AU and L'Enfant Plaza.

AI-generated description

Similar vizzes

Loading thumbnail…

Metro Data

This bar chart visualizes the frequency of Washington Metropolitan Area Transit Authority (WMATA) SmarTrip card transactions by day of the week, aggregated across all weeks in the dataset. Each bar represents the total number of recorded trips/activities for a particular weekday, with the x-axis using an ordinal band scale for days and the y-axis a linear scale for counts. The visualization reveals the user's weekly travel patterns by summing all entries for each weekday. The chart is rendered as a static SVG with a dark gray background and simple, clean bars, providing a quick overview of relative daily ridership volume.

AAlexDaGr8
73% match
Loading thumbnail…

GGT and MUNI Animated D3 Scatter Plot

This animated D3 scatter plot displays ridership data for Golden Gate Transit (GGT) and Marin Transit (MUNI), cycling through three column-based views—Operator, Date, and Ridership—every 3.5 seconds. The visualization uses D3 v7's `scaleLinear` for axes and `transition` for smooth 1-second animations, with circles entering at radius 0, updating positions with staggered delays, and axes transitioning simultaneously. Data is loaded via `d3.csv` from a raw Gist URL, rendered as SVG with custom Share Tech font styling, and the animation loop is driven by `setInterval`.

AAndre J Denais
71% match
Loading thumbnail…

D3 Scatterplot

This interactive D3 scatterplot visualizes cumulative Uber fare amounts per day from 2009 to 2015, using data from a Kaggle dataset. The SVG chart plots each date on the x-axis and total daily fares on the y-axis, with green circles marking individual points. The visualization uses `d3.csv` to load the raw data, `d3.scaleBand` for the time-based x-axis, and `d3.scaleLinear` for the fare amounts. Custom tick marks highlight the first date of each year, while gridlines and labeled axes improve readability.

DDominic Fernandez
69% match
Loading thumbnail…

Temperature Visualization

This interactive line chart uses the D3.js brush-and-zoom technique to explore hourly bike-sharing usage in Washington DC, highlighting how the number of users correlates with temperature. The visualization, built with D3 v4 and rendered as SVG, displays temperature as a colored line over a two-year period (2011-2012). Users can brush along the lower time-series context chart to select a time range, and the main panel zooms in to reveal finer-grained patterns. The chart is part of a broader exploratory project investigating relationships between rider counts and weather attributes like temperature, humidity, and windspeed. Data comes from the UCI Machine Learning Repository's Bike Sharing dataset, and the implementation builds on prior work by mbostock and curran, with the source code available under an MIT license.

663anp3ca
68% match
Loading thumbnail…

Interactive Visulization

This interactive visualization shows the number of bike rides, broken down by rideable type, filtered by user type (casual or member), quarter, and year. The chart updates dynamically, rendering a horizontal bar chart for each selected combination. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map the categorical and quantitative axes, and renders the bars as SVG `<rect>` elements within a `<g>` transform. A `<title>` element provides tooltips on each bar, while the data is loaded from a CSV file.

SSamir Nandardhane
68% match
Loading thumbnail…

Class 10

A data-visualization example titled “Discovering D.C. by Bike” shows bike-sharing stations, bike trails, and tourist attractions across Washington, D.C., on an interactive zoomable map. It uses d3-geo with a Mercator projection and d3-tile for the basemap, while d3-zoom enables pan and zoom with tile scaling. Hovering over markers reveals tooltips, and a legend explains the symbols. The code loads three GeoJSON datasets from GitHub and renders all elements as SVG with animation support, using d3.v4 and d3-legend for the color legend.

AAnaMal08
67% match
Loading thumbnail…

Class 10

This interactive map of Washington, D.C., overlays bike-sharing stations, hiking trails, and points of interest onto a zoomable Mercator projection. Users can hover over red station markers or green trail paths to see tooltips with addresses, bike counts, or trail lengths. Built with D3 v4, the example uses `d3.geoMercator` and `d3.geoPath` to render geographic features, while `d3.zoom` and `d3.tile` provide a smoothly scaling tile-based view. Data is loaded from three remote JSON files hosted on GitHub, and the interface supports mouse-based panning and zooming.

AAnaMal08
67% match
Loading thumbnail…

D3

The visualization is a heat map showing monthly trip counts for Dubai Metro stations, displaying the top ten stations by total trips across the available months. Station names appear on the x-axis while month-year combinations form the y-axis, with color intensity representing trip volume. Built with D3 v5, the code aggregates trip data from a CSV file, then renders colored SVG rectangles that scale from white to green. Interactive tooltips appear on hover, showing the exact trip count for each station-month pair.

Vvillagef
67% match