SANEEM MOHAMMAD

@Saneem21·47 public vizzes

Fork of ICE-8 country map

This example displays a choropleth-style map of U.S. states, with land areas filled in orange and interior borders stroked in green. It uses React and D3 v5, employing `d3.geoPath` with the `geoAlbersUsaTerritories` projection, along with TopoJSON’s `feature` and `mesh` functions to generate the land and boundary paths from a remote JSON file. The map is rendered as an SVG, with marks drawn via a React component.

Apr 12, 2023

Loading thumbnail…

Fork of ICE-8 world map

This fork of an ICE-8 world map displays a natural Earth projection of the globe with a blue sphere and light pink country boundaries. The visualization uses d3.geoPath with the geoNaturalEarth1 projection to render the sphere and countries. It loads world map data from a GitHub-hosted TopoJSON file, which is processed with the topojson feature function to extract country geometries into SVG paths. The code relies on d3.v5 and topojson 3.0.2 libraries, rendering all map elements as SVG paths with low stroke opacity for country borders.

Apr 12, 2023

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This interactive social network graph visualizes a small, fictional group of people and their friendships. The visualization uses a physics-based simulation to arrange the nodes, placing every node with the same green color and size. The lines between the friends have arrows to denote direction, and a thicker line indicates a stronger connection. The graph is rendered as a Scalable Vector Graphic using the d3.forceSimulation API, which handles the layout and dragging. Data is loaded from a JSON file, with viewers able to click and drag nodes to rearrange the network.

Apr 12, 2023

Loading thumbnail…

Fork of ICE8 - Family Tree

This interactive family tree visualization displays a hierarchical genealogy chart with color-coded nodes representing different family members across four generations. Built with D3.js v3 and SVG, the tree uses a collapsible node layout with animated transitions, allowing users to expand and collapse branches. The data comes from a JSON file structure populated with names and relationship links. The visualization includes zoom and drag capabilities, tooltips, and directional arrows showing parent-child connections, with node colors distinguishing between different types of family relationships.

Apr 12, 2023

Loading thumbnail…

Fork of Fork of ice8-vignesh

An interactive world map displays country boundaries loaded from world-atlas TopoJSON, rendered via d3.geoPath with SVG paths filled in blue. Users can drag to rotate the orthographic globe, zoom with d3.zoom, and click countries to switch projections between orthographic, Mercator, and Albers USA, with transitions animating the change. The SVG also includes a graticule and a black sphere outline.

Apr 12, 2023

Loading thumbnail…

Fork of Fork of ice8-vignesh

This interactive map displays world countries in an orthographic projection, allowing users to click any country to toggle between global and US-focused views. The visualization uses d3.geoPath with multiple projection types (mercator, orthographic, and AlbersUSA), rendering SVG paths for countries and graticules. Users can drag to rotate the globe and zoom via d3.zoom. Country boundary data comes from the world-atlas TopoJSON dataset, with names joined from external TSV metadata. Clicking the United States switches to a mercator projection with a smooth transition.

Apr 12, 2023

Loading thumbnail…

Fork of ICE-8 world map

This example displays a world map using a natural Earth projection, with countries rendered as light green filled paths against a sky blue sphere background. The visualization is built with D3 v5, using `d3.geoPath` and `d3.geoNaturalEarth1` to project and draw geographic features. Country boundaries come from a remote TopoJSON source, processed through the `topojson` library's `feature` function. The sphere outline and country shapes are all drawn as SVG paths, with stroke opacity providing subtle border distinction.

Apr 11, 2023

Loading thumbnail…

Fork of Reusable D3 Scatter plot

This interactive scatter plot visualizes the Iris dataset, cycling through four different attribute pairs every two seconds to compare sepal and petal measurements. Built with D3 v6, the visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with predefined symbols for species distinction, and `setInterval` to animate between variable combinations. The SVG rendering includes axis labels via `d3.axisLeft` and `d3.axisBottom`, with data loaded asynchronously from a CSV file using `d3.csv`.

