Skip to main content
Log in
D

Dasbach.EJ

@Dasbach·73 public vizzes

Loading thumbnail…

Scatter Plot COVID-19 Vaccination and Cases with Dual Axis

This interactive scatter plot shows COVID-19 vaccination rates in blue against reported cases in gray, using a dual y-axis to compare the two disparate data scales. The chart includes a dropdown menu to toggle between partially and fully vaccinated populations, with annotations highlighting key milestones. Built with D3 v6, it uses `scaleTime`, `scaleLinear`, `axisLeft`, `axisRight`, and `selection.join` for enter/update/exit circle transitions, rendering SVG with animated growth on load. Vaccination data comes from Our World in Data, while case counts are sourced from NYT rolling averages.

Sep 14, 2021
Loading thumbnail…

Network Simulation

This example shows a small network of five people (John, Marcus, Jane, Clara, and Nice) and their connections, rendered as circles and lines in an SVG. A d3.forceSimulation with link, charge, and center forces positions the nodes, and the circle and line positions update on each tick via d3.select calls. The data comes from a JSON file with node IDs and link references. The code uses D3 v6 to create the elements and run the force layout.

Jul 4, 2021
Loading thumbnail…

D3 Sandbox

This example demonstrates a minimal D3 version 6 sandbox that renders the text string “D3 Sandbox” directly into the page body. It uses the `select` API from the d3 module to target the body element and the `.text()` method to set its content. The accompanying HTML loads D3 v6 from the official CDN and includes a reference to the bundled JavaScript, `bundle.js`. The styling applies a large 4em font size, with no additional data sources or external datasets involved.

Jul 3, 2021
Loading thumbnail…

Linked Views

A simple bar chart displays GDP by country from a CSV file, using D3 v6 to bind data to SVG rectangles. Hovering over a bar reveals a tooltip showing the country name, following the cursor's position via mouse events. The chart uses scaleBand and scaleLinear for x and y axes, with a fixed width and height. Clicking or interacting with bars updates the tooltip dynamically, demonstrating linked views between data and visual feedback.

Jul 3, 2021
Loading thumbnail…

Creating Tooltips

This example demonstrates a bar chart that displays GDP by country, with interactive tooltips that appear when the mouse hovers over each bar. The tooltip shows the country name and follows the cursor’s position, updating its coordinates on mouse movement. Built with D3 v6 and JavaScript within an HTML page, it uses SVG for rendering and loads data from a CSV file, including country names and GDP values. The implementation relies on D3’s scaleBand, scaleLinear, event handling, and DOM selection methods to create the interactive experience.

Jul 3, 2021
Loading thumbnail…

Zooming

This example demonstrates D3.js zooming on a scatterplot of name, weight, and height data from a CSV file. The visualization renders circles in SVG, with axes and a zoomable plot area. Users can pan and zoom via the `d3.zoom` API, which rescales both x and y scales (`rescaleX`, `rescaleY`) and updates the axes and circle positions. The code uses React for the overall structure, with D3 v6 handling data binding, transitions, and axis generation.

Jul 3, 2021
Loading thumbnail…

Brushing

This example demonstrates interactive brushing on a small scatter plot of weight and height data from a CSV file. Users drag a rectangular brush region to highlight data points, turning selected circles red and unselected ones blue. The visualization uses D3 v6 with an SVG rendering, a linear scale for both axes, and d3.brush to manage the selection. Points are positioned using transitions and axes are rendered with d3.axisLeft and d3.axisBottom.

Jul 2, 2021
Loading thumbnail…

Data Updating

This example demonstrates dynamic data updating in a bar chart built with D3.js v6 and rendered as SVG. The interactive visualization allows users to add or update data entries via input fields, triggering smooth transitions on bar widths as weights change, while axis scales adjust accordingly. Users can also filter the displayed data by setting a minimum weight threshold. The code employs `d3.csv` for data loading, `d3.scaleLinear` and `d3.scaleBand` for scales, and the data join pattern with `enter`, `merge`, and `exit` selections, alongside `transition` and `d3.axisLeft`.

Jul 2, 2021
Loading thumbnail…

Interactions

A horizontal bar chart displays weight data for five people, loaded from a local CSV file with d3.csv. Bars are colored blue by default; hovering turns a bar red, and clicking updates a details panel with the person’s name. A vertical red line follows the mouse position using d3.mouse on the SVG container. The chart uses d3.scaleLinear for bar widths, d3.scaleBand for positioning, and d3.axisLeft for the y-axis, with SVG rectangles and animated transitions for rendering.

Jul 2, 2021
Loading thumbnail…

Tree Map

