D3 Example

100%

✓ Published1🌍 Public

Last edited Feb 23, 2020

Created on Jan 16, 2020

This example visualizes LeBron James’s basketball statistics across seasons, using stacked bar charts to compare metrics like points, assists, and rebounds per year. Built with D3 v3 in a React framework, it renders SVG elements with animation. The chart employs `d3.layout.stack` for layering, `d3.scale.ordinal` for categorical positioning, and `d3.legend.color` for the interactive color legend. Hovering over legend items filters the bars, while `d3-tip` provides detailed tooltips on mouseover. The data comes from a CSV file with season, stat category, and value columns.

AI-generated description

A bare minimum HTML page, with just a pinch of CSS.

Similar vizzes

Loading thumbnail…

D3 Example

A stacked horizontal bar chart displays sales totals per product sub-category, with bars segmented by customer segment and colored using `d3.scale.category10`. Hovering over a legend entry highlights that segment by fading other bars behind a semi-transparent overlay and re-drawing the selected segment in the foreground, while `d3-tip` shows tooltips. The chart uses D3 v3 with SVG, including `d3.layout.stack` for stacking and `d3.legend.color` for an interactive color legend, and reads data such as the provided `lebron.csv` file.

Pprincit

81% match

Loading thumbnail…

Dv2_task2_Stacked Bar Chart

This stacked bar chart displays NBA player performance across 30 teams, showing each player's games played split into wins and losses. A dropdown menu lets viewers switch between teams, updating the bar chart to display that team's roster. The visualization uses React with reusable components for axes and marks, while D3 v5 functions like `scaleLinear`, `scaleBand`, and `scaleOrdinal` handle the data mapping and color encoding. Data comes from a CSV file loaded via D3's `csv` method, rendered as SVG rectangles with hover tooltips showing exact game counts.

NNagateja99

78% match

Loading thumbnail…

D3 Graph Example

This example visualizes sales and efficiency data over time from a CSV file. It uses D3.js v5 with a React framework to render an SVG chart with steelblue bars for sales and a line for efficiency. The chart features dual y-axes, with sales on the left and efficiency on the right, using `scaleLinear`, `scaleBand`, `axisLeft`, `axisRight`, and `line` for the visualization.

DDaniel Rivera

77% match

Loading thumbnail…

Untitled

This interactive bar chart displays NBA team statistics for the 2021 regular season, with eight buttons letting viewers switch between metrics such as field goals made, assists, and rebounds. The visualization uses d3.csv to load data from a GitHub-hosted dataset and renders SVG line and circle marks, where each team’s value is shown as a point on a vertical baseline. The d3 scaleBand and scaleLinear axes update with smooth transitions on button clicks, changing the Y-axis domain to fit the selected statistic while coloring points by conference (Western or Eastern).

LLinhao Yu

77% match

Loading thumbnail…

NBA career data d3

This visualization displays aggregated NBA career statistics by country for a selected season year, using horizontal bar charts to compare metrics like points, assists, rebounds, and all-star appearances. Users control the view through two dropdown menus to choose the year and stat category. The chart updates with animated transitions on bar widths as selections change. Data is loaded from a CSV file via `d3.csv` and processed with `d3.rollups` and `d3.sum`. The bars are rendered as SVG rectangles with `scaleLinear` for the x-axis and `scaleBand` for the y-axis, while `d3.select` handles interactive hover effects.

PPhilip Rago

76% match

Loading thumbnail…

Stylized Bar Chart Basketball Seasons

This stylized bar chart ranks NBA players by the number of active seasons they have played, with each horizontal bar labeled by player name. The visualization uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, rendering marks as SVG rectangles within a React component. Data comes from a CSV file loaded via d3.csv, covering post-season, pre-season, All-Star, and regular season appearances. Axes are custom React components generating tick marks and labels with d3 formatting utilities.

PPhilip Rago

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

75% match

Loading thumbnail…

d3.js learning

This example shows a stacked bar chart of fruit production from 2006 to 2015, with four series (Red Delicious apples, McIntosh apples, oranges, and pears) drawn as colored rect layers. The chart uses d3.layout.stack to transform the data, d3.time.format to parse years, and ordinal and linear scales to position the bars and axes. A legend maps colors to fruit names, and a tooltip—created as an SVG group with rect and text elements—displays the numeric value of each segment on mouseover. The SVG is rendered inside a React framework, with axes drawn using d3.svg.axis.

Aanonymous5776

75% match