Skip to main content
Log in
A

abhineetsingh10

@abhineetsingh10·15 public vizzes

Loading thumbnail…

Zoomable treemap template

This zoomable treemap displays hierarchical data through nested rectangles sized by value, allowing drill-down navigation to explore subregions. It visualizes Indian education statistics from a JSON file, grouping entries by region and subregion. The example uses d3.v3 with the d3.layout.treemap API and SVG rendering, implementing custom recursive layout and accumulate functions. Click transitions animate zooming between hierarchy levels, with an orange breadcrumb bar showing the current path and enabling navigation back to parent nodes.

Aug 17, 2022
Loading thumbnail…

Zoomable treemap template

Built with D3.js v3 and jQuery, this interactive visualization presents education resource data as a zoomable treemap. The code uses `d3.layout.treemap` to hierarchically arrange rectangles by value, colored via `d3.scale.category20c`, with click-to-transition zooming between parent and child nodes. Data is loaded from a JSON array of entries containing subject, region, subregion, and count values, which the treemap aggregates and lays out recursively. The SVG renders responsive rectangles and a grandparent breadcrumb header, demonstrating a reusable template for hierarchical exploration.

Aug 11, 2022
Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, encoding different flower species by color. Hovering over a color legend highlights only the corresponding species while fading all other points. The visualization is built with React and D3 v5, using `scaleLinear` and `scaleOrdinal` for positioning and color, SVG circles for marks, and custom React components for axes and the interactive color legend.

Aug 9, 2022
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus dynamically control which attribute is plotted on the x-axis and y-axis, with axis labels and tick marks updating accordingly. The visualization uses React for the interface and D3's `scaleLinear` and `extent` functions for scaling, while `scaleSequential` with a RdYlGn interpolator colors each point based on a third selected attribute. The SVG rendering draws circles with hover-enabled tooltips.

Aug 9, 2022
Loading thumbnail…

Reusable D3 Scatter Plot

This reusable scatter plot displays the Iris Dataset, mapping petal length against sepal length for three species of iris flowers. The visualization uses D3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, `symbol`, and `symbols` APIs to render an SVG plot with distinct symbols for each species. The chart is built as a configurable D3 module via a `scatterPlot()` function, which accepts width, height, data, value accessors, margins, and radius as chainable options. Data is loaded asynchronously from a CSV file using `d3.csv`.

Aug 8, 2022
Loading thumbnail…

D3 Scatter Plot

This D3.js scatter plot visualizes the classic Iris dataset, mapping sepal and petal measurements to position and size. Each circle's x-coordinate represents petal length, y-coordinate sepal length, and radius petal width, while color encodes sepal width using a sequential interpolateRdYlGn scale. Built with D3 v7 and rendered as SVG, the visualization uses d3.csv for data loading, d3.scaleLinear for axes, and d3.scaleSequential for the color gradient. Tooltips display all four measurement values via SVG title elements, with axes generated through d3.axisLeft and d3.axisBottom.

Aug 6, 2022
Loading thumbnail…

The Wealth & Health of Nations

This interactive scatterplot animates 209 years of global development, tracing each nation’s per-capita income (x-axis), life expectancy (y-axis), and population (circle radius) across time. Clicking and dragging the year slider scrubs forward and backward through the dataset, with circles colored by geographic region. The visualization uses D3 v3’s scales (log, linear, sqrt), axes, and transitions, interpolating sparse historical data from Gapminder via linear interpolation and bisection. Rendered as animated SVG elements, it recreates Hans Rosling’s famous 2006 TED talk visualization.

Aug 5, 2022
Loading thumbnail…

D3 Scatter Plot

This example displays a static HTML page with a large, centered message reading “Hello HTML!” in bold black text, while also logging “Hello JavaScript!” to the console. The visualization uses no plotting or data libraries; instead, it relies on basic CSS styling for the message layout and a separate `script.js` file, which likely contains logic beyond the shown `console.log` call. The code demonstrates a minimal setup where HTML, CSS, and JavaScript are separated into distinct files, but no data source or rendering technique is visible beyond the text output.

Aug 4, 2022
Loading thumbnail…

JS in HTML

This example demonstrates a web page that combines an HTML heading with JavaScript console output. The static HTML (“Hello HTML!”) is rendered in a large, centered font using a CSS class, while an external JavaScript file logs “Hello JavaScript!” to the browser’s console. The page uses plain HTML, embedded CSS in a `<style>` tag, and a separate script file loaded via the `<script>` tag, illustrating a basic separation of markup, styling, and scripting without relying on external libraries.

Jul 30, 2022
Loading thumbnail…

D3 Selection Exploration

This example demonstrates animated D3 selections using 15 circles that undulate vertically and pulse in size over a sine wave. The visualization uses d3.select and selection.data with enter/merge patterns to bind a continuously updating dataset, while setInterval triggers re-renders approximately every 16 milliseconds. The SVG elements are appended directly to the document body, with positions and radii computed from the current time parameter. d3.range generates the initial data indices.

Jul 29, 2022
Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3.js and SVG. It displays a grid of vertical and horizontal rectangles overlaid with two masks that reveal alternating symbol shapes—including circles, crosses, and diamonds—arranged horizontally across the canvas. The code imports `select`, `range`, `symbols`, and `symbol` from D3 to generate the shapes and masks, rendering 100 rectangles per axis at 20-pixel intervals. The visualization uses the D3 `range` and `join` methods to bind data, with mask rectangles toggling between white and black fills to create the interlocking pattern.

Jul 20, 2022
Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWITT-inspired geometric composition using raw SVG and JavaScript. The visualization layers two sets of striped rectangles—one horizontal, one vertical—whose visibility is controlled by circular masks, creating a clean intersection of perpendicular lines within a central circle. The code constructs SVG elements programmatically via `document.createElementNS`, applying masks with a white circle on black and an inverted black circle on white to reveal alternating patterns. No external libraries are used; the rendering relies entirely on native SVG mask and rect primitives.

Jul 18, 2022
Loading thumbnail…

Copying Nita's work

Three blue rectangles sit in a row on a black-outlined SVG canvas. This example demonstrates interactive CSS transitions on SVG elements using plain React within an HTML page. Each rectangle is assigned a distinct CSS class, and hovering over one gradually changes its fill color and dramatically thickens its stroke over three seconds via the `transition: all 3000ms` rule. The code relies on standard SVG markup and CSS hover pseudo-classes, with no external JavaScript libraries beyond React for structure.

Jul 16, 2022
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes rendered directly in a web page, including circles, rectangles, and lines with custom positioning, colors, and stroke properties. The visualization uses the native SVG API with inline markup inside an `<svg>` element, setting attributes like `cx`, `cy`, `r`, `x`, `y`, and `stroke` programmatically. Two circles and a line are drawn against a large outlined rectangle, showing how primitive geometric elements form a basic composition. The rendering relies entirely on static SVG code without JavaScript libraries or data bindings.

Jul 16, 2022
Loading thumbnail…

Migrant Deaths Linked Views with Fast Brushing

This example presents a linked view of migrant deaths worldwide. A bubble map displays the total dead and missing across geographic locations, while a date histogram beneath it shows the temporal distribution. Fast brushing on the histogram filters the map’s data points in real time, highlighting only incidents within the selected date range. The visualization is built with React and D3 v5, using `d3.geoNaturalEarth1` and `d3.geoPath` for the map projection and `d3.scaleSqrt` for bubble sizing, with data from the Missing Migrants Global dataset.

Jul 16, 2022