Beer Explorer

100%

✓ Published0🌍 Public

Last edited Oct 22, 2024

Created on Oct 22, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

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

90% 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

86% match

Loading thumbnail…

BeerRatingsAndLocations

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.

Mmilepore@gmail.com

78% 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

75% match

Loading thumbnail…

Eating Around the World

This choropleth map visualizes the user’s restaurant ratings across countries, with each nation shaded according to its review score on a red ordinal scale. Users click legend circles to filter countries by rating, which also dims non-matching regions and the background sphere. Built with D3 v5, the visualization uses `geoNaturalEarth1` projection, `geoPath`, and `zoom` for map interaction, while data is loaded via `tsv`, `json`, and `csv` from the World Atlas TopoJSON and a traveler dataset. Hovering reveals country names, restaurant details, and star ratings in tooltips.

Jjons288

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

74% match

Loading thumbnail…

Wine Map

This example presents a dual-panel visualization of global wine production data. The left panel is a choropleth map using `d3.geoEqualEarth` projection and `d3.geoPath` to color countries by production quantity, while the right panel is a scatter plot using `d3.scaleBand` and `d3.scaleLinear` to plot each country's production with circle size and color encoding. Both panels are interactive, with mouseover events highlighting corresponding elements across the two views. The visualization loads a world GeoJSON file, a CSV of production statistics, and a JSON file mapping countries to continents.

LLouisa Penrice

72% match

Loading thumbnail…

Beer Explorer React

This example visualizes the classic Iris dataset as a scatter plot, with sepal length on the x-axis and petal length on the y-axis, using SVG circles to represent each flower sample. The visualization is built using React for component management and D3 for rendering, specifically employing `d3.scaleLinear` for coordinate scaling and `d3.axisLeft`/`d3.axisBottom` for the axes. Data is loaded asynchronously from a CSV file via a custom `useData` hook and D3's `csv` parser. The code demonstrates a decoupled architecture where D3 handles the SVG manipulation within a React wrapper, suitable for scaling to more complex projects.

Mmilepore@gmail.com

71% match