J

Josvin John

@josvin92·28 public vizzes

Loading thumbnail…

Interactive Dashboard showing various charts

This interactive dashboard presents a multifaceted analysis of flight delays using several D3.js charts. It includes a horizontal bar chart showing the top 15 destination airports by flight frequency, a stacked bar chart detailing average delay times and reasons for various airlines, and four donut charts that display the percentage of flights delayed (more or less than 15 minutes) by arrival, departure, airline, and origin airport. Built with D3 v5, the visualizations render as SVGs and incorporate interactive tooltips for detailed data inspection, with data sourced from a Flight Delay Analysis dataset.

Loading thumbnail…

Average Delay Time and Delay Reason for various carriers

This visualization shows the average departure delay time and delay reason for various airline carriers, using color to encode the delay reason (Carrier, Late Aircraft, National Air System, Security, or Weather). A tooltip reveals the delay reason and average delay time on hover, and a multiple-select menu allows filtering. The chart is rendered as a stacked bar chart using D3 v5, with scales from `d3.scaleBand` and `d3.scaleLinear`, axes from `d3.axisLeft` and `d3.axisBottom`, and a custom `colorLegend` module. Data comes from a Flight Delay Analysis Dataset.

Loading thumbnail…

Average Delay Time and Delay Reason for various carriers

This visualization displays average departure delay times for various airline carriers, broken down by delay reason categories. Each carrier is represented as a grouped bar, with bar segments colored according to the type of delay, and a tooltip revealing the specific delay reason and average delay minutes on hover. Built with D3 v5 and rendered as SVG, the chart uses `d3.nest()` and `d3.mean()` to aggregate flight data from a GitHub-hosted CSV, with `scaleBand` and `scaleLinear` positioning the bars and an ordinal color scale mapping delay reasons.

Loading thumbnail…

Top 15 Destination Airports

This bar chart displays the top 15 destination airports by flight count, using IATA codes on the y-axis and a linear scale for the number of departures on the x-axis. It highlights the most popular destination (ORD with 897 flights) and the least popular in the top 15 (BOS with 46 flights). Built with D3 v5, the visualization uses `d3.csv`, `d3.nest`, `scaleLinear`, `scaleBand`, and `axisBottom`/`axisLeft` to generate an SVG, with interactive tooltips shown on hover. Data comes from a Flight Delay Analysis Dataset hosted in a GitHub gist.

Loading thumbnail…

Interactive Pie Chart showing percentage of flights delayed w.r.t Departure for each origin airport

This interactive donut chart visualizes the percentage of flights delayed relative to departure for each origin airport, with color saturation indicating the proportion of total delays. Hovering over a slice reveals the exact percentage of delay attributed to that airport in a tooltip. Built with D3 v5, the visualization uses `d3.pie` and `d3.arc` to generate the donut slices and `scaleOrdinal` for color mapping. Data comes from a Flight Delay Analysis dataset, loaded via `d3.csv` and aggregated using `d3.nest`.

Loading thumbnail…

Interactive Pie Chart showing percentage of flights delayed w.r.t Departure for each airline

This interactive pie chart visualizes the percentage of flights delayed by departure for each airline, with color saturation indicating the proportion of delays each carrier contributes to the total. Hovering over a slice reveals the exact percentage of total delays via a tooltip. The visualization uses D3 v5, loading CSV data from a Flight Delay Analysis Dataset on GitHub. The chart is rendered with SVG paths using d3.pie and d3.arc, while an ordinal color scale maps airlines to a blue palette. The code also uses d3.select and d3.event for interactive tooltip positioning.

Loading thumbnail…

Major U.S. Airports based on Departure Delay grouped by time of day(includes Pan & Zoom, Hover highlighting of state, Tooltips & Brushing with React Performance Optimization)

This visualization combines a map of major U.S. airports with a histogram of flight departure delays, grouped by hour of the day. Airports appear as semi-transparent circles scaled by departure delay, with hover tooltips showing city and state, and states highlighting on hover. The map supports pan and zoom via d3.zoom, while the histogram uses d3.brushX to filter the map data. React useMemo optimizes rendering, and the map uses d3.geoAlbersUsa with U.S. state boundaries from us-atlas. Data comes from a CSV of flight delays.

Loading thumbnail…

Major U.S. Airports based on Departure Delay grouped by time of day(includes Pan & Zoom, Hover highlighting of state, Tooltips & Brushing with React Performance Optimization)

This example combines a U.S. map with a histogram to visualize major airport departure delays grouped by time of day. The map uses `d3.geoAlbersUsa` and `d3.geoPath` to render state boundaries with circles scaled by `d3.scaleSqrt` representing delay magnitude, while the histogram bins flights by `SCHEDULED_DEPARTURE` using `d3.histogram`. Pan and zoom via `d3.zoom`, hover state highlighting, tooltips, and brush filtering are implemented, optimized with React `useMemo` and a custom `ZoomContainer` that wraps SVG transforms. Data comes from a CSV of flight delays and the US Atlas TopoJSON.

Loading thumbnail…

