S

ShivaKarpe

@ShivaKarpe·23 public vizzes

Loading thumbnail…

ICE_8_Family_Tree

This interactive family tree visualization displays genealogical relationships using an animated, collapsible node-link diagram. Built with D3 v3 and SVG, it loads hierarchical JSON data from `family-data.json` and renders colored rectangular nodes representing family members, with links labeled by relationship direction. The visualization includes zoom and drag capabilities via `d3.behavior.zoom`, tooltips on hover, and smooth transitions when expanding or collapsing nodes through click interactions. The code uses `d3.layout.tree` for layout calculations and custom collision detection to prevent node overlap.

Loading thumbnail…

Social Network Graphic

This interactive social network graphic visualizes connections among six individuals (Pawan, Shiva, Manikanta, Vamshi, Ashwin, and Laxman) using a force-directed layout. Nodes are rendered as blue circles with labels, while orange links between them have stroke widths proportional to relationship weight. The visualization uses D3 v4 and v2 APIs, specifically `d3.layout.force()`, to simulate node attraction and repulsion, enabling click-and-drag repositioning of nodes. The graph data originates from `graph.json`, and the SVG output updates node positions and link coordinates on each simulation tick.

Loading thumbnail…

Family_tree ICE_8

This example visualizes a hierarchical tree structure as an interactive, animated family tree, with each node rendered as a colored box representing a data element and its metadata. The visualization displays parent-child relationships and link directions (SYNC or ASYN) between nodes, using color coding to differentiate node types. Built with D3.js v3 and jQuery, it uses `d3.layout.tree` for tree layout computation, SVG for rendering, and `d3.behavior.zoom` for pan and zoom interactions. Node clicks trigger smooth animations, while tooltips provide additional details on hover. The data comes from a JSON file containing nested tree nodes with names, versions, and link descriptions.

Loading thumbnail…

ICE_8 Family_Tree.

This example displays a hierarchical tree representing user interaction with a learning task. Starting at a root node, it branches into whether the task was visited, attempted, and ultimately answered correctly or incorrectly, with each node distinctly colored. Users can click any node to collapse or expand its children, with smooth animated transitions. The visualization uses D3 v5’s `tree()` layout and `linkHorizontal()` generator, rendering SVG rectangles and text, with zoom functionality enabled through `d3.zoom`.

Loading thumbnail…

ICE_8 Family_Tree

This interactive family tree visualizes user engagement with questions, branching from "Visit" to "Attempted" and "Correct/Incorrect" paths, with colors encoding outcomes. Built with D3 v5, it uses a horizontal tree layout (`d3.tree`), SVG rendering, and animated transitions (`transition().duration()`) to smoothly collapse and expand nodes on click. The dataset (`treeData`) is loaded from a JavaScript module, and zooming is handled via the `d3.zoom` API.

Loading thumbnail…

ICE_8 US_Map

This example displays a choropleth-style map of the United States, with state boundaries highlighted in red against a black landmass and an aqua ocean background. It uses D3’s `geoAlbers` projection and `geoPath` to render the map, while `geoGraticule` draws grid lines. Data comes from TopoJSON in the US Atlas, loaded via `d3.json` and processed with `topojson.feature` and `topojson.mesh`. The visualization is built with React, rendering SVG elements through a `Marks` component.

Loading thumbnail…

ICE_8 World_Map

This example displays a world map rendered as an SVG using D3.js, with countries filled in dark green against a dark blue sphere on a black background. It demonstrates fundamental DOM manipulation and geographic visualization by using `d3.geoPath` with a `geoNaturalEarth1` projection and TopoJSON’s `feature` API to convert raw map data into drawable paths. The data is loaded from a remote JSON file hosted on GitHub, and the map’s appearance is controlled through CSS classes (`.sphere` and `.country`). The visualization highlights how simple data-binding and SVG path generation can create an interactive-free but polished cartographic presentation.

Loading thumbnail…

Reusable_D3_Scatter_Plot

This example presents a reusable scatter plot of the classic Iris Dataset, with points colored by species and axes labeled by petal and sepal measurements. The visualization cycles through different measurement combinations every two seconds, updating the x-axis mapping via a `setInterval` animation while the y-axis remains fixed. Built with D3 v6, the code uses `d3.csv` for data loading, `d3.scaleLinear` and `d3.scaleOrdinal` for scales, and `d3.axisLeft`/`d3.axisBottom` for axes. A custom `scatterPlot` module encapsulates the chart, which is rendered as SVG circles with a legend.

Loading thumbnail…

Reusable_D3_Scatter_Plot