Mar 26, 2023

Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This example presents an animated scatter plot of the classic Iris flower dataset, encoding sepal length and petal width measurements. It dynamically cycles through four different attribute pairs on the x-axis every ten seconds, with species distinguished by color (using `d3.scaleOrdinal` and `schemeCategory10`) and unique SVG symbol shapes. Built with D3 v6, the reusable chart leverages `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to update axes smoothly, while the enter-update-exit pattern animates the repositioning of data points.

Mar 26, 2023

Loading thumbnail…

Fork of ICE-7 Area Chart

This area chart displays the number of reviews from 1975 to 2025, using a smooth curve to highlight trends over time. Built with React and D3 v5, the visualization renders an SVG with a green filled area beneath a line path, both generated via `d3.area` and `d3.line` with `curveBasis`. Axes are created using `d3.axisBottom` and `d3.axisLeft`, with scales from `d3.scaleTime` and `d3.scaleLinear`. Data is loaded as CSV from a GitHub gist, parsed with `d3.csv`, and formatted for display.

Mar 26, 2023

Loading thumbnail…

Fork of Line Chart

This example displays a time-series line chart of review counts from 1976 to 2025. The visualization uses D3 v5 with an SVG rendering approach, employing `d3.csv` to load data and `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to construct the plot. The chart features labeled axes, a title, and gridlines, with the review count plotted against the year.

Mar 26, 2023

Loading thumbnail…

Fork of Pie Chart

This pie chart displays the number of reviews for each of the top 15 artists, sorted by review count and rendered as an SVG using D3 v5 within a React framework. Each slice’s color comes from `scaleOrdinal` with `schemeCategory10`, and the chart includes a legend with artist names and review totals. Data is loaded from a CSV via `d3.csv`, with the pie layout generated by `d3.pie` and arc paths drawn with `d3.arc`.

Mar 26, 2023

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the Iris Dataset using a scatter plot where each species is represented by a different D3 symbol. The code uses `d3.csv` to load the data, `scaleLinear` for x and y axes, and `scaleOrdinal` to map species to symbol types from `d3.symbols`. A reusable `scatterPlot` function encapsulates the chart, rendering marks as SVG `path` elements via `symbolGenerator` and including `axisLeft` and `axisBottom` for scales. The plot fills the browser window using `window.innerWidth` and `window.innerHeight`.

Mar 25, 2023

Loading thumbnail…

Fork of D3.js Line Chart

This line chart visualizes customer counts from 2000 to 2010 using a CSV data file, rendering the trend as a thick steelblue path. The chart employs D3 v7 with a band scale for the year categories and a linear scale for customer values, displaying axes with labeled “Year” and “customers.” The SVG rendering includes a single line that highlights the data points’ trajectory across the decade, built using d3.line and scaleBand positioning. The visualization uses dataset from an external CSV source, presented in a reusable chart format inspired by Towards Reusable Charts.

Mar 25, 2023

Loading thumbnail…

Fork of Area Death's

This area chart displays yearly review counts as a single orange filled curve, titled “Death By stroke,” with axes labeled “Year” and “review_count.” Built with D3 v5, it uses `d3.csv` to load data from a GitHub gist, `scaleTime` and `scaleLinear` for positioning, and `area` with `curveBasis` to generate the smooth path. Axis ticks are styled via `axisBottom` and `axisLeft`, while titles and labels are rendered as SVG text elements.

Mar 25, 2023

Loading thumbnail…

Fork of ICE-7 Line Chart

This line chart displays the number of property-recovered cases in India from 2001 to 2010. It uses D3 v5’s `scaleTime` and `scaleLinear` to map years and case counts, with `axisBottom` and `axisLeft` for labeled axes and a `line` generator for the red trend path. Data comes from a CSV file loaded via `csv`, and the visualization is rendered as an SVG with custom margins and gridlines.

Mar 25, 2023

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

A D3.js scatter plot visualizes the Iris dataset, mapping petal width on the x-axis and sepal length on the y-axis. Each species is represented by a distinct symbol from d3.symbols, with symbol types assigned via d3.scaleOrdinal. The visualization uses d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for tick marks, and a custom scatterPlot module to manage the reusable layout. Data is loaded asynchronously from a CSV file via d3.csv, and the SVG rendering fills the full browser window.

