R

rohame

@rohame·26 public vizzes

Loading thumbnail…

Logan Airport Weather vs Delay

This visualization combines a scatter plot and a radial ring chart to compare daily weather conditions and flight delays at Logan Airport in 2016. The scatter plot uses circle size and color to represent delay duration and precipitation levels, while the radial bars show wind speed and encode weather severity through blue-to-red coloring. Built with D3.js v5, the views are linked so hovering over a data point highlights its counterpart in the other chart, with tooltips displaying the date and delay length. The data is loaded from a CSV file containing daily weather measurements and delay statistics.

Loading thumbnail…

Logan Airport Weather vs Delay

Logan Airport weather delays for 2016 are shown as a radial ring chart, with each day’s weather delay represented by an arc extending outward from the center. Arc color indicates the presence of adverse weather codes, using red for days with weather events and blue for clear days. The visualization uses D3 v5 with `d3.arc` and `d3.scaleLinear` to map dates to angles and delay magnitudes to radii. Interactive, transparent overlay arcs handle mouseover events to display exact dates and delay values via a tooltip, while a crosshair line follows the cursor.

Loading thumbnail…

Logan Weather data with Interactive Color Legend

This visualization presents daily weather delay data from Logan Airport in 2016 as an interactive ring chart. Each arc segment represents a day, with the radius encoding delay duration and color distinguishing weather severity levels using a categorical scale. An interactive color legend allows users to hover over severity categories, fading non-matching arcs. Built with React and D3 v5, the visualization uses `scaleTime` for angular positioning, `scaleLinear` for radial encoding, and `d3.arc()` for path generation.

Loading thumbnail…

Logan Airport Weather vs Delay

This example visualizes the relationship between weather conditions and flight delays at Logan Airport in 2016 using a ring chart. Each arc’s radius encodes daily departure delay, while its color indicates whether bad weather was recorded; red represents days with at least one adverse weather type, blue represents days without. The code uses D3 v5 with `d3.arc`, `d3.scaleLinear`, and `d3.scaleTime` to position arcs around the circle. Data comes from a combined CSV containing temperature, precipitation, and weather-type flags, with the ring rendered as SVG paths.

Loading thumbnail…

Weather data with Menu

The visualization displays daily temperature, precipitation, and flight departure delay data from a combined Logan Airport weather dataset. Temperature appears as colored circles, with precipitation intensity mapped through a blue color scale, while departure delays form a yellow line plotted against a secondary y-axis. The visualization uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.axisRight to construct the chart, with d3.line generating the delay path. Data is loaded asynchronously via d3.csv from a GitHub gist, and all elements render as SVG within a D3 v5 framework.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes daily temperature readings from Logan Airport weather data collected between 2016 and 2018. Built with React and D3 v5, the visualization renders an SVG chart where users can switch between TMAX and TMIN values for the y-axis using ReactDropdown menus, while the x-axis displays dates scaled with d3.scaleTime. The d3.csv loading pipeline parses the raw data, and d3.extent determines the domain for both linear and time scales. Circle marks include native SVG title tooltips showing formatted dates.

Loading thumbnail…

Logan Weather data with Interactive Color Legend

A scatter plot of weather and flight-delay data for Logan Airport from 2016-2018 visualizes the relationship between date, maximum temperature (TMAX), and average flight departure delay (DEP_DELAY). Interactive color legend circles for each year filter and highlight corresponding points when hovered, while unselected points fade to 20% opacity. The visualization uses React with D3 scales (`d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`) for axes, color encoding, and point sizing, rendering SVG circles with `circle` elements and tooltips via SVG `<title>` elements. Data is loaded as CSV from a GitHub gist.

Loading thumbnail…

Logan Airport Weather vs Delay

This scatter plot shows daily weather conditions at Logan Airport versus flight delay duration, with each circle representing a day. Temperature appears on the y-axis, date on the x-axis, circle radius encodes departure delay, and color indicates precipitation, using a blue interpolated scale. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, while loading CSV data via `d3.csv`. Precipitation values below 0.1 appear as pale gray circles, and hover tooltips display the delay value.

Loading thumbnail…

Logan Airport Weather vs Delay