This animated scatter plot explores the Iris dataset, cycling through different feature combinations on the x-axis every two seconds while the y-axis remains fixed on sepal length. It uses D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` to build reusable axes, while circles are colored by species (setosa, versicolor, virginica). The chart is rendered as an SVG with a `setInterval` loop that updates the x-value accessor, demonstrating a reusable chart pattern inspired by Mike Bostock's “Towards Reusable Charts.”

Loading thumbnail…

ICE_7 Line_Chart

This line chart displays the number of deaths in the USA from 2012 to 2022, with the year on the x-axis and the death count on the y-axis. The SVG visualization uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to render the data, which is loaded from a CSV file via d3.csv. The chart includes gridlines, axis labels, and a blue line path, with margins and tick formatting configured in the code.

Loading thumbnail…

ICE_7 Area_Chart

This area chart visualizes deaths in the USA from 2012 to 2022, using a smooth curve to show yearly trends. Built with D3 v5, it renders an SVG with a blue-filled area beneath a black line, using `scaleTime` and `scaleLinear` for axes. The chart includes grid lines, axis labels, and a legend-free design, with data loaded from a CSV via `d3.csv`. The `area` and `line` generators apply `curveBasis` for smoothing.

Loading thumbnail…

ICE_7 Line_Chart

This chart displays the number of students per major over time, using a line chart to show trends from 2009 to 2019. The visualization is rendered as an SVG using D3 v5, with a time-scaled X-axis and a linear Y-axis. Grid lines and styled ticks enhance readability, while the line path is drawn using D3’s `line` generator. Data is loaded from a CSV file hosted on GitHub, and axes are created with `axisBottom` and `axisLeft` functions.

Loading thumbnail…

ICE - 7 Pie_Chart

This pie chart visualizes the distribution of students across academic majors at the University of North Texas. Each slice represents a major with its size proportional to the student count. The chart uses D3 v5 APIs including `pie()`, `arc()`, `scaleOrdinal()`, and text labels showing values in thousands, with a color-coded legend. The data is fetched from a CSV hosted on GitHub and rendered as SVG.

Loading thumbnail…

Reusable_D3_Scatter_Plot

A reusable D3 scatter plot animates through the Iris dataset, cycling the x-axis between petal width, sepal width, petal length, and sepal length every two seconds while the y-axis remains fixed on sepal length. Built with d3.scaleLinear, axisLeft, and axisBottom, the chart uses SVG circles and a setInterval-driven re-render to update axes and marks. The data loads via d3.csv from a GitHub Gist.

Loading thumbnail…

Creating a Scatter Plot with D3

This example visualizes the Iris Dataset as a scatter plot, encoding petal length on the x-axis and petal width on the y-axis, with each point colored by species (green for setosa, yellow for versicolor, blue for virginica). It also reads sepal length and width as additional attributes for each circle, though these are not mapped to visual channels. Built with D3 v6, the code uses `d3.csv` to load data, `scaleLinear` and `extent` for scaling, and `axisLeft`/`axisBottom` for axes. Circles are appended via `selectAll` and `join`, rendered as SVG, with axis labels and a title manually positioned.

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x- and y-axes. Points are colored by species (setosa, versicolor, virginica) using blue, red, and black. The chart also encodes sepal length and width into the `rx` and `ry` attributes of each circle, though these do not affect rendering since they are not recognized SVG circle properties. The implementation uses D3 v6 to load CSV data with `d3.csv`, scales with `scaleLinear`, and draws axes via `axisLeft` and `axisBottom`.

Loading thumbnail…

Creating a Scatter Plot with D3.js

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x- and y-axes and coloring each point by species (setosa, versicolor, or virginica). It uses D3.js v6 with a linear scale and axis generators (`d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`) to render SVG circles. Data is loaded via `d3.csv` from a remote URL, with numeric fields parsed on ingestion. The plot is sized to the full window and includes custom tick styling.

Loading thumbnail…

Basic Scatter Plot

This visualization uses D3 v4 to render a basic scatter plot of the Iris dataset, showing sepal length on the x-axis against petal length on the y-axis. The code employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and SVG circles for data points. It also includes custom axis labels and uses `d3.csv` to load the remote Iris dataset, with data parsed by a row function that converts string values to numbers.

Loading thumbnail…

Basic Scatter Plot

This basic scatter plot visualizes the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis with a circle per sample. The chart uses D3 v4’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes with grid lines, while `d3.csv` loads the data and parses numeric fields. Points are appended as SVG circles, positioned via the scales, with margins and rotated axis labels styled through SVG text elements.

Loading thumbnail…

ICE_6

This visualization displays the high stock prices for United Health Care across ten dates, rendered as a horizontal bar chart using SVG. React manages the component state, while D3 v5’s `csv` loads the data, and `scaleBand` and `scaleLinear` map dates to y-positions and high prices to bar widths. The chart includes axis ticks and gridlines, with data sourced from a GitHub-hosted CSV file.

Loading thumbnail…

ICE_6

This bar chart displays the top 10 countries by population using data loaded from a CSV file via `d3.csv`. The visualization is built as a React component using hooks like `useState` and `useEffect`, with SVG rendering for the chart elements. D3 scales (`scaleBand` and `scaleLinear`) position the bars and axes, while `axisBottom` and `axisLeft` are used implicitly through manual tick rendering. The chart updates reactively when the asynchronous data loading completes.

Loading thumbnail…

ICE-5: The Shapes of Data

This example displays summary statistics about a United HealthCare stock dataset, including file size, row count, and column count, in a large text overlay on a blue background. It uses D3.js (v7) to fetch the CSV data from a GitHub gist via `d3.csv`, then processes the formatted output with `d3.csvFormat` to calculate the data size in kilobytes. The visualization also includes a simple SVG graphic featuring a stylized mountain and circle shape, rendered with static SVG elements and colored fills.

Loading thumbnail…

Face

This gallery example displays a stylized, cartoon-like face composed of SVG shapes, built with React and D3.js v7. The face features a large grey circular head with a blue stroke, red and purple eyes with green irises, a yellow elliptical nose, and black line-based eyebrows, eyelashes, and mouth. The D3 `arc` API constructs the mouth as a semi-circular path, while the rendering primarily relies on React to define and position the SVG elements, with the d3.js library used specifically for that mouth arc.