J

Jacklyn Turner

@jgorsett·20 public vizzes

Loading thumbnail…

Pie Chart

A donut chart displays the ten most common cocktail ingredients from a Hotaling & Co. dataset, ranked by frequency of use across recipes. The React app loads CSV data via `d3.csv`, aggregates counts with `d3.nest()`, and sorts results in descending order before slicing to the top ten. D3’s `pie()` generator computes arc angles, while the `arc()` generator renders SVG paths with an inner radius for the donut effect. Hovering reveals ingredient names and counts through native SVG `<title>` tooltips.

Loading thumbnail…

Changing Faces

The visualization displays a grid of smiley faces whose colors and facial features change randomly every two seconds. Each face is rendered as SVG shapes built from React components, using D3’s arc generator to draw the mouth. The background fill color for each face is selected from the CSS named colors dataset loaded via d3.csv. The faces refresh automatically through an HTML meta refresh tag, producing a continuously shifting mosaic of colors and expressions.

Loading thumbnail…

Pies for Top Cocktail Ingredients with Interactive Legend

This interactive map displays the top 10 cocktail ingredients across major U.S. cities, using colored pie charts positioned at each city’s coordinates to show ingredient proportions. Hovering over the legend highlights matching ingredients on the map while dimming others. Built with React and D3 v5, the visualization uses d3.pie for chart generation, d3.geoAlbers and d3.geoPath for the map projection, and d3.scaleOrdinal for color encoding. Data comes from the Hotaling & Co cocktails dataset, with U.S. state shapes from the us-atlas TopoJSON.

Loading thumbnail…

Filterable Cocktail Ingredient Bar Chart

This interactive bar chart displays the top 20 cocktail ingredients, ranked by the number of cocktails containing each ingredient. A dropdown menu filters the dataset by main alcohol type, updating the bar lengths to show ingredient frequencies within cocktails that include the selected spirit. Built with React and D3 v5, the visualization uses `d3.nest()` for aggregation, `scaleBand` and `scaleLinear` for positioning, and SVG rectangles for rendering. Data comes from Hotaling & Co.’s parsed cocktail ingredient dataset.

Loading thumbnail…

Interactive Cocktail Alcohol Pie Charts on U.S. Map

This interactive visualization displays pie charts on a U.S. map showing the top 10 alcohols found in cocktails across eight major cities. The chart uses React with D3.js v5, employing `d3.geoAlbers` and `d3.geoPath` for map rendering and `d3.pie` and `d3.arc` for the pie charts. Hovering over the legend highlights matching ingredients across all pies, while tooltips reveal alcohol names and counts. Data comes from the Hotaling & Co cocktails dataset, with map shapes from the US-Atlas TopoJSON.

Loading thumbnail…

Top Cocktail Ingredients by Location

This map displays the locations of cocktails containing top ingredients from the Hotaling & Co cocktails dataset, with each point representing a city. The visualization uses d3.geoPath and d3.geoAlbers to render US state shapes from the US-Atlas TopoJSON, overlaid with graticules and state interiors. React manages the component lifecycle, while d3.csv loads the ingredient location data and d3.json fetches the map topology. Circles are positioned via the Albers projection and styled with a blue fill, providing a geographic overview of where these cocktails are found.

Loading thumbnail…

Interactive Bubble Chart for Top Cocktail Ingredients

A choropleth-style bubble map displays the top ten cocktail ingredients across U.S. cities, with circle size encoding ingredient count and color distinguishing each ingredient. Hovering over the color legend highlights the corresponding cities on the map while dimming others. The visualization uses React with D3 v5, employing `scaleSqrt` for bubble sizing, `scaleOrdinal` for color mapping, and `geoAlbers` with `geoPath` from d3-geo to render U.S. state boundaries from TopoJSON. Data comes from the Hotaling & Co cocktails dataset, with U.S. map shapes sourced from the us-atlas package.

Loading thumbnail…

Interactive Common Cocktail Ingredient Pairings

A horizontal bar chart shows the 50 most common cocktails for any selected ingredient, ranking other ingredients by how frequently they co-occur. The visualization uses a dropdown menu to filter the Hotaling & Co. cocktail dataset, with bars encoded as SVG rectangles scaled by D3's `scaleLinear` and `scaleBand`. Interactivity relies on React state and the `useData` hook, while axes are rendered with the `AxisBottom` and `AxisLeft` components.

Loading thumbnail…

Top Cocktail Ingredients with Interactive Legend

A map of the United States plots the top ten cocktail ingredients by city, with circle size proportional to ingredient count and color indicating the specific ingredient. An interactive legend filters the map on hover, dimming non-selected ingredients and their corresponding data points. The visualization uses React and D3, employing `d3.scaleSqrt` for sizing, `d3.scaleOrdinal` for color assignment, and `d3.geoPath` to render the map from US-Atlas topology data. City coordinates and ingredient data come from the Hotaling & Co cocktails dataset.

Loading thumbnail…

Boston Weather Data with Menus

