P

pbruss@bu.edu

@pbruss·41 public vizzes

Loading thumbnail…

CS573 Final Project - Average Calories by Restaurant

This interactive bar chart shows the average calorie counts for six fast food restaurants, using data from a Kaggle fast food nutrition dataset. Colored bars represent each restaurant, and hovering over a bar turns it black and displays a tooltip with the exact calorie value. The visualization is built with D3.js v7, using `scaleBand` and `scaleLinear` for axes, and relies on the `@pbruss/responsive-axes` library for chart layout. The chart is responsive, with resizing handled by `observeResize`, and includes labeled axes for restaurant names and calorie counts.

Loading thumbnail…

CS573 Final Project - Average Sugar (g) Levels by Restaurant

This example shows a bar chart of average sugar levels (in grams) across six fast-food restaurant chains, using data from a Kaggle fast-food nutrition dataset. It uses D3.js version 7.8.5 with `scaleBand` and `scaleLinear` for positioning, and `d3.group` and `d3.mean` to aggregate the data. Hovering over a bar turns it black and displays a tooltip with the exact average value, while a responsive layout is handled by the `observeResize` and `axes` functions from external libraries.

Loading thumbnail…

CS573 Final Project - Average Saturated Fat (g) Levels by Restaurant

This interactive bar chart displays the average saturated fat content (in grams) across different fast food restaurant chains, using data from a Kaggle dataset on fast food nutrition. The visualization aggregates rows by restaurant company and computes mean saturated fat values, rendering them as color-coded bars with a light gray inner plot background. Built with D3.js (v7), it employs `scaleBand` and `scaleLinear` for positioning, while a custom tooltip appears on mouse hover to show precise values. The chart is responsive, using the `observeResize` and `axes` helper APIs to adapt its dimensions and labels dynamically.

Loading thumbnail…

CS573 Final Project - Average Cholesterol (mg) Levels by Restaurant

This interactive bar chart compares average cholesterol levels (in milligrams) across fast food restaurant chains, using data from a Kaggle nutrition dataset. Each bar is color-coded by company, and hovering over a bar turns it black while displaying a tooltip with the precise average value. Built with D3, the visualization uses `scaleBand` and `scaleLinear` for axes, and the `viz()` function renders the chart with responsive dimensions from `observeResize`. The tooltip and hover interactions are implemented with D3 `select` and event listeners.

Loading thumbnail…

CS573 Final Project - Average Sodium (mg) Levels by Restaurant

This interactive bar chart displays the average sodium levels (in mg) for six fast food restaurants, using data from a Kaggle nutrition dataset. Each bar is color-coded and includes a hover tooltip that reveals the exact average value. The visualization is built with D3.js, using `scaleBand` and `scaleLinear` for axes, while the `@pbruss/responsive-axes` library handles responsive sizing. Bars change color on mouseenter and revert on mouseleave, with tooltip positioning managed through mouse events. The chart also includes labeled axes and a background rectangle for clarity.

Loading thumbnail…

CS573 Final Project - Cholesterol (mg) vs Sodium (mg) w/ category grouping, legend, tooltip & interactive color functionality

This scatter plot visualizes the relationship between cholesterol and sodium levels across menu items from six major fast food chains, with bubble size representing calorie count. The visualization uses D3.js scales and axes from the `@pbruss/responsive-axes` library, rendering circles with opacity values and a tooltip that displays item details on hover. An interactive legend allows users to highlight specific restaurant categories by fading non-matching bubbles. Data comes from the Kaggle fast food nutrition dataset, and the chart responds to container resizing through the `observeResize` function.

Loading thumbnail…

CS573 Final Project - Viz Summary

This visualization gallery presents an analysis of nutritional data from six major fast-food chains, sourced from a Kaggle dataset. The first phase uses D3.js bubble charts to compare relationships between key nutrients, such as cholesterol, saturated fat, and sugar against sodium content. The second phase employs bar charts to display the average values of these nutrients per restaurant. The visualizations are built with the D3.js library, rendered interactively and responsively within embedded iframes on VizHub.

Loading thumbnail…

CS573 Final Project - Sugar (g) vs Sodium (mg) w/ category grouping, legend, tooltip & interactive color functionality

