J

jjlaber

@jjlaber·34 public vizzes

Loading thumbnail…

Final Visualization

This visualization presents an interactive exploration of US bank failures from 1934 to 2020, using three coordinated charts. A pie chart shows the distribution of failure types, a treemap ranks banks by estimated loss, asset value, or deposit value via dropdown menus, and a line chart displays failures or losses over time. Built with D3 v7, the SVG-based charts use `d3.pie`, `d3.treemap`, and `d3.line` generators, with data loaded from a CSV via `d3.csvParse`. The dataset originates from Kaggle.

Loading thumbnail…

Piechart of NYC Food Data

This example shows the top cuisine types by number of orders in a NYC food delivery dataset, using a pie chart where slice values are labeled for categories exceeding 100 orders. A legend identifies each cuisine type by color. The visualization loads CSV data via `d3.csvParse` and uses `d3.flatRollup` to aggregate order counts, `d3.pie` to generate arc segments, and `d3.arc` with inner and outer radii to render the doughnut-style chart. The data originates from a Kaggle dataset on Foodhub app orders.

Loading thumbnail…

Bank Failure Line Graph

This example uses a line graph to show bank failure trends over time, with a dropdown menu toggling between the total number of failures and the estimated loss in thousands of USD. It uses d3.line, d3.scaleTime, and d3.scaleLinear to render the chart, with d3.csvParse loading data from a gist and d3.timeParse converting date strings. A menu component updates the view, while axes are drawn using d3.axisLeft and d3.axisBottom.

Loading thumbnail…

Bank Failures Multiple Views

This example presents two linked visualizations of US bank failures from 1934 to 2020, using data from a cleaned CSV file. The first view is a donut chart showing the number of failures by transaction type, with labels for segments exceeding 100 failures. The second view displays a treemap ranking the top 10 banks by a selected metric—estimated loss, asset value, or deposit value—via a dropdown menu. Both visualizations use D3 v7 with SVG rendering, employing `d3.pie`, `d3.arc`, and `d3.treemap` to construct the charts and `flatRollup` to aggregate values.

Loading thumbnail…

testing Keeling Curve

This visualization reproduces the Keeling Curve, plotting average monthly atmospheric CO₂ concentration from 1958 to the present. The line chart displays the characteristic upward and seasonal sawtooth pattern of carbon dioxide measurements. The visualization uses D3 v7's `d3.line` for the path, `d3.scaleTime` for the time axis, and `d3.timeParse` to convert year and month strings into JavaScript `Date` objects. Data comes from NOAA's Global Monitoring Laboratory, loaded from a CSV file.

Loading thumbnail…

Piechart of Bank Failures Transaction Type

This piechart visualizes the number of bank failures by transaction type, with each slice representing a category and its failure count. It loads a CSV dataset from a GitHub gist, parses it with `d3.csvParse`, and aggregates counts using `d3.flatRollup`. The chart is rendered with `d3.pie` and `d3.arc`, using a color scale from `d3.scaleOrdinal` with `schemeReds[9]`. Legends and value labels are added to identify categories, while only showing counts above 100.

Loading thumbnail…

Bank Failures Treemap

This treemap visualizes the top 10 U.S. bank failures by selected financial metric, with a dropdown menu to toggle between estimated loss, asset value, and deposit value. The chart uses d3.treemap with a hierarchical layout, where each rectangle’s size corresponds to the chosen metric and color encodes the bank name via a sequential red scale. Data is loaded from a CSV and aggregated with d3.flatRollup, then rendered as SVG rectangles with text labels using d3-selection.

Loading thumbnail…

Weekend vs. Weekday Barchart

This visualization compares weekend versus weekday food orders from a Foodhub NYC delivery dataset, letting users toggle between total order count and total money spent via a dropdown menu. The bar chart uses d3.scaleBand and d3.scaleLinear to render two bars, with d3.flatRollup aggregating measurements by day type. The axes are drawn with d3.axisLeft and d3.axisBottom, while the menu is implemented through d3 select/join, and colors come from d3.schemePastel2. Data loads from a CSV and updates dynamically when the menu selection changes.