This tree map visualizes hierarchical sales data for US states and cities using a treemap layout. The visualization encodes each leaf node as a rectangle, with area proportional to sales values and color assigned by parent state via an ordinal scale with the Tableau 10 scheme. The code loads data from a JSON file using `d3.json`, builds a hierarchy with `d3.hierarchy` and `sum`, then applies `d3.treemap` to compute positions. Rectangles and white labels are rendered as SVG elements within a container group.

Jul 1, 2021
Loading thumbnail…

Untitled

The example is a dual-panel visualization of airline route data loaded from a `routes.csv` file. One SVG panel displays a sorted horizontal bar chart showing the number of routes per airline, with the bar for Air China highlighted in a distinct color. The other panel shows a geographic map of airports, with routes presumably drawn between them. The bar chart is built using D3 v6's selection, scale API (`d3.scaleLinear`, `d3.scaleBand`), and data-binding methods, while the map panel relies on similar SVG construction without using any geo-projection library.

Jun 30, 2021
Loading thumbnail…

NYC 2

This example visualizes airline routes in the New York City area, displaying a bar chart of route counts per airline alongside a map of airports. The page uses D3.js to load and parse the `routes.csv` data, aggregate routes by airline, and render the two SVG charts. The layout is styled with CSS flexbox, while the SVG elements are given a thin black border. The code is structured for the React framework but currently uses raw JavaScript within an HTML page.

Jun 26, 2021
Loading thumbnail…

Fork of Scatter Plot Vaccination and Cases

This scatter plot visualizes the relationship between COVID-19 vaccination rates and infection cases in the United States over time. It overlays two datasets—vaccination percentages from Our World in Data and case counts from the New York Times—on a shared date axis, with annotations highlighting the final date's progress. The visualization uses D3.js v6, specifically `scaleTime`, `scaleLinear`, `selection.join` for animated circle transitions, and `d3-annotation` for labels. SVG rendering animates circles growing from zero radius while a dropdown menu allows switching between partial and fully vaccinated metrics.

Jun 22, 2021
Loading thumbnail…

NYC HTML Starter

This example demonstrates a minimal HTML page that combines CSS styling with D3 v6 and inline SVG to render two colored rectangles. The page sets a large body font size and centers the content, while the SVG drawing shows a red square overlaid with a smaller blue square. The code includes commented-out examples of D3 array methods like `d3.sum` and `d3.mean`, as well as data joins with `selectAll` and `append`, though these are not active. It serves as a bare-bones starter template for experimenting with SVG rendering and D3 syntax in a React-free environment.

Jun 21, 2021
Loading thumbnail…

Scatter Plot Vaccination and Cases

This scatter plot shows how COVID-19 vaccination rates correlate with case counts in the United States, using data from Our World in Data. An interactive dropdown menu lets viewers switch between partially and fully vaccinated metrics, while the chart displays the proportion of the population vaccinated over time. The visualization uses D3 v6 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `selection.join` for smooth transitions between data updates, and `d3-svg-annotation` to highlight the maximum vaccination percentage.

Jun 21, 2021
Loading thumbnail…

NYC programming project

This example pairs two SVG charts to explore airline routes in the New York City area. The left panel displays a force-directed network of airlines, while the right panel shows a geographic map of airports. The code uses d3.forceSimulation for the network layout and d3.geoPath for the map projection, with data drawn from a local source. A flexbox layout positions the views side by side, and CSS borders highlight the SVG canvases.

Jun 20, 2021
Loading thumbnail…

Scatter Plot Vaccination

This interactive scatter plot visualizes COVID-19 vaccination rates in the United States over time, using data from Our World in Data. The chart displays the percentage of the population that is fully vaccinated against infection, with the y-axis showing the proportion of the population and the x-axis representing dates. Users can toggle between fully and partially vaccinated metrics via a dropdown menu. The visualization uses D3 v6 with SVG rendering and animation, employing scaleTime and scaleLinear scales, axisBottom and axisLeft components, and selection.join for smooth transitions. An annotation label highlights the current maximum vaccination percentage.

Jun 19, 2021
Loading thumbnail…

Fork of Fork of Annotated Grid Multiplot COVID-19 cases & vaccinated in US population

This visualization compares COVID-19 cases and deaths in the US against vaccination rates using two annotated scatter plots stacked vertically. It plots time-series data from the NY Times and Our World in Data, rendered as SVG animations with D3.js. The top chart displays cases or deaths via a dropdown menu, while the bottom shows fully or partially vaccinated percentages, with an annotation highlighting the peak vaccination rate.

Jun 18, 2021
Loading thumbnail…

Fork of Annotated Grid Multiplot COVID-19 cases & vaccinated in US population