Major U.S. Airports based on Departure Delay grouped by time of day(includes brushing)

This visualization combines a U.S. map and a time histogram to show major airport departure delays grouped by time of day, with brushing to filter. The map uses `d3.geoAlbersUsa` projection and `d3.geoPath` to render state boundaries, with circles scaled by `d3.scaleSqrt` representing delay magnitude. The histogram, built with `d3.scaleLinear` and `d3.bin`, shows total delay per hour, and `d3.brushX` enables selecting time ranges to update the map. Data comes from a Flight Delay Analysis dataset, rendered in SVG.

Loading thumbnail…

Major U.S. Airports by Departure Delay

This visualization combines a bubble map of major U.S. airports with a time histogram of departure delays. The map uses a conic conformal projection via `d3.geoAlbersUsa` and `d3.geoPath` to render state boundaries, overlaid with circles sized by the square root of total departure delay using `d3.scaleSqrt`. The histogram bins scheduled departure times into 20 bins using `d3.histogram`, summing delays per bin. Data comes from a flight delay analysis dataset loaded via `d3.csv`.

Loading thumbnail…

Major U.S. Airports by Departure Delay

This visualization maps major U.S. airports by departure delay using a geospatial scatter plot overlaid on state boundaries. Circle radius encodes the total departure delay at each airport, with larger circles indicating more significant delays. The map uses the `geoAlbersUsa` projection and `geoPath` from D3 v5 to render the state outlines, while React manages the component structure. Data comes from a Flight Delay Analysis Dataset, and the underlying geography uses the U.S. Atlas states-10m TopoJSON file.

Loading thumbnail…

Total Departure Delay for every hour of the day

This interactive histogram visualizes the total departure delay for flights at every hour of the day, highlighting peak delay periods. Built with React and D3 v5, it renders as an SVG with custom axis components (AxisBottom, AxisLeft) and binning the data via `d3.histogram` and `d3.sum`. The chart uses a linear time scale for hours and a linear scale for delay minutes, with data from a Flight Delay Analysis Dataset. A tooltip on each bar shows the exact delay value and hour.

Loading thumbnail…

Departure Delay for every hour of the day

This scatter plot visualizes departure delays for flights across every hour of the day, using data from a Flight Delay Analysis Dataset. The x-axis shows scheduled departure hours, while the y-axis plots departure delay in minutes. Built with React and D3 v5, the chart uses a linear scale for both axes, with custom tick formatting converting numeric hours into time labels. Each point represents a flight, rendered as a circle with a tooltip displaying the scheduled departure hour.

Loading thumbnail…

Total Departure Delay for every hour of the Day

This chart shows the total departure delay for each hour of the day, using red circles to highlight hours with higher cumulative delay. The data is aggregated from a Flight Delay Analysis Dataset using d3.nest() and d3.sum(). The visualization is rendered as an SVG with d3.scaleLinear axes, where the x-axis formats scheduled departure times using d3.timeFormat, and the y-axis displays delay values. The code uses d3.axisBottom, d3.axisLeft, and d3.extent for scaling and ticks.

Loading thumbnail…

Interactive Pie Chart showing percentage of flights delayed by 15 mins w.r.t Departure