Loading thumbnail…

Map of Global Air Quality

A choropleth map visualizes 2021 global carbon emissions by country, using a color scale from the `schemeRdPu` palette to indicate air quality levels. The map is rendered with `d3.geoPath` and `geoNaturalEarth1` projection, with graticule and outline overlays. Data is loaded from a CSV file and filtered for the year 2021, then joined to country features via ISO alpha-3 codes. Countries without data appear gray.

Loading thumbnail…

Bank Failure Dataset2

This example displays a raw JSON dump of bank failure data, including asset values, deposit values, and losses, loaded from a CSV file. The visualization initially shows nothing until the data is fetched, parsed with `d3.csvParse`, and rendered as a text representation using `JSON.stringify`. The code uses D3 v7’s `select` and `selectAll` to manage the display, and relies on `fetch` to retrieve the dataset from a GitHub gist. The interaction is minimal, focusing on loading and presenting the structured data.

Loading thumbnail…

Bank Failure Dataset1

This example displays the raw contents of a dataset on bank failures, rendering the parsed CSV data as a JSON-formatted preformatted text block. The visualization initially fetches the CSV file from a GitHub gist, parses it using `d3.csvParse`, and converts the `asset_value` and `deposit_value` fields to numeric types. The D3.js library, specifically `d3.select` and D3's `join` operation, updates the DOM to show the structured data, providing a simple, non-graphical view of the dataset's contents.

Loading thumbnail…

NYC Food Ordering/Delivering Data

This example visualizes NYC food ordering and delivery data from Foodhub, showing raw order records including restaurant names, cuisine types, costs, ratings, preparation times, and delivery times. The visualization initially displays the dataset as formatted JSON text in a `<pre>` element. It uses D3 v7’s `csvParse` to load and parse data from a remote CSV file, converting numeric fields with unary plus operators. The code employs D3 selections with `.selectAll().join()` to bind and update the display, and manages asynchronous data loading through a state-based render cycle using `fetch`.

Loading thumbnail…

Loading in Bank Failure Data

This example demonstrates loading and displaying a dataset of Foodhub food orders and deliveries in New York City. It shows the raw parsed data as a JSON-like text block, using d3.csvParse to convert the fetched CSV file into an array of objects. The visualization handles asynchronous state management by setting a loading flag before fetching the data from a GitHub gist, then re-rendering once the data arrives. The code relies on d3-v7, specifically the csvParse and select functions, with the HTML title referencing bank failure data though the actual dataset describes restaurant orders.

Loading thumbnail…

Menu

A dropdown menu lets users choose among dog, cat, or fish. The menu is built with d3.select, joining option elements to an HTML select element and binding each option’s value and label from a static array. The change event logs the selected option’s data to the console, demonstrating a minimal d3-based form control without any linked visualization.

Loading thumbnail…

Choropleth Map

This example shows a world map rendered as a choropleth using geographic boundaries. It displays landmasses with gray graticule lines, a black outline, and white borders between countries. The code loads GeoJSON data converted from TopoJSON using topojson-client, then renders it with d3.geoPath and a d3.geoNaturalEarth1 projection. It uses d3-geo utilities like geoGraticule and React-like state management through a custom viz pattern.

Loading thumbnail…

Reviews vs. Time Scatter Plot

This scatter plot visualizes customer ratings against delivery time for food orders, with points colored by day of the week and a color legend that highlights the selected day. Built with D3 v7, it uses d3.csvParse to load data from a remote CSV file, d3.scaleLinear for the axes, d3.scaleOrdinal for the categorical color mapping, and selection.join to bind circles. Hovering over a legend item dims unrelated points and highlights the matching species. The chart includes labeled axes and a legend positioned at a fixed coordinate.

Loading thumbnail…

Top Restaurants Barchart

This visualization shows the top five restaurants by order count from a NYC food delivery dataset, ranked in descending order. It uses a horizontal bar chart with a linear x-scale for order counts and a band y-scale for restaurant names. Built with D3 v7, the code employs `flatRollup`, `scaleLinear`, `scaleBand`, and `schemePastel2` for color encoding, with axes generated via reusable axis functions. The data is loaded from a CSV fetched from a GitHub gist and parsed with `csvParse`.

