richardcorreia@my.unt.edu

@rrjjbbccorreia·14 public vizzes

RC 007 Fork of Tree

This example shows a hierarchical tree of German Shepherd information, with layered shapes—circles, rectangles, polygons, and paths—representing nodes for categories like scientific classification, characteristics, and health concerns. Built with D3 v7, it uses `d3.stratify()` to construct the hierarchy from flat data and renders it as an SVG tree with links and node labels. The code applies custom node selectors for styling shapes and uses a viewBox for responsive scaling, with the chart’s data hardcoded in the script.

Nov 2, 2025

Loading thumbnail…

RC 007 Fork of Network

This force-directed graph maps the U.S. electrical grid, showing three interconnections, six generation types, and five independent system operators linked by transfer capacity. Nodes are positioned using physics-based simulation, while link thickness encodes capacity in gigawatts and node color distinguishes type. The network is built with D3.js v7, using the `d3.forceSimulation` API on an SVG canvas, and supports interactive node dragging for exploration. Metadata indicates the layout derives from a v3 source file, with styling applied via CSS for node strokes and label typography.

Oct 31, 2025

Loading thumbnail…

RC 007 Fork of Map

This example presents two synchronized SVG maps: a world map colored by 2022 population data and a zoomed view of Portugal. It uses D3 v7 with the `d3.geoNaturalEarth1` projection, `d3.geoPath`, and `d3.geoGraticule` to render country boundaries and graticules from world-atlas TopoJSON. Population values from a CSV drive a sequential blue color scale, and hovering over a country triggers a tooltip showing its name and population.

Oct 31, 2025

Loading thumbnail…

RC 007 Bar Chart of stock data with shading

This bar chart displays Amazon (AMZN) stock price and trading volume over time, with a light gray shaded area beneath the orange price line to emphasize the closing price trend. The visualization combines a time-scaled x-axis with dual y-axes: price on the left and volume on the right, using steelblue bars for volume. Built with D3 v7, the code parses CSV data via `d3.csvParse`, scales with `d3.scaleTime` and `d3.scaleLinear`, and renders SVG elements including axes, grid lines, bars, and an area path.

Oct 26, 2025

Loading thumbnail…

Fork of RC 007 Bar Chart of stock data

This fork of the Observable bar chart shows Amazon (AMZN) stock price and trading volume on a dual-axis, zoomable SVG chart. The visualization combines a steelblue volume bar series with an orange price line, plus a final price point marker and an interactive data table. It uses d3.csvParse to load data from a gist, then d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.axisRight to render the axes and grid lines.

Oct 26, 2025

Loading thumbnail…

RC 007 Bar Chart of stock data

This example combines a time-series price line with volume bars to chart Amazon (AMZN) stock data. The orange close-price line uses d3.line, while semi-transparent steelblue rectangles represent trading volume against a separate right axis. Both axes are rendered with d3.axisBottom and d3.axisRight, and the chart includes dashed grid lines. Data loads from a remote CSV via the AllOrigins proxy and parses with d3.csvParse, then displays a preview table and loading message below the SVG.

Oct 26, 2025

Loading thumbnail…

RC 007 Stock Price

This example visualizes AMZN stock price and volume with a dual-axis chart. An orange line shows closing prices over time, while semi-transparent steelblue bars represent trading volume on a separate right-hand scale. The visualization uses D3 v7 with SVG rendering, employing `d3.csv` to load stock data, `d3.scaleUtc` for time axes, `d3.scaleLinear` for the two value axes, and `d3.zoom` for interactive panning and zooming. A hover tooltip displays date, price, and volume details for individual data points.

Oct 25, 2025

Loading thumbnail…

RC 007 pie chart

This visualization presents the latest quarter’s data on durable versus nondurable goods as two animated pie charts. Each slice’s size reflects its value, with labeled connector lines and tooltips showing exact figures and percentages. Built with D3 v7, the code uses `d3.pie`, `d3.arc`, and color scales from `d3.scaleOrdinal` to render and update the SVG paths, polyline labels, and animated transitions.

Oct 24, 2025

Loading thumbnail…

RC 007 Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes quarterly changes in GDP, personal consumption expenditures, and residential investment, with animated cycling through Iris dataset attributes. The implementation uses d3.v7 with SVG rendering, scaling points along linear axes for petal and sepal measurements. The chart includes a legend, axis labels, and interactive tooltips that display category, quarter, and percentage values on mousemove events. The animation employs setInterval to rotate x-axis values through different Iris columns, demonstrating the reusable scatterPlot function's flexibility.

Oct 24, 2025

Loading thumbnail…

RC page2.html

This interactive chart compares quarterly revenue and net income for companies in a financial ratios dataset. Users can filter by company via a dropdown menu and use zoom and pan controls to explore the data. The visualization combines orange bars for revenue with a dark green line and dots for net income, using dual y-axes. Built with D3.js v7, it renders SVG elements with animation, includes tooltips on hover, and loads CSV data from a GitHub gist.

Oct 19, 2025

Loading thumbnail…

RC UNT Fork of Stylised Bar chart

This example visualizes quarterly financial ratios, displaying asset turnover as a bar chart where each bar is a sequence of quarterly dates, with gross margin and net income to revenue ratios appearing as red dots in a scatter plot. The controls allow filtering by company name and resetting zoom. The visualization uses D3.js v7 with SVG rendering and axes, and it includes zoom behaviors and hover tooltips for interaction. Data comes from a CSV file hosted on GitHub Gist, and the code is implemented in React.

Oct 19, 2025

Loading thumbnail…

Fork of RC UNT Fork of Stylised Bar chart

This interactive React dashboard visualizes financial ratios by combining a bar chart of asset turnover with a tooltip-driven interface. Data is loaded via `d3.csv` from a GitHub gist containing quarterly financial ratios. Users can filter by company using a dropdown menu and reset zoom on both charts. The bar chart uses `d3.axisBottom`, `d3.axisLeft`, and `scaleLinear` for positioning, with hover effects changing bar color. A second scatter plot appears to be included but is initialized without visible rendering logic in the provided code.

Oct 17, 2025

Loading thumbnail…

ICE5 RC

This example demonstrates a financial data visualization tool that loads CSV data and displays a summary of row and column counts in a styled message container. Users can look up stock symbols, triggering an interactive line chart showing six months of price data, alongside a formatted preview table of the first ten CSV rows. The code relies on D3 v7 for all data processing and rendering, using `d3.csv` for parsing, `d3.select` for DOM manipulation, and SVG axes for the chart. Data originates from Stooq's daily CSV API accessed through an AllOrigins proxy.

Oct 3, 2025

Loading thumbnail…

Fork of Smiley Face Part III

A full-window SVG smiley face is drawn with a yellow circle, two black eyes, and a mouth created using D3's `arc` path generator. The React component computes the layout from `window.innerWidth` and `window.innerHeight`, centering the face and scaling the head radius based on viewport height. D3 v7's `arc()` is used to define the mouth with a specified inner radius, width, and angular range, while React 16.9 renders the SVG elements declaratively. The visualization adapts to the browser window size and uses a minimal, static composition.

Sep 26, 2025