M

macgregorm01@gmail.com

@mjmacgregor·27 public vizzes

Loading thumbnail…

Collective Shopping Habit Views

This collection of interactive visualizations explores a shopping habits dataset, revealing patterns in sales, customer ratings, and purchasing behavior across states, seasons, and genders. The views include a scatterplot of overall data distribution, a choropleth map of state ratings using `d3.geoPath`, and additional scatter and stacked bar charts breaking down sales by state, season, and gender. Built with D3.js and embedded via iframes, the charts support business strategy by highlighting geographic and demographic trends. The dataset originates from Kaggle's Consumer Behavior and Shopping Habits Dataset.

Loading thumbnail…

State and Season with Tooltip

This stacked bar chart displays total sales by US state, segmented across four seasons. Hovering over a bar segment reveals a tooltip, while hovering over the color legend highlights that season's data across all states and fades the others. The visualization uses D3.js with `scaleOrdinal` and `scaleLinear` for axes and colors. The source data comes from the Pew Research Global Religious Landscape, processed via a custom script.

Loading thumbnail…

Total Sales Interactive Stacked Bar Charts

Three interactive stacked bar charts display total sales from the Shopping Habits Dataset, broken down by states and seasons, states and genders, and seasons and genders. Built with Vega-Lite and embedded via VizHub, each chart uses interactive tooltips and legends to explore aggregated sales totals. The bars are stacked to show component contributions, with color encoding mapping categorical dimensions. The visualizations are rendered declaratively, leveraging Vega-Lite’s JSON specification to compute and display the aggregated data without custom JavaScript.

Loading thumbnail…

Total Sales by Season and Gender

A stacked bar chart displays total sales for each season, divided by gender, with two distinct color segments per bar. The visualization includes a legend that highlights the corresponding gender segments when hovered, dimming all other portions of the chart. Built with D3.js, it uses `scaleOrdinal` for colors, `flatRollup` for data aggregation, and `stack` to structure the stacked bars, with interactive hover handling in the legend component.

Loading thumbnail…

Grouped Seasons Genders

This example visualizes the total sales for each season, broken down by gender, using a simple dataset derived from the Shopping Habits Dataset. The rendering displays the raw data from the CSV file as formatted JSON text within an HTML container. The code loads the data with an import statement, converts the `Total_Sales` values to numbers, and uses a container’s `innerHTML` property to present the first data record with a specific font size.

Loading thumbnail…

Total Sales by State and Gender

This example displays a stacked bar chart illustrating total sales by state, segmented by gender, using data from the `@mjmacgregor/grouped_states_genders` package. The chart uses D3's `scaleOrdinal` for colors, `stack` and `flatRollup` for data aggregation, and `scaleLinear` and `scaleBand` for axes. Hovering over the legend highlights the corresponding gender segment in the bars, while non-hovered segments fade. A color legend with interactive hover states is implemented using the custom `colorLegend` function.

Loading thumbnail…

Grouped States Genders

This example displays the first row of a dataset as a JSON object, showing a state's name, gender category, and total sales. The visualization uses JavaScript to load the CSV data, convert the "Total_Sales" field to a numeric type, and output the first record formatted in a `<pre>` tag. It is built with the `index.js` file, which imports data from `grouped_states_genders.csv`, and the source is the Shopping Habits Dataset from Kaggle. The example demonstrates a minimal, code-based preview of the data structure.

Loading thumbnail…

Total Sales by State and Season

This stacked bar chart shows total sales by state, with each bar segmented by season (Winter, Spring, Summer, Fall). Hovering over the legend highlights the corresponding season across all bars and dims others, while the highlighted stack is raised to the front. Built with D3, it uses `scaleOrdinal` for colors, `stack()` for grouping, and `flatRollup` to structure data from the `@mjmacgregor/grouped_states_seasons` package. The chart is responsive via `observeResize`.

Loading thumbnail…

Grouped States Seasons

This example visualizes the Grouped States Seasons dataset, showing the total sales for each U.S. state across Fall, Spring, Summer, and Winter. The visualization displays the structured data values for a single state entry in a raw JSON format. It imports the data from a CSV file, converts the Total_Sales values to numbers, and renders the first data object as formatted text in a pre element using vanilla JavaScript. The data originates from the Shopping Habits Dataset on Kaggle.

Loading thumbnail…

State Data Scatterplot with Color Legend