Loading thumbnail…

Ratings Scatterplot

This scatterplot visualizes the relationship between delivery time and customer rating using food order data loaded from a remote CSV file. The visualization displays points with a radius of 10 pixels, using d3.scaleLinear for both axes and d3.extent to compute domains from the data. Axes are rendered with d3.axisLeft and d3.axisBottom, labeled "Delivery Time" and "Customer Rating", while the chart fills the entire window using window.innerWidth and window.innerHeight. Data parsing uses d3.csvParse to convert string values to numbers before plotting.

Loading thumbnail…

Scatterplot of NYC Food Data

This scatterplot maps NYC Foodhub delivery data, plotting delivery time against customer rating for each order. The visualization reveals any correlation between how long deliveries take and customer satisfaction. The code loads CSV data from a GitHub-hosted Kaggle dataset, parses numeric fields, and uses d3.scaleLinear to map domain values to screen coordinates. D3’s selection and join pattern render circles for each order, with the chart redrawing on data load and window resize.

Loading thumbnail…

Cuisine Pie Chart - Pseudo Viz

This example transforms a five-cuisine order dataset into a pseudo pie chart. It uses `d3.pie` and `d3.arc` to compute and draw the chart’s arcs, with `d3.scaleOrdinal` assigning a categorical color scale to each cuisine. The visualization is rendered as an SVG group centered within a 900x500 canvas. While the code imports various other chart primitives (e.g., circle, rect, symbol) from separate modules, only the pie chart function is executed, producing a static, labeled donut-like chart without interactivity.

Loading thumbnail…

Exploring NYC Food Ordering/Delivering Data

This visualization explores NYC food ordering and delivery patterns from a Foodhub dataset, initially showing the full data as a JSON preformatted block. The pie chart displays the distribution of orders by cuisine type, with each slice labeled and colored using a categorical color scale. Built with D3 v7, it uses `d3.pie` to compute arc angles and `d3.arc` to generate the pie paths, alongside `flatRollup` to aggregate order counts from the CSV data fetched from a GitHub gist.

Loading thumbnail…

Scatterplot NYC Food Ordering/Delivering Data

This scatterplot visualizes New York City food order and delivery data from a Kaggle dataset, plotting quantitative variables such as order cost, delivery time, or preparation time to reveal relationships. The D3.js v7 visualization uses the `csvParse` function to load remote CSV data and the `flatRollup` API to aggregate counts by cuisine type, computing summary statistics. Rendered as an SVG, the plot’s simple design lets patterns across cuisine categories and timing metrics stand out, while the underlying `scatterPlot` module handles the graphical encoding.

Loading thumbnail…

Fork of Marks and Channels

This fork of Marks and Channels demonstrates how different visual encodings—position, length, size, shape, and hue—can represent data, alongside a pie chart showing cuisine order counts. The example uses D3 v7 (`d3.select`, `d3.pie`, `d3.arc`, `d3.symbol`) to render circles, rectangles, and paths for each mark, with data for American, Japanese, Chinese, Indian, and Mexican cuisines. The pie chart applies a categorical color scale with labels positioned via `arcGenerator.centroid`, while the other marks use fixed or data-driven attributes to show alternative encodings.

Loading thumbnail…

Point Marks

Five small multiples demonstrate how a single dataset can be encoded with different visual channels: x-position, y-position, bar length, circle area, and symbol shape. Each panel uses the same array of five values, rendered as either rect, circle, or path elements via d3.selectAll and .join. The code applies d3.symbol and symbolsFill to generate distinct shapes, adapting marks to communicate the same numbers through each channel.

Loading thumbnail…

Point Marks

A single unfilled black circle follows the mouse cursor within an SVG viewport. The React application updates the circle's center coordinates through the `onMouseMove` event handler, using the `useState` hook to track mouse position and the `useCallback` hook to optimize event handling. ReactDOM renders the SVG element, and the circle's position is bound directly to the current mouse coordinates.