This scatter plot from the CS573 Final Project visualizes the relationship between sugar (g) and sodium (mg) across menu items from six fast-food chains, with bubble size encoding calories. Data comes from a Kaggle fast-food nutrition dataset. The D3.js visualization uses `scaleLinear` for axes, tooltips on hover, and an interactive legend that highlights bubbles by restaurant category when hovered, while `observeResize` ensures responsive rendering.

Loading thumbnail…

CS573 Final Project - Saturated Fat (g) vs Sodium (mg) w/ category grouping, legend, tooltip & interactive color functionality

This example shows a scatter plot of saturated fat versus sodium for fast-food menu items, with bubble size representing calories. It uses D3.js version 7.8.5 to render the visualization and includes an interactive legend that highlights specific restaurant categories on hover. The plot displays tooltips with detailed nutritional information for each data point. The chart uses the `scaleLinear`, `extent`, and `axisLeft` APIs from D3.js, along with a custom `axes` function from the `@pbruss/responsive-axes` library. Data comes from a Kaggle dataset of fast-food nutrition information.

Loading thumbnail…

Fork of CS573 Final Project - Cholesterol (mg) vs Sodium (mg) w/ category grouping, legend, tooltip & interactive color functionality

This scatter plot visualizes the relationship between sodium and cholesterol levels in menu items from six major fast-food chains, with bubble size indicating caloric content. The visualization uses D3.js APIs including `select`, `scaleLinear`, `axisLeft`, and `zoom` to provide interactive pan-and-zoom functionality. Data from a Kaggle fast-food nutrition dataset is rendered as color-coded circles, with a tooltip displaying item details on hover and an interactive legend for toggling restaurant categories.

Loading thumbnail…

CS573 Final Project - Sugar (g) vs Sodium (mg) w/ category grouping, legend & tooltip functionality

This scatter plot visualizes the relationship between sugar and sodium levels across menu items from six fast-food chains, with circle size encoding calorie count and colors distinguishing restaurants by name. It uses D3’s `scaleLinear` and axis functions to map nutritional values, while the `axes` utility from `@pbruss/responsive-axes` handles responsive scaling. Interactive tooltips appear on mouseover via D3 event handlers, and a static legend displays the hard-coded category colors. Data comes from the Kaggle fast-food nutrition dataset, with rendering handled through SVG circles and rectangles.

Loading thumbnail…

CS573 Final Project - Sugar (g) vs Sodium (mg)

This scatter plot displays the relationship between sodium (mg) and sugar (g) levels across menu items from six popular fast food restaurants, with circle size encoding calorie count and color distinguishing individual menu items. The visualization uses D3.js APIs including `scaleLinear`, `scaleOrdinal`, and `axisLeft` to construct the axes and scales, while a custom `observeResize` function from `@pbruss/responsive-axes` enables responsive width and height adjustments. Interactive tooltips appear on hover via D3 event handlers, and the data originates from a Kaggle dataset of fast food nutrition facts.

Loading thumbnail…

CS573 Final Project - Saturated Fat (g) vs Sodium (mg) w/ category grouping, legend & tooltip functionality

This chart displays a responsive scatter plot of saturated fat versus sodium for menu items from six fast food restaurants, with circle size encoding calorie count. Color-coded circles represent each restaurant, and a legend identifies the categories. Tooltips reveal item details on hover. The visualization uses D3.js scales and axes, with the `observeResize` and `axes` libraries to handle responsive dimensions, and filters missing data from the Kaggle fast food nutrition dataset.

Loading thumbnail…

CS573 Final Project - Cholesterol (mg) vs Sodium (mg) w/ category grouping, legend & tooltip functionality

This scatter plot visualizes the relationship between cholesterol and sodium levels across menu items from six fast-food restaurants, using the fast-food nutrition dataset from Kaggle. Circle size encodes calorie content, while color indicates the restaurant brand, with a legend and hover tooltip displaying item details. The visualization is built with D3.js, utilizing `scaleLinear`, `axisLeft`, and custom mouse event handlers for interaction, alongside the `@pbruss/responsive-axes` library for responsive resizing.

Loading thumbnail…

CS573 Final Project - Cholesterol (mg) vs Sodium (mg) w/ category grouping

