Skip to main content
Log in
P

Patrick-Houlihan

@Patrick-Houlihan·20 public vizzes

Loading thumbnail…

JSImports

This example demonstrates how VizHub projects can load D3 from a CDN, import API functions from the D3 module, and use local ES6 modules for custom code. It displays the text "Hello VizHub!" in a centered message div using `select('#message').text()`. The project also defines a `Rectangle` class with a static asynchronous `load` method that logs to the console, and a separate `myMessage.js` module exporting the displayed string. The page uses minimal styling from `styles.css` with a large font size.

Mar 5, 2022
Loading thumbnail…

Final Submission For DataViz

This visualization combines a world map and an animated scatterplot to explore chess player transfer data. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with TopoJSON world-atlas data, allowing users to select up to 20 countries. The scatterplot, rendered with SVG circles, plots selected quantitative attributes like ELO ratings or birth year, with transitions from `d3.transition`. Menu selectors and brushing filter the data, updating map highlights and the plot’s title. The dataset is loaded via `d3.json` from a GitHub gist.

Dec 10, 2021
Loading thumbnail…

Chess Scatterplot With Menus And Brushing

A scatterplot of chess player statistics uses two dropdown menus to select the x- and y-axis fields, including ELO ratings, birth year, federation, and title. A d3.brush overlay allows users to select a rectangular region of circles, highlighting those points in green and dimming the rest. The selected points retain their highlight while changing menus, enabling tracking of individual players across different statistical dimensions. The visualization updates axes and circle positions with a d3.transition and uses d3.scaleLinear and d3.scalePoint for quantitative and categorical fields.

Nov 18, 2021
Loading thumbnail…

Final Project For Like The Third Time

This example visualizes chess transfer data as an animated scatter plot, mapping players’ standard ELO ratings on both axes. The plot supports categorical and linear scales, dynamically repositions circles with staggered delays, and grows new points from radius zero. It uses D3 v7’s `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `transition` APIs within a reusable `scatterPlot` function. Data is loaded via `d3.json` from a GitHub gist, with SVG rendering and a 1000ms transition duration for updates.

Nov 17, 2021
Loading thumbnail…

Final Project 4

This example displays a world map with country boundaries and graticules, rendered as an SVG using a Natural Earth projection. The visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to project and draw geographic features, with `d3.geoGraticule` generating the grid lines. React manages the component structure, while D3’s `json` method and the TopoJSON library’s `feature` and `mesh` functions load and process the World Atlas TopoJSON data. The map is styled with distinct colors for land, sphere, graticules, and country interiors.

Nov 17, 2021
Loading thumbnail…

Test of JSON Data

This interactive scatter plot visualizes chess player birth years against their standard ELO ratings, using data from a JSON dataset of chess transfers. The chart renders as an SVG with animated circles that grow on entry and transition between positions when the data changes. Built with React and D3 v5, it uses `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to construct axes, while the custom `scatterPlot` module handles circle positioning and transitions via `transition().duration(1000)`.

Nov 16, 2021
Loading thumbnail…

Chess Federation Transfers with Brushing

This visualization combines a world map of missing migrant incidents with a brushing-linked time histogram. It uses D3’s `geoNaturalEarth1` and `geoPath` to render country boundaries and graticules, while circle size reflects death tolls via `scaleSqrt`. A `brushX` interaction filters the map by date range selected in the histogram. Built with React and D3 v5, the data comes from a CSV of global missing migrants, with the map optimized through `useMemo`.

Nov 16, 2021
Loading thumbnail…

Final Project From Scratch Electric Boogaloo

A React application renders a static, full-page "Hello React!" message with a font size of 13em, demonstrating a minimal component-based setup. The code uses React 16.13.1 and ReactDOM from CDN links, mounting a single functional `App` component into the `#root` div. No data sources or visualization logic are present; the example simply shows how to bootstrap a React project from scratch without any additional libraries.

Nov 10, 2021
Loading thumbnail…

Baseball Brushing on Multiple Views

This interactive visualization combines a world map of cities with a histogram of baseball player names, linked through brushing. Users can brush on the histogram to filter the cities displayed on the map. The map uses d3.geoPath for rendering country boundaries and graticules, while the histogram employs d3.bin, scaleLinear, and brushX for binning and interactive selection. React’s useState and useMemo manage state and optimize performance, with data loaded from CSV and TopoJSON sources.

Oct 27, 2021
Loading thumbnail…

D3 Scatter Plot Baseball With Brushing

This scatter plot visualizes the relationship between plate appearances and hit-by-pitches for 2017 MLB hitters, filtering out players with fewer than 100 at-bats. The SVG rendering uses d3.csv to load the dataset, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom for tick marks. Each player appears as a circle positioned by d3.extent-derived domains, with brushing implied by the title but not implemented in the visible code.

Oct 27, 2021
Loading thumbnail…

Baseball Scatterplot With Menus

This interactive scatterplot, rendered with SVG, displays baseball statistics for players with at least 200 at-bats. Users change the X and Y axes via dropdown menus, choosing from quantitative stats like Batting Average and On Base Percentage, or the categorical Team variable. The visualization uses D3's `selection.join` API to efficiently update circle positions and axes with a 1000ms transition, while the menu system uses a custom `dispatch` event handler. The dataset is loaded from a GitHub Gist using `d3.csv`.