Mar 25, 2023

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example visualizes the Iris Dataset as an interactive scatter plot, mapping petal length and sepal width to the x and y axes while encoding species with distinct symbols. It uses a reusable D3 module pattern, with the `scatterPlot` function configuring scales, axes, and symbol generation. The code leverages `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, and `d3.axisBottom`/`axisLeft` to render SVG paths for each data point, sized at 100 pixels. The plot fills the window and fetches data from a GitHub Gist URL using `d3.csv`.

Mar 23, 2023

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This example shows a scatter plot of penguin measurements, mapping flipper length to the x-axis and body mass to the y-axis. Each circle is colored by species (Chinstrap, Gentoo, or Adelie) and also encodes bill length and depth via non-standard `rx` and `ry` attributes. The visualization loads CSV data from a GitHub gist using `d3.csv`, and renders SVG circles with `d3.scaleLinear` scales and `d3.axisLeft`/`d3.axisBottom` axes. The code uses D3 v5 and positions elements based on the browser viewport dimensions.

Mar 11, 2023

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin measurements from a CSV dataset, mapping flipper length to body mass for each individual. Three species—Adelie, Gentoo, and Chinstrap—appear as yellow, green, and brown circles, respectively. The code loads data via `d3.csv`, uses `d3.scaleLinear` for axes, and renders SVG circles using `select` and `join`. Axis labels and a title are added with `axisLeft`, `axisBottom`, and SVG `text` elements.

Mar 11, 2023

Loading thumbnail…

Fork of Penguin Data set scatter Plot

A fork of the Penguin Data Set scatter plot visualizes species of penguins with circles colored by species (yellow for Adelie, green for Gentoo, brown for Chinstrap) based on flipper length and body mass. The code loads CSV data via `d3.csv`, scales axes with `d3.scaleLinear`, and renders SVG circles using D3’s data join. It also labels axes with bill length and depth, and displays titles using D3 selections, all within a React-free HTML page.

Mar 11, 2023

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This example displays a scatter plot of the Palmer Penguins dataset, using flipper length on the x-axis, body mass on the y-axis, and coloring each circle by species (blue for Gentoo, green for Chinstrap, brown for Adelie). It also encodes culmen length and depth as additional attributes on the circles, though the radius is fixed. The code loads CSV data via the Fetch API with `d3.csv`, scales positions with `d3.scaleLinear`, and renders SVG circles using `d3.select` and `.join`. Axes are drawn with `d3.axisLeft` and `d3.axisBottom` in a React-free HTML page.

Mar 11, 2023

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This fork of the Penguin Data set scatter plot visualizes the relationship between flipper length and body mass, coloring each point by penguin species: blue, orange, or green. It loads data from a CSV file using D3 v6’s `d3.csv`, maps values with `scaleLinear`, and renders circles in SVG. The plot includes left and bottom axes (`axisLeft`, `axisBottom`), with a title and rotated axis label. Every circle also carries attributes for culmen length and depth, though these are not directly encoded in the visual.

Mar 11, 2023

Loading thumbnail…

Fork of Fork of Penguin Data set scatter Plot

This example displays a scatter plot of the Palmer Penguins dataset, mapping flipper length on the x-axis, body mass on the y-axis, and coloring each species (Adelie, Gentoo, Chinstrap) differently. The code uses D3 v6 with `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to fetch data and render SVG circles. Although the marks are drawn as circles, the code sets `rx` and `ry` attributes on them, which are not valid circle properties. The visualization includes custom axes, axis labels, and a title.

Mar 11, 2023

Loading thumbnail…

Fork of Penguin Data set scatter Plot

Mar 10, 2023

Loading thumbnail…

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

This example shows the number of property recovery cases across fifteen police areas, rendered as horizontal bars whose lengths encode the case counts. The visualization combines React for component state and rendering with D3 v5 for data loading and scales, using `d3.csv` to fetch a CSV file and `scaleBand` and `scaleLinear` for axes. SVG rectangles are drawn inside a React component, with gridlines and tick labels generated via D3’s scale ticks, while the page title appears above the chart.

Mar 10, 2023

Loading thumbnail…

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

Single-page React app renders six small SVG charts with D3 v5, each demonstrating a distinct mark or channel used in data visualization. Vertical strips show x-position, y-position, size, length, shape, and hue encoding via circles, rectangles, and D3 symbols. The charts use data arrays mapped through D3 selections with `.join()` for bound updates. React manages the container and rendering lifecycle, while individual modules like `xPosition.js` and `size.js` apply channel-specific scales, and `hue.js` uses `schemeCategory10`.

Mar 10, 2023

Loading thumbnail…

ICE5

