mrowanh21@gmail.com

@MRowanH·6 public vizzes

Task 9 Area Chart

This area chart visualizes the evolution of funding in West Africa for 2020, using a stacked layout to display categories of earmarked, softly earmarked, tightly earmarked, and unearmarked contributions. It loads data from a CSV file containing diabetes statistics via `d3.csv`, then stacks the data with `d3.stack()`. The chart uses `d3.scalePoint` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.area` to generate the stacked paths. Tooltips implemented with mouseover and mouseleave events highlight individual areas, while the SVG rendering includes custom titles, labels, and a legend.

Apr 30, 2024

Loading thumbnail…

Task 9 Pie Chart

This pie chart visualizes the top 10 records from a diabetes dataset, sorted by SkinThickness, with each slice labeled by Glucose level and its corresponding SkinThickness value on a white background. Built with D3.js v6, the visualization uses `d3.pie()` and `d3.arc()` to generate slices, a color scale for slice fills, and includes a legend with a custom color palette. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and the chart is rendered as an SVG with centered labels on each arc.

Apr 30, 2024

Loading thumbnail…

Fork of Fork of Task 9 & 10 Area Chart

This animated scatter plot visualizes the Iris dataset, cycling through four attribute combinations on the x-axis to reveal different relationships between petal and sepal measurements. Built with D3, the visualization dynamically updates axis labels and re-renders the plot, with data points colored by species (setosa, versicolor, virginica). The code uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions for scaling and axes, with SVG rendering and a `setInterval` for animation. It loads data via CSV and demonstrates modular ES6 imports, showing how to build reusable chart components.

Apr 26, 2024

Loading thumbnail…

Task 9 & 10 Tutorial

This animated tutorial demonstrates the capabilities of VizHub by cycling through different iris flower measurements on a scatter plot. The visualization uses D3.js v6 via UNPKG, loading data from a CSV file containing sepal and petal dimensions for three iris species. The code imports local ES6 modules, including a reusable scatterPlot component that handles axis scaling and rendering. Every few seconds, the plot switches which measurement appears on the x-axis, while points remain colored by species. The example also shows how to build custom legends, labels, and titles using SVG elements.

Apr 26, 2024

Loading thumbnail…

Task 7 - Buddha in colors -overlapping Buddha - FORK

A dense field of small, randomly colored polygons overlaps and rotates across a black SVG canvas, creating a layered, abstract composition. The visualization is built with React and renders purely through SVG elements, using nested `map` loops over a numeric array to generate hundreds of `<polygon>` shapes. Each polygon’s position, fill color, and rotation are determined by repeated calls to `Math.random()`, while a large embedded `<path>` element in the center depicts a Buddha figure, layered beneath the chaotic geometry. The code also defines utility functions and arrays, though their outputs are not directly visualized.

Mar 24, 2024

Loading thumbnail…

Task 7 - Buddha in colors -overlapping Buddha FORK

This visualization generates a dense field of overlapping, semi-transparent polygons with randomized coordinates and colors, layered over a large Buddha silhouette path rendered in SVG. The polygons are created through nested array mappings, each producing shape coordinates via the `Math.random` function, while the Buddha figure is drawn using a detailed SVG `path` element. The React component uses `ReactDOM` to render the composition onto an SVG canvas within a black-background HTML page. The result is a chaotic, colorful abstract pattern overlaid on the structured Buddha form.

Mar 24, 2024