Skip to main content
Log in
A

adamsnothere@gmail.com

@Adamisnothere·13 public vizzes

Loading thumbnail…

Bar Plot with React & D3 for Airline Rating Data #7

This interactive dashboard visualizes airline ratings from a CSV dataset, allowing users to compare airlines across multiple rating dimensions. The chart supports three distinct modes: standard bar chart rankings, side-by-side airline comparison, and time-series analysis of ratings over months. Users can filter by airline, adjust the number of airlines displayed, toggle sort order, apply average/median/mode grouping, and set rating ranges. The visualization is built with React components managing state and D3.js v7 handling SVG rendering, scales, axes, and transitions. Tooltips appear on hover, and the bar chart color-maps ratings from red through yellow to green.

Nov 20, 2025
Loading thumbnail…

Bar Plot with React & D3 for Airline Rating Data #6

This interactive dashboard visualizes airline review ratings using a horizontal bar chart built with React and D3 v7. Users can adjust sorting order, number of airlines displayed, grouping method (average, median, or mode), and select from multiple rating categories. The interface includes search functionality, a comparison mode for side-by-side airline analysis, and a time-series mode tracking ratings over time. Interactive controls leverage React state management, while D3 handles scales, axes, and animated bar transitions with tooltips.

Nov 6, 2025
Loading thumbnail…

Bar Plot with React & D3 for Airline Rating Data #5

This interactive bar chart visualizes airline ratings from a CSV dataset, letting users compare overall and category-specific scores across airlines. The chart supports sorting, top-N filtering, average/median/mode aggregation, search, and a compare mode that displays side-by-side bars for two selected airlines. A time-series mode plots rating trends over dates using a line chart with grid lines and grouped aggregation. Built with React state management and D3 v7 scales, axes, transitions, and tooltips, the visualization animates bar updates and dynamically adjusts the SVG height based on the number of displayed airlines.

Oct 30, 2025
Loading thumbnail…

Bar Plot with React & D3 for Airline Rating Data #4

This interactive bar chart visualization, built with React and D3.js v7, displays airline rating data from a CSV file, allowing users to sort, filter, and group ratings by various metrics like seat comfort or overall rating. The visualization supports multiple modes, including a comparison view that overlays bars for two selected airlines across different rating categories, and a time-series line chart showing rating trends over dates. Users can adjust the number of airlines displayed, search for specific carriers, and switch between average, median, or mode aggregation methods. The implementation uses D3's `scaleBand`, `scaleLinear`, `scaleTime`, and `group` functions, with interactive tooltips and animated transitions.

Oct 22, 2025
Loading thumbnail…

Fork of Bar Plot with React & D3 for Airline Rating Data #3

This fork of a bar plot visualization displays airline ratings from a Kaggle dataset of airlinequality.com reviews, allowing users to aggregate ratings by average, median, or mode across metrics like seat comfort and cabin service. Users adjust the number of airlines shown via slider, sort ascending or descending, search for specific airlines, or toggle a comparison mode that charts two airlines across all rating categories simultaneously. The React-driven interface passes state to D3 v7 functions that render axes, labels, and animated bar updates through selections and scales.

Oct 9, 2025
Loading thumbnail…

Bar Plot with React & D3 for Airline Rating Data #2

This visualization displays average airline ratings from a CSV dataset using a horizontal bar chart built with React and D3 v7. The chart sorts airlines by overall rating with radio-button controls for ascending/descending order and a slider to adjust the number of airlines shown. Bars are colored on a red-to-green gradient using `d3.scaleLinear`, while `d3.scaleBand` positions the categorical axis. The height dynamically expands to accommodate more airlines, with names truncated to 16 characters.

Oct 1, 2025
Loading thumbnail…

Bar Plot with React & D3 for Airline Rating Data

This example shows a horizontal bar plot ranking the top 15 airlines by their average overall rating, derived from an airline quality dataset. Bars are color-coded on a red-to-green gradient to reflect rating scores. The visualization is built using React and D3, with D3’s `csv` for data loading, `group` and `mean` for aggregation, and `scaleLinear` and `scaleBand` for scales. Axes and labels are rendered via D3’s `axisBottom`, `axisLeft`, and custom label functions.

Sep 24, 2025
Loading thumbnail…

Scatter Plot with React & D3 for Non-Synthetic Data

This scatter plot visualizes airline review ratings over time, with each circle representing an individual passenger review dated between 2015 and 2019. The x-axis displays review dates using a time scale, while the y-axis shows overall ratings from 1 to 9, with points colored red to green via `d3.scaleLinear` to indicate lower and higher scores. The visualization renders using React 19 and D3 v7, leveraging `scaleTime`, `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` for scales and axes, with a custom `parseDate` function handling various date formats including standalone years. Data comes from a CSV file of airline reviews with missing attribute values converted to zero.

Sep 23, 2025
Loading thumbnail…

Basic Scatter Plot with React & D3 for online furniture

A basic scatter plot maps product price to shipping cost for an online furniture retailer’s synthetic dataset. The React app loads CSV data via `d3.csv`, formats numeric fields, and passes the result to a `viz` function. That function uses `d3.scaleLinear` to build scales from data extents and `selection.join` to render black circles sized 12 pixels. Axes, labels, and interaction are absent, leaving only the raw point distribution.

Sep 7, 2025
Loading thumbnail…

Loading Data Online Furniture Sales

This example demonstrates the process of loading a JSON dataset through a simple asynchronous workflow. The visualization begins with an undefined state, transitions to a "LOADING" indicator, and finally displays the parsed data as formatted JSON text. The code uses `fetch` to retrieve the file and the D3.js selection API (`select`, `.join`) to bind and render the data into a `<pre>` element. The underlying dataset, an online furniture retail dataset, includes information about product categories, pricing, delivery status, and customer ratings, available within the gallery’s example files.

Aug 31, 2025
Loading thumbnail…

Loading Data Airline Loyalty

This example demonstrates asynchronous data loading with D3 v7 by fetching an airline loyalty program CSV from Kaggle and displaying the parsed data as JSON. The visualization initially shows a loading state before `fetch()` retrieves the file and `csvParse` converts it into an array of objects. Numeric fields like Salary, CLV, and enrollment dates are coerced using unary plus operators. The `viz` function manages the render cycle through a state object, updating the displayed data once the loading completes.

Aug 31, 2025
Loading thumbnail…

Loading Data Ramen

This visualization demonstrates asynchronous data loading with D3.js. It initially displays a loading state before fetching a CSV file of ramen product reviews from The Ramen Rater dataset. The code uses D3's `select` and `csvParse` functions to fetch, parse, and display the raw tabular data as a JSON object inside a `<pre>` element. The example highlights D3's data handling capabilities, with review numbers and star ratings converted to numeric values for further processing.

Aug 31, 2025
Loading thumbnail…

Fork of Circles with D3

This visualization shows a fixed composition of overlapping geometric shapes on a pale green background, including seven semi-transparent circles, five thick colored lines, and three rectangles. The code uses D3 v7 with the `select` API and data joins (`join`) to bind each SVG element to its corresponding array of objects. Shapes are rendered directly as SVG `circle`, `line`, and `rect` elements, with attributes like position, size, color, and opacity set from the data. The example demonstrates static, non-interactive SVG rendering with hardcoded coordinates and no scales or axes.

Aug 25, 2025