milepore@gmail.com

@milepore·11 public vizzes

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`.

Oct 29, 2024

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.

Oct 25, 2024

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.

Oct 22, 2024

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.

Oct 22, 2024

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.

Oct 21, 2024

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.

Oct 21, 2024

Loading thumbnail…

Scatter Plot - Android App User Reviews

This scatter plot visualizes the relationship between the average rating (1–5) and the percentage of problem discoveries for Android app user reviews. As expected, the plot reveals a correlation: higher percentages of problem reports correspond to lower average ratings. The visualization is rendered using D3.js, with data from the `@milepore/android-apps-user-feedback` package. It employs `scaleLinear` for both axes, custom `xAxis` and `yAxis` functions, and draws circles with fixed radius and opacity to represent individual apps.

Sep 20, 2024

Loading thumbnail…

Top Beer Producing Countries

A dark map shows the world's top 20 beer-producing countries as animated, color-coded circles sized by output and positioned at their geographic coordinates. Circles and labels fade in sequentially, then transition smoothly between states using d3-transition with `easeLinear` and staggered delays. Data comes from a CSV (2024 list) and is parsed, scaled, and projected onto the SVG canvas using D3's `select`, `join`, and `transition` APIs. The animation runs continuously, updating positions and radii in response to the underlying dataset.

Sep 8, 2024

Loading thumbnail…

CSV Dataset - Winter Olympics Medals

This example loads the Winter Olympics medal dataset as CSV and displays the first row as raw JSON in a preformatted block. It parses the year column into numbers and maps medal types and genders to numeric indices for potential analysis. The visualization uses the Observable Plot library to render the data, though no chart is currently drawn. The dataset comes from the Guardian's Olympic Sport and Medals collection on Kaggle, with each row listing an athlete’s event, country, and medal.

Sep 8, 2024

Loading thumbnail…

Android App User Review Metrics

A CSV of Android app user-review metrics is parsed and displayed as a single JSON object. The visualization shows the raw first row of the dataset, revealing fields like average rating, review counts, and problem-discovery percentages. The code loads the data with a generic CSV import and converts numeric columns using unary plus operators, then renders the object in a preformatted text block. No charting library is used; the example is a static textual preview rather than an interactive graphic.

Sep 8, 2024

Loading thumbnail…

CS573 - Week 1 - Creative Circles with D3

This example shows a generative composition of randomly placed circles with semi-transparent matching squares inscribed inside them. The sketch uses D3’s data join pattern with `selectAll`, `data`, and `join` to create SVG `circle` and `rect` elements, dynamically sizing them based on random x/y coordinates, radii, and hex colors. A helper function calculates the inscribed square’s dimensions from each circle’s radius, while opacity attributes layer the shapes over a light green background. The rendering is entirely client-side using plain JavaScript and D3 v7.

Aug 23, 2024