This visualization displays a scatterplot of state ratings, with each circle representing a state's average customer rating against its total number of purchases. The circles are colored by the most popular season for that state, using an ordinal color scale with distinct hues for Summer, Fall, Winter, and Spring. A D3 color legend with interactive hover highlighting allows users to filter which season's data points remain fully opaque. The visualization uses d3.scaleLinear for the axes, d3.scaleOrdinal for colors, and d3-axis for tick marks, while d3.select handles mouse events for tooltips and legend interactions.

Loading thumbnail…

State Shopping Data Scatterplot

This scatterplot visualizes state-level shopping data, plotting the total number of purchases against average customer rating. Each circle represents a state, with its size scaled to the square root of average purchases per customer and its color indicating the popular season (gold for summer, orange for fall, blue for winter, green otherwise). The visualization uses d3.scaleLinear for axes and d3.axisLeft for the y-axis, while custom tooltips appear on mouseover. Data comes from the @mjmacgregor/state-ratings package, and rendering leverages D3’s selection and join methods.

Loading thumbnail…

State Ratings

This visualization displays a map of average customer review ratings across U.S. states, using a dataset derived from shopping habits. The code loads a CSV file with `d3.csv` or a custom import, converts quantitative fields like `AvgRating` and `NumRatings` to numbers, and renders the first data record as raw JSON in a `<pre>` element. The example demonstrates basic data inspection, showing how to load and parse tabular data for subsequent geospatial or analytical use.

Loading thumbnail…

Attempt of Interactive Filtering

This interactive scatterplot filters a shopping habits dataset by season. A dropdown menu lets users select between all seasons, Summer, Winter, Spring, or Fall, dynamically updating the displayed points. The visualization encodes purchase amount on the x-axis and customer review rating on the y-axis, with circle size representing previous purchases and color indicating the season. Built with D3 7.8.5, the code uses scaleLinear for axes, join operations for SVG elements, and change event listeners on a select element to redraw the circles via JavaScript data filtering.

Loading thumbnail…

Total Shopping Habits Scatterplot

This scatterplot visualizes shopping habits by plotting purchase amount in USD against customer review ratings. Each point encodes the number of previous purchases through its radius and the shopping season (Summer, Fall, Winter, or Spring) through its color. The visualization uses D3.js scales and axis components, with circles rendered via SVG selections. Data comes from the @mjmacgregor/shoppinghabits package, and the chart includes labeled axes and a white inner rectangle behind the plotted points.

Loading thumbnail…

Shopping Habits

This example displays the first row of a shopping habits dataset as a formatted JSON object in a container. It prints the data as a `<pre>` element with a font size of 20 pixels using template literals and `innerHTML`. The dataset, imported from `data.csv` and listed with its full header row, includes columns like age, gender, item purchased, category, location, and review rating. The code first converts several quantitative attributes, such as `Customer_ID`, `Age`, and `Purchase_Amount_USD`, to numbers using the unary plus operator before rendering the sample.

Loading thumbnail…

State Ratings Map

This map of the United States uses circles to represent shopping data by state. The area of each circle scales with the number of purchases, while the blue color intensity reflects the average customer rating, creating a visual comparison of consumer behavior. Built with d3.geoPath and d3.geoAlbersUsaTerritories, it projects state boundaries and overlays circles using d3.scaleSqrt for sizing and d3.scaleSequential with interpolateBlues for coloring. The data comes from the Shopping Habits Dataset, with the map rendered using the topojson-client library to convert GeoJSON features.

Loading thumbnail…

State Ratings Map

This interactive map of the United States visualizes state ratings, rendering each state as a distinct geographic shape. Built with React and D3, the visualization uses the `d3.geoPath` API with a `geoAlbersUsaTerritories` projection to display the country’s outline and graticule, while loading geospatial data from a TopoJSON source. The map dynamically updates its SVG canvas, sizing to the browser window, and incorporates state rating data from an external library, though the actual data-loading state is managed via a `state` object and a `setState` function, with the map’s country paths styled with white strokes and a thin graticule grid.

Loading thumbnail…

State Ratings Map

This example renders a choropleth map of the United States using D3’s geo APIs. It employs `d3.geoAlbersUsa` for the projection, `d3.geoPath` to draw state boundaries, and `d3.geoGraticule` to overlay a graticule and outline. State geometries come from a TopoJSON source, converted to GeoJSON via `topojson-client`’s `feature` function. The visualization uses a join-based workflow to create SVG paths, with a white stroke separating states and a light gray graticule.

