asumera375@gmail.com

@sumera21·5 public vizzes

ICE6 Scatter Plot SumeraAnjum

This scatter plot displays the geographic distribution of California wildfire incidents, plotting longitude on the x-axis and latitude on the y-axis. Each red circle represents a wildfire event, with its size scaled proportionally to the number of acres burned. The code uses D3 v7's `scaleLinear`, `scaleSqrt`, and `axisBottom`/`axisLeft` APIs to render the visualization in SVG. Data is loaded from a CSV file, filtered to remove outliers via an interquartile range method, and styled with an interactive tooltip on mouseover.

Mar 26, 2025

Loading thumbnail…

ICE6 BarChart SumeraAnjum

This bar chart displays monthly fire occurrences in California, revealing a clear seasonal pattern with peak incidents in July (391 fires) and lowest counts during winter months. The visualization aggregates wildfire records from a CSV dataset loaded via `d3.csv`, then uses `d3.rollup` to count occurrences per month and `d3.scaleBand`/`d3.scaleLinear` for positioning. Bars are rendered as SVG rectangles with hover effects changing fill color to orange. Axis labels and count annotations are added via D3’s selection methods.

Mar 19, 2025

Loading thumbnail…

ICE5 CalWildfire SumeraAnjum

This visualization presents a summary of a wildfire impact dataset for California, beginning with a text-based table of column statistics. Following the numerical summary, a large static SVG illustration depicts the state with abstract shapes and paths representing fire incidents, using colored fills and strokes to visualize affected areas. The page is built with HTML, CSS, and JavaScript, using D3.js (d3.v7) to fetch and parse a CSV file from a GitHub gist, calculate dataset metrics, and embed the pre-rendered SVG graphic.

Mar 15, 2025

Loading thumbnail…

ICE4 SumeraAnjum

A CSS and D3.js animation depicts a stylized ice cream shop against a gradient sky, with drifting clouds built from styled divs and a shop structure composed of layered rectangles, a striped awning, and a three-scoop cone sign. The scene is assembled entirely with HTML elements and styled using CSS properties like `clip-path`, `border-radius`, and `repeating-linear-gradient`, while D3.js loads but only logs a message to the console, providing no active data-driven behavior. Cloud movement relies on CSS `@keyframes` animations, making this a static, illustrative composition rather than an interactive visualization.

Feb 22, 2025

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This fork of Blank Slate demonstrates a purely HTML and CSS animated ice cream shop scene, showing how visual storytelling can be built without JavaScript data bindings. The animation relies on CSS keyframes (`moveClouds`) to drift clouds across a linear-gradient sky, while the shop is composed of styled `div` elements with properties like `clip-path` for the cone and `repeating-linear-gradient` for the awning. The included `d3.js` file only logs a console message, meaning D3.js is loaded but not used in the current rendering. The example highlights static structure and CSS-driven motion rather than data-driven visualization.

Feb 21, 2025