Skip to main content
SimilarExport ZIP
100%

Monthly Data Visualization

✓ Published1🌍 Public
MMohit Y
Last edited Aug 2, 2020
Created on Aug 1, 2020

This interactive bar chart visualizes monthly trip counts for Dubai Metro stations, allowing users to view either the top or bottom stations by selecting an option from a dropdown and specifying the number of stations via a numeric input. The visualization updates dynamically when the input value changes or the dropdown selection is altered. Built with D3 v5, it uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` for the axes. Data is loaded from a local CSV file sourced from the DubaiPulse website, with user input validated against configured limits.

AI-generated description

Monthly Data Visualization Bar Chart

Bar chart visualization for Dubai Metro for monthly data.

Folder Structure:

  • index.html - main html view file
  • index.js - main js file or entrypoint
  • styles.css - css file for styling
  • config.js - js module for storing configurations for example bar chart configs and validation level params(single source of truth for all app level configs).
  • helper.js - helper function module.
  • validation.js - validation logics can be added here.
  • bar.js - logics for bar graph
  • data.csv - file for storing csv data obtained from dubaipulse website.

How it works:

  • From the dropdown, select type of grouping needed to be visualized, for example top 10 stations will require you to select top stations options and entering a value of 10 in input box.

  • As you press up or down key in input box, the visualization will update.

  • Updating a value in input box and on blur the chart will update.

Limitations:

  • The number of stations must be greater than 0 and less than 20.
  • Entering value greater than 20 or less than 0 will result in error alert.
MIT Licensed

Similar vizzes

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
87% match
Loading thumbnail…

D3

This heat map visualizes the top 10 metro stations in Dubai by total trip counts, with monthly activity shown across a grid of colored cells. The data is filtered from a CSV file containing station, month, and trip records, then aggregated to rank stations. Rendered as an SVG using D3 v5, the visualization employs `d3.scaleBand` for axes, `d3.scaleLinear` for color encoding, and interactive tooltips on hover to display specific trip numbers.

MMohit Y
86% match
Loading thumbnail…

D3

This visualization shows Dubai Metro trip counts for April and May 2020, grouping stations into ranges by order of magnitude (e.g., 10–99, 100–999 trips) via a D3 treemap. Users select a month from a dropdown, and clicking a range zooms into that subset, re-rendering the treemap ordered by trip numbers with a zoom-out button to reset. The code uses d3.csv for data loading, d3.treemap with d3.hierarchy for layout, d3.scaleSequential with interpolateCool for coloring, and SVG elements with clip paths and drop shadows for rendering.

MMohit Y
85% match
Loading thumbnail…

D3

This visualization displays Dubai Metro station trip data as a treemap, where each block represents a station and is sized according to monthly trip counts, sorted into ranges. Clicking a range zooms into a detailed view ordered by trip volume, with a zoom-out button to reset. Built with D3 v5 and SVG, it uses d3.csv to load the dataset and scaleBand for layout, while the treemap structure is manually implemented via rectangular blocks rather than d3.treemap. The color scale uses d3.scaleLinear to encode trip values.

MMohit Y
85% match
Loading thumbnail…

Month wise travellers

The visualization displays monthly passenger numbers traveling to India from various airlines, using horizontal bars of varying lengths to represent passenger counts. Built with D3.js v6, the bar chart maps the `PASSENGERS_TO_INDIA` field from a CSV dataset, scaling each bar’s width proportionally via `d3.scaleLinear`. Rendered as SVG rectangles with a fixed height of 40 pixels, the chart orders airlines by row, enabling quick comparison of traffic volumes across carriers. The interactive chart loads data asynchronously via `d3.csv`, fetching the airline traffic dataset from a GitHub repository.

Jjs164
71% match
Loading thumbnail…

Untitled

This interactive line chart shows monthly passenger traffic to India for individual airlines, with a dropdown menu to switch between carriers. Each line traces the number of passengers across the 12 months, colored via a categorical scale. The visualization uses d3.v4 with an SVG path updated through a transition on the `d` attribute when the selection changes. Data is loaded from a remote CSV, and axes are generated with `d3.axisBottom` and `d3.axisLeft`. The color scheme comes from `d3-scale-chromatic`.

Jjs164
69% match
Loading thumbnail…

End Station

This bar chart displays the top ten end stations for bike rides, with a dropdown menu to toggle between casual and member riders. The horizontal bars show the number of rides per station, sorted by station name using a band scale. The visualization uses React for the interface, d3.scaleBand and d3.scaleLinear for positioning, and d3.csv to load the ride data from a GitHub gist. SVG rendering and React dropdown menus handle the interactive filtering.

SSamir Nandardhane
68% 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
67% match