Reyden Harris

@ReydenHarrisPy·22 public vizzes

ICE8 - Social Network Graph

A social network graph displays eight people as green circular nodes connected by nine directed links, with thicker lines indicating stronger friendship values. The network layout is computed using d3.forceSimulation with link distance, charge, collision, and centering forces on an SVG canvas. Nodes are draggable via d3.drag, and hovering highlights a node with a green stroke class toggled by mouseover and mouseout events. The data, loaded from a JSON file, specifies relationships and node groups, rendered with D3 v6 selections and a color scale.

Mar 30, 2023

Loading thumbnail…

Fork of Social Network graph

This example shows a small social network graph with seven named nodes and six weighted links, rendered as an SVG in a React project. The visualization uses the force-directed layout from D3 v4 (`d3.layout.force`) with gravity, distance, and charge parameters to position nodes, and applies a green stroke to links with widths proportional to link weight. Nodes appear as purple circles with maroon outlines and text labels, and the entire graph is interactive, allowing users to click and drag nodes to rearrange the layout.

Mar 30, 2023

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This network graph visualizes friendships among ten people, with nodes representing individuals and links representing relationships. The graph uses a force-directed layout via `d3.forceSimulation` and `d3.forceLink`, with SVG circles as nodes and lines as edges. Nodes are cyan, sized at 75 pixels, and include labels, while drag-and-drop interaction is enabled through `d3.drag`. Hovering highlights nodes via CSS classes. Data comes from a JSON file defining nodes and links, and the visualization renders in an SVG at 1100x370 pixels.

Mar 30, 2023

Loading thumbnail…

ICE 8 Tree

An interactive family tree diagram for the Yelnats lineage from *Holes*, rendered as SVG with animated transitions. The visualization uses D3.js layout and diagonal path APIs to draw parent-child connections, with clickable nodes that expand or collapse subtrees. The tree starts with Elya Yelnats and branches through Stanley Yelnats and Rita Yelnats, with circle and text styling controlled by CSS classes.

Mar 30, 2023

Loading thumbnail…

ICE 8 Map (Country)

This visualization displays a choropleth map of England's geographical regions, with each region filled in a semi-transparent blue and internal boundaries highlighted with light gray strokes. It uses D3.js v7 with the `geoNaturalEarth1` projection and `geoPath` to render the map, while TopoJSON's `feature` and `mesh` functions process the source data from a JSON file containing England's divisions. React 18 manages the SVG rendering.

Mar 30, 2023

Loading thumbnail…

Fork of D3 World Map

This interactive map of the United States uses a blue-to-white color scale to display a “University Diversity Index” for each state, with darker blue indicating higher diversity. Built with D3 v4 and React, the visualization employs `d3.geoAlbersUsa` for the map projection and `d3.geoPath` to render state boundaries. Hovering over a state triggers a tooltip that displays a histogram image for that state, with the map data sourced from an external JSON file.

Mar 30, 2023

Loading thumbnail…

ICE 8 (World Map) Reyden Harris

This example displays a world map rendered as dark green countries with black outlines on a light blue background. The visualization uses an SVG canvas and relies on the Natural Earth projection via `geoNaturalEarth1` to convert geographic coordinates into planar paths. Data is loaded asynchronously from the world-atlas TopoJSON file on jsDelivr, with country features extracted using TopoJSON’s `feature` function. The paths are generated and appended using `d3.geoPath` and `selectAll`, demonstrating a straightforward choropleth-style mapping without additional interactivity or styling variations.

Mar 30, 2023

Loading thumbnail…

ICE 8 World Map

This example displays a basic world map using the Natural Earth projection, with country boundaries rendered as white-outlined paths and a graticule grid overlaid. It loads GeoJSON data from the world-atlas package and processes it through topojson-client’s `feature` method. The visualization is built with React, D3’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs, and uses a state-driven `setState` pattern to fetch and render the map asynchronously.

Mar 29, 2023

Loading thumbnail…

ICE 7 Area Chart - Reyden

This area chart visualizes Denton County LSA burger sales from 2009 to 2022, with a smooth curve showing consumption trends over time. The green filled area beneath the black line emphasizes the magnitude of sales across the years, while labeled axes display the year and burger count. Built with D3 v5, the visualization uses `scaleLinear` for both axes, `line` and `area` generators with `curveBasis` for smoothing, and renders as SVG. The data is loaded from a remote CSV containing yearly burger consumption values.

Mar 13, 2023

Loading thumbnail…

Fork of ICE 7question 3 Line Chart

This fork of an ICE exercise displays a line chart of daily temperatures from March 8–14, sourced from a GitHub-hosted CSV file. It uses d3.csv to load the data and d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to render the SVG plot. The chart includes labeled axes, gridlines, a title, and a blue line path, though the code also references an area generator that is not fully implemented.

Mar 13, 2023

Loading thumbnail…

ICE 7 Area Chart

This area chart visualizes daily temperatures over the past week, combining a smooth line and an orange filled area beneath it to highlight trends. Built with D3 v5, it uses `scaleTime` and `scaleLinear` for axes, with `area` and `line` generators employing `curveBasis` for smoothing. The SVG renders temperature data parsed from a CSV file, with a black line and shaded region, while custom axis labels and gridlines are styled via CSS.

Mar 13, 2023

