G

Gayan Priyadarshana

@GayanPriyadarshana·80 public vizzes

Loading thumbnail…

Quantity added to the visuals and

This visualization uses a treemap to show the value and quantity of steel scrap imports and exports between regions and partner countries. Users can filter by region and toggle between import/export data. Built with D3 v7, it uses `d3.treemap` and `d3.hierarchy` to layout hierarchical data, with cell color scaled via `d3.scaleSequential` and `d3.interpolateRgb`. Interactive drill-down reveals nested commodity details on click. Data comes from a CSV file.

Loading thumbnail…

Quantity added to the visuals and

This interactive treemap visualizes the value and quantity of steel scrap imports and exports by region and partner country. Users can filter by region and toggle between import and export data, with each country’s box subdivided by commodity type. Built with D3 v7, it uses `d3.treemap()` for the layout and `d3.hierarchy().sum()` to aggregate values. A sequential color scale encodes the total value, while tooltips display both monetary value and quantity. The visualization reads from a CSV and supports drill-down on click.

Loading thumbnail…

Quantity added to the visuals and

This interactive treemap visualizes steel scrap import and export quantities by partner country for a selected region, with each rectangle sized by trade value and colored on a light-to-dark blue scale. Users filter by region and import/export direction via dropdown and radio buttons, and clicking a country drills down to show commodity-level details. Built with D3 v7, it uses `d3.hierarchy` for data nesting, `d3.scaleSequential` with `interpolateRgb` for color, and SVG elements with `.exit()` and `.enter()` patterns for updates. The tooltip reveals both monetary value and shipment quantity.

Loading thumbnail…

Quantity added to the visuals and

This treemap visualization displays the value and quantity of steel scrap imports and exports between regions and partner countries. Users can filter the data by region and toggle between Import and Export modes, with the ability to reset the view. The code uses D3 v7’s `d3.treemap`, `d3.hierarchy`, and `d3.scaleSequential` to create the layout and color scale, while SVG rectangles represent each country’s aggregated trade value. Hovering reveals a tooltip with the country name, value, and quantity, and clicking drills down for more detail.

Loading thumbnail…

Working all filters

This example shows a filterable data table that displays website assessment records across time periods. A dropdown menu lets the user select a frequency—Daily, Weekly, BiWeekly, or Monthly—which updates the table to show the latest 12 columns of data for that interval. The code uses D3.js v7 modules including `csv`, `select`, `group`, and a custom `menu` component built on `dispatch`. Data is loaded from a CSV file, then grouped by website name and sorted by date, with column headers dynamically generated based on the selected frequency.

Loading thumbnail…

Fork of filters changing the headers correctly

This interactive table visualizes assessment data, allowing users to filter by frequency (Daily, Weekly, BiWeekly, Monthly) via a custom menu. The table displays DPC website names as rows, with columns dynamically updating to show the 12 most recent time periods—dates, weeks, or month-year labels—depending on the selected frequency. Built with D3.js v7, the visualization uses `d3.csv` to fetch remote data and `d3.group` to structure entries. The menu component is custom-built with an `on` method that triggers table regeneration.

Loading thumbnail…

weekly filter try

This interactive table visualizes website assessment frequencies, filtering data by daily, weekly, bi-weekly, or monthly intervals via a custom dropdown menu. It dynamically displays the 12 most recent time periods as column headers, grouping rows alphabetically by DPC website. The visualization uses D3 v7 modules (`csv`, `select`, `group`) and a reusable menu component built with `dispatch`. Data originates from a remote CSV file hosted on GitHub Gist. HTML table elements are created and updated through D3’s data join methods.

Loading thumbnail…

filters changing the headers correctly

This interactive table filters pharmaceutical assessment data by frequency (Daily, Weekly, BiWeekly, Monthly) via a custom D3 menu. It displays a leaderboard of DPC websites, with columns dynamically updating to show the latest twelve time periods matching the selected frequency—dates, weeks, or month-year headers. Built with D3 v7, the code uses d3.csv for data loading, d3.group for aggregation, and custom menu and dispatch APIs to update table headers and cells reactively based on user input.

Loading thumbnail…

Table

A data table displays steel scrap prices for various DPC website names, showing the new price, prior price, and value change across the latest 12 year-month periods. Rows are grouped by publication name and sorted alphabetically, while columns are ordered chronologically with headers like "Dec19". The code uses d3.csv to load the data and d3.group to organize it, with d3.append building the table structure. Cell background colors encode the Change column using quartile-based thresholds, ranging from red for low values to green for high ones.

Loading thumbnail…

Fork of Fork of Table

