Adan Rodriguez

Blank Chart

D3-Tree

Enter Update Exit w/ React

This example shows a minimal React application that renders the text "Hello React!" as a large, centered message. The interface consists solely of this static greeting, styled with a 13em font size. The code demonstrates React 18 and ReactDOM initialization, using `createRoot` to mount the application. The main component, defined in `App.js`, returns a `<div>` with the message class, while the `index.js` file imports and renders that component.

Fork of Muscles

This interactive fitness visualization presents a human muscle diagram derived from an SVG found on the Army Combat Fitness Test website, with the goal of tracking recently worked muscle groups. Users can select muscles to "hit" them, and those selections fade over time to reveal which areas are best targeted next. The example renders its static SVG paths directly using the `d3.select` API, while the fading effect would rely on `transition.attrTween` to manipulate opacity. The original SVG paths are embedded in the HTML, providing the anatomical base for the application.

Fork of d3-simple-slider

This fork of d3-simple-slider demonstrates the basic and extended functionality of the slider component. It showcases six core configurations—simple, step, time, fill, range, and vertical—along with an alternative handle and a transition option. Each slider is paired with a live value display, updating on user interaction. The example also includes recreations of the New York Times rent-or-buy slider and a color picker, all rendered as interactive SVG elements using the d3.sliderBottom and related APIs.

Gapminder Clone

This interactive visualization recreates the classic Gapminder chart, plotting GDP per capita against life expectancy for countries over time from 1800 to 2014. Users can filter by continent via a custom dropdown menu and animate the progression through years with a play button. The code uses D3 v7 scales, axes, and transitions for the SVG rendering, with a tooltip displaying country details on hover. Data is loaded as JSON from an external GitHub source, and a custom dropdown module handles the continent selection.

Fork of d3-simple-slider

This fork of d3-simple-slider demonstrates various interactive slider configurations, including simple, step, time, fill, range, vertical, and transition options. Built with D3 v5 and the d3-simple-slider library, the page also integrates a small multi-line chart that visualizes estimated death counts across different age brackets from the q3.csv dataset. The chart uses D3's scaleLinear, scaleTime, axisBottom, axisLeft, line, and curveCatmullRom APIs to render the data with SVG paths and animated transitions.

Fork of Chart

This interactive dashboard visualizes crime cases against women in India using a choropleth map and two donut charts. The main map, built with D3 v7 and TopoJSON, displays state-level data for a selected year and crime type, while the two donut charts break down the total cases by year and by crime category. Animations enhance the transitions between selections. The application loads data from a CSV file hosted in a GitHub Gist, along with geographic boundary data for Indian states, and uses dropdown menus to control all three views.

Animated Bar Chart w/ dropdown

This example presents an animated bar chart where users can toggle between revenue and profit metrics via a dropdown menu. The chart loads monthly financial data from a CSV file and renders it as SVG rectangles using D3 v7's `scaleBand` and `scaleLinear`. Selecting a different option triggers a `transition` that smoothly animates the bars to their new heights over 750 milliseconds. The visualization uses D3's `select` and `property` methods to handle the dropdown interaction, demonstrating dynamic data binding and transitions.

Isolation of Dropdown/ Testing a concept

A dropdown menu isolates a data attribute for comparison. The bar chart displays monthly revenue or profit, switching between the two metrics via user selection. Built with D3 v7, it uses `scaleBand` and `scaleLinear` for axes and `transition` for animated bar height updates on change. Data comes from `revenues.csv` and renders as SVG rectangles.

Selection.join example w/ animation

This example shows a live comparison of a dataset, shifting between the words "text" and "test" via a dropdown. It demonstrates the D3 `selection.join` API for animating changes to a list of letters, with enter, update, and exit transitions. Each random set of letters is rendered as SVG text elements, positioned horizontally and animated vertically. The code uses `d3.select`, `d3.shuffle`, and `d3.interval` to generate data and transitions, while the `transition` method handles the 750ms movement of entering, updating, and exiting nodes.

Fork of Bonus ICE - 3D Bar chart

This example shows a 3D vertical bar chart comparing download totals for seven apps across six app stores, with each store represented as a distinct stacked series. The chart uses the Highcharts library with the highcharts-3d module, enabling a perspective view through configurable alpha, beta, and depth settings. Data is hardcoded as arrays of [category, value] pairs within each series, while axes are labeled for app names, total downloads, and store sources. The visualization relies on jQuery to initialize the chart inside a container div.

Fork of (HELP ME CURRAN 😭))Figuring out how to do Revenue Bar Chart w/ transition

