Interactive and attempting to be more DRY with the code

100%

Interactive and attempting to be more DRY with the code

✓ Published0🌍 Public

Last edited Jul 30, 2019

Created on Jul 30, 2019

This interactive D3 visualization displays Washington Metropolitan Area Transit Authority (WMATA) fare card transactions from a CSV file, plotting entry and exit times across two linked SVG charts. The left scatterplot uses `d3.scaleTime` and `d3.scaleLinear` to map timestamps against time of day, with `d3.brush` enabling rectangular selections that filter the dataset. The right stacked bar chart reconstructs station-level entry and exit counts using `d3.nest` and updates dynamically through a shared data-binding pattern. The code applies a DRY approach via a reusable `createSVG` class and `Object.defineProperty` to synchronize both charts while retaining an animation feel through the CSS grid layout.

AI-generated description

forked from <a href='http://bl.ocks.org/AlexDaGr8/'>AlexDaGr8</a>'s block: <a href='http://bl.ocks.org/AlexDaGr8/2a8812267cb4c3743d5097229c95f60e'>Interactive and attempting to be more DRY with the code</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Interactive and attempting to be more DRY with the code

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.

AAlexDaGr8

86% match

Loading thumbnail…

Stylised Scatter Chart with React & D3

A React-based scatter chart visualizes hourly Velib bike availability in Paris, aggregated from a remote CSV via `d3.csv` and `d3.rollups`. The SVG rendering uses `d3.scaleTime` for the x-axis (September 6–18, 2021) and `d3.scaleLinear` for the y-axis, with circles sized and positioned by bike counts. D3 generates tick marks, while React components (`AxisBottom`, `AxisTop`, `Marks`) handle layout, and a dropdown filters data options.

MManon ROMAIN

73% match

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…

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

72% match

Loading thumbnail…

E24 - STYLISED a Bar Chart

This stylized bar chart visualizes regional trip volumes using an SVG-based React interface. It loads a CSV dataset via the `csv` function from D3 v5 and maps the data to horizontal bars, with the y-axis displaying regions and the x-axis showing trips. The example clearly separates concerns across three modular files: `AxisBottom.js`, `AxisLeft.js`, and `Marks.js`, which utilize D3's `scaleBand`, `scaleLinear`, and `format` utilities for scaling and tick formatting. The chart uses a linear scale for the x-axis, with tick labels formatted using a custom two-significant-figure format, and includes a tooltip for each bar.

VVanessa

71% match

Loading thumbnail…

TP3-p3-5

This visualization compares four area-chart layouts for multivariate stock data, showing the same series as stacked, centered, and separated regions to highlight alternative encodings of cumulative change. It loads CSV data via `d3.text` and `d3.dsvFormat`, parses dates with `d3.timeParse`, and uses `d3.nest()` to group by symbol. SVG rendering employs `d3.area()` with `d3.curveBasis` for each variant, while scales and axes come from `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`. Animated transitions between layouts are driven by D3’s update pattern, though the code excerpts omit the final animation calls.

RRade-Mathis

71% match

Loading thumbnail…

reusable scatter plot

This reusable scatter plot displays age against fare price, with points colored by gender. The visualization alternates between two halves of the dataset every five seconds using `setInterval`, clearing the SVG and re-rendering with D3’s `selectAll` and `join` pattern. It uses `scaleLinear`, `scaleOrdinal`, `extent`, and `axisLeft`/`axisBottom` from D3 v6 to build axes and scales. The custom `scatterPlot` function exposes chainable methods for width, height, margins, and radius, while the data loads from a CSV URL via `d3.csv`.

Vvishnupriya eupuri

71% match

Loading thumbnail…

The Visualization

This visualization explores the relationship between daily bike-sharing user counts and weather in Washington DC, using a focus and context idiom. The context chart displays total users over the full date range, while a brushed and zoomable focus chart shows casual and registered users alongside temperature. Users can pan and zoom via a one-dimensional brush, and a geometric zoom on the focus chart updates the context brush. Built with D3 v4, it uses `d3.brushX`, `d3.zoom`, and `d3.line` to render SVG line charts from the UCI Machine Learning Repository dataset.

MMbrownshoes

71% match