R

ronnieferrufino4908@gmail.com

@RonnieF49·27 public vizzes

Loading thumbnail…

Final Project Criminality Line Graph

This line chart displays arrests based on criminality by fiscal year, comparing convicted criminals and non-criminals from 2010 to 2025. The red line represents convicted criminals, while the blue line tracks non-criminals, revealing divergent trends over time. The visualization uses D3.js APIs including `d3.csv`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom` to load data from the CriminalityLineChart.csv file, scale axes, and generate the SVG paths. Hoverable points and a legend enhance interactivity, while the animated SVG rendering context supports dynamic exploration.

Loading thumbnail…

Final Project ICE Arrests Line Graph

This animated line chart shows the number of U.S. Immigration and Customs Enforcement (ICE) arrests by fiscal year from 2010 to 2025. The graph displays a steel-blue line that draws itself across the chart, followed by data points appearing sequentially. The visualization uses D3.js to load CSV data from `LineGraphDataSet.csv` and renders it as an SVG. The drawing effect is achieved using the `stroke-dasharray` and `stroke-dashoffset` properties, while the points animate in with a delayed transition.

Loading thumbnail…

Final Project PCP Graph

This parallel coordinates plot visualizes ICE arrest data from fiscal years 2014 onward, with each line representing a year across five dimensions: total quantity, border arrests, interior arrests, convicted criminals, and non-criminals. The D3.js v7 code uses `d3.scaleLinear` for each axis and `d3.scalePoint` for horizontal positioning, with a color ordinal scale distinguishing years. SVG rendering displays the axes and semi-transparent polylines, while an interactive legend allows highlighting specific years through hover behavior. The data is loaded from an external CSV file using `d3.csv`.

Loading thumbnail…

Final Project 2024 ICE Arrests TreeMap

This tree map visualizes ICE arrest quantities across 24 areas of responsibility for Fiscal Year 2024, with each rectangle sized by arrest count and colored on a dark-blue-to-teal scale where darker shades indicate higher totals. The visualization is rendered as an SVG using the D3.js library, specifically leveraging `d3.hierarchy`, `d3.treemap`, and a sequential color scale with a custom interpolator. Hovering over a tile reveals a tooltip with the exact quantities. The data is loaded from a CSV file (`TreeMapDataSet.csv`) containing fiscal year, area, and quantity fields, and the layout sorts the largest arrest areas first for quick comparison.

Loading thumbnail…

Final Project PCP Graph

A parallel coordinates plot visualizes U.S. border and interior arrest data from 2014 to 2025, with each colored line representing a fiscal year across axes for total quantity, border arrests, interior arrests, convicted criminals, and non-criminals. Built with D3.js v7, the SVG renders axes and polylines colored via a categorical scale, supporting interactive hover and legend-click highlighting through d3.select and event listeners. The dataset, loaded via d3.csv, filters out earlier incomplete years, and the tooltips highlight individual year trajectories without altering the underlying scale.

Loading thumbnail…

Final Project 2024 ICE Arrests TreeMap

This interactive tree map visualizes U.S. Immigration and Customs Enforcement (ICE) arrest quantities by area of responsibility for the fiscal year 2024, using a dataset that includes geographic locations and numerical values. SVG rectangles are sized proportionally to arrest counts and colored via a blue-to-green interpolated scale, with hover tooltips displaying exact figures. The visualization is built with D3.js, leveraging its `d3.treemap()`, `d3.hierarchy()`, and `d3.scaleOrdinal()` APIs to compute layout and styling, while a smooth transition and animation enhance the rendering. Data is loaded from a CSV file and filtered for the target year.

Loading thumbnail…

A10 - White Hat Visualization

This line chart visualizes global greenhouse gas emissions from 1990 to 2021 for five major sectors—electricity and heat, transportation, manufacturing, agriculture, and other fuel combustion. Using D3 v7, it plots filtered data points every five years from the CSV data, with an SVG rendering and animated hover tooltips. The chart applies a categorical color scheme via `d3.scaleOrdinal` and formats large emission values in billions.

Loading thumbnail…

A9: D3 Proportional Symbol Map

This proportional symbol map shows the relative cost of living across US states using colored circles sized by each state’s cost index, with tooltips on hover. The visualization loads US state boundaries from a TopoJSON file via `d3.json` and `topojson.feature`, then plots the CSV data points using `d3.geoAlbersUsa` and `d3.geoPath`. Circle radius and fill color are scaled with `d3.scaleSqrt` and `d3.scaleLinear`, respectively. It uses D3 v7 with SVG rendering, a color legend, and animated opacity and stroke transitions for interactive highlighting.

Loading thumbnail…

A9: D3 Choropleth Map

This choropleth map visualizes county-level poverty population data for 2023 across the United States. It uses a quantile color scale with six classes from light pink to dark red to show the distribution of poverty counts. Built with D3.js and TopoJSON, the map renders county boundaries as SVG paths using `d3.geoPath`, and includes interactive tooltips that display county names and data values on hover. The data is loaded from a local CSV file and joined to geographic features by FIPS codes.

Loading thumbnail…

A8 - Node Link Diagram

This interactive force-directed network visualization displays 100 nodes and 300 weighted links with their distances. It uses D3.js v7's `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to simulate physics-based layouts, with draggable nodes via `d3.drag`. Nodes are rendered as SVG circles with tooltips, and links as lines whose opacity reflects connection strength.