Loading thumbnail…

State Shopping Ratings

This example presents a world map visualization that plots cities as tiny dots, sourced from a reduced world cities database and rendered alongside country boundaries from the visionscarto-world-atlas. The visualization uses the D3.js library’s `geoNaturalEarth1` projection and `geoPath` to draw the map and graticule, while `topojson-client` converts the TopoJSON data into features. Each city’s latitude and longitude are projected to screen coordinates, then drawn as small circles, with the country shapes styled in light gray.

Loading thumbnail…

Example Spotify Songs Scatter Plot

This scatter plot maps 50 mock Spotify songs, with energy on the x-axis and popularity on the y-axis, while point color encodes valence using a three-shade blue palette. Both scales are constructed with `d3.scaleLinear` and `d3.extent`, and axes are rendered via the `@mjmacgregor/axis-labels` helper library for labeled ticks. The visualization is rendered as SVG circles with opacity, and the underlying data is generated randomly using `Math.random()` in the main script, mimicking song attributes without a real dataset.

Loading thumbnail…

World Happiness Scatter Plot

This scatter plot shows the relationship between GDP per capita and healthy life expectancy across countries, revealing a positive correlation. The visualization uses d3.scaleLinear to map data dimensions to positions and d3.axisLeft for the y-axis. Data comes from the @mjmacgregor/worldhappiness package, rendered as semi-transparent circles on a gray background. The code employs axis label utilities from @curran/axis-labels to annotate both axes. This chart effectively demonstrates how wealthier nations tend to have higher life expectancy.

Loading thumbnail…

World Happiness Report

This example displays the raw contents of the first row from the World Happiness Report 2019 dataset, rendering it as formatted JSON text. The code loads the data via an ES module import, converts six quantitative attribute columns to numbers, and then uses `JSON.stringify` to pretty-print the row inside a `<pre>` element. It relies on standard JavaScript data parsing and DOM manipulation without any external visualization libraries.

Loading thumbnail…

Spotify Songs Scatterplot

This scatter plot visualizes the relationship between tempo and valence for a dataset of Spotify songs, where each circle represents a track’s musical attributes. The visualization uses D3’s `scaleLinear` and `axisLeft` to map the data, with circles colored by opacity to reveal density in overlapping regions. The chart is built via the reusable `viz` function, which handles axes, labels, and the plotting of points. The underlying data comes from the `@mjmacgregor/spotifysongs` package, and the example is intended as a template for adapting to other datasets.

Loading thumbnail…

World Happiness Scatter Plot

This scatter plot displays World Happiness data, mapping GDP per capita on the x-axis against flipper length on the y-axis. It uses D3.js and `viz.js` to render circles, with axis labels from `@curran/axis-labels`. The code loads data from `@mjmacgregor/worldhappiness`, featuring a grey inner rectangle and semi-transparent circles, though the y-axis value mapping appears counterintuitive for happiness data.

Loading thumbnail…

Top Spotify Artists

The visualization displays the top 10 Spotify artists ranked by monthly listeners, with each artist shown as a circle sized proportionally to their listener count. It highlights individual data points with artist names, ranks, and listener figures arranged in a two-row grid. The animation introduces elements sequentially, with later ranks appearing first, creating a countdown effect. Built using D3.js v7, the code employs transitions like `transition().duration()`, `.delay()`, and `.attr()` to animate the circles and text, sourcing data from Wikipedia.

Loading thumbnail…

Spotify Song Data

This example showcases a single sample record from a large random Spotify dataset, displaying its raw attributes in a formatted JSON structure. The main component takes a container element and injects a preformatted text block containing the first data point, with all quantitative fields converted from strings to numbers. The code relies on a custom CSV import module to load the data and exports the dataset for use across the application. It is built with Vue and rendered on a web page using the WebGL framework.

Loading thumbnail…

Fork of Circles and Rectangles with D3

This visualization renders a stylized owl character using D3.js, composed of two sets of SVG primitives: circles and rectangles positioned to form the face, eyes, ears, and body. The code uses `d3.select` and method chaining with `.selectAll`, `.data`, and `.join` to bind the hardcoded data arrays to SVG elements, setting attributes like `cx`, `cy`, `r`, and `fill` for circles and `x`, `y`, `width`, `height`, and `rx` for rectangles.