nehabaddam

@nehabaddam·13 public vizzes

ICE8 - Family Tree

This interactive family tree visualizes the evolutionary relationships of hominoids, from the common ancestor "Hominoideo" down to the genera "Homo" and "Pan". Each node is a colored box representing a taxonomic group, loaded from a JSON data file via `d3.json`. The visualization uses `d3.layout.tree()` to compute the hierarchical layout, and renders the tree as an animated SVG, with user clicks triggering transitions of nodes and links. The code also applies CSS styling for the boxes and tooltips.

Mar 30, 2023

Loading thumbnail…

ICE8 - Social Network Graph

This network graph visualizes a small social network of ten people and their friendship connections, with each person shown as a pink circle and each friendship as a line with an arrow. The graph uses D3.js's force-directed simulation API, including `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.forceCenter`, to position the nodes, which can be dragged interactively. Nodes and links are rendered as SVG elements, with data loaded from a local `data.json` file. Hovering over a node highlights it with a thicker stroke.

Mar 30, 2023

Loading thumbnail…

ICE8 - Country Map

This example displays a map of Australia, with each electoral region filled using a pastel color from a categorical scale. The map uses the D3.js geoMercator projection and geoPath API to generate SVG paths from TopoJSON data. State and territory names are rendered as text labels positioned at each region's centroid using the geoPath.centroid method. The visualization loads geographic boundaries from a remote JSON file and applies a custom title, illustrating a straightforward choropleth-style rendering with D3 v5 and the TopoJSON library.

Mar 30, 2023

Loading thumbnail…

ICE8 - World Map

This example displays a world map rendered as SVG, with each country filled using a pastel color scale and outlined with subtle brown strokes. It uses the `geoNaturalEarth1` projection and `geoPath` from d3.v5 to generate the map geometry, while `topojson.feature` extracts country boundaries from a world-atlas TopoJSON file hosted on GitHub. The map is set against a sky-blue sphere background, with a title text appended to the SVG canvas.

Mar 30, 2023

Loading thumbnail…

ICE - 8 Family Tree

This interactive family tree visualizes the evolutionary hierarchy of Homo sapiens, from Hominoidea down to the genera Homo and Pan. Built with D3.js, the SVG diagram uses a collapsible tree layout with animated transitions for expanding and collapsing nodes. Clicking a node toggles its children, while links and circles are rendered using D3’s `d3.layout.tree` and `d3.svg.diagonal`. The data is hardcoded in JavaScript, and the styling uses custom CSS for node and link appearance.

Mar 29, 2023

Loading thumbnail…

ICE - 7 Line Chart

A line chart displays annual sales over time, with a single thick maroon line tracing the trend. The visualization uses D3 v5 to load CSV data via `d3.csv`, parse dates with `d3.timeParse`, and construct scales with `scaleTime` and `scaleLinear`. Axes are generated using `axisBottom` and `axisLeft`, while the line path is created with the `d3.line` generator. The SVG rendering includes labeled axes and gridlines, with data sourced from a GitHub gist.

Mar 13, 2023

Loading thumbnail…

ICE - 7 Area Chart

This example visualizes store sales over time using a 7-area chart, showing the relationship between transaction amounts and month-year across multiple years. The SVG renders smoothed curves and filled areas beneath them using D3’s `line` and `area` generators with `curveBasis`. Scales include `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with axes generated via `axisBottom` and `axisLeft`. Data is loaded from a CSV using D3’s `csv` method and parsed with `timeParse`. The visualization is built in React and styled with custom CSS.

Mar 13, 2023

Loading thumbnail…

ICE - 7 Pie Chart

This example presents a pie chart visualizing COVID-19 death counts for the top 10 countries, with each slice labeled in thousands and accompanied by a legend listing countries and their corresponding values. The chart reads data from a CSV file hosted on GitHub, processed using `d3.csv`, and renders with SVG via `d3.pie()` and `d3.arc()`. Slices are colored using `d3.scaleOrdinal` with a fixed palette, and labels are positioned using arc centroids. The visualization is built with D3 v5 within a React framework.

Mar 13, 2023

Loading thumbnail…

ICE -7 Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length while encoding species with distinct symbol shapes. Built as a reusable chart pattern, it uses D3 scales and axes to render SVG marks that cycle through different column pairings every 15 seconds via setInterval. The visualization demonstrates the accessor-based architecture for creating modular, configurable chart components.

Mar 13, 2023

Loading thumbnail…

ICE-6 Covid Dataset

This example visualizes the number of active, recovered, and total COVID-19 cases for the top 15 countries in a dataset, using a horizontal grouped bar chart rendered with SVG. Red bars show active cases, blue bars show total cases, and green bars show recovered cases, with a legend implied by the title. The visualization uses React with state management and the D3.js library for data loading via `d3.csv`, scaling with `scaleBand` and `scaleLinear`, and axes through `ticks()`. Data is fetched from a GitHub Gist containing worldwide COVID-19 statistics.

Mar 12, 2023

Loading thumbnail…

ICE-6 Penguin Datset

This visualization presents the Palmer Penguins dataset as a scatter plot, mapping body mass against flipper length, with each point colored by species (Adelie, Gentoo, Chinstrap). It loads data from a CSV URL using `d3.csv`, applies linear scales with `d3.scaleLinear`, and renders circles in an SVG. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while custom labels use SVG text elements with rotation.

Mar 7, 2023

Loading thumbnail…

ICE5

This example displays metadata about DC public schools, presenting the dataset’s size in kilobytes, row count, column count, and column names within a styled HTML page. It uses D3 v7’s `d3.csv` to load a CSV file from a GitHub gist, then processes the parsed data with `d3.csvFormat` and `data.columns` to generate the summary text. The page also includes a button linking to the raw dataset and uses CSS for layout and background styling.

Mar 2, 2023

Loading thumbnail…

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

A smiling face assembled from SVG primitives demonstrates fundamental D3.js DOM manipulation. The code uses D3 v5 selections, `append`, and `attr` to build the face features in a central `<g>` element, including ears, eyes, eyebrows, nose, mouth, teeth, tongue, hair, hat, and collar. A chained `transition` with `duration` animates the eyebrows moving up and down over four-second intervals. The example emphasizes basic shape construction with `d3.arc` and direct attribute setting, rendering entirely as animated SVG.

Feb 23, 2023