Skip to main content
SimilarExport ZIP
100%

BeerRatingsAndLocations

✓ Published0🌍 Public
Mmilepore@gmail.com
Last edited Oct 21, 2024
Created on Aug 30, 2024

A scatterplot-style map visualization plots beer ratings by style and geography, using latitude and longitude coordinates from the BeerAdvocate dataset. Each point represents a brewery’s beer, colored by style family, allowing users to explore rating patterns across regions and categories. The Svelte component loads CSV data via `data.csv` and `beer-style-families.csv`, parses numeric columns, and joins styles to family groupings. The initial view displays a JSON preview of the first data record, with the full dataset exported for interactive map rendering.

AI-generated description

The Beer Style and Location Dataset forked and loaded as CSV

This is a dataset that contains information about beer ratings. It is derrived from the BeerAdvocate Dataset that is a huge list of 1.5 million beer ratings. This data was joined with data locating those breweries and then averaged across indivdual beers.

Tasks

  • Visualize the rating of beers to their style relative to their geography
  • Explore the relationship between beer style, rating and geography
  • Allow someone to search for a brewery in a given area with high ratings
  • Allow someone to search for a given beer style in a given area with a high rating
  • Plot all beer ratings for a given style based on their geography
  • Plot all beer ratings in a given area to let someone explore what to drink
MIT Licensed

Similar vizzes

Loading thumbnail…

Beer Explorer

This example visualizes beer ratings and locations on an interactive world map, with each review shown as a colored dot. The dots range from red (low rating) to green (high rating) via `scaleLinear`, overlaid on country outlines from the `visionscarto-world-atlas` TopoJSON data. Users can pan and zoom using `d3.drag` and `d3.zoom`, while a `geoNaturalEarth1` projection and `geoPath` render the graticule and map shapes. The visualization is built with React state management, D3.js, and topojson-client, rendering geospatial data as SVG.

Mmilepore@gmail.com
78% match
Loading thumbnail…

Beer Reviews on a Map

The map displays beer reviews as colored dots overlaid on a world map, with each dot's hue indicating the review score on a red-to-green gradient. Users can pan and zoom interactively. The visualization uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to render country outlines and graticules, while `d3.zoom` and `d3.drag` handle navigation. Review data comes from the `@milepore/beer_ratings_and_locations` package, with scores mapped via `d3.scaleLinear`.

Mmilepore@gmail.com
78% match
Loading thumbnail…

scattered plot

This scattered plot maps beer styles by their typical alcohol content (ABV) and bitterness (IBUs). Each node represents a style, positioned according to its value ranges, with some styles showing a single point where data is unknown. The visualization uses D3.js v4 to create an SVG scatter plot, reading the dataset from an array of objects. It reveals the relationship between strength and hoppiness across a wide range of beer categories, from light lambics to imperial IPAs.

GGerardoFurtado
75% match
Loading thumbnail…

Beer Style

This visualization explores the craft beer landscape by showing how the top 20 beer styles vary in rating, popularity over time, ABV, IBU, and production across US states. It combines multiple linked charts, including kernel density plots for ratings, ABV, and IBU, plus a state-based histogram, using D3 v7’s `kde` and `epanechnikov` functions for density estimation. Users interact via a multi-select dropdown and slider to filter beer styles and rating ranges, with SVG transitions updating the charts. The data appears to come from a beer review dataset, with the visualization built using D3 and jQuery UI for the slider, and rendered as animated SVG elements.

CChao Pang
74% match
Loading thumbnail…

Beer Reviews on a Map (old)

This interactive visualization presents a world map where individual points mark cities with populations greater than 50,000, using data from Simplemaps’ World Cities Database. The map uses a natural Earth projection with graticules, landmasses, and country boundaries rendered as SVG paths via d3.geoPath. Points are drawn as semi-transparent circles through React components, with the projection applied to each city’s longitude and latitude coordinates. Geographic data comes from the World Atlas TopoJSON, while styling defines muted fill colors for land, sphere, and graticule layers.

Mmilepore@gmail.com
74% match
Loading thumbnail…

Beer Style Explorer Pseudo-Viz

The Beer Style Explorer pseudo-viz combines bar length and line marks to compare beer styles. Bars encode the number of reviews per style, while an overlaid red line uses y-position to show the average rating for each style. The visualization uses D3's `select` and `line` APIs, with `scaleBand` and `scaleLinear` for the axes, and `axisBottom`, `axisLeft`, and `axisRight` to render the chart. Both signals are presented on a shared categorical x-axis, with the line connecting the average ratings across styles.

Mmilepore@gmail.com
73% match
Loading thumbnail…

Fork of D3 Scatter Plot

This D3 scatter plot visualizes beer volume consumption by year, using data from a TidyTuesday food and beverage dataset. The visualization maps each data point as a circle, scaled from the dataset’s extent with `d3.scaleLinear`, and renders axes using `d3.axisLeft` and `d3.axisBottom`. The code filters out rows with missing beer values and uses `d3.csv` with a parsing function to convert numeric fields. The resulting SVG spans the full browser window, and each circle includes a tooltip title showing the precise year and beer volume for that point.

Ddanh.nguyen0010@gmail.com
67% match
Loading thumbnail…

Alcohol Vega Lite

This example uses a scatterplot to compare beer servings and total liters of pure alcohol consumed per country, with tooltips revealing country names on hover. It fetches data from the FiveThirtyEight alcohol-consumption GitHub repository using D3’s `csv` loader, then renders the chart with Vega-Lite via the vega-lite-api wrapper, which registers Vega and Vega-Lite and uses vega-tooltip for interactions. The visualization adapts to the full window size and applies custom axis and label styling from a config object.

Ddvinubius
67% match