This example displays two time-series scatter plots tracking COVID-19 cases and vaccination rates across the US population, using data from the NY Times and Our World in Data. The upper plot shows rolling averages of cases or deaths, while the lower plot displays the percentage of people vaccinated, with an annotation highlighting the peak vaccination value. Built with D3.js, the visualization uses `scaleTime` and `scaleLinear` for axes, `d3.annotationLabel` for annotations, and animated transitions via `transition.duration`.

Jun 17, 2021
Loading thumbnail…

Left Join Data Sandbox

This visualization demonstrates a left join operation between COVID-19 datasets, using New York Times rolling averages for cases and deaths alongside Our World in Data vaccination rates. The code loads both CSV files via `d3.csv` promises, parses numeric fields, and implements a custom `joinTables` function that matches rows on a shared date key. A static test dataset pairs articles with brands to validate the join logic. The page displays minimal text, with commented-out code showing a potential scatterplot visualization that would compare vaccination percentages against case averages per 100,000 people.

Jun 17, 2021
Loading thumbnail…

Annotation Label Sandbox

This example showcases the d3.annotation library by rendering several annotation types—including `d3.annotationLabel` and `d3.annotationCalloutCircle`—within an SVG on a white background. It demonstrates how to configure note labels, titles, text wrapping, alignment, connector endpoints (arrow and dot), and curve types for connectors, with annotations positioned at explicit x and y coordinates. The code uses D3 v4 to select the SVG element, append a `<g>` group, and call the `d3.annotation()` generator with an array of annotation objects, each specifying a custom color and optional subject settings like circle radius.

Jun 13, 2021
Loading thumbnail…

Annotated Grid Multiplot COVID-19 cases & vaccinated in US population

This example shows a multiplot of COVID-19 cases and vaccination rates in the U.S. population, rendered as two animated scatter plots from the NY Times and Our World in Data datasets. Each plot includes interactive menus for switching between case/death metrics and partial/full vaccination, while a d3-svg-annotation label highlights the peak vaccination percentage. The reusable chart pattern, inspired by Towards Reusable Charts, uses D3 scales, axes, transitions, and modular functions to build the responsive SVG visualizations.

Jun 11, 2021
Loading thumbnail…

transform = translate HTML Starter

This example demonstrates the use of the SVG `transform="translate(x, y)"` attribute to reposition a purple, semi-transparent rectangle within an SVG canvas. The code defines a single rectangle inside a `<g>` group with the `id="square"`, then uses an SVG `<use>` element referencing that group and applies the translation transform. With no external libraries or JavaScript, it is a bare-bones HTML page (as noted in the README) that relies solely on inline SVG and CSS-like styling for presentation. The title, comments, and some CSS rules are commented out, leaving the SVG rendering as the core visual output.

Jun 11, 2021
Loading thumbnail…

Fork of VizHub User Count Over Time

This line chart shows the growth of VizHub users over time, with a steady upward trend punctuated by a notably steeper rise around the late 2020 period. The visualization uses d3.v4 with SVG rendering, employing d3.scaleTime and d3.scaleLinear for axes, and d3.line to draw the path. Data points are marked with circles, and an annotation from d3-svg-annotation highlights a surge labeled "Datavis 2020 Launch." The x-axis represents time while the y-axis counts users, with gridlines and axis labels styled via CSS.

Jun 9, 2021
Loading thumbnail…

Fork of VizHub User Count Over Time

This line chart shows the growth of VizHub users from its August 2018 launch through April 2021, with annotations highlighting key events like the VizHub 1.0 Medium post, the 2.0 Kickstarter, the Datavis 2020 course launch, and the Sort by Popular feature. The visualization uses d3.line with d3.scaleTime and d3.scaleLinear, rendering SVG circles for each data point and gridlines via d3.axisBottom and d3.axisLeft. The d3-svg-annotation library adds contextual labels, while the data comes from users.csv.

Jun 8, 2021
Loading thumbnail…

Fork of Stylized Bar Chart

This example visualizes the top 10 most populous countries as a horizontal bar chart, using data from the United Nations World Population Prospects 2019. It shows population values for each country in billions, with a formatted x-axis and a "Population" axis label. The chart is built with React and SVG, using d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. The code demonstrates custom axes and marks components, with a tooltip displaying the formatted population value.

Jun 8, 2021
Loading thumbnail…

Grid Multiplot COVID-19 cases & vaccinated in US population