Loading thumbnail…

A8 - Adjacency Matrix

This adjacency matrix visualizes a network of 100 nodes using a grid where blue cells indicate connections between source and target nodes. Built with D3.js v7, the code loads edge data from a CSV file and uses a Map with Set collections to store connection pairs. Each cell is rendered as an SVG rectangle, with fill color determined by whether a connection exists between the corresponding row and column nodes. Row and column labels are added as rotated text elements, with nodes sorted by ID for consistent layout.

Loading thumbnail…

A8 - Adjacency Matrix

This visualization shows a static message placeholder rather than a functional data display. The single HTML file renders the fixed text “Hello HTML!” centered on the page using standard CSS styling with a large font size. The example relies on basic HTML structure and inline style rules, with no JavaScript libraries, data sources, or interactive behaviors implemented. As presented, it serves only as a minimal starter template, demonstrating no adjacency matrix visualization or data-driven rendering despite the title.

Loading thumbnail…

A8 - Node Link Diagram

This example renders a static HTML page with a large, centered message reading “Hello HTML!” using plain HTML and CSS. It does not include any data visualization, JavaScript libraries, or interactive elements. The page consists solely of a styled `<div>` element with a font size set to 13em, demonstrating a minimal HTML starter template rather than a node-link diagram. No external APIs, rendering techniques, or data sources are present in the provided code.

Loading thumbnail…

A8 - Node Link Diagram

This example renders a static HTML page with a large, centered message reading “Hello HTML!” using plain HTML and CSS. It does not include any data visualization, JavaScript libraries, or interactive elements. The page consists solely of a styled `<div>` element with a font size set to 13em, demonstrating a minimal HTML starter template rather than a node-link diagram. No external APIs, rendering techniques, or data sources are present in the provided code.

Loading thumbnail…

A8 - Node Link Diagram

This example renders a static HTML page with a large, centered message reading “Hello HTML!” using plain HTML and CSS. It does not include any data visualization, JavaScript libraries, or interactive elements. The page consists solely of a styled `<div>` element with a font size set to 13em, demonstrating a minimal HTML starter template rather than a node-link diagram. No external APIs, rendering techniques, or data sources are present in the provided code.

Loading thumbnail…

A7 - HeatMap

This heatmap visualizes the yearly count of delayed flights for four airports (IAD, DCA, SFO, LAX) from 2003 to 2016, with darker blue cells indicating higher delay totals. The visualization uses d3.csv to load the data, d3.scaleBand for the year and airport axes, and a d3.scaleSequential with d3.interpolateBlues for color encoding. A custom tooltip shows exact values on hover, and the d3.legend library adds a color legend. The SVG rendering includes axis labels and a title, with 2016 showing a dramatic drop in recorded delays across all airports.

Loading thumbnail…

A7 - HeatMap

This example shows a minimal “Hello World” visualization rendered as centered text inside a container DIV. The code uses a hardcoded font size value of 217 pixels, displayed via a template literal that sets the inline `font-size` style. It demonstrates the VizHub V3 runtime’s entry point structure, where the exported `main` function receives the container element and writes HTML directly into it. The rendering relies entirely on standard DOM manipulation and inline styles, with no external libraries or data sources.

Loading thumbnail…

A7 - Multi Line Chart

This multi-line chart displays the yearly number of delayed flights for four airports—IAD, DCA, SFO, and LAX—from 2003 to 2016. It uses `d3.csv` to load the data, `d3.scaleLinear` for the x and y axes, and a `d3.line` generator to draw each line. The code groups data by `Airport.Code` with `d3.group`, colors lines via a `d3.scaleOrdinal`, and renders an SVG with an axis, title, and a `d3.legendColor` legend. Y-axis values reach up to roughly 52,000 delayed flights per year.

