mark.horne99@gmail.com

@marky58·6 public vizzes

Fork of Exercise 1: SVG Fundamentals

This example shows an animated sunrise and sunset over a stylized landscape. A large circle representing the sun moves vertically against a sky backdrop, while two overlapping Bezier-curved paths depict rolling landmasses in the foreground. The visualization uses pure SVG and the Web Animations API through `<animate>` elements to cycle gradient colors and the sun's position over a 15-second loop. All rendering is handled by inline SVG markup, with no JavaScript or external libraries.

Jan 9, 2023

Loading thumbnail…

Fork of Polished World Map

This world map visualizes country boundaries from the World Atlas Topojson dataset, rendered as an SVG using a React component. The d3.geoNaturalEarth1 projection and d3.geoPath draw the landmasses, graticules, and interior borders, while the sphere outline creates a polished globe effect. Land areas are filled in teal with lighter stroke boundaries, and graticules appear as subtle gray lines. The visualization uses d3.json to load the data and topojson.feature and topojson.mesh to extract the geographic features.

Mar 7, 2022

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which data columns map to the X and Y axes via dropdown menus built with a reusable D3 module. The visualization uses d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for ticks, and animates circle transitions over two seconds. Data is loaded as CSV and parsed into numeric values.

Mar 7, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst of pie slices, each colored according to its corresponding RGB hex value. The rendering uses React for component structure and lifecycle, while D3 utilities load the CSV data via `d3.csv` and compute arc paths with `d3.arc` and `d3.pie`. The SVG output is generated by mapping over the pie data, assigning fill colors directly from the dataset. The visualization demonstrates a hybrid approach where React manages state and DOM updates, while D3 handles data loading and geometric calculations.

Mar 1, 2022

Loading thumbnail…

D3 data parsing

This example demonstrates how D3 can parse and summarize a remote CSV file, displaying the result as a plain text message. It shows the file’s size in kilobytes, the number of rows, and the number of columns in the dataset. The code uses the `d3.csv` method to fetch and parse the data from a GitHub-hosted CSV of named colors, then retrieves the parsed array’s length and the `columns` property. A fallback approach using `fetch`, `async`/`await`, and `d3.csvParse` is commented out for comparison.

Feb 28, 2022

Loading thumbnail…

Hello HTML - marky58

A grid of eighteen identical smiling faces, each rendered as a yellow circle with black stroke, two eyes, and a mouth, demonstrates a modular React component approach to SVG visualization. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` elements within a shared `FaceContainer`. Eye and mouth radii vary randomly per face, while the mouth uses the `d3.arc()` API to generate a path. The example uses React 17, D3 v7, and a ReactDOM render into an HTML `div`.

Feb 26, 2022