D

divyageethanjali

@divyageethanjali·18 public vizzes

Loading thumbnail…

ICE 8 Network Graph

This interactive network graph visualizes connections among a group of friends, with nodes representing individuals and links showing relationships. The D3.js force-directed layout uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position nodes, while d3-force provides drag interaction. Node colors come from d3.schemeCategory10 based on group membership (1 or 2). The SVG rendering includes node labels and link thickness scaled by connection value. Users can drag nodes to explore the network, with zoom functionality via d3.zoom.

Loading thumbnail…

ICE 8 Family Tree Simple

This interactive family tree visualization displays hierarchical relationships using a node-link diagram with expandable and collapsible branches. The D3.js v3 layout algorithm arranges nodes vertically by depth, with color-coded node types and labeled links showing connection directions. Users can click nodes to toggle child visibility, with smooth 750ms animated transitions. The visualization supports pan and zoom through D3's zoom behavior, while tooltips provide additional node information. The tree structure comes from a JSON data file loaded via d3.json, with SVG rendering for all graphical elements including custom arrow markers and drop shadows.

Loading thumbnail…

ICE 8 Family Tree With Colors

This interactive family tree visualizes hierarchical relationships using colored nodes, with each type mapped to a distinct color (blue, green, yellow, purple). Built with D3.js v3 and SVG, the tree layout supports zooming, panning, and collapsible nodes, while tooltips display additional details. The visualization renders from a nested JSON structure, using `d3.layout.tree`, `d3.behavior.zoom`, and custom collision detection to adjust node spacing dynamically.

Loading thumbnail…

ICE 8 United States Map

This example renders a choropleth-style United States map using SVG paths generated from TopoJSON data. It uses D3’s `geoAlbersUsa` projection and `geoPath` to convert geographic features into drawable paths, with light blue fills and grey borders. The map is built within a React application, though the visualization itself is handled imperatively by D3 v5, which appends the SVG elements directly to the document body. The source JSON comes from a remote gist containing US state boundaries.

Loading thumbnail…

ICE 8 World Map

A world map rendered in SVG displays countries as cream-colored landmasses against a light blue sphere, with grey borders between countries and light grey graticule lines. Built with React and D3 v5, the visualization uses `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule` to draw geographic features. TopoJSON data from the world-atlas package is processed using `feature` and `mesh` to generate country boundaries and land shapes.

Loading thumbnail…

Fork of HTML Starter

This example displays the text "Hello HTML!" centered on the page, styled with a large 13em font size. The page is built with plain HTML, CSS, and JavaScript, demonstrating a minimal web page structure without external libraries or data sources. The CSS rule applies the font size and center alignment to the `.message` div, and the page renders the static message directly. It serves as a bare-bones starting point for web projects, mirroring the simplicity of the provided HTML starter template.

Loading thumbnail…

Group Chart

This example presents a minimal React-based visualization titled "Group Chart" that displays static text content. The page uses plain HTML and CSS to render the message "Hello HTML!" at a large font size, with no dynamic data or interactive components. The implementation relies on standard CSS styling for layout and typography, with JavaScript serving only as the entry point for the React application. No charting libraries, data processing, or rendering APIs are present, making it a bare-bones demonstration of basic web technologies rather than an actual data visualization.

Loading thumbnail…

Increment Bar Chart

This bar chart displays the average monthly income across different job roles, using horizontal bars sorted by income value. The visualization relies on D3 v5’s `scaleLinear` and `scaleBand` to map income and job titles, with `axisLeft` and `axisBottom` generating the axes. Data is loaded from a remote CSV file via `d3.csv`, and the chart is rendered as SVG within a React framework. The bars are styled with a light blue fill, and axis labels and a title are added using D3’s selection and text methods.

Loading thumbnail…

Area Chart

