Fork of NBAanalysis

100%

Fork of NBAanalysis

✓ Published0🌍 Public

Last edited Dec 13, 2021

Created on Dec 13, 2021

This interactive bar chart displays the number of shots taken by LeBron James in each quarter of NBA games, sourced from a CSV file. Users can filter the visualization by clicking buttons for All Data or individual quarters, which triggers `d3.csv` loading and `d3.filter` to subset the data. The bar chart, rendered as SVG elements, updates with a smooth `transition().duration(1000)` on both the y-axis and rectangles as the data changes, using `d3.scaleBand` and `d3.scaleLinear` for positioning. The legend clarifies the x-axis as shot distance and the y-axis as shot count.

AI-generated description

Data: https://gist.github.com/Junying-Li/72ef4641efd6b4abf371f5d9f4267a56

Iterated from last week's visualization.

What's new?

Added buttons to interact with users.
When click on a button, the bar chart will filter and sort data.
Added transition.

X-axis: region that earthquake occured.

Y-axis: Deaths in earthquake.

This bar plot shows the deaths caused by earchquakes in mutiple regions in different period of 19 century.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of More Basketball Shot Charts

This interactive visualization displays LeBron James’s shot chart overlaid on a basketball court, with green and red circles marking made and missed shots. The court is drawn as SVG elements using React components. Shot data is loaded from a CSV via `d3.csv`, scaled with `d3.scaleLinear`, and rendered as circles using the `Marks` component. The court geometry uses `d3.lineRadial` for arcs, while player data comes from the `nba_api` dataset.

BbeauMarko

82% match

Loading thumbnail…

Shot Distance Bar Plot

An interactive bar plot displays NBA shot distances across six court zones, with bars colored steelblue and labeled axes for area and goals. Buttons update the visualization to filter shots by game quarter. Built with D3 v7, the chart uses scaleBand and scaleLinear for positioning, while d3.csv loads data from a GitHub-hosted CSV file of NBA shot chart details, and transitions animate bar height changes across updates.

Yyc4004

78% match

Loading thumbnail…

Basketball Density Shot

This visualization displays the shot density and accuracy of LeBron James on a basketball court, using player shot data from the nba_api. Each shot is shown as a small circle, with green marks for made shots and red for misses, overlaid on a pixelated density grid. The grid’s color, using an interpolatePiYG palette driven by a d3.scalePow, indicates the ratio of misses to makes per cell. The court and its markings are drawn with React’s SVG components, while d3’s scaleLinear handles the coordinate mapping for both the player shots and the court geometry.

DDavid Emmanuel Katz

76% match

Loading thumbnail…

More Basketball Shot Charts

A basketball shot chart displays LeBron James’s field goal attempts as red and green dots on an SVG court, with misses in red and makes in green. The court is drawn using React components and D3 scales and radial line generators. Shot data comes from a CSV loaded via D3’s `csv` method, and the visualization maps player coordinates to court positions using `scaleLinear`.

MMichael Bergerson

76% match

Loading thumbnail…

Shot Distance Bar Plot

This interactive bar plot displays the distribution of NBA shot distances across four game periods, with stacked bars showing the total shot count for each distance. Users can switch between periods using buttons, which trigger a smooth 2-second animation that updates the bar heights, axes, and total counts. The visualization leverages D3 v7’s `scaleBand`, `scaleLinear`, and `scaleOrdinal` for layout and color, while transitions via D3’s `transition().duration()` animate changes. Data is fetched from a remote CSV using `d3.csv`, and the stacked bars are generated using `d3.stack()`.

Yyc4004

76% match

Loading thumbnail…

Fork of D3 Starter

This box plot visualizes basketball player scores from a local CSV file, comparing Kobe Bryant, Lebron James, and Jeremy Lin. The code uses d3.csv to load the data, d3.group and d3.quantile to compute summary statistics, and d3.scaleBand with d3.scaleLinear for axes. Individual data points appear as white circles with random jitter, while orange lines mark medians within lightblue boxes. The visualization renders through SVG, using d3.axisBottom and d3.axisLeft for chart annotations.

MMike Z

76% match

Loading thumbnail…

Nba Data but better

This interactive bar chart visualizes NBA player statistics, letting viewers switch between points, assists, rebounds, and seasons played using dropdown menus. The visualization uses d3.scaleBand and d3.scaleLinear to position bars, with d3.transition animating bar growth and mouseover effects that dim other bars and display a date tooltip. Data loads from a CSV file via d3.csv, while the custom menu component uses d3.dispatch for change events. SVG rendering includes hover opacity transitions and axis updates.

PPhilip Rago

74% match

Loading thumbnail…

Fork of NBA Player Games Played Bar Chart

This visualization displays the number of games played by NBA players, allowing users to select a team from a dropdown menu to filter the data. Each bar represents a single player, with the x-axis showing abbreviated player names and the y-axis showing the count of games played. The chart is built using React and D3 v5, with the `csv` function loading the dataset and `scaleBand`, `scaleLinear`, and `scaleOrdinal` used for positioning and color encoding. Bars are rendered as SVG rectangles with a tooltip showing the exact game count, and a color legend uses light green to represent wins.

SSampras Dsouza

74% match