This visualization compares COVID-19 cases and deaths with vaccination rates across the US population using two stacked scatter plots. The upper chart displays NY Times rolling averages for cases or deaths (selectable via a menu), while the lower chart shows Our World in Data vaccination percentages. Both plots use D3.js v6.7 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` to animate points. The `menu` and `menu2` modules use D3's `dispatch` for interactive re-rendering, with SVG output rendering the data across the full viewport width.

Jun 7, 2021
Loading thumbnail…

Fork of Multiplot COVID-19 impact on health of US population

This fork of a multiplot visualization shows the impact of COVID-19 on the US population, plotting daily case and death averages over time using data from The New York Times. A second chart displays vaccination rates from Our World in Data, with both plots rendered as SVG scatter plots using D3’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs. Interactive dropdown menus, built with D3 dispatch, let users toggle between case and death metrics, while animated transitions update circle positions and chart titles.

Jun 6, 2021
Loading thumbnail…

Fork of Grid Menus Animated Species Stratified Scatter Plot

This interactive scatter plot uses the Iris dataset to explore relationships between four flower measurements, with dropdown menus to switch the x-axis, y-axis, and species filter. Data points are rendered as SVG circles using d3.scaleLinear and d3.axisBottom/axisLeft. When the species menu changes, circles transition between all species and a single class using selection.join, transitioning radius on enter and updating fill colors.

Jun 6, 2021
Loading thumbnail…

Grid Menus Animated Species Stratified Scatter Plot

This animated scatter plot visualizes the Iris Dataset, using D3.js version 6.7.0 with SVG rendering. It features three dropdown menus that allow users to select the x-axis, y-axis, and species filtering, with circles smoothly transitioning positions over one second using D3's transition API. The visualization demonstrates reusable chart construction with a custom scatterPlot module that handles axis updates and animated circle repositioning. When filtering by species, only matching data points remain visible; when set to "all," all points display uniformly.

Jun 6, 2021
Loading thumbnail…

Fork of Species Stratified Animated Scatter Plot with Menus

This interactive scatter plot animates the Iris dataset, letting users explore relationships between sepal and petal measurements while filtering by species. Three dropdown menus control the x-axis, y-axis, and species stratification, triggering smooth transitions as points reposition. Built with D3 v6 and SVG, the visualization uses selection.join for enter-update-exit cycles, with circles growing from radius zero on entry. The code loads data via d3.csv and employs reusable chart and menu factory functions to manage state and dynamic updates.

Jun 5, 2021
Loading thumbnail…

Species Stratified Animated Scatter Plot with Menus

An interactive scatter plot visualizes the Iris dataset, with menus to switch the X and Y axes among sepal and petal measurements and to filter points by species. The d3.v6 code uses a reusable `scatterPlot` module with `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `transition` to animate circle positions and axis updates. Species stratification is implemented by filtering data against the selected z-value, with a 1000-millisecond transition delaying updates for a polished effect.

Jun 4, 2021
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot explores the Iris Dataset by cycling through four attribute combinations on the x-axis every two seconds, with petal width mapped to sepal length initially. Built with D3 v6, it uses `scaleLinear` and `extent` to compute domains, `axisLeft` and `axisBottom` for ticks, and a reusable chart pattern via `scatterPlot()`. Data loads from a CSV URL, and circles update via `selectAll` and `join`. The visualization demonstrates smooth transitions between variable pairings while axes rescale automatically.

Jun 2, 2021
Loading thumbnail…

Multiplot COVID-19 impact on health of US population

This multiplot visualization tracks the impact of COVID-19 on the US population by displaying daily case and death averages as a scatter plot, rendered with D3’s scaleTime and scaleLinear functions. Users can switch between cases and deaths via a dropdown menu, which triggers smooth transitions on circle positions. The data comes from the New York Times rolling-averages dataset, featuring an animated reveal of points and dual month/year axes. A second, commented-out chart uses Our World in Data to show vaccination percentages, though it remains inactive.

Jun 2, 2021
Loading thumbnail…

Persons Fully COVID-19 Vaccinated per 100K in US

This interactive scatter plot tracks the percentage of the U.S. population fully or partially vaccinated against COVID-19 over time, using data from Our World in Data. Built with D3.js, it renders an animated SVG chart where circles appear and transition to new positions based on the selected vaccination metric. A dropdown menu allows users to switch between fully and partially vaccinated counts, while the y-axis displays percentages and the x-axis shows months and years. The chart also includes a title and data source attribution.

May 31, 2021
Loading thumbnail…

COVID-19 impact on health of US population

This interactive scatter plot visualizes COVID-19 impact on the US population, charting national rolling averages of cases and deaths over time since the pandemic began. Users can switch the y-axis metric between cases, deaths, and per-capita values via a dropdown menu built with D3’s dispatch system. The visualization uses d3.scaleTime and d3.scaleLinear to map dates and health indicators, with animated circle transitions handled through d3.transition. Data comes from the NY Times COVID-19 rolling averages dataset.