This page presents a summary of stolen property data, displaying metadata about the dataset. It uses D3.js (version 7) to load the CSV from a URL and calculate its size, row count, and column count, presenting these metrics as text. The page uses a custom CSS background image of a stolen property icon. The visualization provides a direct link to view the underlying property stolen and recovered dataset. The design uses basic text output, not a chart, to convey the data's dimensions.

Mar 4, 2023

Loading thumbnail…

ICE5

This example presents a data-driven summary of stolen property statistics for each state. The visualization page displays a concise metadata readout of the underlying dataset, showing its file size in kilobytes, the total number of rows, and the number of columns. The code fetches the CSV data from a GitHub Gist using the D3.js `d3.csv` method, then calculates and formats the metadata with `d3.csvFormat`. The resulting text message is injected into an HTML `<pre>` element. The page uses D3 v7 and CSS for its minimal presentation.

Mar 3, 2023

Loading thumbnail…

Fork of Fork of ICE5

This example displays the count of rows in a dataset about property stolen and recovered in each state. The visualization is a minimal HTML page that loads data from a CSV file hosted on GitHub using the `d3.csv` API from d3.v7. The code retrieves the CSV, counts the number of rows, and writes a message with that metadata to a `<pre>` element via `document.getElementById`. The page uses CSS for styling and is built with React, though the current implementation only shows static text output.

Mar 2, 2023

Loading thumbnail…

Fork of ICE5

This example displays the metadata of a CSV dataset about property stolen and recovered in each state. It loads the data using d3.csv and presents the row and column counts in a pre-formatted text container on the page. The visualization relies on D3 v7 for data fetching and basic DOM manipulation, while the layout is styled with CSS and structured with plain HTML.

Mar 2, 2023

Loading thumbnail…

ICE5

This example displays metadata about a dataset of property stolen and recovered in each state. It loads a CSV file from a GitHub gist using `d3.csv`, then counts the number of rows and columns in the data. The resulting message, which states the dataset contains a certain number of rows and columns, is written into a `<pre>` element via `document.getElementById`. The page is styled with CSS and uses D3 v7 for data fetching and parsing.

Mar 2, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays a centered, large-scale “Hello HTML!” message using basic web technologies. The page applies styling through CSS, setting the message’s font size and alignment via the `.message` class, while JavaScript is included but not actively used. The content is rendered directly in the DOM through a `<div>` element defined in the HTML structure. It serves as a minimal starter template demonstrating how to combine HTML, CSS, and JavaScript in a single file.

Mar 2, 2023

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how a minimal D3 project can load libraries from a CDN and use ES6 modules to compose a simple visualization. It shows a single div element whose text content is set to “Hello VizHub!” using the `select` function from D3 v5. The code imports `select` from the `d3` namespace and a custom `message` string from a local `myMessage.js` module. Styling comes from an external CSS file, and the page structure is defined in `index.html`.

Mar 2, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays a single centered message, “Hello HTML!”, rendered at a very large font size using inline CSS in an HTML file. It demonstrates the minimal setup of an HTML page with embedded styles and a JavaScript-ready structure, though no dynamic behavior is present. The code relies on standard HTML elements and CSS properties, with no external libraries or frameworks. It serves as a basic template for static text visualization.

Mar 2, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A D3.js smiley face renders as SVG circles, arcs, and rectangles on a green background. The face’s eyebrows translate vertically in a looping transition, moving up then back down over four seconds. The code builds the face using `d3.select`, `d3.arc` for path shapes, and `selection.transition().duration()` for the animation. All elements are positioned manually with fixed pixel offsets relative to the SVG center, with no external data source.

Feb 25, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A smiling face is drawn on an SVG canvas using D3.js v5, with a fixed orange head and two circular eyes. The left eyebrow is notably absent, while the right eyebrow animates vertically through a chained `transition().duration(2000)` sequence, moving up and then back down. A mouth is rendered using the `d3.arc()` shape generator to create two curved paths. The code demonstrates fundamental DOM manipulation by selecting the SVG element and appending groups, circles, rectangles, and paths with absolute positioning.