A dropdown menu with options for "revenue" and "profit" sits above a bar chart. Initially, the chart displays monthly revenue data from a CSV file. When a user selects an option from the dropdown, the chart is designed to transition its bars to show the corresponding data, either revenue or profit, using an animated transition. The visualization uses D3 version 7, rendering SVG bars, with axes and scales built via `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft`. The transition logic is initiated with a `transition()` call, though the update routine is incomplete.

Revenue Bar Chart w/ transition

A dropdown menu lets viewers toggle between revenue and profit for seven months of data, updating a bar chart with smooth transitions. The chart uses D3 v7’s `scaleBand` and `scaleLinear` axes, with bars rendered as SVG `rect` elements. Changing the selection triggers a `transition` that animates bar heights and positions, while the exit state briefly turns bars red before removal.

Fork of D3 Starter

This example demonstrates a basic D3 v7 starter template that renders a bar chart showing the frequency of each letter in the English alphabet, sourced from the included `alphabet.csv` file. The visualization uses D3’s `scaleBand` and `scaleLinear` to map categorical and continuous data onto the SVG canvas, with axes generated via `d3.axisLeft` and `d3.axisBottom`. The chart’s dimensions are set to match the browser window, and the bars are drawn with a steel blue fill. The code also incorporates the `autoType` parser to handle data types from the CSV.

Selection.join example

This example demonstrates the D3 `selection.join` API by animating a continuously updating set of random letters on an SVG canvas. The code creates an SVG element sized to the full browser window and runs an infinite loop. Each iteration, the loop selects all existing “text” elements, binds them to a new array of randomly generated, sorted letters produced by the `randomLetters` helper (which uses `d3.shuffle`), and calls `.join("text")` to efficiently synchronize the DOM with the new data—updating the `x` position and text content of existing elements while creating or removing nodes as needed.

Simple BarChart without selection.join

A simple bar chart displays monthly revenue with angled month labels and currency-formatted y-axis ticks. The example demonstrates basic D3 v7 SVG rendering using `d3.select` for element creation, `d3.csv` for data loading, `d3.scaleBand` and `d3.scaleLinear` for scales, and `d3.axisBottom` and `d3.axisLeft` for axes. Bars are appended via `d3.selectAll('rect').data(data).enter()` without `.join`, showing an older approach. The static chart derives from revenues.csv with revenue values converted to numbers.

Fork of D3 Starter

This example demonstrates how to build a basic bar chart using D3 version 7, showing monthly revenue data from a CSV file. The visualization maps months to a band scale on the x-axis and revenue amounts in millions to a linear scale on the y-axis, with grey bars and rotated x-axis labels. The code uses `d3.csv` to load the data, `d3.scaleBand` and `d3.scaleLinear` for scaling, and `d3.axisBottom` and `d3.axisLeft` to render the axes. The chart is rendered as SVG within a fixed-width margin layout.

Fork of D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. Built with vanilla JavaScript and D3 v6, the SVG circles are positioned using `d3.scaleLinear` with domains from `d3.extent` and ranges derived from the window’s dimensions. Data is loaded via `d3.csv` from a GitHub Gist, with numeric columns parsed on ingestion. Axis rendering via `d3.axisLeft` and `d3.axisBottom` is present but commented out, leaving the chart with only the plotted points.

My First Bar Chart

This example shows a basic bar chart of monthly revenue from a CSV file, with each bar’s height proportional to its revenue value. The chart uses D3 v7’s `scaleBand` for the x-axis months and `scaleLinear` for the y-axis, rendering rectangles in an SVG. Axes are added with `axisBottom` and `axisLeft`, while the raw data is loaded and parsed via `csv`. The visualization demonstrates a straightforward first step in binding data to SVG elements using D3’s data join pattern.

Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization uses D3 v5 with an SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Axis customization includes a tick format that abbreviates large numbers (e.g., converting billions) and removes default domain lines. The data is loaded from a CSV file and multiplied by 1000 to reflect actual population figures.

D3 Selections

This example demonstrates how D3 selections bind data to SVG elements. It renders five circles across the viewport, each with a random radius between 10 and 50, generated by a custom `Data` function using `d3.range`. The `Circles` module applies a re-usable selection pattern with `selectAll`, `data`, and `join` to create and style the circles. The main script uses `d3.select`, appends an SVG sized to the window, and calls the circle component, showing a modular approach to D3 v7 development in an ES modules setup.

Fork of D3 Starter

This example shows a simple D3 starter visualization that renders 15 circles along a sine wave across a full-screen SVG canvas. The circles are positioned using `d3.range()` to generate data, with x-coordinates spaced 60 pixels apart and y-coordinates calculated using `Math.sin()`. The code uses D3 v7’s `select` and `range` imports, appends an SVG to the body, and binds the generated data to circle elements via `enter()` and `append()`, setting each circle’s radius to 20 and its position with `attr` and callback functions.