This interactive D3.js v7 visualization displays a heatmap-style pricing table for DPC website names, comparing new price values against change percentages across time periods. The visualization includes a dropdown menu allowing users to filter data by assessment frequency (Daily, Weekly, BiWeekly, or Monthly), dynamically updating the table to show the 12 most recent time columns. The code utilizes D3's `csv` for data loading, `group` for data aggregation, and custom menu functionality with `dispatch` events. Data is filtered and sorted in descending chronological order, with color-coded cells indicating price changes.

Loading thumbnail…

Filtering Data Correctly

This example shows a data table of drug price changes across pharmaceutical companies, filtered by assessment frequency (Daily, Weekly, BiWeekly, Monthly) via a dropdown menu built with the d3.menu component. The table displays the 12 most recent year-month columns, with cell colors based on change-value quartiles computed from the data. It uses d3.csv to load the dataset and d3.group to aggregate rows by company name, with table elements created dynamically.

Loading thumbnail…

Fork of Table

This table visualization displays monthly price data for DPC websites, with columns representing the most recent twelve months and rows sorted alphabetically by website name. Cell background colors encode percentage changes using a diverging scale from red through orange to green, calculated from quartile thresholds of all change values. The page includes a frequency menu built with a custom d3.menu component, though it only logs selection changes to the console. The implementation uses d3.csv for data loading, d3.group for aggregation, and d3.select for DOM manipulation.

Loading thumbnail…

Fork of Table

This visualization presents a tabular heatmap of price changes across various DPC websites, organized by website name in rows and the most recent 12 year-month periods in columns. Each cell displays a numeric change value, with background colors encoding the magnitude of change: reds indicate lower values, oranges mark zero, and greens represent higher values, based on quartile thresholds. The table is built using D3 v7, loading CSV data with `d3.csv`, grouping rows with `d3.group`, and sorting year-month pairs in descending order.

Loading thumbnail…

Fork of Before refactoring Animating Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between petal and sepal measurements. The D3.js visualization renders 150 circles as SVG elements, with smooth 1000ms transitions animating position changes when axes are switched. Dynamic dropdown menus allow selection of different variables for the X and Y axes, while axes and labels update accordingly. The code uses d3.scaleLinear for scales, d3.axisLeft and d3.axisBottom for axes, and D3’s data join pattern with enter, update, and exit selections to manage circle animations.

Loading thumbnail…

Fork of Animating Scatter Plot with menus

This interactive scatter plot displays the classic Iris dataset, allowing the user to switch which of the four flower measurements (sepal and petal length and width) are mapped to the X and Y axes via dropdown menus. Built with D3 v7, it uses `scaleLinear` for axes, `transition` for animated point movement, and `axisLeft`/`axisBottom` for tick marks. A custom `menu` module manages the dropdowns, using `dispatch` to trigger updates that re-draw the SVG circles with a staggered delay.

Loading thumbnail…

Animating Scatter Plot with menus

This interactive scatter plot visualizes the Iris dataset, letting users dynamically choose which flower measurements to plot on each axis via dropdown menus. The visualization animates circle positions smoothly between states using D3 transitions with staggered delays. Built with D3 v7 in a React-compatible structure, the code leverages scaleLinear, axisBottom, axisLeft, and custom reusable menu and scatterPlot functions. SVG rendering displays all plotted points, with axis labels updating to reflect the selected measurement columns.

Loading thumbnail…

Before refactoring Animating Scatter Plot

An animated scatter plot visualizes the Iris dataset, cycling through different x-axis variables (petal width, sepal width, petal length, sepal length) every two seconds. The visualization uses D3 v7 with SVG rendering, employing `scaleLinear` for axes, `transition` for smooth circle movement and entrance animations, and a reusable scatter plot module. Data is loaded via `csv` from a GitHub gist, with numeric parsing applied to each row. The chart updates axes and labels dynamically as the x-value changes.

Loading thumbnail…

Animating Scatter Plot

This example cycles through the four measurement columns of the Iris dataset, animating a scatter plot’s x-axis every two seconds using a repeating interval. Implemented with D3 v7 and React, it leverages `scaleLinear`, `axisLeft`, `axisBottom`, and the `transition` API to smoothly interpolate circle positions over one second. Circles grow from radius zero on entry and shift with a staggered delay, while the x-axis label updates to match the currently plotted column. The visualization is rendered as an SVG with full-window dimensions, using D3’s selection join to manage entering, updating, and exiting elements.

Loading thumbnail…

Reusable Scatter Plot

A reusable scatter plot visualizes the Fisher Iris dataset, plotting sepal length on the y-axis against different flower measurements on the x-axis. Points cycle through petal_length, petal_width, sepal_width, and sepal_length every two seconds, updating the axis label and dot positions with animation. Built with React and D3 v7, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, and `join` to update SVG circles. The CSV data is loaded via `d3.csv` from a remote GitHub source.

Loading thumbnail…