This visualization combines a scatter plot with a ring chart to explore relationships between weather conditions and flight delays at Logan Airport. The scatter plot maps daily maximum temperature on the y-axis against date on the x-axis, with circle size representing departure delay magnitude and color indicating precipitation levels. The ring chart presents the same delay data as radial bars arranged around a circle. Both charts use d3.csv to load the dataset, with d3.scaleLinear, d3.scaleTime, and d3.axisBottom/Left for the scatter plot, while the ring chart employs d3.rect elements rotated via d3.scaleLinear.

Loading thumbnail…

Logan Airport Weather vs Delay

This visualization compares daily weather conditions at Logan Airport with flight departure delays in 2016. A scatter plot maps date against maximum temperature, with circle size representing delay magnitude and color indicating precipitation. A ring chart displays the same delay data as a radial bar chart over the full year. The visualization uses D3 v5 with `d3.csv` for the combined weather and flight data, `d3.scaleLinear` and `d3.scaleTime` for axes, and `d3.arc` for the circular bars, rendered as SVG elements.

Loading thumbnail…

Logan Airport Weather vs Delay

This example correlates daily weather conditions at Logan Airport with flight departure delays. A scatter plot displays maximum temperature on the y-axis, date on the x-axis, and encodes precipitation through color and delay magnitude through circle radius. A separate ring chart shows the same delay data as a circular line and bar plot. The visualization uses d3.csv for data loading, d3.lineRadial for the ring line, and d3.arc for radial bars, all rendered as SVG with D3 v5.

Loading thumbnail…

Github activity overview

This example simulates a GitHub contribution heatmap, displaying 365 days of activity as a grid of colored squares. Each square’s color encodes a random activity value from 0 to 9, using a linear scale with an RGB interpolator that transitions from light gray to green; zero-value days appear in light gray. Hovering over a square reveals its value in a tooltip positioned near the cursor. The visualization is built with D3 v5, using `d3.select`, `d3.scaleLinear`, `d3.interpolateRgb`, and `d3.randomInt` to generate and render the data.

Loading thumbnail…

Logan weather 2016-2018

This visualization plots daily maximum temperatures at Logan International Airport from 2016 to 2018 as a scatterplot, using month and day as the x-axis and temperature on the y-axis. Each point’s color encodes the max temperature value, while point size reflects daily precipitation amount, with tooltips revealing exact precipitation totals. The chart is built with Vega-Lite via the `vega-lite-api`, using `markCircle`, `fieldT`/`fieldQ` encodings, and a custom `config` for axis styling. Data is loaded asynchronously from a CSV using `d3.csv`.

Loading thumbnail…

Flight count on Origins

This interactive scatterplot visualizes the number of flights aggregated by origin airport, with each point representing a single origin and its count on the y-axis. The code uses Vega-Lite API to define the markCircle encoding, while the underlying data is loaded via d3.csv from a GitHub-hosted itinerary dataset. The visualization is rendered in an SVG canvas using vega and vega-lite, with tooltip support provided by vega-tooltip. Axes are customized through a config object that removes domains and adjusts label and title font sizes for readability.

Loading thumbnail…

Flight count by year

This line chart displays the number of flights per year from a personal itinerary dataset. Styled with a bold orange stroke, the visualization aggregates flight counts by year, with tooltips showing the total. Built using Vega-Lite and rendered through the vega-lite-api, the chart loads data from a remote CSV via `d3.csv`, applies a custom configuration for axis and label styling, and fits its dimensions to the window.

Loading thumbnail…

GDP per capita

This visualization shows GDP per capita trends for continents from 1970 onward, highlighting values on hover. It uses Vega-Lite APIs to build layered line, rule, and text marks, with interactive selection via `vl.selectSingle()`. Data is loaded asynchronously from a CSV via d3’s `csv` function, filtered to selected regions and series. The chart is rendered with Vega’s SVG renderer, and a guide title and labels are customized through the config object.

Loading thumbnail…

Gas report

This visualization presents a layered line chart comparing gas consumption amounts and fuel efficiency (mpg) over time. The data is loaded from a GitHub-hosted CSV file using `d3.csv`. The chart uses two overlaid line marks with independent y-axes, created via the Vega-Lite API’s `vl.layer` and `resolve` functions. Both layers encode date on the x-axis and tooltips on the data fields. The visualization is rendered with Vega-Lite, using a custom config for axis styling and colors.