This scatter plot shows the relationship between sodium and cholesterol for menu items from six fast food chains, with circle size encoding calorie count and color distinguishing each restaurant. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal with schemeCategory10 for color coding, and includes interactive tooltips on hover. The chart is rendered responsively using the @pbruss/responsive-axes library, pulling data from a Kaggle fast food nutrition dataset.

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example visualizes average sodium levels across six fast-food restaurants using a bar chart. The chart is built with D3.js scales and axes, including `scaleBand` and `scaleLinear`, with bars colored in steel blue. Data comes from a packaged `@pbruss/Test_Data` dataset, filtered and aggregated in `index.js`. The visualization runs in the VizHub V3 runtime, supporting hot reloading and responsive resizing via `observeResize`.

Loading thumbnail…

fast-food-nutrition-dataset-v4

A static preview of the first record from the Fast Food Nutrition dataset, shown as a formatted JSON object in a large monospace font. The example uses a raw HTML `<pre>` element to render the parsed CSV data, with JavaScript converting all numeric string fields to numbers via unary plus operators in an `index.js` file. The visualization imports the dataset using a custom `data.csv` module and exports the parsed array for reuse, demonstrates a minimal approach to inspecting data structure without any charting library.

Loading thumbnail…

Make a map

This visualization displays a world map using an orthographic projection, depicting the globe with blue oceans, green landmasses, and a graticule grid. Built with d3.geoOrthographic and d3.geoPath, it renders country boundaries from the Visionscarto World Atlas TopoJSON data, styled with green fills and white strokes. The map loads data asynchronously via fetch and topojson-client, then draws graticule lines, an outline, and country paths onto an SVG canvas.

Loading thumbnail…

CS573 Final Project - Sugar (g) vs Sodium (mg) w/ category grouping

This scatter plot shows the relationship between sugar and sodium levels for menu items from six major fast-food chains, with circle size encoding calorie content and color distinguishing restaurants. The visualization uses D3’s scaleLinear and scaleOrdinal functions to map data to positions and categorical colors, while a custom responsive-axes library handles dynamic resizing. Interactive tooltips appear on mouseover, revealing item details from the Kaggle fast-food nutrition dataset. The chart filters out entries with missing values and displays a title above the plot.

Loading thumbnail…

CS573 Final Project - Saturated Fat (g) vs Sodium (mg) w/ category grouping

This scatter plot from the CS573 Final Project visualizes the relationship between saturated fat (grams) and sodium (milligrams) for menu items from six popular fast-food restaurants, using circle size to represent calorie count and color to distinguish restaurant brands. Built with D3.js, it uses `scaleLinear` for the axes, `scaleOrdinal` with `schemeCategory10` for color mapping, and the `@pbruss/responsive-axes` library for dynamic resizing. Interactive tooltips display item details on hover, with data sourced from the Kaggle "Fast Food" dataset.

Loading thumbnail…

CS573 Final Project - Cholesterol (mg) vs Sodium (mg)

This scatter plot visualizes the relationship between sodium and cholesterol content in fast food menu items, with each point’s radius encoding caloric value and color indicating the menu item name. The plot uses D3’s `scaleLinear`, `axisLeft`, and `extent` functions for axes and scaling, while `@pbruss/responsive-axes` handles responsive resizing. Hover interactions reveal a tooltip with item, company, sodium, cholesterol, and calories. The code imports data from the `@pbruss/fast-food-nutrition-dataset-v3` package and uses `circleOpacity` to manage point transparency.

Loading thumbnail…

CS573 Final Project - Saturated Fat (g) vs Sodium (mg)

This interactive scatter plot visualizes the relationship between saturated fat (in grams) and sodium (in milligrams) for menu items from six popular fast-food restaurants, using a Kaggle dataset. It shows individual menu items as circles, with the circle size encoding calorie count and color representing the restaurant. Built with D3.js v7, the plot uses `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` to map data values, while a custom tooltip appears on hover. The visualization is responsive, using `@pbruss/responsive-axes` to adapt the axes to the container's dimensions.

Loading thumbnail…

Responsive Axes

This visualization demonstrates responsive axes that maintain consistent tick mark density when the chart is resized. Using D3.js, the example calculates the number of ticks based on the inner width and height divided by a constant tick density value, ensuring an even distribution regardless of the container dimensions. A ResizeObserver monitors the container's size, triggering the scales and axes to update dynamically in full-screen mode. The `axisBottom` and `axisLeft` functions render the axes with labels, all within a nested SVG joined via D3's selection API.

Loading thumbnail…

Final Project Prototype

