Shubham Yadav

@shubhamyadav0501·6 public vizzes

NBA Standings Modified

This interactive visualization displays NBA team standings and locations on a U.S. map, with buttons to filter by conference and toggle team labels. It uses D3 v5 (including `d3.geoAlbersUsa`, `d3.geoPath`, and `d3.zoom`) to render states and team markers from CSV data, and provides zoom controls. A DataTables jQuery plugin renders the standings in a sortable table, while D3 transitions and tooltips enhance the experience.

Jan 6, 2020

Loading thumbnail…

NBA Standings

This interactive NBA standings visualization displays the geographic distribution of teams on a U.S. map using d3.geoPath with a geoAlbersUsa projection. Hovering over team markers reveals details like wins, losses, and win percentage. Users can filter by conference, toggle labels, zoom using d3.zoom, or switch to a sortable data table built with DataTables, which shows the full statistical standings from the loaded CSV data.

Jan 6, 2020

Loading thumbnail…

Table

This example displays NBA team statistics in an interactive data table, allowing users to filter the dataset by conference (Eastern or Western) using buttons. The table presents team records, win percentages, scoring averages, and streak data, sorted by wins. Built with D3.js and the jQuery DataTables plugin, the visualization renders an HTML table inside an SVG foreignObject and dynamically updates rows when a filter button is clicked. The underlying team data comes from a CSV file.

Jan 6, 2020

Loading thumbnail…

NBA Standings Map

This map shows the geographic distribution of NBA teams, with each team’s location marked by a dot and its current win/loss record and rank displayed via an interactive tooltip. The visualization uses D3 v5 with a geoAlbersUsa projection to render U.S. state boundaries from TopoJSON data, while team standings from a CSV file are joined with team coordinates to place the markers. Users can zoom and pan the map using d3.zoom, with buttons to scale in, out, or reset the view, and hovering over a dot reveals detailed performance statistics in a styled HTML tooltip.

Dec 31, 2019

Loading thumbnail…

US Map

This visualization displays a map of the contiguous United States with circles marking the locations of NBA teams based on latitude and longitude coordinates from a CSV file. It uses d3.geoAlbersUsa for projection and d3.geoPath to render state boundaries from a TopoJSON file loaded via topojson.feature. The map supports zooming through d3.zoom, and states change color on hover via CSS. Team circles include tooltips showing team names, while Alaska, Hawaii, and Puerto Rico are excluded from the state rendering.

Dec 24, 2019

Loading thumbnail…

D3 Map

This interactive world map displays countries in light green on a blue sphere, with hover states that turn a country red and show its name. The visualization uses a D3 geoPath with the geoNaturalEarth1 projection to render both the sphere and country outlines, while the topojson `feature` API converts the world-atlas GeoJSON data into drawable paths. A D3 zoom controller applies SVG transforms to the grouped elements for panning and zooming, and the map is rendered entirely as SVG elements.

Dec 20, 2019