Scatter Plot New

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. Each flower is drawn as a circle using D3 v7’s `select`, `append`, and `join` APIs, with scales created via `scaleLinear` and `extent`. The chart includes axis labels and scales, rendered as SVG. The plot uses d3’s `csv` loader to fetch remote data and includes axes from `axisBottom` and `axisLeft`.

Loading thumbnail…

Fork of Working Region Filter

This interactive treemap visualizes US steel scrap trade data, showing the relative monetary value of imports and exports by partner country within a selected region. Users can filter the view by region and toggle between import and export flows. The visualization uses a hierarchical treemap layout, rendered as SVG, with color intensity reflecting magnitude. Built with D3 v7, the code leverages `d3.hierarchy` and `d3.treemap` to structure and compute rectangle positions, while `d3.scaleSequential` drives the color mapping. Clicking a country cell initiates a drill-down, suggesting further exploration of commodity-level details.

Loading thumbnail…

Region Filter

This interactive treemap visualizes steel scrap trade values between the United States and its partner countries, filtered by import or export direction. Users can toggle between these flows and select a specific region, which aggregates data by partner country using d3.hierarchy from the CSV dataset. The visualization uses d3.treemap to layout cells, with a sequential color scale mapping value magnitude from lightblue to darkblue. Clicking a country cell drills down to reveal commodity-level details, while the reset button restores the aggregated country view.

Loading thumbnail…

Properly working radio button

This visualization displays the total value of steel scrap imports or exports for various countries, using a treemap where each rectangle represents a country and its area corresponds to the monetary value. Users toggle between Import and Export data via radio buttons, which filters the dataset and re-renders the treemap with a light-to-dark blue color scale. The visualization uses D3.js version 7 with the `d3.treemap`, `d3.hierarchy`, and `d3.scaleSequential` APIs to build the interactive SVG graphic, reading data from a CSV file. The code also includes a reset button to restore the initial view, though the drill-down behavior on rectangle click is only partially implemented.

Loading thumbnail…

Treemap Visualization

This treemap visualizes U.S. steel scrap trade values by partner country, with radio buttons to switch between Import and Export data. Each rectangle represents a country, sized and colored by total trade value, and clicking a cell drills down to show individual commodities. The visualization uses D3.js v7 with `d3.hierarchy`, `d3.treemap`, and `d3.scaleSequential` for color encoding, rendering SVG elements with interactive click handlers and animated updates. Data comes from a CSV file containing import/export records.

Loading thumbnail…

Format the text in the cell

This interactive treemap visualizes steel scrap import and export values across partner countries, with each cell representing a country sized by total trade value and colored by magnitude. Users can filter between import and export data via radio buttons or reset the view. Built with d3.v7, it uses d3.treemap for hierarchy layout, d3.scaleSequential for color interpolation, and d3.hierarchy for data processing. The visualization supports click-to-drill-down navigation into commodity details, with cells rendered as SVG groups containing rectangles and text labels.

Loading thumbnail…

Add buttons

This treemap visualizes U.S. steel scrap export values by partner country and commodity, using area size and a light-to-dark blue color scale to encode magnitude. Clicking a country drilils down to show individual commodity values, while a reset button restores the top-level view. The D3 v7 implementation uses d3.hierarchy, d3.treemap, and d3.scaleSequential with interpolateRgb, rendering SVG rectangles with transitions and tooltips via title elements. Data comes from a CSV file with partner country, commodity description, and value fields.

Loading thumbnail…

Fork of Fork of TreeMap with Tooltips and colors correctly

A treemap visualization displays steel scrap exports by partner country, with rectangles sized and colored by total export value. The view supports drill-down through country nodes to reveal commodity-level breakdowns, with tooltips showing exact values. The code uses d3.csv to load data, d3.hierarchy and d3.treemap for layout, and d3.scaleSequential for color encoding. Rendered in SVG with d3 transitions for updates, a reset button restores the initial country-level view.

Loading thumbnail…

Fork of Custom Color TreeMap

This interactive treemap visualizes steel scrap exports from the United States to various partner countries, with each colored rectangle representing a country and its total export value. The visualization uses d3.hierarchy and d3.treemap to compute the layout, with a sequential color scale interpolating from lightblue to darkblue based on value magnitude. Users can click any country cell to drill down into its commodity-level breakdown, while a reset button restores the original country-level view. The code employs D3 v7's data joins and transition methods to smoothly animate between hierarchy levels, with SVG rendering for all elements.

Loading thumbnail…

Fork of TreeMap with Tooltips and colors correctly

This interactive treemap visualizes steel scrap exports from various countries, showing total export values per country and their breakdown by commodity type. Users can click on a country cell to drill down into its specific commodity details, with a reset button to return to the top-level view. The visualization uses d3.hierarchy, d3.treemap, and d3.scaleSequential with an interpolateRgb color scale, rendering SVG elements with smooth transitions and tooltips for additional information. Data comes from a CSV file containing partner country, commodity description, and value columns.