This bubble chart visualizes the Fast Food Nutrition dataset, plotting sodium against cholesterol for individual menu items while using circle radius to encode calorie count. The visualization is rendered with D3, specifically employing `scaleLinear` for both axes and `scaleOrdinal` with `schemeCategory10` for color encoding by menu item. Data points are drawn as circles with interactivity, displaying a tooltip on hover that reveals item details. The chart adapts to window resizing through an event listener that triggers re-rendering.

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example shows a scatter plot of fast food nutrition data, comparing sodium and cholesterol levels across items from six restaurant chains, with point size encoding calories and color distinguishing companies. The visualization uses an interactive tooltip on hover, revealing details like item name, company, and nutritional values. Built with D3 v7, it leverages scales from `d3-scale`, axis helpers from `@curran/axis-labels`, and a reactive main function that responds to container resizing. Data comes from the `@pbruss/fast-food-nutrition-dataset-v3` package, and the chart is designed for VizHub’s hot-reloading runtime.

Loading thumbnail…

Fork of Pseudo-Visualization

This scatter-bubble plot visualizes the 2023 Global Country Development & Prosperity Index by comparing Personal Freedom and Social Capital scores for each country. Marks represent countries as points, with x/y positions encoding social capital and personal freedom, while circle radius encodes overall average score and color uniquely identifies countries. The visualization uses D3 scales (scaleLinear and scaleOrdinal) for positioning and aesthetics, with data loading from the Kaggle dataset. Axes labels and title are rendered using utility functions from the @curran/axis-labels module.

Loading thumbnail…

Fast Food Nutrition Dataset Update

This example displays the first row of the Fast Food Nutrition dataset as formatted JSON, showing all nutritional fields for a single menu item. After loading data.csv, the code converts each numeric column to a number type, then uses `JSON.stringify` with indentation to render the record inside an HTML `<pre>` element. The visualization is minimal, prioritizing raw data inspection over charting or interactive graphics.

Loading thumbnail…

Pseudo-Visualization

This D3 scatter-bubble plot visualizes the 2023 Global Country Development & Prosperity Index dataset, comparing Personal Freedom and Social Capital scores for a sample of five countries. Each circle’s x-axis position encodes social capital, y-axis position encodes personal freedom, while the radius (scaled via `scaleLinear`) represents overall average score and color assigns each country a unique category from `schemeCategory10`. The visualization uses `d3.select`, `scaleOrdinal`, and custom modules for axes and circle rendering, with fixed domains from 0 to 100 for both axes.

Loading thumbnail…

Fork of Marks and Channels

This fork of Marks and Channels demonstrates fundamental D3 visualization concepts by plotting a small dataset of seven countries according to their personal freedom and capital scores. The visualization uses circles as point marks, with horizontal and vertical positions encoding the two metrics, while circle radius encodes the average of both scores and color distinguishes countries using `d3.scaleOrdinal` with `d3.schemeCategory10`. The implementation shows a bubble chart built with SVG circle elements, `d3.axisBottom` and `d3.axisLeft` for axes, and linear scales for positioning. Country labels are placed inside each circle using SVG text elements. The code illustrates scaling factors, SVG attributes `transform` and `fill`, and D3 color schemes.

Loading thumbnail…

Simple Scatter Plot (Global Prosperity Index)

This scatter plot visualizes the relationship between Social Capital and Personal Freedom scores for countries in the 2023 Global Country Development & Prosperity Index. Each circle represents a country, positioned by its Social Capital score on the x-axis and Personal Freedom score on the y-axis, with the chart's background shaded gray to highlight the data points. The visualization uses D3's `scaleLinear`, `extent`, `axisLeft`, and `xAxis`/`yAxis` functions to map the data and render axes, while the `viz` function draws circles with radius and opacity set from the code.

Loading thumbnail…

Fast Food Nutrition

This example displays the first row of a fast food nutrition dataset in raw JSON format, revealing attributes like calories, fat, sodium, and protein for items from McDonald’s and other chains. The code uses the `data.csv` import to load the dataset, then logs the keys and converts all quantitative attributes to numbers via a loop. The main function renders the parsed data as a formatted `<pre>` element, offering a static preview of the dataset’s structure.

Loading thumbnail…

Simple Scatter Plot Fast Food Nutrition