A scatter plot of daily Boston weather observations shows how users can select any two weather attributes from the dataset—such as temperature, humidity, wind speed, or snowfall—to compare and discover relationships. Two dropdown menus control which attribute maps to the x- and y-axes, updating the D3 linear scales and plotted circles accordingly. The chart uses React with D3 v5, reading the CSV data via D3’s `csv` function and rendering the plot as an SVG with custom axis and mark components.

Loading thumbnail…

Common Cocktail Ingredient Pairings

A horizontal bar chart ranks the most frequent cocktail ingredients, with bar length scaled to ingredient counts and color encoding the primary alcohol type. The visualization is built with the Vega-Lite API, registered with Vega and Vega-Lite libraries, and processes a parsed CSV dataset of cocktails from Hotaling & Co. The chart supports filtering by up to five ingredients, dynamically rebuilding the title and bar ordering based on selected pairings, while tooltips display cocktail names. Users can adjust constants for ingredient filters and result count in the source code.

Loading thumbnail…

Top Cocktail Ingredients with Interactive Legend

A map of the United States plots the top ten cocktail ingredients by city, with circle size proportional to ingredient count and color indicating the specific ingredient. An interactive legend filters the map on hover, dimming non-selected ingredients and their corresponding data points. The visualization uses React and D3, employing `d3.scaleSqrt` for sizing, `d3.scaleOrdinal` for color assignment, and `d3.geoPath` to render the map from US-Atlas topology data. City coordinates and ingredient data come from the Hotaling & Co cocktails dataset.

Loading thumbnail…

Top Rated Books from Goodreads

The visualization displays top-rated books from Goodreads, filtered to those with an average rating above 4.6 and over 1,000 ratings. It plots book titles vertically against average rating, with circle size encoding ratings count and color indicating authors. Built with vega-lite-api and rendered through vega-lite, it loads CSV data from a Goodreads-sourced gist, using the tooltip handler for interactive title details.

Loading thumbnail…

Goodreads book data

This example displays the basic properties of a Goodreads book dataset in a large text format, showing its file size, row count, and column count. The visualization uses D3 v5 to load the CSV file via `d3.csv` and formats the data with `d3.csvFormat` to calculate the size in kilobytes. It also accesses the dataset’s `length` and `columns` properties to report the number of rows and columns. The data originates from the Goodreads API and is sourced from a Kaggle-hosted CSV file.

Loading thumbnail…

Cocktails (Hotaling & Co.)

This example displays basic statistics about the Hotaling & Co. cocktail dataset, showing its size in kilobytes, row count, and column count as large text. The page loads a CSV file from a GitHub gist using the `d3.csv` method and formats the data with `d3.csvFormat` to calculate the file size. The visualization serves as a minimal data-loading demonstration, highlighting the dataset’s structure without graphical charts. It also includes commented-out alternatives using `fetch` with async/await and a nested promise approach.

Loading thumbnail…

Top Cocktail Alcohols

This visualization displays the top five cocktail alcohols—Whiskey, Vodka, Gin, Rum, and Tequila—across five U.S. cities, using horizontal bars colored by location. It shows the count of cocktails per alcohol, with tooltips revealing individual cocktail names. The chart is built with vega-lite-api, which wraps Vega-Lite and Vega, and loads data via d3.csv from a Hotaling & Co. dataset. The code filters the parsed ingredients CSV in getData.js before rendering bars with config.js customizing axis styling.

Loading thumbnail…

Goodreads book rating histogram

A histogram displays the distribution of average ratings among Goodreads books with more than 1,000 ratings, using data sourced from Kaggle. The chart aggregates ratings into bins along the x-axis while the y-axis counts books per bin. Built with the vega-lite-api, it uses `vl.markBar` with a binned quantitative field and a count aggregation, styled through a custom config. Data is loaded via `d3.csv` and filtered, then rendered with Vega-Lite’s SVG output.

Loading thumbnail…

Assets Under Management (AUM) in Boston

This scatterplot shows Boston investment managers with assets under management (AUM) under $6 billion, plotting AUM against the number of investment employees while coloring points by whether advisors charge performance-based fees. The visualization uses the Vega-Lite API with vega-lite, vega, and d3.csv to load SEC Form ADV data, filtering the dataset to Boston-based firms with fewer than 1,000 investment staff. Each circle encodes AUM on the y-axis, employee count on the x-axis, and fee structure as a categorical color, with tooltips revealing firm names. The chart resizes to the full viewport and applies custom axis and label styling.

Loading thumbnail…

Smiley Face Part II

This example shows a smiley face rendered as a yellow circle with black outlined eyes and an arc-shaped mouth, drawn using React elements inside an SVG container. It demonstrates how React manages the SVG structure while D3’s `arc` generator computes the mouth path. The face is centered with fixed dimensions, using hardcoded values for eye offset, radius, and mouth arc angles. D3 v5 provides the arc helper, while React handles component rendering, illustrating a hybrid approach where D3 handles geometric calculations and React handles UI state.

Loading thumbnail…

Smiley Face Jackie Turner

A yellow smiley face with blue eyes and a red arc mouth is rendered using React and D3. The face is drawn with SVG elements, including circles and lines, positioned through a translated coordinate system. The code uses D3's `arc` function to generate the mouth path, while React manages the component structure. The visualization demonstrates basic shape composition and coordinate math within a React-D3 integration.