Loading thumbnail…

TreeMap with Tooltips

This tree map displays US steel scrap exports by partner country and commodity type, with each rectangle sized according to trade value. The visualization supports drill-down interaction by clicking on a country to reveal its commodity breakdown, plus a reset button to return to the top level. Built with D3 v7, it uses `d3.hierarchy` and `d3.treemap` to compute the layout, renders SVG rectangles with native tooltips via the `title` element, and animates resizing through `transition`. Data comes from an external CSV file containing country, commodity, and value columns.

Loading thumbnail…

TreeMap with Tooltips and colors correctly

This treemap visualizes the total export values of steel scrap commodities by partner country, using a hierarchical layout where each country is a top-level branch and individual commodities become leaf cells. The diagram is initially aggregated to country level, but users can click any country cell to drill down and reveal its commodity breakdown, with a reset button to return to the overview. Cell size encodes total trade value, while color runs from light to dark blue via a sequential scale based on the maximum leaf value. The visualization is built with D3 v7, using `d3.hierarchy` for tree construction, `d3.treemap` for layout, and SVG transitions with 500-millisecond durations to animate changes between drill-down levels. Tooltips on each cell display either the country total or the commodity name and value, and text labels are wrapped to fit within each cell’s dimensions. Data is loaded from a CSV file containing partnerCountry, commodityDescription, and Value columns, representing U.S. steel scrap exports.

Loading thumbnail…

Custom Color TreeMap

This interactive treemap visualizes steel scrap exports by partner country and commodity type, using nested rectangles to emphasize trade value hierarchy. Users can click any country cell to drill down into detailed commodity breakdowns, with a reset button restoring the top-level view. Built with D3.js v7, the visualization employs the d3.treemap layout, d3.hierarchy for data structuring, and d3.scaleSequential with an interpolator for the light-to-dark blue color encoding. SVG rendering and 500ms transitions animate layout changes smoothly as the view hierarchy updates.

Loading thumbnail…

Custom Color TreeMap

A custom color TreeMap visualizes US steel scrap exports, showing the hierarchy of partner countries (Canada, India, South Korea, Mexico, Pakistan, Taiwan, Thailand, Turkey) and the value of each commodity shipped. The treemap uses nested rectangles sized by the total export value per country, with a dark blue to light blue sequential color scale encoding magnitude. The visualization, built with d3.treemap and d3.hierarchy, supports drill-down by clicking a country's cell to explore its commodity breakdown. A reset button restores the root view, and transitions animate changes when drilling down or resetting.

Loading thumbnail…

TreeMap with Tooltips

This interactive tree map visualizes the hierarchy of steel scrap imports by partner country and commodity type. The hierarchical data is aggregated and rendered as nested rectangles using the D3.js treemap layout algorithm. Each country cell is color-coded and labeled, and clicking a country drills down to reveal its constituent commodity categories. Tooltips display the country, commodity, and value on hover, while a reset button restores the original view. The dynamic updates and transitions are implemented using D3's `transition` API within an SVG-based rendering.

Loading thumbnail…

TreeMap Values Breaking

This interactive treemap visualizes steel scrap export values from various countries to different destinations. The size of each rectangular cell represents the total export value for a country, colored in a uniform green. Clicking a country cell drills down to show the breakdown of export values by specific commodity types, such as "Stainless Steel Waste And Scrap" and "Shredded Steel Scrap." The visualization uses D3.js v7 with the `d3.treemap`, `d3.hierarchy`, and transition animations to smoothly update the layout when drilling down or resetting.

Loading thumbnail…

TreeMap with a reset button to go back

This interactive D3.js treemap visualizes U.S. scrap metal export values by partner country and commodity, using an SVG rendering with clickable cells and animated transitions. The chart initially displays total export values per country as hierarchically sized rectangles, and clicking any country drills down to show its commodity-level breakdown. A reset button restores the view. The code uses `d3.csv` to load data, `d3.hierarchy` and `d3.treemap` for layout, and `transition()` for smooth updates, with data sourced from a CSV file.

Loading thumbnail…

Ordered Tree Map with Drill down working

This interactive treemap visualizes steel scrap export values by partner country, with each country’s total represented as a colored rectangle. Clicking a country drills down to display its individual commodity categories as sub-rectangles, sized proportionally to their monetary values. The chart uses D3 v7’s `d3.hierarchy`, `d3.treemap`, and SVG rendering, with click-driven drill-down updates and smooth `transition()` animations on rectangle dimensions and labels. Data is loaded from a CSV file containing partnerCountry, commodityDescription, and Value fields.

Loading thumbnail…