May 31, 2021
Loading thumbnail…

Fork of Dual Y-Axes

This visualization plots the S&P 500 index and the long-term interest rate over time as two separate lines, each with its own y-axis scale, on a shared time-based x-axis. A faint gray area fills the space between the two lines, suggesting a comparison of their relative movements. The chart is built using D3 v5 within a React framework, relying on `d3.line`, `d3.area`, `d3.scaleTime`, and `d3.scaleLinear` to render the SVG elements, with data loaded from a CSV file.

May 30, 2021
Loading thumbnail…

Scatter Plot with Menu Animations

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers independently select which numeric column appears on the X and Y axes, triggering smooth animated transitions of the data points and axis scales. Built with D3 v6, the visualization uses `scaleLinear`, `transition` for the 1-second animations, and the `selection.join` API to efficiently manage the SVG circles as data mappings change. Each circle animates its position with a slight per-point delay, creating a cascading effect during updates.

May 30, 2021
Loading thumbnail…

#5 COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework Animated

This animated scatter plot visualizes COVID-19 case and death averages across the United States using New York Times rolling-averages data. The D3.js chart transitions between two y-axis metrics—deaths_avg and cases_avg—on a timed interval, with circles positioned by date and value. It uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft, with transitions updating circle positions and axis labels. SVG rendering displays the full timeline with monthly and yearly tick formats, while the reusable scatterPlot function follows the Towards Reusable Charts pattern.

May 29, 2021
Loading thumbnail…

#4 COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework Animated

This animated scatter plot visualizes COVID-19 deaths and cases in the United States using New York Times rolling averages data. The visualization alternates between displaying average cases and average deaths on the y-axis every 2.4 seconds, with each data point representing a date. Built with D3 v6, the reusable chart uses `scaleTime` and `scaleLinear` for axes, `axisBottom` with `timeFormat` for month and year labels, and `transition()` with staggered delays for smooth circle repositioning. SVG rendering displays the full timeline with circles growing from radius zero via `transition.attr('r', radius)`.

May 29, 2021
Loading thumbnail…

Fork of #4 COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework Animated

Drawing on New York Times rolling COVID-19 data for the United States, this animated SVG scatter plot uses the reusable D3 chart pattern to toggle between average case and death counts every 2.4 seconds. It employs `d3.scaleTime` and `d3.scaleLinear` for axes, with `d3.transition` animating circle positions and y-axis label updates. The chart highlights the vaccination milestone at 30% and sources data from the NYT GitHub repository.

May 28, 2021
Loading thumbnail…

Fork of #3 COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework Animated

This chart plots daily COVID-19 deaths and case averages across the US using NY Times rolling-averages data. An animated scatter plot, it cycles between two metrics every 2.4 seconds, with circles updating smoothly via D3’s `transition`. The reusable framework, built with `scatterPlot.js`, leverages `scaleTime` and `scaleLinear` for axes, plus `axisLeft`, `axisBottom`, and `timeFormat` for labeling. SVG rendering and the `d3.select` API manage the dynamic visualization.

May 28, 2021
Loading thumbnail…

#2 COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework Animated

This animated scatter plot displays COVID-19 death and case averages across the United States over time, using rolling data from the New York Times. The visualization toggles between deaths and cases every 2.4 seconds, smoothly transitioning circles along the y-axis while the x-axis remains a time scale. Built with reusable D3.js chart components, the code leverages `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to render the SVG. A `transition` with staggered delays animates circle positions, while `d3.csv` loads the NYT rolling-averages dataset directly from GitHub.

May 28, 2021
Loading thumbnail…

COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework Animated

This animated scatter plot visualizes the rolling seven-day average of COVID-19 deaths and cases across the United States, drawing on data from the New York Times. The visualization, built with the D3.js library, employs a reusable chart framework with a `scatterPlot()` function. Using SVG rendering, it animates the transition between metrics, toggling between death and case averages every few seconds. The chart includes labeled axes, a title, and a source attribution, with the y-axis label updating to reflect the current metric.

May 26, 2021
Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot Sandbox

This animated scatter plot cycles through different pairings of measurements from the Iris dataset every three seconds, morphing the positions of 150 circles as the axes rescale. Built with D3 v6, it uses `selection.join` with transitions to animate entering, updating, and exiting circles, while axes update via `axisLeft` and `axisBottom`. The reusable `scatterPlot` function configures scales with `scaleLinear` and `extent`, rendering SVG with a 1-second transition delay per point.

May 24, 2021
Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot

This animated scatter plot cycles through four different measurements from the Iris dataset, showing how petal width, sepal width, petal length, and sepal length relate on the x-axis while sepal length remains constant on the y-axis. Built with D3 v6, it uses the `scaleLinear` and `extent` functions to compute scales, `transition` for smooth 1-second animations with staggered delays, and the `selection.join` API to efficiently add, update, and remove circles as the x-value changes every 3 seconds. The visualization is rendered as SVG with data loaded from a CSV file.

May 23, 2021
Loading thumbnail…

COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework

This example shows COVID-19 deaths per day across the United States from NYT rolling-averages data, plotting each date as a scatter point with death counts on the y-axis. The reusable D3 scatter plot framework uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` within an SVG, with `d3.csv` fetching the remote dataset. The chart includes multiple axis groups for months and years, labeled titles, and a source attribution, all styled via custom CSS with a tech-inspired font.

