ryan-dirajlal

@ryan-dirajlal·7 public vizzes

Fork of Parallel Coordinate for 2018

This example visualizes honeybee colony data across U.S. states for 2018 using an interactive parallel coordinate plot rendered as SVG. The chart displays multiple quantitative dimensions—colony counts, losses, additions, and renovations—as vertical axes, with each state’s data connected as a green path. Users can brush along any axis to filter the foreground lines and highlight states whose values fall within the selected ranges. The code uses D3 v3’s `d3.csv`, `d3.scale.ordinal`, `d3.svg.axis`, and `d3.svg.brush` to build the axes, draw the polylines, and implement brushing interactions.

May 4, 2022

Loading thumbnail…

Fork 2 of beeswarm

A beeswarm plot uses a force-directed layout to visualize the distribution of honey bee colony loss percentages across U.S. states in 2015. Each circle represents a data point, positioned along a logarithmic x-axis according to its value, with a Voronoi tessellation overlay for interactive hover detection. The visualization employs d3.forceSimulation with forceX, forceY, and forceCollide to arrange points, and d3.voronoi for cell boundaries. Data originates from data_2015.csv, rendered as SVG with React and d3.v4.

Apr 27, 2022

Loading thumbnail…

Fork of beeswarm

This visualization displays a beeswarm plot of honey bee colony loss percentages across different U.S. states in 2015, with each circle representing a reported cause of loss positioned along a logarithmic x-axis. The chart uses d3.forceSimulation with forceX and forceCollide to arrange the data points, while d3.voronoi polygons provide hover detection and interactive highlighting. The code uses d3.csv to load data_2015.csv and renders the results as an SVG with a logarithmic scale axis.

Apr 27, 2022

Loading thumbnail…

FP3

This interactive line chart visualizes the percentage of honey bee colony stressors over time, with each colored line representing a different stressor category such as Varroa mites, pesticides, or disease. Users can hover over lines to highlight them, click to toggle their visibility, and zoom into the time axis using mouse gestures. Built with React and D3.v7, the visualization uses SVG paths with basis curves for smooth lines, `d3.zoom` for interactive panning and scaling, and custom hover and click handlers to manage line styling and visibility. The data is loaded from a TSV file with columns for date, stressor type, and percentage.

Apr 20, 2022

Loading thumbnail…

Untitled

A choropleth map of US counties depicts poverty rates using a threshold color scale with a green sequential scheme. The visualization loads TopoJSON geographic data via `d3.json` and joins it with CSV values using `d3.map`. It renders county boundaries with `d3.geoPath`, overlays state borders, and includes a legend with an axis. The map also uses `d3.axisBottom` and `d3.scaleThreshold` for color classification.

Apr 13, 2022

Loading thumbnail…

Fork of HTML Starter. Test by ryan

This example demonstrates a simple HTML page rendering the text “Helelo HTML test” in a large, centered font. It shows how a static message can be styled using CSS and embedded directly in the page structure. The implementation uses basic HTML elements, a CSS class for font sizing and alignment, and no external JavaScript libraries or data sources. The visualization is essentially a typographic display, relying entirely on the browser’s default rendering of the markup and styles.

Jan 29, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that renders the text "Hello HTML!" centered on a blank canvas. It uses no external libraries or data sources, relying entirely on the core web technologies of CSS for styling and inline HTML markup for content. The rendering approach is straightforward, with the message styled at a large font size and aligned to the center of the viewport through the `.message` CSS class.

Jan 26, 2022