Tree Map with Drill down working

This tree map visualizes the value of steel scrap exports from various countries, with each top-level rectangle representing a partner country and its total export value. The chart uses D3 v7’s `d3.hierarchy` and `d3.treemap` layout to render the hierarchical data as SVG rectangles. Clicking a country cell drills down to display the commodity-level breakdown for that country, using `transition` for smooth animated updates of the rectangles and labels. The data is loaded from a CSV file containing partner country, commodity description, and export values.

Loading thumbnail…

Tree Map Example

This treemap visualizes steel scrap exports from partner countries, with each initial rectangle representing a country and its total export value. Clicking a country drills down to show a secondary treemap of that country’s commodity descriptions and their values. Built with D3 v7, the visualization uses `d3.hierarchy` and `d3.treemap` to compute the layout, rendering rectangles and labels as SVG elements. Data is loaded from a CSV file, and the drill-down interaction uses D3 transitions to animate the rectangle sizes and text updates over 500 milliseconds.

Loading thumbnail…

Tree Map Example

This interactive tree map visualizes the value of steel scrap exports from various countries, organized by destination country and then by specific commodity type. Each rectangle's area corresponds to the export value in dollars, providing a clear comparison of the trade volumes between categories. The visualization is rendered using the D3.js version 7 library, which constructs a hierarchical data structure from a CSV file and applies a treemap layout algorithm. The chart uses SVG for rendering rectangles and text labels, with the color palette consistently applying a single green tone to all nodes.

Loading thumbnail…

Fork of Treemap

This visualization shows a hierarchical treemap where rectangular tiles represent data categories, with size indicating their relative production values. The treemap displays five groups (grp1–grp7) nested under an origin node, each filled with a uniform teal color and labeled with white text. Built with D3 v6, the code uses `d3.stratify` to convert CSV data into a hierarchy, `d3.treemap` to compute tile positions, and SVG `rect` and `text` elements for rendering.

Loading thumbnail…

Fork of D3 Treemap

This example visualizes supermarket order data as a treemap, though the current implementation renders each data row as a fixed 50×50 cell in a diagonal layout rather than computing hierarchical rectangles. It loads CSV data via `d3.csv` and uses `d3.treemap()` for layout, though the layout result is not actually applied to the cells. The SVG output is appended to a `#treemap` div, with rectangles and text labels showing partner country names. The page uses D3 v7 and relies on dynamic window dimensions for the chart size.

Loading thumbnail…

D3 Treemap

This D3 Treemap visualizes hierarchical data by representing each leaf node as a rectangle, with size determined by the `Quantity` field and colored steelblue. It loads comma-separated data from a GitHub Gist using `d3.csv`, parses numeric columns, and applies the `d3.treemap` layout to compute tile positions. The SVG rendering appends grouped rectangles and text labels for each country, with cell dimensions derived from the layout's `x0`, `y0`, `x1`, and `y1` values.

Loading thumbnail…

Reusable Scatter Plot

This example plots the classic Iris dataset with petal length on the x-axis and sepal length on the y-axis. The d3.v7 code loads the CSV, parses numeric fields, and uses `scaleLinear` with `extent` to map data to screen coordinates. Circles are bound to the data, with axes generated via `axisLeft` and `axisBottom` within a margin-defined layout. The chart fills the browser window, rendering all points as simple SVG circles with a fixed radius.

Loading thumbnail…

D3 Selections

Fifteen yellow circles animate in a sine-wave pattern across a black canvas, with their vertical position, radius, and opacity oscillating over time. The visualization demonstrates declarative selection and joins in d3 v7.8.5's `select`, `range`, and `.join` methods within a React framework, rendering SVG elements and updating them on a 100-millisecond interval using `setInterval`. The code manipulates circle attributes such as `cx`, `cy`, `r`, `fill`, and `opacity` directly through chained `.attr` calls.

Loading thumbnail…

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt-style geometric artwork using overlapping horizontal and vertical striped rectangles, with a circular mask creating a central focal point. The horizontal bands rotate continuously via a CSS keyframe animation applied to the SVG elements. Built with D3.js, the code uses `select` and `range` to generate 100 rectangles in each direction, while two SVG masks (`circle-mask` and `circle-mask-2`) alternately reveal and hide the stripes, producing an inverted circular pattern at the center.

Loading thumbnail…

Untitled

The Brooklyn Agency displays a static team photo within a centered container, using an HTML image element styled by a minimal CSS reset. The page header introduces the agency name, while the JavaScript loops through an array of two image filenames (one of which is a typo) and appends their raw text strings to the container’s innerHTML, resulting in broken image references rather than functioning visuals. The example relies on basic DOM manipulation via `document.getElementById` and `innerHTML`, with no external charting or data-visualization libraries, and the rendering approach is purely static HTML/CSS.