May 23, 2021
Loading thumbnail…

Fork of React Starter

This example demonstrates a minimal React application that renders the text “Hello React!” as a large, left-aligned heading. It shows how to initialize a React component tree and mount it to the DOM using `ReactDOM.render`. The code imports `React` and `useState`/`useEffect` hooks from the React library, though only the basic component structure is used. The `index.html` loads React and ReactDOM from CDN, while `bundle.js` contains the compiled JavaScript. Data handling and visualizations are absent; the focus is purely on the starter setup.

May 20, 2021
Loading thumbnail…

COVID-19 US Interactive

This interactive line chart displays the rolling seven-day average of COVID-19 cases in the United States over time. The visualization uses React and D3 v6, with the data sourced from the New York Times’ public COVID-19 repository. The chart plots dates on the x-axis and average cases on the y-axis, rendered as an SVG using custom `AxisBottom`, `AxisLeft`, and `Marks` components. Hovering over data points triggers a `Tooltip` showing the formatted value. The code leverages D3’s `scaleTime`, `scaleLinear`, and `csv` for data parsing and scaling.

May 16, 2021
Loading thumbnail…

COVID-19 Deaths in US Interactive

A COVID-19 deaths scatter plot for the United States renders the NY Times rolling-averages dataset as an interactive SVG visualization. The chart, built with React and D3 v6, uses d3.scaleTime and d3.scaleLinear to map dates against the seven-day average death count. It displays axes via d3.axisLeft and d3.axisBottom, with labeled annotations for the country title, y-axis, and vaccination threshold. The reusable chart pattern from "Towards Reusable Charts" is implemented through configurable accessor functions, while the data loads asynchronously from a CSV URL and updates circle elements via selection.join.

May 15, 2021
Loading thumbnail…

Fork of Waseem's Rank on HackerRank

This visualization tracks Waseem’s ranking on HackerRank as he solves JavaScript algorithm problems, showing a steady climb from roughly 969,000 to 129,000 over several months. The line chart uses a step-after curve and a logarithmic y-axis to emphasize proportional improvements, with hover interactions snapping to date points and displaying exact rank and date. Built with React, D3 v6’s `scaleTime`, `scaleLog`, and `line` generators render SVG elements, while a custom tooltip component updates on mouse movement. Data comes from a static array of date-rank pairs.

May 15, 2021
Loading thumbnail…

Fork of Reusable D3 Scatter Plot NY Times COVID Data US Cumulative

A scatter plot displays cumulative COVID-19 cases in the United States over time, with each point representing a daily data record. The visualization uses D3.js 6.7.0, specifically the `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` functions from D3's API to map dates to the x-axis and case counts to the y-axis. It loads data from the NY Times COVID-19 rolling averages dataset via `d3.csv`. The chart renders as an SVG, populating circular marks with a radius of one pixel, and includes axes labeled with a custom Share Tech font.

May 9, 2021
Loading thumbnail…

Reusable D3 Scatter Plot Dasbach