Loading thumbnail…

A7 Multiple Line Time Scale

This example demonstrates a minimal starter template for the VizHub V3 runtime, rendering the text “Hello World!” at a large, fixed font size. It shows how the entry point works by exporting a `main` function that receives a container DIV and writes HTML directly into it using `innerHTML`. The code highlights the interactive widget system, where holding the Alt key while dragging the numeric `fontSize` variable enables real-time editing. No external libraries are used; only plain JavaScript and CSS within the injected HTML string.

Loading thumbnail…

A6: Diverging Bar Chart

This example shows the number of delayed flights for 29 major U.S. airports, sorted from most to least delays, with each bar colored on a diverging purple-orange scale centered on the median value. The visualization uses d3.csv to load the data and d3.scaleBand, d3.scaleLinear, and d3.scaleSequential with the interpolatePuOr interpolator to map delays to bar height and color. Bars are rendered as SVG rect elements, and a color legend is generated via the d3-legend library’s legendColor function, with axes and labels added using d3.axisBottom and d3.axisLeft.

Loading thumbnail…

A6: Sequential Bar Chart

This example shows the number of delayed flights for each US airport, with bars colored on a blue sequential scale to highlight the magnitude of delays. A vertical bar chart plots airport codes on the x-axis and delayed flight counts on the y-axis, with higher values rendered in darker blues. The visualization is built with D3 v6, using `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the numeric range, and `d3.scaleSequential` with `d3.interpolateBlues` for color encoding. Data is loaded from a CSV file via `d3.csv`, and a color legend is added using the `d3-legend` library with threshold labels.

Loading thumbnail…

A4 - Boxplot in D3

This example visualizes the distribution of year values from flight data using a boxplot rendered with D3.js. It computes quartiles, median, and whisker bounds from the Time.Year column of the flightsData.csv dataset. The SVG chart displays a box with whiskers and labels for min, Q1, median, Q3, and max, using D3 scales and axes to position elements along a linear year axis.

Loading thumbnail…

A4 - Scatter Plot in D3

This example visualizes the total number of flights per year from 2003 to 2016 as a scatter plot, where each point represents the total flights for a particular year. The visualization uses D3.js version 7 to render circles on an SVG canvas, with the x-axis mapping years using `d3.scaleBand()` and the y-axis using a linear scale via `d3.scaleLinear()`. Data is loaded from a CSV file using `d3.csv()`, with axes and labels created through `d3.axisBottom()` and `d3.axisLeft()`. The code originates from a VizHub v3 project that supports interactive widgets and continuous hot reloading.

Loading thumbnail…

A4 - Bar Chart in D3

This bar chart displays the total number of flights per year from 2003 to 2016, using data from a CSV file. It renders as an SVG with D3.js v7, employing `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The chart includes labeled axes for "Year" and "Total Flights," with steelblue bars representing the aggregated yearly flight counts.

Loading thumbnail…

Assignment 2 Bar Graph

This bar graph visualizes the total number of flights per year from 2003 to 2016 using data pulled from a CSV file. The p5.js `loadTable` function loads the data, and the draw loop renders each year as a blue rectangle, with y-axis scaling and gridlines. Year labels are rotated 45 degrees, and axes are labeled “Total Flights by Year” and “Number of Flights.”

Loading thumbnail…

P5 CSV Loader

This example uses p5.js to load and visualize a CSV file of car specifications from a GitHub gist. The sketch’s `preload()` function calls `loadTable()` to fetch the data, and the `draw()` loop reads the “economy (mpg)” column with `getColumn()` to render a horizontal bar chart, with each bar’s length scaled by the fuel efficiency value. The visualization emphasizes a straightforward, procedural approach to displaying tabular data on an 800×800 canvas.

Loading thumbnail…

Snowman in P5

This example shows a snowman built from three overlapping circles on a dark canvas, with facial details drawn using P5.js primitives. The static scene includes filled eyes, a triangular orange nose, and a curved arc for a smile, rendered through the p5.js `setup()` and `draw()` functions. The code uses `createCanvas(600, 600)` and draws with `circle()`, `arc()`, and `triangle()` calls, setting fill colors via `fill()` and using `noFill()` for the smile outline. The background is set to a light gray value within the drawing loop.