Kobe Bryant 2012-13 Game Log Line Graph
This interactive multi-series line graph displays Kobe Bryant’s per-game statistics from the 2012–2013 NBA season, with data sourced from basketball-reference. Built with D3.js v3, the visualization renders 18 statistical categories as colored lines across the 78-game season, with dates parsed along the x-axis and the selected stat value on the y-axis. Clicking a legend box toggles a stat's visibility on or off, and the y-axis domain dynamically rescales to fit the visible series. Hovering over a legend entry highlights the corresponding line by increasing its stroke width. The graph uses an SVG renderer with smooth monotone interpolation, a categorical color scale, and a fixed whitelist of stats while excluding game metadata columns. The visualization is adapted from Mike Bostock's Multi-Series Line Chart and Jason Ng's MPF Graph, with data from basketball-reference.
The graph is 960 pixels wide and 500 pixels tall.
The y-axis is labeled "Stat" and the x-axis represents the date of games.
Here is a link to the file: [http://bl.ocks.org/simzou/6439398] The title of this graph is "Kobe Bryant 2012-13 Game Log Line Graph".
The chart shows the stats from 17 categories from Kobe Bryant's 2012-13 NBA season. The y-axis is scaled based on whichever stats are visible. The x-axis shows the date of games. The line graph uses 17 lines, each representing a statistic like points, rebounds, assists, etc. Each line is colored differently to distinguish them. The lines can be toggled on and off by clicking on the legend boxes. The legend is on the right of the graph.
The x-axis is time, from the start to the end of the 2012-13 NBA season. The y-axis is the raw stat value. The graph shows all 17 stats plotted over the course of the season with the ability to compare them visually by turning layers on and off. Because points per game (PTS) is the primary statistic, the PTS line is on by default. Other lines can be turned on by clicking on their color boxes in the legend to the right of the plot area.
When the user clicks a legend box to hide or show a statistic, a transition animates the line's entrance and exit while the y-axis rescales to fit the new domain of the newly visible lines. The currently selected lines are highlighted by the filled legend boxes.
This graph uses D3's linear scale for the y-axis and time scale for the x-axis. The multi-series line graph uses a line function with a monotone interpolation. The legend click handlers toggle the lines and rescale the y-axis, all using D3's built-in methods. Colors are assigned from d3 scale category20 and are used to map statistics to the legend and corresponding line.
The axis tick labels are auto generated from the data and are truncated to fit the design. The y-axis tick labels are often formatted with up to 3 decimal places, which can look quite busy and cluttered. Additionally, with so many statistics, the y-axis label "Stat" doesn't provide much information about which stat is being viewed.
The chart shows basketball stats from the 2012-2013 season for one player, Kobe Bryant, which is a good, small, self-contained dataset for demo purposes. This was tested and works with the data provided, but data is not normalized for
other teams or seasons. The data is preprocessed.
Original fork: [Kobe Bryant 2012-13 Game Log Line Graph](http://bl.ocks.org/simzou/6439398)
The block user made a small mistake in the csv: the header is not the same as the data (header is Date, data is data). You'll have to rename the CSV header if you'd like to use it with different data.
The graph has 19 selectable lines, though in the static view only one line is displayed initially: points scored (PTS). The y-axis autoscales based on which lines are selected. By clicking on the legend, you can add or remove stats from the graph. The line chart interpolates the data with a "monotone" interpolation, which preserves the shape of the data and does not overshoot data points, creating a smooth curve for each statistic. The y-axis label is a generic "Stat".
Because the stats are on vastly different scales, it's often easier to use the autoscale function by clicking different lines. However, multiple lines can be selected to compare the shapes of their respective plots. For a multi-series line graph the user can quickly compare the shapes of the trends between selected stats.
This graph shows the variation in his stats over the course of a season. It shows what happened over 82 games with streaks and off games are visible, along with days he didn't play. The ability to toggle on/off different stats gives the user the power to compare stats with varying scales.
</br>
<footer>
<span style="font-size:10px"> Data: <a href="http://www.basketball-reference.com/players/b/bryanko01/gamelog/2013/">Basketball-Reference</a> | Code: <a href="https://github.com/mbostock/d3/wiki">D3.js</a></span>
</footer>
</body>
</html>
Here is a concise description for the gallery:
This interactive multi-series line chart visualizes Kobe Bryant’s per-game statistics throughout the 2012-13 NBA season. The visualization plots 22 different performance metrics across the season's games, with the x-axis representing game dates and the y-axis showing the stat value.
A clean, functional design—thin colored lines on a white background with a legend along the right side—prioritizes clarity and interactivity over decoration. Each stat category (e.g., PTS, AST, REB, FG%) is assigned a distinct color. Only "PTS" (points) is initially displayed.
The key interactive feature is the clickable legend, which serves as both a filter and a control for the y-axis. Clicking a legend item toggles the corresponding line's visibility, and the y-axis dynamically rescales to fit the visible stats. Hovering over a legend item highlights the associated line by increasing its stroke width. This approach allows users to compare different statistics across the season, such as points versus rebounds, or to examine a single stat in isolation, with the y-axis adapting to the displayed data. The graph is implemented in D3.js using SVG and animated transitions. Data is from Basketball-Reference.
</br>Now write a short 1-2 sentence description for the visualization gallery.
Focus on what the visualization shows and why it's interesting. Be specific. Do not mention tools, libraries, or frameworks. Avoid starting with "This visualization" or "This graph".
###Description:
Interactive multi-series line chart of Kobe Bryant’s 2012–13 game log. Toggle any of 18 box-score statistics on and off by clicking the legend, and watch the y-axis rescale automatically for each selection.