YouthBread

@YouthBread·13 public vizzes

Debounced slider

Two horizontal sliders control the same date range, showing the difference between immediate and debounced drag handling. The top slider updates continuously as the mouse moves, while the bottom slider delays its updates by 200 milliseconds, using a custom `debounceD3Event` wrapper around `d3.drag`. Both sliders use `d3.scaleTime` and `d3.axisBottom` to render a year-based axis, and display the selected year range in a header caption via `d3.timeFormat`. The SVG rectangles that serve as draggable handles are repositioned with `transform` attributes.

Nov 7, 2017

Loading thumbnail…

Visualization Project

An interactive heatmap of Kobe Bryant’s shot locations per season, displayed on a scaled basketball court. A slider selects a season, triggering a contour density visualization via `d3.contourDensity` and `d3.geoPath`, with color from `d3.scaleSequential`. The court is drawn with SVG shapes and arcs, while per-season stats are shown in a table. Data comes from local CSV files.

Oct 26, 2017

Loading thumbnail…

Scatter Plot

This example visualizes nuclear bomb test counts from 1945 to 2009, with each circle representing a country’s annual total. The x-axis shows the year, the y-axis shows bomb counts, and colors distinguish six countries, sourced from Johnston’s Archive via a processed CSV. Built with D3 v4, it uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` for scales, plus `d3.legendColor` from d3-legend for the color legend. Interactive features include hover tooltips displaying exact counts, while the SVG rendering updates responsively on window resize.

Oct 17, 2017

Loading thumbnail…

Data Summary

This example displays a textual summary of a data table, showing the number of rows, columns, and file size, followed by per-column statistics computed using Datalib's `dl.format.summary`. The data comes from a Kaggle dataset of Kobe Bryant’s field goal attempts, loaded via `d3.csv` and rendered into a `<pre>` element. The code uses D3 v4 to fetch and format the CSV, while Bootstrap styles the page. The visualization provides a quick overview of the dataset’s structure without any charts or graphs.

Oct 1, 2017

Loading thumbnail…

Data Summary

This visualization shows yearly global sales trends for four gaming platforms—PS3, PS4, X360, and XOne—as a multi-line chart, with hover interactions that highlight individual data points via a yellow tooltip. It uses D3 v4’s `d3.csv`, `d3.nest`, `d3.scaleTime`, and `d3.line` to aggregate and plot sales from a Kaggle dataset. A color legend generated with `d3.legendColor` distinguishes platforms, and animated SVG paths update on data transitions.

Sep 27, 2017

Loading thumbnail…

Data Summary

This visualization summarizes Kobe Bryant’s shot selection by displaying a donut chart of shot zones. It shows the proportion of basic shot zones (e.g., Center, Left Side, Right Side) based on the Kaggle shot-selection dataset. The donut chart is built with d3 pie and d3 arc, with interactive tooltips that display the zone name and shot count on hover. A categorical color legend, created with d3.legendColor, maps each zone to a distinct color, and the SVG animates fill changes on mouseover.

Sep 27, 2017

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the daily frequency of Uber rides in 2016, showing how the number of rides varies over time. The chart uses a D3 v4 line path to connect daily ride counts, with circles omitted and a hover tooltip available for interaction. It relies on `d3.csv`, `d3.nest`, `d3.timeParse`, and `d3.scaleTime` to process the dataset from the "My Uber Drives - 2016.csv" source. The SVG rendering includes styled axes and a subtitle, while the y-axis is fixed to a 0–15 range for ride counts.

Sep 27, 2017

Loading thumbnail…

Recreate Marks and Channels

This example recreates a visualization of marks and channels using a grid of eight circles mapped to categorical positions. A black line connects two circles, and clicking the “New Line” button draws a randomly selected red line between two different points, with previous red lines removed. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleLinear` for positioning, and includes hover tooltips that display circle names via a styled div. Interaction is driven by button-triggered `draw_line` functions and mouse events.

Sep 26, 2017

Loading thumbnail…

EVE Online - Jita

This example visualizes the solar system connections around Jita, the trade center of the EVE universe, using a two-dimensional scatterplot with lines linking each system to its neighboring destinations. Hovering over a system circle highlights its name in a tooltip. The visualization encodes system positions from the CSV data’s x, y, and z coordinates, with lines drawn between origins and destinations via SVG `line` elements. Built with D3 v4, it uses `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft`, and an Update button triggers a data refresh.

Sep 22, 2017

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the history of nuclear bomb tests from 1945 to 2009, with each circle representing a country's annual test count. The x-axis shows the year, while the y-axis shows the number of bombs tested. Circle size also encodes the count, and color distinguishes six countries, as labeled by an interactive color legend. Hovering over a circle reveals the exact bomb count via a tooltip. Built with D3 v4 and d3-legend, the SVG visualization uses scales like `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` to map data from a CSV file. The data was originally sourced from Johnston's Archive and cleaned with Python and Pandas.

Sep 22, 2017

Loading thumbnail…

Data Summary

This example displays a plain-text summary of a video game sales dataset, showing the number of rows, columns, file size, and a per-column statistical breakdown. It loads data from a CSV using `d3.csv` and computes summaries with `dl.format.summary` from Datalib. The resulting text is appended to the page as a `pre` element, offering a quick overview of the table’s shape and value distributions.

Sep 17, 2017

Loading thumbnail…

Data Summary

This example generates a plain-text data summary for a CSV of Uber ride records, detailing rows, columns, and file size alongside per-column statistics. It loads the data with `d3.csv` and uses `dl.format.summary` from Datalib to compute the shape of each field. The resulting summary is displayed in a `<pre>` element on the page, providing a quick overview of the dataset’s structure. The data comes from a public Kaggle dataset about Uber drives in 2016.

Sep 17, 2017

Loading thumbnail…

The growth of ICO

A horizontal bar chart shows the growth of initial coin offerings (ICOs) over four years, with 2017 reaching $1,460 million compared to $31 million in 2014. The chart highlights the dramatic increase in both fundraising size and number of ICO events, with 116 events in 2017 versus 8 in 2014. Built with d3.v4, the visualization uses `d3.scaleLinear` and `d3.scaleBand` for axes, renders bars via SVG `rect` elements, and includes a hover tooltip that displays the ICO count. Data comes from CoinDesk's ICO tracker.

Sep 10, 2017