Mohit Y

@Mohit21GoJs·4 public vizzes

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.

Aug 2, 2020

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.

Aug 2, 2020

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.

Aug 2, 2020

Loading thumbnail…

Monthly Data Visualization

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.

Aug 2, 2020