S

shabbab01

@shabbab01·28 public vizzes

Loading thumbnail…

Social Network Graph ICE-8

A social network graph depicts eight fictional people connected by friend relationships, with edge thickness representing relationship strength and arrowheads indicating direction. The visualization uses SVG rendering with D3.js v6, employing `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes dynamically. Nodes are draggable via `d3.drag`, and hovering triggers a CSS class change that thickens the node border. Data comes from a local `data.json` file containing node identifiers and link metadata, with blue circles and labeled text overlaid on a white background.

Loading thumbnail…

ice 8- family tree

This tree visualization displays a family hierarchy with the root “alboyes” branching into two primary children, each with their own descendants. The data is loaded from a JSON file using `d3.json`, and the layout is computed with `d3.tree` and `d3.hierarchy`. Nodes are rendered as styled text elements with colors from the data (e.g., blue, red, black), connected by horizontal links generated via `d3.linkHorizontal`. The entire SVG renders with `d3.zoom` support, allowing interactive pan and zoom.

Loading thumbnail…

ice 8- family tree

This visualization displays a family tree of cartoon characters, rendered as a horizontal dendrogram with nodes labeled and colored according to data from a JSON file. The tree uses D3 v5’s `tree` layout and `hierarchy` to compute positions, while `linkHorizontal` draws the connecting paths and `zoom` enables interactive panning. Text elements are styled with depth-based font sizes and fill colors, with the root labeled “Cartoons” branching into two main groups.

Loading thumbnail…

ICE8 - USA Map

This example renders a polished map of the United States using D3’s `geoAlbers` projection and `geoPath` to draw state boundaries and graticules. TopoJSON data from the US Atlas (`states-10m.json`) is loaded via `d3.json`, with `feature` and `mesh` extracting land and interior borders. React manages the SVG output, styling the land in white, sphere in blue, and interiors in red. The visualization highlights geographic boundaries with a clean, minimal aesthetic.

Loading thumbnail…

Fork of ICE8 - USA Map

This example displays a map of the United States using state boundaries and graticules, rendered as SVG via React. It shows the nation’s outline as a colored sphere with state interiors highlighted in red. The code uses `d3.geoAlbers`, `d3.geoPath`, and `d3.geoGraticule` to project and draw the geographic features, while `topojson.feature` and `topojson.mesh` extract land and interior boundaries from the us-atlas TopoJSON. Data loads asynchronously using `d3.json`.

Loading thumbnail…

ICE8 - USA Map

This example renders a polished map of the United States using D3’s `geoAlbers` projection and `geoPath` to draw state boundaries and graticules. TopoJSON data from the US Atlas (`states-10m.json`) is loaded via `d3.json`, with `feature` and `mesh` extracting land and interior borders. React manages the SVG output, styling the land in white, sphere in blue, and interiors in red. The visualization highlights geographic boundaries with a clean, minimal aesthetic.

Loading thumbnail…

ice 8- world map

This visualization displays a world map using an equirectangular projection, with each country rendered as a distinct path. It uses d3.geoPath and d3.geoEquirectangular to project the globe, and TopoJSON’s feature method to convert the world-atlas countries-110m.json data into GeoJSON. The map includes a blue sphere outline, white country fills with black borders, and a hover effect that highlights countries in orange via CSS.

Loading thumbnail…

world map

This example shows a world map rendered as an SVG. It displays countries as white shapes with black outlines on a blue sphere, with a hover effect that changes a country’s fill to orange. The code uses D3 v5 to load GeoJSON country boundaries via `json` and then draws them with `geoPath` and a `geoEquirectangular` projection. It also uses the TopoJSON `feature` function to process the raw data from the world-atlas dataset.

Loading thumbnail…

Fork of Fork of world map

This example renders an interactive world map using D3.js and TopoJSON. It displays countries as white polygons with black outlines on a blue sphere, and highlights individual countries in orange on hover. The visualization uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate SVG paths. Country geometry is loaded from a world-atlas TopoJSON file hosted on jsDelivr, with features extracted via the `feature` function.

Loading thumbnail…

Fork of Fork of world map

This interactive D3.js world map uses an orthographic projection to render Earth’s landmasses as white countries with black outlines against a blue oceanic sphere. It loads country boundaries from the world-atlas TopoJSON dataset, processing them via the `topojson.feature` function and drawing paths with `d3.geoPath`. Hovering over a country highlights it in orange through a CSS `:hover` rule, providing visual feedback for exploration.

Loading thumbnail…

Fork of world map

This fork of a world map displays country boundaries and a blue sphere backdrop using an equirectangular projection. It renders the map as SVG, with countries filled white and outlined in black, and highlights each country in orange on hover. The visualization uses d3.geoPath and d3.geoEquirectangular to generate paths from TopoJSON data loaded from the world-atlas package, with the sphere drawn as a separate path element.

Loading thumbnail…

world map

This example displays a world map using a spherical projection. It renders countries as green paths with black outlines on a blue ocean sphere, and hovering over a country highlights it in orange. Built with D3 and TopoJSON, it uses `d3.geoEquirectangular` for projection and `d3.geoPath` to generate SVG paths from GeoJSON data sourced from the world-atlas countries-110m.json file. The visualization employs D3’s `select` and `json` methods to load and append geographic features to the SVG.

Loading thumbnail…

ICE 7 Area Chart

This area chart visualizes South Africa's gas sales and exports over a 10-year period, using an orange filled area beneath a black line to show the trend. The chart is built with D3 v5, leveraging scaleTime, scaleLinear, and axis generators for the time-based x-axis and value-based y-axis, with the area and line generated using d3.area and d3.line with a curveBasis interpolation. Data is loaded from a CSV file hosted on GitHub, parsed with d3.timeParse, and rendered as an SVG within an HTML page styled with external CSS.

Loading thumbnail…

Fork of ICE 7 Area Chart

This fork of ICE 7 shows annual car sales in India from 2009 to 2019 as a smooth area chart overlaid with a black line. The SVG visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `area` with `curveBasis`. Data is loaded from a CSV file, parsed with `csv` and `timeParse`. Sales values are formatted with `format('.3s')`, and gridlines are drawn via axis tick sizes.

Loading thumbnail…

Fork of ICE 7 Line Chart

This line chart visualizes car sales at SA over time, using a dark background with red accents. The visualization encodes years on the x-axis and sales figures on the y-axis, with a single red line tracing the trend. Built with D3 v5, the code uses `d3.csv` to load remote data, `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.line` to generate the path. Grid lines and labels are styled via CSS.

Loading thumbnail…

Fork of ICE 7 Line Chart

This fork of the ICE 7 Line Chart shows car sales in India from 2009 to 2019, plotting yearly sales against a time-scaled x-axis and a linear y-axis. The visualization uses d3.csv to load data, scaleTime and scaleLinear for axes, and d3.line to generate the single red path. Axis labels and ticks are rendered with axisBottom and axisLeft, while SVG groups position the chart within a fixed-width container. Styling emphasizes red text and grid lines against a dark blue background.

Loading thumbnail…

Shabbab01 ICE - 7 Pie Chart

This example shows a pie chart of the top 10 countries by population deaths, with each slice labeled in thousands and a legend listing country names and values. The chart is rendered as SVG using D3 v5, with the `d3.pie` layout generating arc data and `d3.arc` drawing the segments and centroid labels. Slice colors come from a `d3.scaleOrdinal` range, while data is loaded as CSV from a remote GitHub gist. The legend is built manually with SVG rectangles and text elements.

Loading thumbnail…

Shabbab_ice7

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. Three iris species are distinguished by color-coded circles. The visualization uses D3.js version 5 within a React framework to render an SVG plot with selectable X and Y axes from dropdown menus. The code leverages `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` for scaling and axis generation, with data loaded from a CSV file.

Loading thumbnail…

ICE 6

This visualization displays the Iris dataset as a scatter plot of Petal Length against Sepal Length, with circles colored by species to emphasize clustering. The D3 v5 code uses `d3.select`, `d3.scaleLinear`, `d3.scaleOrdinal` with `d3.schemeCategory10`, and `d3.axisBottom`/`d3.axisLeft` for axes, plus `d3.legendColor` from the d3-legend library. Data is loaded via `d3.csv` from a GitHub gist, and rendered as SVG circles with a categorical color legend.

Loading thumbnail…

stylish the bar chart and submit the VizHub link

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x and y axes, while encoding the species of each flower with color (blue, red, or black). It also encodes the sepal measurements into the shape of each point through the `rx` and `ry` attributes, adding an extra dimension of data. Built with D3 v6 and rendered as an SVG, the code loads the data using `d3.csv`, deploys `select`, `scaleLinear`, `extent`, and the `axisLeft` and `axisBottom` helpers to produce the chart.

Loading thumbnail…

Fork of stylish the bar chart and submit the VizHub link

This scatter plot visualizes the Iris dataset, mapping petal length and width to the x and y axes while coloring each point by species. The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and render the data as SVG circles. Although the markup includes redundant `rx` and `ry` attributes, the circles maintain a fixed radius, producing a straightforward categorical color encoding of the three flower types.

Loading thumbnail…

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

This bar chart visualizes the top 10 most populous countries in 2019. It uses React with D3.js (v5) to render SVG marks and channels, importing functions like `scaleBand`, `scaleLinear`, `max`, and `csv` directly from the D3 library. The data is loaded from a CSV file and processed in a React `useEffect` hook, with the chart updated through React state. The visualization includes custom grid lines and axis labels, with the title displayed in the HTML body.

Loading thumbnail…

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

This visualization displays a horizontal bar chart of the top 10 most populous countries in 2019. The React component uses D3 scales (`d3.scaleBand` and `d3.scaleLinear`) to position bars and axes, rendering SVG marks directly with React elements. Data is loaded asynchronously from a CSV via `d3.csv`. The chart includes custom axes with tick labels and gridlines, all styled through inline SVG attributes.

Loading thumbnail…

Fork of Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This visualization demonstrates the process of loading and parsing a CSV dataset using D3.js, displaying the result in a preformatted text block. The code uses `d3.csv` to fetch the IRIS dataset from a GitHub gist, then measures the file size, row count, and column count to present a summary message. The page also embeds a separate SVG visualization via an external script, showing both textual parsing feedback and graphical output in a single HTML document. The example highlights D3's data-loading capabilities alongside static SVG rendering.

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse CSV data using D3.js within a React framework. The page displays a heading, an embedded city SVG graphic, and a message area that reports the CSV file’s size, row count, and column count after fetching it from a GitHub gist. The code uses D3’s `d3.csv` method to retrieve and read the remote CSV, then `d3.csvFormat` to calculate its byte size, and finally updates a `<pre>` element with the parsed dataset’s statistics using vanilla JavaScript DOM manipulation.

Loading thumbnail…

ice5 Assignment

This example displays the text “ice5” prominently in the center of the page using a large, styled font. It demonstrates basic D3.js v5 integration by loading the library from a CDN and using the `d3.csvParse` method to fetch and parse an external IRIS dataset from a GitHub gist. The code also showcases ES6 module imports, importing a local message from `myMessage.js` and setting the DOM text via `select` from D3, while logging file size, row count, and column count to the console.

Loading thumbnail…

Fork of ice5

This example demonstrates the use of D3 v5 to fetch and parse a remote CSV file containing Iris dataset records, logging the file size, row count, and column count to the console. The page itself uses D3’s `select` method to set the text of a message div, while importing a local ES6 module for the displayed string. The code relies on the `d3.csvParse` API and the native `fetch` function to handle the data loading, with the CSV hosted on GitHub Gist.

Loading thumbnail…

Fork of Data_Visualization_YellowFace_PY

This visualization shows the basic construction of a smiley face using two circular eyes and a head with a red stroke, while a blue mouth is added via D3’s arc generator. The head and eyes are drawn as raw SVG circles with fixed coordinates. The mouth path is created using D3 v7’s `arc()` factory, which defines inner and outer radii and a start/end angle in radians. The code selects the SVG element with `d3.select`, appends a group, and positions it via a transform.