Loading thumbnail…

Chrome Extention

This example shows a simple Chrome extension for saving user-entered text leads into a list. The interface uses an input field and a “SAVE INPUT” button, with saved entries rendered as clickable links in an unordered list. The code uses plain JavaScript event listeners and DOM manipulation, including `getElementById` and `innerHTML`, to update the display dynamically. It relies on HTML, CSS, and JavaScript only, without external libraries, and does not persist data beyond the current session.

Loading thumbnail…

Untitled

Two horizontal shelves, one colored lightcoral and the other light salmon, sit centered on a plain background. The example demonstrates a simple DOM manipulation task: a JavaScript array of five empty strings is iterated with a `for` loop and a conditional statement. The code checks each fruit value and appends it to either the `#apple-shelf` or `#orange-shelf` div using the `textContent` property, though the empty strings render no visible text. The visualization uses vanilla HTML, CSS, and JavaScript, with no external charting libraries.

Loading thumbnail…

Blackjack Game

This example presents a browser-based Blackjack card game with a dark green casino-style interface. The page displays the player’s current cards, their sum, and a status message that guides the game flow. Users start a round and draw new cards via buttons, while JavaScript manages the deck logic, including random card values, a simple Blackjack win condition, and a track of the player’s chips. The interface is built with plain HTML, CSS, and vanilla JavaScript, using DOM methods like `getElementById` and browser-native event handlers.

Loading thumbnail…

Basic Calculator Practice JS

This example shows a minimal web-based calculator that performs addition, subtraction, division, and multiplication on two fixed numbers (8 and 2). The interface displays those operands alongside four operation buttons and a result area. JavaScript event handlers assigned via inline `onclick` attributes in the HTML call the corresponding functions, which directly update the text content of the `sum-el` element. The demo relies on raw DOM manipulation through `document.getElementById` and `textContent`, with styling provided by plain CSS.

Loading thumbnail…

People Counting App

This example shows a manual passenger-counting interface with a large numeric display, an INCREMENT button, and a SAVE button. The app tracks how many people have entered and logs previous entries in a running text string. Using plain JavaScript functions (`increment()` and `save()`), it updates the displayed count via `textContent` and resets the counter after each save. The visual design relies on CSS background styling with `background-image` and `background-size`, while the interface itself is built from static HTML buttons and headings without any external charting or data libraries.

Loading thumbnail…

adding zoom button to the graph

This example shows a time-series line chart of average closing prices, filtered by product through a dropdown menu. The visualization uses React with D3 v5 scales (`scaleTime`, `scaleLinear`) and axis components, rendering an SVG path via `d3.line` with `curveNatural`. Data loads asynchronously from a CSV URL using `d3.csv`, with the y-axis domain recalculated from the filtered dataset. Hover tooltips are commented out, leaving only the dropdown-driven product selection as the interactive element.

Loading thumbnail…

Making more modification to the line chart

This line chart displays the average closing price of a product over time, with a dropdown menu to filter the data by product. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for the axes, and `line()` with `curveNatural` to draw a smooth path. The chart reads from a CSV file, and the interactive filter updates the y-scale and line to reflect the selected product's data.

Loading thumbnail…

Working filters of Line Chart

This line chart displays average closing prices over time, with a dropdown menu to filter the data by product category. The visualization uses React state management to handle the product selection and dynamically update the filtered dataset. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, and `line().curve(curveNatural)` to render the SVG path, while the data is loaded from a CSV file using `d3.csv`.

Loading thumbnail…

Polished Scatterplot with Menus

This interactive scatterplot displays the Iris dataset, letting users choose which measurements (sepal length, sepal width, petal length, petal width, or species) to plot on the X and Y axes via dropdown menus. The SVG rendering uses React components, with D3 v5’s `scaleLinear` for axes, `extent` for data domains, and `csv` to load the data from a remote URL. Polished styling includes tick marks, axis labels, and tooltips showing formatted values on hover.

Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris Dataset displays sepal length against sepal width, with points colored by species via a categorical scale. Hovering over the color legend highlights that species' points while fading others to 20% opacity. The visualization uses React with d3-scale for linear and ordinal scales, rendering SVG circles and axes with custom components. Data loads from a CSV via d3.csv, and interactivity relies on React state for hovered values.

Loading thumbnail…

Polished Scatterplot with Menus

This scatterplot shows the average closing price of a product over time, with a smooth curve connecting data points. The visualization uses React to render SVG elements, with D3 scales and axes handling the temporal x-axis and linear y-axis. The chart pulls data from a CSV file via d3.csv, formats dates using timeFormat, and renders a natural curve through the line generator. The interface includes dropdown menus for filtering, though the main view emphasizes the polished, minimalist styling of the axis ticks and labels.

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes the Iris Dataset, showing sepal length against sepal width for three iris species. Each point is color-coded by species using a d3.scaleOrdinal, with a custom legend displaying the color mapping. The visualization uses React with D3 scales and axes (d3.scaleLinear, d3.axisBottom, d3.axisLeft) rendered as SVG elements. Hovering reveals a tooltip via SVG `<title>` elements, and the data is loaded asynchronously with d3.csv.

