Jack Hanlon

NBA Teams Mapping - Finalized

This map of NBA team statistics plots each franchise as a fixed-radius circle colored by selected season totals, such as points, assists, or rebounds, for all teams except the Memphis Grizzlies. A dropdown menu switches the displayed statistic, updating the choropleth-like legend and circle fills. Using d3.csv and d3.json, it aggregates player data from nba_player_data.csv, then renders team locations and a US/Canada GeoJSON map with d3.geoPath and a geoAlbersUsa projection.

Defensive NBA Players - Updated X Axis

This visualization displays the top 15 NBA defensive players ranked by their combined steals, blocks, and defensive rebounds, using a stacked bar chart built with D3.js (d3.stack, d3.scaleBand, d3.scaleLinear). Clicking a legend item filters the chart to show only that statistic, while hovering reveals tooltips with exact values. The player names on the x-axis are rotated for readability, and the bars update dynamically based on the selected filter.

NBA Teams Mapping Polishing

This visualization displays the locations of NBA teams across the United States on an interactive map, with proportional circles representing player statistics and team abbreviations as labels. Users can toggle teams on and off using checkboxes to reduce overlap. The map is rendered using D3.js v5 with the `geoAlbersUsa` projection and `geoPath` API to draw U.S. state and province outlines from GeoJSON data. Team coordinates come from a hardcoded list of city latitudes and longitudes, while circle radii are generated from a classed scale of random values.

NBA Teams Mapping

This map plots NBA team locations across the US and Canada, with circles sized by a random player-statistic value. Users can toggle team visibility via checkboxes, which redraws the map. Built with d3.v5, it uses `d3.geoAlbersUsa()` and `d3.geoPath()` to render state outlines, and `d3.scaleSqrt()` for proportional scaling. The SVG output includes team labels and offset positions to mitigate overlap. A 110m GeoJSON world map provides the base geography.

Defensive NBA Players - Interactive Legend

This interactive visualization displays the top 15 defensive NBA players based on three key statistics: steals, blocks, and defensive rebounds. Users can hover over the color legend or bars to highlight specific data and click a stat to re-sort the chart, showing only that stat. The stacked bar chart is built using d3’s `stack`, `scaleBand`, and `scaleLinear`, with a custom interactive legend that filters data. Tooltips reveal exact values. The data is normalized and sorted within the code before rendering.

Defensive NBA Players

This visualization displays the top 15 NBA defensive players based on their total steals, blocks, and defensive rebounds. The data is presented as a stacked bar chart, where each player’s bar is segmented by these three statistics. A color-coded legend and a dropdown menu allow sorting by either total stats or a normalized sum, with hovering to highlight individual segments. The implementation uses `d3` libraries including `scaleBand`, `scaleLinear`, `scaleOrdinal`, `stack`, and `axisBottom`.

NBA Radar Chart

This example visualizes NBA player statistics as a smoothed, multi-axis radar chart, comparing seven performance metrics like effective field goal percentage, rebounds, assists, and points per game. Data from the included CSV file is normalized to a 0–1 scale before being plotted. The chart is rendered using React and D3.js (v5), with the custom `RadarChart` function building the SVG, applying an ordinal color scale, and using a glow filter via `feGaussianBlur` for visual enhancement.

Bikeshare Scatterplot

Testing

This visualization displays NBA team locations on a map of the US and Canada, with circles representing team scores. Users can toggle team visibility with checkboxes and switch between proportional and classed circle scaling using radio buttons. The code uses `d3.geoAlbersUsa` projection and `d3.geoPath` to render map outlines from GeoJSON sources, while `d3.scaleSqrt` and `d3.scaleThreshold` control circle radius. Data comes from the 2023-2024 NBA season, utilzing team coordinates and census population data for context.

World Map to US Map

This example visualizes a world map using the Natural Earth projection, drawing country boundaries as stroked paths over a graticule grid with an outline. It fetches TopoJSON data from the `visionscarto-world-atlas` package, converts it to GeoJSON using `topojson.feature`, and renders it with `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`. The React-based code manages loading state via `setState`, updating the SVG when data arrives.

Pseudo Sketch

This example renders a pseudo-sketch of an NBA dataset, plotting steals and blocks along the x and y axes while using mark size to represent defensive rebounds. The visualization uses randomly generated positions and sizes as placeholders for the actual data, with no axis labels or annotations. Built with D3.js (version 7.8.5), the code selects SVG elements and dynamically joins circles, assigning random `cx` and `cy` coordinates and radii derived from the data value using `Math.sqrt`. The rendering approach mirrors a quick sketch, prioritizing layout experimentation over polished presentation.

Solar System Assignment

Ten U.S. states appear as color-coded circles on a black background, sized by population and arranged horizontally. Each circle is labeled with the state name and population count. The visualization uses D3 selections and transitions to animate the circles growing from radius zero with staggered delays, then updating positions smoothly. Population data comes from Wikipedia’s list of U.S. states and territories by population. The code applies a power scale to map population values to circle radii and uses `transition.attrTween` implicitly through D3’s `transition` API with `easeLinear` for updates.

Bike Share Dataset

This example displays the first row of the Washington D.C. Bikeshare Rates by Day Dataset as a formatted JSON object in a large monospace font. It demonstrates basic data loading and parsing from a CSV file, converting numeric string fields to numbers. The visualization uses `JSON.stringify` to format the data, and the `main` function sets the container’s inner HTML to render the result. The dataset includes daily statistics like temperature, humidity, and user counts for the Capital Bikesharing System.

NBA Dataset Fork

This example displays a single NBA player’s raw statistics as formatted JSON, using the v3 dataset from the 23/24 season. The `index.js` file imports the CSV data, coerces all numeric fields with unary plus operators, and renders the first record via `JSON.stringify` inside a template literal placed in a container’s `innerHTML`. The output shows the full base averages for that player, confirming the data structure without any charting or visualization libraries.

COVID-19 Dataset

This example displays the first row of the COVID-19 worldwide dataset as a formatted JSON object in a large monospaced font. It uses the `index.js` module to import CSV data, coerce numeric fields, and render the raw statistics for a single country. The visualization relies on a simple HTML `<pre>` element updated via template literals, with no charting library involved.

Fork of Circles with D3 - jahanlon

This example demonstrates how to create and style SVG circles and rectangles with D3 v7 using the General Update Pattern and method chaining. The visualization renders seven semi-transparent circles with fixed positions, radii, and fill colors, alongside five rectangles of varied dimensions and colors against a pale green background. The code uses the `select`, `data`, and `join` methods to bind array objects to SVG elements, then sets attributes like `cx`, `cy`, `r`, `fill`, and `opacity` dynamically. The data is hardcoded as JavaScript arrays within the `main` function.