This scatter plot visualizes state-level COVID-19 trends by plotting death averages per 100,000 residents against case averages per 100,000, using New York Times rolling-averages data. Built with D3 v6, the reusable chart module `scatterPlot` uses `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles and axes. The example demonstrates Mike Bostock’s reusable chart pattern, configuring width, height, margins, and radius through fluent setter methods.

May 9, 2021
Loading thumbnail…

Scatter React + D3

This example shows a yellow smiley face with black-outlined eyes and a mouth, rendered as scalable vector graphics inside a React component. The face is composed of three circle elements and one path element generated by D3’s `arc()` function. React manages the SVG DOM structure, while D3 provides the geometric calculations for the mouth arc and the component layout. The code also defines a reusable D3 `scatterPlot` module that uses `scaleLinear`, `extent`, and data joins to render circles, though the current view only displays the static face.

May 5, 2021
Loading thumbnail…

Minimal Reusable Charts Pattern + React

This example demonstrates the Minimal Reusable Charts pattern, rendering an interactive scatter plot of the Iris Dataset with D3.js and React. The chart displays sepal length and width measurements as circles, using `d3.scaleLinear` for coordinate mapping and `d3.extent` for domain calculation. The reusable chart function `scatterPlot()` exposes setter methods for data, dimensions, and accessor functions, which are invoked via `g.call(plot)`. Data loads asynchronously from a CSV URL using `d3.csv`, and the SVG output fills the browser viewport.

May 5, 2021
Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to select which measurements to plot on the x and y axes via two dropdown menus. Built with D3 v5 and React, it renders SVG circles, with axes, labels, and a tooltip generated through custom components. The code uses D3’s `scaleLinear`, `extent`, and `csv` for data loading and scaling, and the `react-dropdown-browser` library for the menus.

May 2, 2021
Loading thumbnail…

Efficient Frontier - fork of VizHub User Count Over Time

This visualization displays an efficient frontier plot, mapping cost against QALYs (quality-adjusted life years) for a set of data points, with each point connected by a line and rendered as a circle. The chart uses D3.js v4 with SVG rendering, employing `d3.scaleLinear` for both axes, `d3.line` for the path, and `d3.axisBottom`/`d3.axisLeft` for gridlines and ticks. Data is loaded from the `costQalys.csv` file, and `d3.svg.annotation` adds label annotations to highlight specific points. The visualization updates responsively on window resize, though no annotation data is currently provided in the sandbox script.

May 2, 2021
Loading thumbnail…

Dasbach Fork of D3 Scatter Plot Annotated

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis for each flower. It renders circles as SVG marks with axes labeled using D3’s `scaleLinear`, `axisLeft`, and `axisBottom`. The code loads CSV data via `d3.csv`, parses numeric fields, and joins data to circle elements using `selectAll` and `join`. The visualization is built with D3 v6 within a React framework, filling the window with a full-screen SVG.

May 1, 2021
Loading thumbnail…

GItHub repo starter for Scatter Plot for Efficient Frontier

This example demonstrates a scatter plot of randomly generated data points, representing a simplified efficient frontier visualization. The chart displays each data pair as a circle whose size and opacity scale with its y-value, alongside its coordinate labels. Built with D3 version 6, the code uses `d3.select`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render the SVG output. A linked GitHub repository and YouTube tutorial provide context for extending the starter project.

Apr 30, 2021
Loading thumbnail…

Bar Chart interactive

This interactive bar chart visualizes a dataset of 50 random values, with bars colored on a blue scale and labeled with their numeric values. Clicking the text prompt triggers an update that replaces the data with 25 new random values, resizing the bars accordingly. Built with D3 v6, the example uses the scaleBand and scaleLinear APIs to map data to SVG rectangles, while the d3.select method binds the click event to the paragraph element.

Apr 21, 2021
Loading thumbnail…

Creating SVG Scatter Plot

This example demonstrates a dynamic SVG scatter plot built with D3 version 6, displaying randomly generated (x, y) data points as tan circles with varying radii and labeled coordinates. The visualization uses `d3.scaleLinear` for the x- and y-axes, `d3.scaleSqrt` for circle sizing, and `d3.axisBottom` and `d3.axisLeft` for the axes, all rendered through SVG elements appended to the body. The data array is created with a JavaScript loop and `Math.random`, with 20 points plotted across a full-window canvas, and each point includes a text label showing its coordinates.

Apr 19, 2021
Loading thumbnail…

Creating SVG Bar Chart

This example demonstrates a simple SVG bar chart built with D3 version 6. It generates a random dataset of ten values using `d3.range` and `Math.random`, then renders each value as a `rect` element, with its height and vertical position proportional to the data. The chart also labels each bar with a `text` element showing its value. The code uses D3’s `select`, `selectAll`, `data`, and `enter` methods to bind data and create the SVG elements, with bars colored using an RGB fill based on each value.

Apr 18, 2021
Loading thumbnail…

Creating SVG circles

This example demonstrates how to create and position SVG circles using D3 version 6. The code generates a dataset with `d3.range` containing values from 5 to 9, then binds it to circle elements via `selectAll` and `enter`. Each circle’s `cx`, `cy`, and `r` attributes are set using mathematical expressions based on the data value, viewport dimensions, and `Math.random`, resulting in randomly scattered circles of varying sizes. The visualization renders directly to the browser window using an SVG container sized to the full viewport.

Apr 17, 2021
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a simple bar chart built with D3 version 6. The visualization starts with a blank page and generates a series of vertical midnight blue bars whose heights are determined by random values multiplied by a fixed scale. The code uses `d3.range` to generate a data set from 5 to 29, then applies the `d3.select('body')` and `.selectAll('div')` API to dynamically append bar elements to the HTML document. Each bar's height is set via the `.style('height', ...)` method, with inline styling producing varied bar lengths. The example serves as a minimal starter template for understanding D3's declarative approach to building DOM-based visualizations from scratch.

Apr 17, 2021
Loading thumbnail…

Das Line Sandbox

This example demonstrates how to build a simple line chart using D3 v5 with SVG rendering. A static dataset of five coordinate pairs is transformed into a path string using the `d3.line()` generator, then applied to an SVG `<path>` element via `d3.select`. The code showcases modular JavaScript by importing the `select` function from the `d3` package and a local ES6 module, while loading D3 from UNPKG in the HTML file.

Apr 16, 2021
Loading thumbnail…

D3 DaSandbox

A set of sky-blue circles undulates across the screen in a continuous, wave-like animation, with each circle’s vertical position and radius oscillating over time. The visualization uses D3 v6’s `select`, `range`, and `scaleLinear` functions within custom `makeData` and `vizData` modules to generate and update SVG `<circle>` elements at 60 frames per second. Data is synthesized dynamically, and the scene scales to the full browser window.

Apr 15, 2021
Loading thumbnail…

Das Fork of D3 Selection Exploration

Animated SVG circles demonstrate live data binding and join updates in D3. The visualization uses `selectAll` with `.data()` and `.join()` to re-render a set of circles every frame, updating their `cx`, `cy`, and `r` attributes based on a sinusoidal function. The code imports `select` from `d3` and defines custom functions `vizData` and `makeData` to generate coordinates and radii dynamically. Runs at 60 frames per second via `setInterval`, producing a smooth wave-like motion across the viewport.

Apr 15, 2021
Loading thumbnail…

Das Fork of D3 Selection Exploration

This example explores D3’s data join pattern through a dynamic, animated scatterplot. A set of circles, generated by the `createDataSet` function, continuously updates their positions and radii in response to a sine wave, creating a flowing, organic motion. The visualization uses D3 v6’s `select` and `selectAll` to bind data to SVG circles, with the `.join()` API handling enter, update, and exit transitions. Regular intervals trigger updates, while CSS transitions are commented out, showing raw attribute changes.

Apr 15, 2021
Loading thumbnail…

Efficient Frontier test

This visualization shows the trade-off between costs and health outcomes in an "Efficient Frontier" scatter plot, with time on the x-axis and QALYs on the y-axis. The chart uses React with D3 v5 scales and axes, rendering an SVG path via d3.line with curveNatural to connect the data points. Data comes from the Data Canvas Sense Your City dataset, specifically weekly temperature readings from San Francisco.

Apr 14, 2021
Loading thumbnail…

Pseudo Graphs

Static SVG rectangles and paths form a simple bar-like chart where each shape has a distinct color and size, demonstrating basic vector graphics rendering. The page uses inline CSS to apply black strokes and varied fills, with a hover transition that gradually changes rectangle fill to midnightblue and increases stroke width over three seconds. This example shows how SVG elements can respond to user interaction through CSS transitions, with the markup structured directly in the HTML file.

Apr 12, 2021
Loading thumbnail…

Das Fork Sol LeWitt Repro

This example reproduces a Sol LeWitt–style wall drawing using raw SVG. It renders 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, filling the entire browser viewport. The code creates an SVG element dynamically via the Document Object Model API, using `document.createElementNS` for the `svg` and `rect` elements. The rectangle heights are set to the full window height, producing a minimalist grid pattern. No external libraries are used; the visualization relies solely on vanilla JavaScript and inline CSS styling.

Apr 12, 2021
Loading thumbnail…

SVG Fundamentals Forked

This example demonstrates basic SVG shape construction in a static visualization, using only native SVG elements without a JavaScript library. The scene shows four distinct shapes: two filled circles (one default black, one red), a navy line, a pink path with an L-shaped trajectory, and a blue-outlined rectangle with a thick stroke. The code defines the rendered graphic directly in the `index.html` markup, relying on the SVG namespace for geometry and styling. It illustrates how raw SVG coordinates and attributes like `cx`, `r`, `d`, and `stroke-width` compose a simple chart fixture.

Apr 11, 2021
Loading thumbnail…

Fork of Fork of Hello HTML Dasbach

This example renders a simple SVG face using two large yellow circles for eyes and a smaller circle for the mouth, all drawn on a 960x500 canvas. The markup uses native SVG elements—`circle` with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—placed directly in the HTML body. The styling applies a margin reset and hidden overflow to the page, while the SVG itself is static with no interaction or animation. The code demonstrates basic vector shape composition without any external JavaScript libraries.

Apr 8, 2021