Loading thumbnail…

Scatter Plot with colors

This scatter plot displays the Iris dataset, showing sepal length on the x-axis and sepal width on the y-axis, with each species (Setosa, Versicolor, and Virginica) represented by a distinct color. The visualization uses d3.scaleLinear for both axes and d3.scaleOrdinal to map variety categories to a categorical color palette. React manages the component state and rendering, while d3.csv loads the remote dataset and d3.extent determines the axis domains. SVG circles are drawn with tooltips that display formatted x-values when hovered.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to select which flower attributes appear on the x- and y-axes via dropdown menus. It renders each observation as a circle using React with SVG, positioning points through d3.scaleLinear and d3.extent. The visualization updates dynamically when the user changes the selected attributes, with corresponding axis labels and tick marks generated by custom AxisBottom and AxisLeft components.

Loading thumbnail…

Menus with React

This example demonstrates a pet selector menu built with React, showing how a dropdown component manages state and user interaction. The interface displays a "Choose a pet" label alongside a dropdown menu containing six animal options, with a hamster preselected. The code uses React's `useState` hook to track the selected value, and ReactDOM to render the application to the page. The `Dropdown.js` component accepts options, an ID, and a selection handler, triggering state updates via the `onSelectedValueChange` callback.

Loading thumbnail…

React Starter

This example demonstrates a minimal React application that renders the text “Hello React” in a browser window. The code uses React and ReactDOM from the UMD production builds, creating an `App` component that returns a simple JSX `<div>`. The `ReactDOM.render` method targets the `root` element in the HTML document. The page includes a global CSS reset with no margin or overflow, providing a clean, full-screen canvas for the output.

Loading thumbnail…

World Map

This visualization displays a natural Earth projection of the world map, showing land masses in teal, graticule lines, and country borders. It uses React with D3 v5's geoNaturalEarth1 projection and geoPath to render SVG paths from TopoJSON data loaded from the world-atlas dataset. The code separates land features from interior boundaries using topojson's feature and mesh functions, with distinct CSS styling applied to spheres, graticules, land, and interior paths.

Loading thumbnail…

Line Chart

This line chart displays closing values over time, using a smooth natural curve to connect data points. The chart renders as an SVG with React components, leveraging D3 v5 functions including `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` for scales and axes. Data is loaded asynchronously from a CSV file via `d3.csv` and parsed into Date objects. The visualization includes labeled x and y axes with tick marks, while the line itself uses a teal stroke with rounded joins, omitting point markers as indicated in the commented-out circle elements.

Loading thumbnail…

Working With Time

A scatterplot shows daily closing values over time, with each point marking a date and its corresponding price. The chart uses a time-scaled x-axis with abbreviated weekday labels and a linear y-axis for values. Built with React and D3 v5, the visualization loads CSV data via `d3.csv`, scales positions with `d3.scaleTime` and `d3.scaleLinear`, and renders SVG circles with native `<title>` tooltips. Axes are custom React components using D3's tick generation.

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, showing the relationship between sepal length and sepal width for individual iris flowers. The plot encodes each flower as a circle, with its horizontal position determined by sepal length and vertical position by sepal width, using the same data loading and rendering approach as other examples in the gallery. Built with React and D3.v5, the visualization uses `d3.csv` to load remote data, `d3.scaleLinear` for axis scaling, and renders axes and circle marks as SVG elements. The code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components to handle tick marks, labels, and data points, with styling applied through CSS classes.

Loading thumbnail…

Stylish Bar Chart with real data

A horizontal bar chart displays the closing values for ten product categories, sorted with the largest values at the top. The chart uses React to render SVG elements, with D3 v5 scales (`scaleBand`, `scaleLinear`) and formatting utilities (`format`) to position bars and axes, while CSV data is loaded asynchronously via `d3.csv`. Native SVG `<title>` elements provide tooltips, and the bottom axis labels shorten large numbers (e.g., "B" for billions).

Loading thumbnail…

Refactored Bar Chart with real data

This example displays a horizontal bar chart of closing values for ten products, using data loaded from a CSV file. Built with React and rendered as SVG, it partitions the visualization into modular components: the `AxisBottom` and `AxisLeft` handle ticks and labels, while `Marks` draws each rectangle. D3’s `scaleBand` and `scaleLinear` map the categorical and numeric fields, and dimensions are scaled relative to a fixed margin. The chart loads real data via D3’s `csv` method, demonstrating a reusable, refactored structure.

Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart of product closing values, with axes generated using React components and D3 scales. It loads CSV data via `d3.csv`, converts the Closing field to numbers, and slices the dataset to ten rows. The chart uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and manually renders tick marks and labels with SVG elements, while React’s `useState` and `useEffect` manage the asynchronous data fetching and state updates.

