Skip to main content
SimilarExport ZIP
100%

Beer Style Explorer Pseudo-Viz

✓ Published0🌍 Public
Mmilepore@gmail.com
Last edited Oct 25, 2024
Created on Sep 20, 2024
Forked from Marks and Channels

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.

AI-generated description

Creates a pseudo-viz using line marks Using length signal (on the bar lines) to show the number of reviews per beer Using the y-position signal (on the line chart) to show the average review per beer

MIT Licensed

Similar vizzes

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
78% match
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
74% 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
73% 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
71% 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
71% match
Loading thumbnail…

Pseudo Bar Chart

A pseudo bar chart renders four vertical bars in red, blue, yellow, and green, each paired with a black letter label (A–D) beneath it. The bars vary in height and vertical offset, suggesting categorical values without an explicit scale or axes. Built with plain SVG, the visualization uses static `rect` and `text` elements inside an `svg` container, with styling applied via CSS using the Share Tech font and a white background. No JavaScript libraries are involved; the chart relies entirely on hard-coded coordinates.

SSam Hege
66% match
Loading thumbnail…

Pseudo Viz

This example shows three horizontal bars labeled Bar 1, Bar 2, and Bar 3, with varying widths representing different values. The visualization is rendered as static SVG elements directly in the HTML, using `<rect>` for the bars and `<text>` for labels, styled with CSS for font size and color. The code relies on standard HTML, CSS, and JavaScript APIs without any external libraries or data processing, presenting a simple hardcoded bar chart layout.

SSami Kauhanen-Duac
65% match
Loading thumbnail…

Pseudo Horizontal Bar Chart

The visualization displays four horizontal bars of varying lengths, labeled A through D, on a white background, using a pseudo bar chart format where bars are represented as black rectangles. It is rendered as an SVG with hardcoded coordinates, with each bar’s width decreasing from top to bottom, mimicking a categorical comparison. The text labels are placed to the left of each bar using the Share Tech font, and the chart uses basic SVG elements like `rect` and `text` without any external libraries or data-driven logic.

Mmaciekawsq@gmail.com
64% match