Feb 25, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A smiley face with light green circular head, black-outlined eyes, and a double-arc mouth animates its rectangular eyebrows upward and downward in a looping transition. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select`, `append`, and `transition` to move SVG elements. Eye and eyebrow spacing are controlled via offset constants, while the mouth is drawn with the `d3.arc` path generator. The animation runs continuously, with each eyebrow movement taking two seconds in each direction.

Feb 24, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face built with SVG and animated with D3 v5 demonstrates fundamental DOM manipulation. The code uses `d3.select`, `append`, and `attr` to construct circles for the face and eyes, rectangles for the eyebrows, and a `d3.arc` path for the mouth. A chained `transition().duration(2000)` moves the eyebrow group up and down in a looping motion, while the iris and additional features remain static. The example relies on SVG attributes and D3’s enter/update/exit-free imperative style, with no external data source.

Feb 24, 2023

Loading thumbnail…

Fork of Fork of Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow smiley face out of SVG shapes, then animating its eyebrows. The code appends circles for the eyes, rectangles for the eyebrows, and a path generated with the `d3.arc()` function for the mouth, all centered within an SVG canvas. Eyebrow movement is driven by chained `transition().duration(2000)` calls that shift the vertical position of a group element. The visualization relies on D3 v5’s `select` and `arc` methods, with rendering handled entirely through SVG attributes and animated transitions.

Feb 24, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic DOM manipulation in D3.js v5. The face is built using SVG shapes—circles for the head and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. Eyebrows move up and down repeatedly via chained `transition()` calls with 2000-millisecond durations. The code imports `select` and `arc` directly from the d3 module, and centers all elements using SVG group transforms.

Feb 24, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by animating a yellow smiley face whose eyebrows move up and down in a continuous loop. The face is drawn using SVG shapes—circles for the eyes and head, rectangles for the eyebrows, and a path generated with d3.arc() for the mouth. The animation is driven by chained transition() calls that alternately shift the eyebrow group’s transform attribute over two-second intervals. The code imports select and arc from D3 v5 and appends elements to a fixed 960×500 SVG canvas.

Feb 24, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face, built from SVG shapes, demonstrates D3.js v5’s DOM manipulation and transition methods. The code appends a circle for the head, two for the eyes, rectangles for eyebrows, and a path generated with the `arc` function for the mouth. The eyebrows animate by moving up and down via sequential `transition().duration()` calls on a group element. This example shows basic data-joins and attribute updates, with a static yellow face rendered in an SVG canvas.

Feb 24, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Let's make a face with D3.js!

A D3.js animation shows a smiley face with a yellow head, eyes, a mouth, and rectangular eyebrows that move up and down in a repeating cycle. The face is built by manipulating SVG shapes, including circles for the head and eyes, a path for the mouth, and rectangles for the eyebrows. The code uses d3.select and d3.arc, and iterates transitions with the .transition() method to animate the eyebrows over two-second intervals. The background is set to black via d3.select("body").style().

Feb 21, 2023

Loading thumbnail…

Fork of Fork of Fork of Let's make a face with D3.js!

This animated SVG face uses D3.js v5 to demonstrate fundamental DOM manipulation. A yellow circle forms the head, with black-outlined eyes and a path drawn mouth using the `d3.arc()` generator. The eyebrows, rendered as rectangles, animate vertically through chained `transition()` calls with 2000-millisecond durations. The example shows how to build and move SVG elements dynamically, with a black page background set via D3’s selection style method, and relies on basic attribute setting for positioning.

Feb 21, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A D3.js smiley face animates by moving its eyebrows up and down in a looping transition. The face is built entirely with SVG primitives—circles for the eyes, rectangles for the eyebrows, and an arc-generated path for the mouth—positioned within a centered group. Using `d3.select`, `d3.arc`, and chained `transition().duration()` calls, the code shifts the eyebrow group’s vertical translation between two offsets. A black background and yellow face with black strokes create clear visual contrast. The example demonstrates fundamental DOM manipulation and SVG rendering with D3 v5.

Feb 21, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

A yellow smiley face is drawn in SVG, centered within a 960-by-450 canvas, with eyes, a mouth, and eyebrows that animate upward and back down over two seconds. The example demonstrates fundamental DOM manipulation using D3.js v5, building the face with `d3.select`, `append`, and the `d3.arc` shape generator for the mouth. The eyebrows’ movement is driven by chained `transition().duration(2000)` calls that change the group’s `transform` attribute. All shapes are plain SVG elements, and the animation relies entirely on D3’s transition system.

Feb 21, 2023