This interactive donut chart visualizes the percentage of flights delayed by more or less than 15 minutes relative to departure. The two segments, colored orange and blue, show that 23.9% of flights were delayed over 15 minutes while 76.1% were under. Hovering over a slice reveals the exact percentage of total delay via a custom tooltip. Built with D3 v5 and SVG, it uses `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute the arcs and colors, with data sourced from the Flight Delay Analysis Dataset on GitHub.

Loading thumbnail…

Interactive Pie Chart showing percentage of flights delayed by 15 mins w.r.t Arrival

This interactive donut chart visualizes the percentage of total arrival delay time attributed to flights delayed by more than 15 minutes versus less than 15 minutes, using orange and blue slices respectively. Hovering over a slice reveals its exact percentage share of total delay via a tooltip. Built with D3 v5, the visualization computes aggregated sums from a CSV dataset using `d3.nest` and `d3.sum`, then renders the pie with `d3.pie` and `d3.arc` as SVG paths. The color scale uses `d3.scaleOrdinal`, and tooltip positioning relies on mouse events.

Loading thumbnail…

Major U.S. Destination Airports

This visualization maps major U.S. destination airports using a conic conformal projection rendered with d3.geoPath. Each flight destination appears as a semi-transparent red circle, with overlapping points creating darker regions that indicate higher flight density. State boundaries come from the U.S. Atlas TopoJSON, while flight data is loaded from a CSV containing latitude and longitude coordinates. The React application uses d3.geoAlbers with fitExtent to scale the map, and includes graticules and a sphere outline for geographic context.

Loading thumbnail…

Average Delay Time and Delay Reason for various carriers with interactive color legend

This bar chart displays the average departure delay time for various airline carriers, segmented by the specific delay reason. The color of each bar segment encodes the reason for the delay, with an interactive color legend allowing users to filter the carriers and reasons displayed. Hovering over a bar segment reveals a tooltip showing the exact delay reason and average delay time. The visualization is built using the Vega-Lite API with D3.js, aggregated from flight delay data supplied as a CSV file, and uses a multi-selection interaction to control bar opacity.

Loading thumbnail…

Major Crimes in Boston with Dropdown Menu for Year

This interactive visualization displays major crimes in Boston as a bar chart, with the color of each bar representing the year and the bar height showing the crime count per offense category. A dropdown menu allows users to filter the data by selecting one or multiple years. Built with React and Vega-Lite API, the chart loads CSV data via D3’s `csv` function and renders using `vl.markBar()` with `vl.x()` and `vl.y()` encodings. The code includes a custom config for axis styling and uses Vega Tooltip for interactivity.

Loading thumbnail…

Top 15 Airports w.r.t. Origin using React+D3

This visualization displays the top 15 airports by origin, ranked by flight count in descending order, with each airport color-coded and labeled by IATA code. The chart aggregates flight delay data from a CSV source using D3’s `csv` loader, then applies Vega-Lite transforms for filtering, grouping, counting, and ranking before rendering with React. Customized D3 axes are visible, and the visualization updates dynamically to fit the window size. The code integrates React, D3 v5, Vega-Lite, and Vega-Tooltip for interactive hover details.

Loading thumbnail…

Top 15 Airports w.r.t. Departures

This bar chart ranks the top 15 destination airports by number of departing flights, using IATA codes on the y-axis and flight counts on the x-axis. Each airport is color-coded, and a tooltip displays the exact airport code and flight count on hover. Built with Vega-Lite and D3 v5, it processes flight delay data from a CSV file, aggregating and filtering to isolate the top destinations. Custom axis styling, including tick color and font sizes, improves readability.

Loading thumbnail…

Average Delay Time and Delay Reason for various carriers

A stacked bar chart displays the average departure delay in minutes for each aircraft carrier, with bar segments colored by cancellation reason. Hovering over a segment reveals a tooltip with the exact delay reason and average delay time. Built with Vega-Lite and D3.js, the visualization aggregates the flight delay dataset by carrier and cancellation reason using the `groupby` and `average` transforms. The chart is rendered via the Vega-Lite API, with data loaded asynchronously from a CSV file using D3's `csv` function.

Loading thumbnail…

Major Crimes in Boston

This example visualizes major crimes in Boston from a city dataset, using a bar chart where each bar represents a crime type and its length corresponds to the number of incidents. The bars are color-coded by year, and hovering reveals a tooltip with the crime name and exact count. Built with Vega-Lite and rendered via the `vega-lite-api`, it loads data from a CSV URL using D3’s `csv` method, then applies custom axis styling and tooltip handling from `vega-tooltip`.

Loading thumbnail…

Basketball Leagues by Count

This bar chart displays basketball leagues sorted by the number of games played, with each league assigned a distinct color. The visualization uses Vega-Lite API to encode league names on the x-axis and a count of games on the y-axis, with tooltips showing league and count values. It loads CSV data from a GitHub gist and customizes axis styling through a config object, disabling domain lines and adjusting tick and label colors. The chart renders responsively to the window size using SVG.

Loading thumbnail…

Flight Delay Prediction CSV Data - Loading and Parsing

This example loads and parses a CSV dataset of flight delay predictions for January 2020, displaying the file size, row count, and column count as plain text. Using D3 v5, it fetches the data via `d3.csv`, formats the summary with `d3.csvFormat`, and writes the result into a large `<pre>` element. The code also includes commented alternatives using `fetch` with async/await and `d3.csvParse`, as well as a nested promise chain. The visualization emphasizes data loading mechanics over graphical encoding.

Loading thumbnail…

Basketball Player Stats CSV Data - Loading and Parsing

This example demonstrates loading a CSV file of basketball player statistics per season and reporting its basic size and structure. After fetching the remote dataset using `d3.csv`, it displays the file size in kilobytes, the total number of data rows, and the count of columns in a large text block. The visualization uses D3 v5’s `d3.csv` parsing method and `d3.csvFormat` to measure the loaded data, with commented alternatives showing `fetch` and `d3.csvParse` for comparison.

Loading thumbnail…

Boston Crime Analysis CSV Data - Loading and Parsing

This example displays summary statistics from a Boston crime CSV dataset, showing the file size in kilobytes, total row count, and number of columns. It loads the remote CSV using `d3.csv` and parses it asynchronously with a Promise. The code also demonstrates alternative approaches using `fetch`, `async/await`, and `d3.csvParse`, though the active path relies on `d3.csvFormat` to compute text length for the size estimate. Results appear in a large preformatted text element.

Loading thumbnail…

Bunny/Mouse Face by Josvin

This example shows a stylized bunny or mouse face built from basic SVG shapes, including circles for the head, eyes, and nose, lines for whiskers, a polygon for the mouth, and rotated ellipses for ears. Rendered dynamically with React, the visualization uses JSX elements within an `<svg>` container, with hard-coded coordinates and dimensions for each part. The appearance and layout are defined directly in the React component, which calculates positions based on the window size, and the code imports React and ReactDOM to mount the graphic to the DOM.