Loading thumbnail…

ICE - 7 Pie Chart Reyden Harris

This pie chart displays the percentage of sales contributed by each department within a global conglomerate. The visualization uses d3.pie and d3.arc to generate the slices, with a legend listing each department and its corresponding percentage. Data is loaded from a remote CSV file using d3.csv, and d3.scaleOrdinal maps categorical values to a predefined array of colors. The SVG rendering includes labels positioned at each slice’s centroid via arcGenerator.centroid, with the main chart centered at (250, 250) and the legend placed to the right.

Mar 13, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE7 Pie Chart

This pie chart visualizes the total runs scored by ten top cricketers, with each slice’s arc length proportional to the player’s run count and a legend listing names alongside formatted values. The chart uses D3 v5’s `pie` and `arc` generators to compute slice geometries, `scaleOrdinal` with `schemeCategory10` for colors, and loads data from a local JSON file via `d3.json`. SVG paths and text elements render the chart and legend, while `d3.format` applies compact number formatting to displayed run totals.

Mar 13, 2023

Loading thumbnail…

Fork of ICE 7 Reusable D3 Scatter Plot

This reusable scatter plot visualizes the Iris Dataset, showing relationships between four flower measurements across three species. Using D3.js version 6, the visualization encodes species with different symbol types via `scaleOrdinal` and `symbolGenerator`, while axes use `scaleLinear`, `axisLeft`, and `axisBottom`. The plot updates every 15 seconds, cycling through different x-axis attributes, and renders as an animated SVG.

Mar 13, 2023

Loading thumbnail…

Reusable D3 Scatter Plot with Symbols

This example presents a reusable D3 scatter plot visualizing the Iris Dataset, mapping petal width to the x-axis and sepal length to the y-axis. It uses an ordinal scale with D3’s built-in symbol generators to distinguish the three iris species by shape. The plot is rendered as SVG, with axes added via `axisLeft` and `axisBottom`. The code defines a configurable `scatterPlot` function, allowing custom setters for data, value accessors, margins, symbol size, and dimensions, and is invoked with chained methods in `index.js`.

Mar 13, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an interactive scatter plot of the Iris Dataset that cycles through different x-axis dimensions every two seconds. The chart is rendered as an SVG using D3.js, with a reusable `scatterPlot` module that handles axis generation, circle positioning, and dynamic updates. The code utilizes D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs, and relies on the `csv` function to load data from a remote Gist. The visualization demonstrates how D3 charts can be abstracted into configurable, reusable components, with animation swapping between petal and sepal measurements.

Mar 11, 2023

Loading thumbnail…

ICE 6: Penguin Data set scatter Plot

This scatter plot visualizes penguin measurements from a CSV dataset, mapping flipper length and body mass to x and y axes while coloring each point by species. Separate circle elements also encode bill length and bill depth as rx and ry attributes, though these are not visible as ellipses. The visualization uses React with D3 v5, leveraging `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to parse data and render axes and marks as SVG circles. Axis labels and a title are added as text elements with custom font styling.

Mar 8, 2023

Loading thumbnail…

Penguin Data set scatter Plot

This scatter plot displays penguin measurements, mapping flipper length on the x-axis and body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap). It uses D3 v5’s `csv` loader, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render an SVG visualization in a React environment. The circles also encode bill length and depth via unused `rx`/`ry` attributes, though the fixed radius keeps them uniform. Data comes from a GitHub-hosted CSV file, parsed with numeric coercion.

Mar 8, 2023

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example shows the price of a McDouble hamburger across fifteen US states, using horizontal bar marks to encode price along a linear scale. The chart is built with React and D3 v5, where React manages component state and SVG rendering while D3's `scaleBand` and `scaleLinear` compute positions and lengths. Data is loaded asynchronously from a CSV via `d3.csv`, and the visualization displays grid lines and axis ticks generated from the scales.

Mar 8, 2023

Loading thumbnail…

ICE 5

This example shows tenant data from a linked CSV file, displaying the dataset’s size in kilobytes, row count, and column count. The page loads the CSV using the d3.csv method, then formats and computes the statistics with d3.csvFormat and the data’s length and columns properties. The visualization is built with D3 v7 and React, presenting the information as plain text. The background is a static SVG image of apartments, with the title and link displayed prominently.

Mar 1, 2023

Loading thumbnail…

Fork of D3 Face

A stylized yellow face rendered in SVG, built with React and D3 v7, features animated eyebrows and a frowning mouth. The code uses `d3.select`, `d3.arc`, and chained `.transition().duration()` calls to move eyebrow rectangles vertically over two seconds, while static circles form the eyes and a path from `arc()` creates the mouth. The face is centered using SVG `g` transforms, with all shapes drawn directly in an HTML page.

Feb 23, 2023

Loading thumbnail…

Fork of Mathematical Graphic Patterns

This animated canvas visualization generates a shifting spiral of colored circles that expands outward in a grid-like pattern. The animation continuously updates using `requestAnimationFrame`, with each circle’s position and radius computed from trigonometric functions of grid coordinates and a slowly advancing time variable. Colors derive from sine-based RGB values, while a semi-transparent black overlay creates a fading trail effect. The code relies solely on the Canvas 2D API, using `getContext('2d')`, `arc`, and `fillRect`, with no external libraries.

Feb 23, 2023