Skip to main content
Log in
M

Matt Hagger

@Camo651·14 public vizzes

Loading thumbnail…

Airbnb Viz Final

This interactive scatterplot analyzes Airbnb listings, showing the relationship between any two selectable property attributes, such as price against person capacity. A slider filters data by a chosen attribute's minimum value, and an overlaid density distribution reveals the concentration of data points along the y-axis. The visualization is built with React and D3 v7, dynamically loading CSV data for selected cities and weekdays directly from a GitHub repository. Users can compare multiple European cities, switch between weekdays and weekends, and adjust the density calculation between global and per-column modes.

Dec 4, 2025
Loading thumbnail…

Airbnb Viz Week 12

This interactive scatterplot visualization compares Airbnb listing attributes across selectable European cities and weekdays/weekends. Users can choose which numeric attributes to map to the X and Y axes—with the Y axis always displayed on a logarithmic scale—and apply a minimum-value filter via a slider. The visualization renders density-based color gradients within vertical bands for each X-axis category, using D3.js (d3.scaleLinear, d3.scaleBand, d3.scaleLog) for scaling and axis rendering, and React for the interface controls. City-specific CSV data is loaded from GitHub, and the density calculation uses a 5% window of the Y-axis range to aggregate point distributions.

Nov 21, 2025
Loading thumbnail…

Fork of London Airbnb Person Cap vs Price w/ Color & Interaction Week 11

This interactive scatterplot explores London Airbnb prices across various attributes, showing density distributions through a blue-to-yellow gradient with red average markers. Users can select which numeric property appears on the x- and y-axes, filter listings by minimum values for a chosen metric, and toggle between weekdays and weekends across multiple European cities. Built with React and D3 v7, it uses `scaleLog` for the y-axis, density calculations in pixel space, and dynamically loads CSV data from GitHub repositories.

Nov 5, 2025
Loading thumbnail…

London Airbnb Person Cap vs Price w/ Color & Interaction

This interactive scatterplot visualization explores London Airbnb pricing by person capacity, with user-selectable X and Y axes from multiple numeric property columns. The chart renders a density heatmap background using d3.scaleLinear, d3.scaleBand, and d3.scaleLog, computing per-pixel point density across the plot area and coloring regions from blue to yellow based on concentration. A yellow-to-blue gradient legend displays density levels with a red line marking the average. Users can filter data by minimum value via a range slider tied to any selected numeric property, with all controls updating the React-rendered visualization in real time.

Oct 29, 2025
Loading thumbnail…

London Airbnb Person Cap vs Price w/ Color

This visualization uses a square-binned density plot to show the relationship between Airbnb listing person capacity and price in London, with color intensity (blue to yellow) representing the density of listings at each price level for each capacity. Red horizontal lines indicate the average price for each capacity group. The chart is rendered using D3.js v7 within a React 19 application, employing `scaleLog` for the price axis, `scaleBand` for capacity, and a custom pixel-by-pixel density calculation with `interpolateRgb` for the color scale.

Oct 22, 2025
Loading thumbnail…

Fork of London Airbnb Person Cap vs Price

A fork of the London Airbnb dataset visualizes the relationship between person capacity and nightly price. Each listing appears as a jittered dot, grouped by capacity, with a red line marking the mean price for each group. The y-axis uses a logarithmic scale to accommodate a wide price range. Built with React and D3 v7, it employs `scaleBand`, `scaleLog`, and `randomNormal` to position points and compute averages, demonstrating a common approach for comparing distributions across categorical bins.

Oct 8, 2025
Loading thumbnail…

London Airbnb Person Cap vs Price

This visualization shows the relationship between Airbnb listing person capacity and nightly price in London, using a candlestick-style chart where each capacity level displays the minimum, average, and maximum price. The code groups listings by person_capacity, calculates price statistics, and renders whiskers for the range, steelblue boxes for min-max, and red average lines using a log-scaled y-axis. Built with React and D3 v7, it uses `scaleBand` for the x-axis, `scaleLog` for the y-axis, and `select` joins to update SVG elements. The data comes from a CSV file containing London Airbnb listings with 19 variables.

Oct 1, 2025
Loading thumbnail…

London

This scatter plot maps Airbnb listings across London by latitude and longitude, coloring each point red or green to distinguish between non-superhosts and superhosts. The visualization uses D3’s `scaleLinear` for axis scaling and `selectAll` to render circles, with React managing the data loading and state. Axis labels and ticks are added via custom functions (`renderAxis`, `renderAxisLabels`), while the underlying dataset includes property attributes like price and room type for contextual analysis.

Sep 24, 2025
Loading thumbnail…

London

A scatterplot maps Airbnb listings across London by latitude and longitude, with each point colored from red to green based on a normalized attraction index. The React app loads CSV data and passes it to a D3 visualization that renders axes, labels, and circles. D3's `scaleLinear` and `extent` set the geographic scales, while a custom color interpolation blends hex values between minimum and maximum index values.

Sep 17, 2025
Loading thumbnail…

Fork of Basic Scatter Plot with React & D3

This scatter plot visualizes the relationship between employee Stress Level and Burnout Level, using data from a CSV file. Each circle represents an employee, positioned by stress on the x-axis and burnout on the y-axis, using D3's `scaleLinear` and `extent` functions. The React app loads the data with `d3.csv`, formats it, and renders the visualization via a `viz` function that uses D3's `select` and `.join` API to create and position the circles.

Sep 17, 2025
Loading thumbnail…

Loading Data - Coffee

A D3.js example demonstrates asynchronous data loading from a CSV file. It displays the raw parsed dataset as JSON in a `<pre>` element, showing coffee purchase records with fields like time of day, coffee type, and price. The visualization uses `d3.csvParse` to convert the CSV text, then explicitly coerces numeric columns like `hour_of_day` and `money` to numbers. State management tracks loading status, transitioning from undefined to `'LOADING'` to the final array of objects via `fetch` and promises.

Sep 3, 2025
Loading thumbnail…

Loading Data - Burnout

This visualization demonstrates the process of loading and parsing a CSV dataset about employee burnout. The code begins with a loading state, fetches the `data.csv` file, and parses it into a JSON structure using the `csvParse` function from D3 v7. Numeric fields are explicitly converted to numbers, while categorical fields like `Gender` and `Country` remain as strings. The parsed data is then stored in the application state and displayed as a pretty-printed JSON object, showcasing the data-cleaning and preparation steps before any visual encoding.

Sep 3, 2025
Loading thumbnail…

Loading Data - Health Insurance

This example demonstrates how to load and parse a CSV file containing health insurance data using D3 v7. The visualization displays the raw parsed data as a JSON object in a `<pre>` element, showing fields such as age, sex, BMI, children, smoker status, region, and charges. It uses `d3.csvParse` to convert the CSV text into an array of objects, then manually coerces numeric fields with the unary plus operator. The code implements a loading state that transitions from undefined to "LOADING" before populating with the fetched data via the Fetch API.

Sep 3, 2025
Loading thumbnail…

Fork of Circles with D3

This example renders a generative spiral of 500 semi-transparent circles that grow and shift in a golden-hued gradient across a pale green canvas. The visualization uses D3 v7’s `select` API and the `.join()` operator to declaratively create and update an SVG, computing each circle’s `cx`, `cy`, `r`, and `fill` from sine and cosine functions of its index. The code demonstrates D3’s modern “join” pattern for idempotent state management, with the container’s dimensions driving the spiral’s center and radius.

Aug 26, 2025