This scatter plot visualizes the relationship between calories and protein content in fast food items, with each point representing a menu item from the fast-food nutrition dataset. The chart uses a light gray background for the plot area and semi-transparent circles to show overlapping data points. The code relies on d3's scaleLinear, extent, and axis functions to compute scales and render axes, while the @curran/axis-labels library provides labeled axis text. Circle radius and opacity are configured through parameters passed to the viz function.

Loading thumbnail…

2023 Global Country Development & Prosperity Index

This example is a static data table showing the first entry of the 2023 Legatum Prosperity Index, sourced from Kaggle. It displays all thirteen quantitative attributes—such as SafetySecurity, PersonalFreedom, Governance, and SocialCapital—for Denmark, rendered as a JSON object. The visualization uses JavaScript and the `data.csv` import to parse and display the data. The code converts all string values to numbers and outputs the structured data in a `<pre>` container with a fixed font size, allowing users to inspect the dataset's exact format and values.

Loading thumbnail…

Top 100 universities in the world (QS Ranking)

This visualization displays a single university’s record from the top 100 QS-ranked institutions, showing all attributes from the CSV dataset, including rank, overall score, and reputation metrics. The code parses the data and converts quantitative fields to numbers before rendering the first entry as formatted JSON in a pre element. It uses plain JavaScript with no external visualization libraries, relying on template literals to display the data structure.

Loading thumbnail…

AI investments by country in 2023 (Top 5 countries)

Five colored circles represent the top five countries by AI investment in 2023, with each circle’s radius proportional to the square root of spending and positioned by the distance from the largest value. The visualization animates on load, scaling each circle and fading in its label. Built with D3.js, it uses `transition` with a slow duration and easing, alongside `select`, `join`, and `append` APIs. Data originates from web sources on AI statistics and country-specific investment figures.

Loading thumbnail…

AI Global Index (Top 5 Countries)

This animated scatterplot, inspired by a solar system model, visualizes the AI Global Index scores of the top five countries. Each colored circle represents a nation, positioned by its distance from a maximum score and sized according to its overall index value. The data is sourced from a Kaggle dataset. The implementation uses the d3 library, leveraging `select` for DOM selection, `.join` for data binding, and `transition` to animate the circles' radius and position over time.

Loading thumbnail…

Fork of Solar System

This animated visualization displays the relative sizes of countries based on an index score, with larger circles representing higher values. It uses D3.js transitions with `transition().duration()` and `easeLinear` to animate circle radii and positions, creating a dynamic comparison across seven nations. The data comes from a hardcoded array in the source code, which is adapted from Wikipedia data on gravitationally rounded Solar System objects, repurposed to showcase country rankings. The visualization renders using SVG circles and text elements within a black-themed container.

Loading thumbnail…

McDonald's Nutrition

A scatterplot matrix displays nutritional data for McDonald’s menu items from a CSV file, using JavaScript’s `import` statement to load the data and coercing string values to numbers. The example shows the first item’s values in a JSON format, with the main function writing directly to a container using a template literal and a `pre` element with a fixed font size. The code defines a list of quantitative attributes and logs the keys to the console, but does not render any visual chart.

Loading thumbnail…

Vehicle Fuel Type Count by Zip Code

This example displays the contents of the first row of a CSV dataset sourced from the World Development Indicators, showing research and development expenditure as a percentage of GDP. The code parses numeric fields using the unary plus operator and renders the data as a JSON object in a preformatted HTML element. It relies on the native JavaScript `JSON.stringify` method to format the output for inspection.

Loading thumbnail…

Research and development expenditure (% of GDP)

This visualization displays research and development expenditure as a percentage of GDP for various countries and regions from 1996 to 2023. The example loads data from a CSV file and initially renders the first data row as formatted JSON, displaying country name and annual values in a monospaced pre element. The code uses a simple CSV import and JavaScript string interpolation to generate the HTML output. The data itself is taken from the provided dataset, which is sourced from v3 and authored by pbruss.

Loading thumbnail…

Fork of Circles with D3

This example displays a collection of colored circles of varying sizes and positions on a light blue background. The circles are arranged without a specific pattern, creating a chaotic, abstract composition. The visualization uses D3.js to render the SVG elements, with each circle's properties (center coordinates, radius, and fill color) specified in a hardcoded data array. The code employs D3's `select` and `join` API, setting the background, and applies a consistent opacity of 0.708 to all circles.