Loading thumbnail…

Spotify Top 10,000 Most Streamed

This visualization displays the Spotify Top 10,000 Most Streamed songs dataset, highlighting the distribution of total stream counts across all tracks. It uses d3.bin to create histograms of stream totals and demonstrates data loading through d3.csvParse, fetching the dataset from a GitHub-hosted CSV file. The visualization initially shows raw JSON data in a pre element, with d3.select and d3.join handling the DOM updates. The interface relies on a state management system that transitions from undefined to LOADING to the parsed dataset array.

Loading thumbnail…

Loading Disney+ Data

This example demonstrates the process of loading a Disney+ dataset containing information about all TV shows and movies on the platform, displaying the raw parsed data as JSON in a `<pre>` element. The visualization initially shows a "LOADING" state before fetching the CSV from a GitHub gist using the `fetch` API, then parses it with D3's `csvParse` function. The code uses D3 v7's `select` and `join` operations to update the display, and the dataset includes fields such as title, director, cast, country, release year, rating, and duration.

Loading thumbnail…

Loading Data

This example demonstrates the process of loading and parsing external data in D3.js, using the classic Iris flower dataset. The visualization fetches a CSV file with `fetch`, parses it with `d3.csvParse`, and converts numeric columns from strings to numbers. Once the data arrives, the application logs the parsed dataset to the console and updates its state to trigger a re-render, illustrating a unidirectional data flow pattern with D3 v7 and a simple state management approach.

Loading thumbnail…

Mouse Follower That Changes Color

A circle follows the mouse cursor across a full-screen SVG canvas, changing its fill color to a random RGB value on each click. The visualization demonstrates unidirectional data flow with a state object managed by `setState`, while D3 v7 selections and the `join` pattern handle SVG rendering. Mouse position events trigger state updates through `svg.on('mousemove')`, and color changes use `svg.on('click')` with random `rgb()` generation. The example uses d3.select and d3's data join to bind single elements.

Loading thumbnail…

Circle Trail

A white circle follows the mouse cursor across a purple background, leaving a trail of its previous positions. The visualization uses d3-selection’s `select` and `selectAll` with a `.join()` pattern to append or update a single circle element on each `mousemove` event. The circle’s coordinates are stored in a state object and updated via a `setState` callback, while `window.innerWidth` and `window.innerHeight` set the SVG size. This demonstrates a simple, event-driven rendering loop with D3 v7.

Loading thumbnail…

Trail

A circle follows the mouse across a full-window SVG. The visualization uses D3 v7’s `select` to append an SVG and a single circle, then listens to `mousemove` events on the SVG to update the circle’s `cx` and `cy` attributes. The page is styled with CSS to remove margins and hide scrollbars. No data source is involved; the piece demonstrates direct mouse-driven DOM attribute updates with D3’s event handling.

Loading thumbnail…

Mouse Follower

A circle tracks the cursor across a full-screen SVG canvas. Each mouse movement updates the circle’s center coordinates via a state object and a custom `setState` callback. The visualization uses d3.v7’s `select` API to bind SVG elements and handle `mousemove` events, while `join` synchronizes the circle’s `cx` and `cy` attributes. The canvas resizes to the browser window dimensions.

Loading thumbnail…

Mouse Follower Simple

This example shows a single circle following the mouse cursor as it moves across the browser window. The visualization uses D3 v7 to create an SVG canvas sized to the viewport and appends a circle element at an initial position. Through D3's event handling, the `mousemove` listener updates the circle's `cx` and `cy` attributes based on the cursor's coordinates, producing a direct and immediate tracking effect.

Loading thumbnail…

Fork of Hello Package.json

This example demonstrates how VizHub’s `package.json` enables dependency management by mapping package names to browser globals, allowing ES6 imports of React, ReactDOM, and d3 without manual script tags. The code defines a React component that renders a "Hello package.json" message, using `ReactDOM.render` to mount it. The `vizhub.libraries` field specifies CDN paths like `/dist/d3.min.js` and `/umd/react.production.min.js`, while the license field sets an ISC license.