This area chart visualizes global ozone-depleting substance emissions from 1960 to 2014, drawn with D3 v5 as an SVG. It uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` with gridlines, and a `d3.line` plus `d3.area` generator with `curveBasis` to create a smoothly filled purple shape beneath the line. The data is loaded from a CSV via `d3.csv` and rendered after coercing year and emission values to numbers.

Loading thumbnail…

Line Chart

This line chart shows the depletion of ozone-depleting substance emissions from 1960 to 2014, with year on the x-axis and emission levels on the y-axis. The visualization uses React and D3 v5, employing d3.csv to load the dataset, scaleLinear for both axes, and d3.line with curveBasis to generate a smooth purple path. Axis labels and a title are added via d3.axisBottom, d3.axisLeft, and SVG text elements within a 1000x500 SVG.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris Dataset, cycling through different x-axis variables (petal width, sepal width, petal length, sepal length) every few seconds while keeping sepal length on the y-axis. Data points are colored by species using a simple switch statement, with a color legend and axis labels updating dynamically. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `axisLeft`, and `axisBottom`, and is built as a reusable chart module. It renders as an SVG with a setInterval-driven animation that updates the chart’s x-value accessor.

Loading thumbnail…

Pie Chart

This pie chart displays the 15 largest countries by land area, with each slice colored using D3’s `scaleOrdinal` and `schemeCategory10`. The chart loads CSV data from a GitHub gist via `d3.csv`, sorts it by area, and renders slices with `d3.pie` and `d3.arc`. A legend on the right, built with SVG `rect` and `text` elements, lists each country’s name and area in square kilometers. The visualization uses React with D3 v5 and renders entirely through SVG.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot cycles through the four Iris dataset features on the x-axis while the y-axis displays sepal length. Data points are colored by species: green for setosa, yellow for versicolor, and blue for virginica, with a corresponding legend. Built with D3 v6, the visualization uses the `scaleLinear`, `axisLeft`, and `axisBottom` APIs from the `d3` module within a reusable `scatterPlot` function. The SVG output updates at intervals, redrawing axes and labels to reflect the changing feature selection.

Loading thumbnail…

ICE 6 Bar Chart

This horizontal bar chart displays the 15 largest countries by area, using D3.js v5 to map country names to a band scale on the y-axis and area in square miles to a linear scale on the x-axis. The SVG rendering includes axis labels, a title, and gridlines, with data loaded from a CSV file via `d3.csv`. The code applies a custom tick formatter to abbreviate large numbers, and bars are styled with CSS.

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris dataset, comparing petal length against sepal length, with each point colored by species (Iris-setosa in blue, Iris-versicolor in red, and Iris-virginica in black). The visualization uses d3.csv to load and parse the data, then applies d3.scaleLinear and extent to map values to pixel coordinates, drawing circles with SVG. Axes are rendered with d3.axisLeft and d3.axisBottom, and labeled text is added via SVG elements. The plot is displayed full-screen in an HTML page using D3 v6.

Loading thumbnail…

ICE-5 Scientific Data Visualization

This example displays a simple web page titled "ICE-5 Scientific Data Visualization." It loads a CSV file from a GitHub gist using the D3.js library's `d3.csv` function, then shows the file's size, row count, and column count in a `<pre>` element. Below that, it displays an SVG star image using an `<img>` tag. The page’s styling is set via CSS in `index.css`, and the code runs in a React framework with D3 v7.

Loading thumbnail…

Fork of Fork of emoji-like face with mouth (D3)

This example renders a stylized emoji face with a closed mouth using React and D3. The face is drawn as a yellow circle with black strokes, two offset eye circles, and a wink represented by a horizontal line. The mouth is created using the D3 `arc()` generator and scaled SVG coordinate transforms. The visualization demonstrates integrating D3 shape generators within a React component, rendering to SVG with a minimal HTML page loading React, ReactDOM, and D3 from unpkg.

Loading thumbnail…

Fork of emoji-like face with mouth (D3)

This example, built with React and D3.js, renders an emoji-like smiley face entirely as SVG. The geometric shapes—a yellow circle for the head, two circles for eyes, and a line for a wink—are positioned using D3's `arc` generator for the mouth. The face is centered within a 960×500 viewport, and all coordinates are computed relative to the center using a group transform. The code imports `arc` directly from D3 and uses static, hard-coded dimensions, demonstrating a clean refactored approach to creating vector illustrations.