Loading thumbnail…

Logan temperature range VS precipitation

This visualization plots daily temperature range at Logan International Airport, with TMAX on the x-axis and TMIN on the y-axis, while color encodes precipitation (PRCP). The data spans 2016–2018, sourced from a CSV loaded via `d3.csv`. Each point represents a day, with a circle mark, opacity, and tooltip revealing exact precipitation values. Built with Vega-Lite API and its `vl` interface, the chart uses quantitative fields for all encodings, rendered as an SVG via a custom config that adjusts font sizes and removes axis domain lines.

Loading thumbnail…

Exchange Rate

This example displays the size of the exchange-rate dataset by showing the number of rows, columns, and file size in kilobytes. It loads a CSV file from a GitHub-hosted gist using `d3.csv`, then formats the data with `d3.csvFormat` to compute its length. The result is rendered as plain text inside a `<pre>` element. The page also includes commented-out alternatives using `fetch` and `d3.csvParse`. The visualization relies solely on D3 v5 for data loading and text presentation, without any charts or graphical encoding.

Loading thumbnail…

Labour Force and Unemployment

This example displays metadata about a labour force and unemployment dataset, including row and column counts and file size. It loads the data from a CSV file using D3’s `d3.csv` and presents the summary in a large-text `<pre>` element. The code also includes an alternative implementation using `fetch` and `d3.csvParse` to handle the same data. The page focuses on data inspection rather than graphical visualization, showing only textual summary information.

Loading thumbnail…

Loding and Parsing GDP and GDP per capita

This example demonstrates the initial steps of working with GDP and GDP per capita data from UNDATA, displaying basic dataset statistics such as row count, column count, and file size in a large text format. The page loads a CSV file from a GitHub gist using D3 v5’s `d3.csv` method, then computes the metrics with `data.length`, `data.columns.length`, and `d3.csvFormat` to measure the formatted size. A commented-out alternative using `fetch` with `async`/`await` and `d3.csvParse` is also provided. The visualization focuses on data loading and parsing rather than graphical representation.

Loading thumbnail…

Loding and Parsing My Gas Record

This example demonstrates how to load and parse a manually recorded CSV file containing gas filling records since 2019. It displays a summary message showing the total number of rows, columns, and file size in kilobytes. The visualization uses d3.csv to fetch and parse the data from a GitHub Gist, then computes and renders the results as large text in an HTML pre element. The code highlights the simplicity of loading external tabular data and assessing its structure before further analysis.

Loading thumbnail…

Loding and Parsing My Itinerary

This example displays a terse data-loading summary for a manually recorded CSV of flight itineraries. The visualization reports the number of rows and columns in the dataset, along with the approximate file size in kilobytes. It uses D3 v5's `d3.csv` method to fetch and parse the remote data, and `d3.csvFormat` to measure the formatted output length. The result is rendered as text inside an HTML `<pre>` element, providing an immediate confirmation that the data has been successfully loaded and parsed.

Loading thumbnail…

Smiley Face Part I

This gallery example shows a stylized clown face built entirely from SVG shapes, with a central circle for the face, rotated rectangles for eyes, a red nose, and elliptical blush marks. The code uses React to render the SVG and relies on a D3 arc generator for the mouth and a smaller arc for the hat-like cap details. D3 v5 and React 16.9 are loaded via CDN, and the drawing is centered using a translated SVG group.

Loading thumbnail…

Smiley Face Part III

This example renders a yellow smiley face with black-outlined circular eyes and a curved mouth using React and D3. The face is composed of reusable components—BackgroundCircle, Eyes, and Mouth—that are positioned within an SVG via a FaceContainer using a translate transform. D3’s arc generator creates the mouth path, while the face’s dimensions, eye placement, and stroke width are passed as props. The scene is static, with a fixed 960×500 SVG canvas.

Loading thumbnail…

Smiley Face Part II

A yellow smiley face rendered as an SVG in React, with black-outlined circular eyes, a mouth arc, and a red tongue. It uses d3.arc to generate the mouth path inside a React component, with circle and ellipse elements for the eyes and tongue. The face is centered and scaled within a 960x500 viewport, with no external data source.