Oct 7, 2021
Loading thumbnail…

Adding Interaction to My Bar Chart

This bar chart visualizes the percentage of at bats ending in a hit by pitch for 2017 MLB players with at least 10 HBPs, sorted from highest to lowest rate. Color intensity encodes each player’s total at bats relative to peers, with a legend showing the scale from 276 to 622 at bats. The chart uses D3 v5 with SVG rendering, employing `scaleLinear`, `scaleBand`, and `scaleOrdinal` for scales, `d3.interpolateOrRd` for the color ramp, and `d3.schemeOrRd` for the legend. Mouseover and mouseout events change bar fill and stroke, with a tooltip displaying raw HBP counts. Data comes from a GitHub gist CSV file.

Oct 7, 2021
Loading thumbnail…

Fork of why duration not working faster

This interactive scatter plot visualizes global suicide rates from a CSV dataset, allowing users to explore relationships between quantitative variables like suicide counts, population, GDP, and year via dropdown menus. Built with D3 v6, the visualization uses SVG rendering and animated transitions to update circle positions when axes change. Each data point is a semi-transparent circle, with d3.axisLeft and d3.axisBottom rendering the axes. The code implements custom menu and scatterPlot modules, using d3.scaleLinear, d3.extent, and d3.transition to manage scales and smooth updates.

Oct 7, 2021
Loading thumbnail…

Improving a Bar Chart for 2017 Baseball Hitting

This bar chart shows the percentage of at bats ending in a hit by pitch for 2017 MLB players with at least 10 HBPs. Bar color intensity encodes total at bats, with a legend mapping ordinal ranges from 276 to 622. D3 v5 with an SVG renderer uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the visualization, while a custom `colorLegend` function and `d3.interpolateOrRd` apply the chromatic scale. Data is loaded from a CSV using `d3.csv`.

Oct 1, 2021
Loading thumbnail…

Bar Chart for 2017 Baseball Hitting

This bar chart ranks 2017 MLB players by their hit-by-pitch rate, showing the percentage of at-bats ending in a hit by pitch for hitters with at least ten such events. Bar opacity encodes the player’s total at-bats relative to the dataset maximum, with darker bars indicating more playing time. Built with D3 v5, the visualization uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and SVG rectangles for rendering, with data loaded via `d3.csv` from a GitHub gist. Axis labels and a title annotate the chart.

Sep 30, 2021
Loading thumbnail…

Identifying 3 Datasets

This example identifies three datasets by displaying their descriptive names and metadata in large text. It shows the dataset titles—Baseball Standard Hitting, Wayne Gretzky Goals, and Chess Federation Transfers—along with their file sizes, row counts, and column counts. The code loads each CSV from a remote URL using `d3.csv`, then formats the data with `d3.csvFormat` to calculate size. The results are appended as separate spans inside a pre element, presenting the information in a clear, text-based layout.

Sep 29, 2021
Loading thumbnail…

D3 Scatter Plot - Gretzky

This D3 scatter plot visualizes Wayne Gretzky’s career goals, plotting each goal’s date against the period (period 1, 2, or 3) in which it was scored. Using a time-scaled x-axis and a categorical point-scaled y-axis, the SVG rendering displays overlapping semi-transparent circles. The implementation leverages d3.csv for data parsing, d3.scaleTime and d3.scalePoint for axes, and d3.axisLeft and d3.axisBottom for ticks, with the dataset sourced from a GitHub Gist.

Sep 29, 2021
Loading thumbnail…

Create Something With SVG

This example recreates a digital brand image as a stylized landscape using raw SVG shapes: a gradient-filled sun, layered polygon mountains, and clustered white circles forming a cloud. The design employs a cohesive color palette drawn from an external design reference, with vertical gradients defined via SVG’s `linearGradient` and `stop` elements. All shapes are hand-coded directly in HTML/SVG, without a visualization library, showcasing how CSS and JavaScript-free SVG can compose a simple, decorative scene.

Sep 29, 2021
Loading thumbnail…

D3 Scatter Plot - Baseball

This D3 scatter plot visualizes the relationship between pitches faced (PA) and hit-by-pitches (HBP) for MLB players from the 2017 Standard Hitting Dataset, aiming to identify players frequently hit despite limited at-bats. The SVG rendering uses d3.csv to load remote data, d3.scaleLinear for axes, and d3.axisLeft/axisBottom for ticks, with circle marks positioned by mapping PA and HBP values to pixel coordinates. The plot filters out players with fewer than 100 at-bats and covers the full browser window, using window.innerWidth and window.innerHeight for sizing.

Sep 16, 2021
Loading thumbnail…

D3 Scatter Plot - Chess

This D3 scatter plot visualizes the change in FIDE chess player federations, plotting each player as a point based on their federation change metrics. The visualization uses D3 v6’s scalable vector graphics (SVG) rendering to draw the scatter plot, with data sourced from a JSON file containing player information. Because the dataset includes federation codes for numerous countries, the plot suffers from significant dead space, as many nations have far fewer players than powerhouses like the United States. The implementation relies on standard D3 selection and scaling APIs to map data to coordinates, though the sheer volume of categories makes this representation visually cluttered and suboptimal for the data.

Sep 16, 2021