P

Philip Rago

@PhilapR·16 public vizzes

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.

Loading thumbnail…

Further interaction NBA Statistics

This interactive visualization displays the career statistics of the top ten NBA players based on a selected metric—points, assists, rebounds, or seasons played. Users choose a stat from a dropdown menu, which triggers a re-sorting of the horizontal bar chart using React state and `scaleBand`/`scaleLinear` scales from d3.v5. The SVG bars are rendered with tooltips showing formatted values, and the data is loaded asynchronously via d3’s `csv` from a GitHub-hosted dataset.

Loading thumbnail…

nba career performance with filters and grouping

The visualization displays NBA career performance metrics with interactive filters for grouping, statistics type, player status, and top-N selection, alongside a timeline brush slider. It aggregates player data by attributes like school, country, or draft year, showing mean values for points, assists, rebounds, and other career stats. The implementation uses D3.js version 7 with csv loading, rollups for grouping, and scaleLinear/scaleBand for chart construction. A snap-to-grid slider brush enables timeline filtering, while dropdown menus control the grouping dimension and metric displayed, with data sourced from an external CSV file.

Loading thumbnail…

combining views

This interactive visualization combines a statistical bar chart and a timeline to explore NBA player career data. Users filter the dataset through dropdown menus for player status, group by attributes like draft year or country, and select quantitative stats such as points or assists. The top-N players are aggregated and displayed over time, with a slider controlling the timeline range. Built with D3 v7, it uses CSV data loading, scales, axes, and event-driven re-rendering. The SVG views update synchronously, showing how linked views can reveal trends across hierarchical groupings and temporal dimensions.

Loading thumbnail…

Fork of Fork of SVG Fundamentals Rago

This example shows three large colored rectangles filling an 800-pixel-tall SVG canvas: a red area on the upper left, a blue area on the lower left, and a green vertical strip on the right. The page uses only the SVG API directly, with no JavaScript libraries, to draw static shapes via `<rect>` elements. The rendering is fixed to a 960-by-800 viewport with no interaction or animation, demonstrating basic SVG layout and coordinate positioning.

Loading thumbnail…

nba over time vert bar

This interactive bar chart visualizes NBA player statistics across career timelines, filtering by active status and allowing selection of metric (points, assists, rebounds, experience, all-star appearances) and timeline type (draft year or birthdate). The visualization uses D3 v7 with d3.rollups for data aggregation, d3.scaleBand and d3.scaleLinear for scales, and d3.sliderBottom for interaction. The code loads CSV data, groups records by time period, and renders animated vertical bars whose heights represent the average value of the selected statistic per grouping.

Loading thumbnail…

nba over time horz bar

This visualization shows NBA player statistics over time using horizontal bar charts, with the bars sized by aggregated values like points, assists, rebounds, and All-Star appearances. The chart distinguishes between active and inactive players, and allows the user to select a time grouping, a statistic type, and the number of players displayed. Data is loaded from a CSV via `d3.csv` and grouped with `d3.rollups` and `d3.mean`. The visualization updates dynamically with an SVG render and interactive dropdown menus using D3 v7.

Loading thumbnail…

Iterated NBA Career Stats v1

This interactive bar chart visualizes career statistics for top NBA players, allowing users to sort and display values for points, assists, rebounds, seasons played, or All-Star appearances. A dropdown menu controls which statistic is shown, while the chart renders horizontal bars via React components and D3 v5 scales. The visualization uses d3.csv for data loading, scaleBand and scaleLinear for positioning, and SVG rectangles with tooltips to display values for the top ten players sorted by the selected metric.

Loading thumbnail…

Test

This example demonstrates a reusable D3 checkbox component that can be configured with custom sizes, positions, colors, and checked states. Three checkboxes are rendered on an SVG canvas, and clicking them updates a text label to display their boolean statuses. The implementation defines a `d3CheckBox` factory function that builds interactive SVG elements with rectangular boxes and path-based check marks, using D3 version 3’s `d3.svg.line()` for the mark geometry. A click event toggles opacity and triggers a callback showing how the component supports custom interaction logic.

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.

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.

Loading thumbnail…

Loading Postsecondary Schools CSV

This example displays basic metadata about postsecondary schools in the US, showing the file size in kilobytes, row count, and column count from a remote CSV dataset. It uses d3.csv to fetch and parse the data, then employs d3.csvFormat to measure the parsed content’s size, and writes the summary to the page. The visualization relies on D3 v5’s asynchronous promise handling via the .then method.

Loading thumbnail…

Loading Boston non Public Schools CSV

This example displays a text summary of the non-public schools dataset for Boston, MA. It uses the d3.csv API to load a remote CSV file and then reports the file size in kilobytes, the number of rows, and the number of columns. The code formats the output using d3.csvFormat to calculate the data size and then inserts the message into a pre element via plain DOM textContent. The rendering is minimal, focusing on the data-loading and inspection process rather than any visual chart.

Loading thumbnail…

D3 Scatter Plot - Boston Non Private Schools

This scatter plot maps the coordinates of non-public schools in Boston, with each circle representing a school’s location. Built with D3 v6, it loads CSV data from a GitHub gist and uses `d3.csv`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render an SVG. The plot fills the browser window, using the raw X and Y values from the dataset without additional encoding, and displays tick labels at 24 pixels for readability.

Loading thumbnail…

D3 Scatter Plot - Postsecondary Schools

A scatter plot displays the geographic coordinates of postsecondary schools across the US, with each point representing an institution’s X and Y location. The visualization includes labeled x- and y-axes, and the plot fills the entire browser window. Built with D3 v6, the code loads CSV data from a GitHub Gist, parses the coordinates as numbers, and uses `scaleLinear` to map the data to screen positions. Circles are rendered via SVG, with axes generated using `axisLeft` and `axisBottom`.

Loading thumbnail…

Fork of SVG Fundamentals Rago

This example shows a series of five layered, curved color bands sweeping diagonally across a canvas, creating an abstract gradient-like composition. The SVG rendering uses plain `path` elements with `d` attributes containing cubic Bezier commands (`M`, `Q`, `H`, `V`, `Z`) to draw each shape. Fill colors are applied directly via hardcoded `fill` properties such as `slategrey`, `indianred`, `orange`, `lightsalmon`, and `grey`. The code relies solely on native SVG APIs within an HTML document, with no JavaScript libraries or external data sources involved.