abdhaseeeb

@abdhaseeeb·14 public vizzes

ICE-8 Network Graph

This network graph visualizes the friendships among eight individuals, showing the connections and relationships between them through a force-directed layout. The visualization uses D3 version 6 with the `d3.forceSimulation` API to manage the physics of node placement, incorporating forces for linking, collision detection, and centering. Nodes are rendered as circles with labels, while links are drawn as lines with arrow markers. The graph supports interactive dragging, and hovering highlights individual nodes through CSS class changes. Data is loaded from a JSON file containing link and node definitions.

Apr 13, 2023

Loading thumbnail…

Family Tree of a Dog

A family tree visualization shows the hierarchical classification of dog breeds, from the root "Dog" down through categories like Retrievers and Hounds to specific breeds such as Labrador Retrievers and Beagles. The tree layout is rendered using D3 v3's `d3.layout.tree`, with SVG elements and animated transitions when expanding or collapsing nodes. Each node displays its name and a tooltip with descriptive labels, while the tree supports zooming and dragging via `d3.behavior.zoom`. Data is loaded from a JSON file through `d3.json`, with node colors assigned by type.

Apr 13, 2023

Loading thumbnail…

IndiaMap

This example renders a choropleth-style map of India using D3 v5 and TopoJSON, with each state filled by a categorical color from `d3.scaleOrdinal` and labeled via `d3.geoPath` centroids. The map is projected with `d3.geoMercator` and drawn as SVG paths from a hosted GeoJSON-like TopoJSON file, with hover effects defined in CSS. It uses `topojson.feature` to extract state boundaries and appends hover tooltips via `<title>` elements, demonstrating basic geographic data binding and interaction.

Apr 13, 2023

Loading thumbnail…

ICE8 - World Map

This example displays a world map using a natural Earth projection, with countries rendered as green vector paths against a blue sphere and background. The visualization loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON features using the topojson feature function. D3’s geoPath and geoNaturalEarth1 handle the projection and path generation, while the country paths are styled with CSS and include a hover effect that changes their fill color. The map is rendered entirely as SVG.

Apr 12, 2023

Loading thumbnail…

ICE-7 Line Chart

This line chart visualizes the annual active player counts on the Steam platform from 2013 to 2023. The SVG chart uses d3.scaleTime and d3.scaleLinear to map years and player counts, with d3.axisBottom and d3.axisLeft rendering grid-lined axes. A d3.line generator draws the path, while d3.csv loads data from a GitHub gist, parsing values with d3.timeParse. The chart features a gradient background and custom styling through CSS classes for the line, tick labels, and axis labels.

Mar 26, 2023

Loading thumbnail…

ICE-7 Area Chart

This area chart displays the number of active players on the Steam platform from 2013 to 2023, with years on the x-axis and annual players in millions on the y-axis. Using D3 v5, the visualization renders an SVG line path overlaid with a semi-transparent filled area beneath it, both generated via the `d3.line` and `d3.area` generators. The scales are constructed with `d3.scaleLinear` and `d3.axisBottom` and `d3.axisLeft` produce labeled axes. Data is loaded as CSV from a GitHub gist and formatted with D3's `csv` method.

Mar 25, 2023

Loading thumbnail…

ICE-7 Pie Chart

This example displays a pie chart ranking the top nine foods by protein content, distinguishing between vegetarian and non-vegetarian options. It uses D3 v5 APIs (`d3.pie`, `d3.arc`, `d3.scaleOrdinal`) to generate SVG paths, with a legend showing food names and protein values in grams. The data is loaded asynchronously from a CSV file via a Gist URL using D3's `csv` import, and formatted with `d3.format`.

Mar 25, 2023

Loading thumbnail…

Fork of Fork of ICE-7 Line Chart

This visualization shows a single red line chart tracking one data series across time, with a clean, labeled SVG rendering and a bold title. The chart uses D3 v5 to create scales and axes, with tick marks and axis labels styled via CSS. The line itself is drawn as an SVG path with the `line_path` class, while the data is bundled and executed from `bundle.js`, suggesting the data is pre-processed or loaded separately. The page layout centers the chart within a 960x500 viewport.

Mar 25, 2023

Loading thumbnail…

ICE-7 D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing how different species cluster across selected measurements. A reusable chart module built with D3 v6 renders SVG symbols whose shapes and colors encode species, while an animation cycles through the four numeric columns every two seconds to reveal changing distributions. The code uses D3 scales, axes, and symbol generators within a custom `scatterPlot` function, and loads data via `d3.csv`.

Mar 25, 2023

Loading thumbnail…

ICE-7 Scatter plot

This D3.js example visualizes the Iris Dataset with an animated scatter plot that cycles through different numeric attributes every two seconds. The plot maps petal width and sepal length onto the x and y axes, using `d3.scaleLinear` for scaling and `axisLeft`/`axisBottom` for tick marks. Each point is rendered as an SVG circle with a fixed radius, and the axes update dynamically as the displayed column changes. The animation loops through petal width, sepal width, petal length, and sepal length, demonstrating how the data distribution shifts across dimensions.

Mar 25, 2023

Loading thumbnail…

ICE-6 Scatter plot

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, using color-coded circles. The D3 v5 code loads CSV data, scales the axes with `scaleLinear`, and renders SVG circles with a fixed radius. It adds axis labels and a title using SVG text elements. The visualization fills the browser window and uses `axisLeft`, `axisBottom`, and marker functions to differentiate species.

Mar 12, 2023

Loading thumbnail…

ICE-6

This example displays a horizontal bar chart of the 12 most populous countries in 2022, loaded from a CSV dataset via d3.csv. D3’s scaleBand and scaleLinear map country names and population values to SVG rectangles, with axes drawn manually using d3.axisBottom and d3.axisLeft. The chart is rendered inside a React component using react-dom, with D3 v5 handling data parsing and scales, while React manages state and updates the SVG elements.

Mar 12, 2023

Loading thumbnail…

ICE-5 webpage

This example presents the Forbes company rankings for 2022 as a styled webpage. The page displays the dataset’s metadata, including its size in kilobytes, row count, and column count. It uses D3.js v7’s `d3.csv` to fetch and parse data from a remote CSV file hosted on GitHub, then calculates the metadata using `d3.csvFormat` and updates the DOM via `textContent`. The page features custom CSS styling with a background image and navigation links.

Mar 4, 2023

Loading thumbnail…

ICE 4 D3.js!

This visualization demonstrates fundamental D3.js DOM manipulation by constructing an animated smiley face from basic SVG shapes. Orange circles form the head and ears, while white pupils, black-rimmed glasses, rectangular teeth, and arc-based nose and mouth complete the character. The eyebrows, rendered as rectangles, animate vertically through a chained sequence of D3 transitions, moving down then returning to their original position. The code uses d3.select, d3.append, and d3.attr for element creation and styling, with d3.arc for generating the nose and mouth paths and d3.transition for the eyebrow animation.

Feb 25, 2023