Loading thumbnail…

The Margin Convention

This example demonstrates a bar chart of stock closing prices using the margin convention, where a React component manages the loaded CSV data via `useState` and `useEffect`. The chart maps product names to a `d3.scaleBand` y-axis and closing values to a `d3.scaleLinear` x-axis, rendering SVG rectangles. Data is fetched asynchronously with `d3.csv` and limited to the first ten rows. A fixed margin of 20 pixels on each side defines the inner plotting area, with axes translated to that offset.

Loading thumbnail…

Creating a Bar Chart with real data

This example displays a horizontal bar chart of product closing values, using real CSV data loaded from a GitHub gist. The visualization maps each product name to a band scale on the y-axis and its closing integer to a linear scale on the x-axis, rendering rectangles as bars. React state manages the fetched data via `useState` and `useEffect`, while D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` utilities handle data parsing and scaling. The chart is drawn as an SVG, with the first ten rows of the dataset shown.

Loading thumbnail…

Line Chart from CSV with Plotly

This example shows an interactive line chart that displays the sum of closing values per day from a CSV file, with date range filtering via input fields. Users can select a from-date and to-date, and click an update button to zoom the x-axis accordingly. The visualization uses Plotly’s `newPlot` and `relayout` methods to render and update the scatter trace with lines and markers, while fetching and parsing the CSV data using the Fetch API. Default date inputs are automatically set to the first and last dates in the dataset.

Loading thumbnail…

Basic line chart using CSV

This example shows a basic line chart that plots time against closing values from a CSV file. It fetches remote CSV data, parses the rows, and maps the designated `time` and `Closing` columns to the x- and y-axes. The chart renders as a scatter trace with both lines and markers using Plotly’s `Plotly.newPlot` into a `div`. The code uses the Fetch API to load the CSV and manually splits rows and headers for column lookup.

Loading thumbnail…

Line Chart from CSV with Plotly

This example shows a line chart with markers, plotting time on the x-axis against closing values on the y-axis. It uses Plotly’s `newPlot` to render the scatter trace into an HTML div. Data is fetched from a remote CSV file using the Fetch API, then parsed manually by splitting rows and commas into an array. Column indices are mapped from headers, allowing x and y series to be extracted by name. The page loads Plotly from a CDN and logs headers and parsed data to the console for debugging.

Loading thumbnail…

Loading and Parsing CSV Data

This example displays the dimensions of a CSV dataset directly in the browser as large, simple text. The program fetches a remote CSV file from a GitHub Gist and uses D3 v7’s `d3.csv` method to asynchronously load and parse the data, then reports the total number of rows and columns. The parsed array is also logged to the console for inspection, while the visible output updates a `<pre>` element’s content with the count.

Loading thumbnail…

Rendering Data with React & D3

This example shows a pie chart built with React and D3, where the chart’s wedges are generated from data loaded from a remote CSV file. The app first fetches the CSV using D3’s `csv` utility, then maps each row to a `<path>` element rendered by React, with each wedge’s fill color taken from the `RGB hex value` column. The SVG is sized at 166 by 166, and the arc is defined using D3’s `arc` function with a half-circle angle range, while the page substitutes a "Loading..." message until the data arrives.

Loading thumbnail…

Loading data with React and D3

This example demonstrates how to load and summarize a remote CSV dataset using React state and D3 utilities. It fetches data from a GitHub gist via `d3.csv`, displays a loading message while the data is pending, and renders the file size in kilobytes, row count, and column count using `d3.csvFormat`. The visualization is a simple SVG-free text output, with React managing the asynchronous data flow through `useState` and `useEffect`, while D3 v7 handles the CSV parsing and formatting.

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor inside a fixed-size SVG canvas, with its position updating in real time as the pointer moves. The React component uses the `useState` hook to store the cursor coordinates and the `useCallback` hook to handle the `onMouseMove` event, updating the circle's `cx` and `cy` attributes. The visualization is rendered with React and ReactDOM, using an SVG `<circle>` element. No external data source is used; the interaction is driven entirely by browser mouse events.

Loading thumbnail…

Completed Version of Simley Faces

The completed smiley faces example displays a 5-by-3 grid of yellow, black-bordered faces, each with two eyes and a mouth. The React application renders each face using a reusable `Face` component that composes SVG circles and a D3 arc path for the smile. Eye and mouth radii vary randomly per face, while the `d3.range` function generates the grid layout from the v3 source.