sukumardunn

@sukumardunn·13 public vizzes

Untitled

This example demonstrates the fundamental structure of a data visualization built with React, HTML, and CSS. It presents a minimal web page that initializes and renders a visualization, showing how React components integrate with standard web technologies. The visualization itself is not data-driven; it serves as a static display of the underlying framework setup. The code uses standard React APIs for component creation and rendering, alongside basic CSS for styling, providing a clean starting point for more complex interactive projects.

Mar 10, 2023

Loading thumbnail…

sk

This example demonstrates an input field that formats numeric values as decimals with a period as the group separator, supporting values up to 999,999. It uses the Inputmask library to apply the decimal masking directly to a DOM element selected via `document.getElementById`. The page consists of a minimal HTML structure with a single input element, initialized by JavaScript that invokes `Inputmask('decimal', ...)` and chains the `.mask()` method to enforce the formatting behavior.

Mar 8, 2023

Loading thumbnail…

curve graph

This curve graph displays five concentric donut rings, each representing a data value (45, 9, 66, 50, and 100) as a steel-blue arc against a transparent background, with percentage labels positioned along the inner gaps. Built with React and rendered as SVG, the visualization uses D3.js v3’s `d3.svg.arc()` and `d3.layout.pie()` to construct the arcs, mapping each data point to a ring with varying inner and outer radii. The code appends paths and rotates the entire group 180 degrees, while fill opacity decreases with each successive ring to create a layered effect.

Feb 16, 2023

Loading thumbnail…

color palette generator

This example presents a simple color palette generator using D3.js (v7) within an HTML page. It displays a circle and a series of five rectangles, each filled with a color interpolated along a linear scale from orange to black, using a gamma-corrected RGB interpolation with a value of 1.5. The visualization is rendered as SVG, with shapes positioned and colored based on the numeric scale values, demonstrating D3's `scaleLinear` and `interpolateRgb` APIs.

Feb 6, 2023

Loading thumbnail…

start

This example visualizes survey scores for five book genres as a horizontal bar chart, with categories such as Fantasy and Romance ranked along the y-axis and their scores plotted on a 0–100 scale. The chart is rendered as an SVG using D3.js version 7 within a React framework, where the bar widths are derived from a linear scale for scores and a band scale for genre categories. The visualization also includes labeled axes, with category names on the left and numerical tick marks on the bottom, while the bars themselves are filled with a solid steel-blue color.

Feb 2, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and CSS styling, using inline SVG elements with circles and rectangles to compose a simple visual arrangement. It shows how CSS properties like fill, stroke, and stroke-width are applied to SVG shapes, with a transition effect on the rectangle. The code uses plain SVG tags (circle, rect) styled via a `<style>` block in the HTML document, featuring circle pairs with varying radii and a single rectangle that changes its fill color and stroke width when hovered. The rendering approach is static SVG markup with no JavaScript interactivity beyond CSS hover animations.

Feb 1, 2023

Loading thumbnail…

d3

A playful set of five text elements counts up to 10 on load with staggered delays, then changes to 50 on mouseenter and back to 10 on mouseleave using `d3.transition` and `d3.interpolateRound` inside a custom `.tween`. The page background animates from red to green via a chained `transition().style()`, while an SVG renders six yellow circles with radii proportional to the square root of their data values using `d3.selectAll().data().enter().append()`. The example demonstrates D3 v7’s selection, transition, and tweening APIs in a plain HTML page.

Feb 1, 2023

Loading thumbnail…

start

This visualization shows a simple area chart built with D3.js that animates from a flat baseline to a jagged time series of ten date-value pairs. The code uses a D3 time scale and linear scale to map the data, with an SVG path generated via the `d3.svg.area()` API. The animation runs through a `transition.attrTween` that interpolates between the starting all-zero values and the actual dataset using `d3.interpolateArray`, while data is bound directly as an array of objects with `date` and `value` properties.

Feb 1, 2023

Loading thumbnail…

Untitled

A red circle sits at the center of a full-window SVG canvas. When the mouse enters the circle, a green circle and a black circle appear on top of it, and the red circle transitions its radius to 100 with a 750ms duration. On mouse leave, the circle returns to a radius of 40 and its red fill over 500ms. The example uses D3 v7 to append SVG elements and the `transition` API for animation, while `d3.interpolateRound` is called to compute a rounded interpolation value.

Feb 1, 2023

Loading thumbnail…

Untitled

This example demonstrates a looping text transition in which a div element toggles between the words "before" and "after" with a two-second delay and three-second duration. The code uses D3.js v7's selection methods, including `.text()`, `.style()`, and `.transition()`, within a `while(true)` loop to create continuous animation. The rendering approach is a minimal HTML page with no external data source, relying solely on D3 transitions to animate the text content and font size on an unstyled body.

Jan 31, 2023

Loading thumbnail…

yes

This example displays a single word, "before," in large text that transitions to "after" over a 2.5-second fade, then immediately repeats by appending a new element. The animation loops indefinitely using an infinite `while(true)` loop. It leverages D3 v7’s `d3.select` to target the body and `.transition()` with delay and duration settings to toggle text content. The page is a bare HTML document with embedded JavaScript, demonstrating a minimal CSS-free animation cycle driven by D3’s DOM manipulation and transition API.

Jan 31, 2023

Loading thumbnail…

js arrays

This example demonstrates JavaScript array manipulation techniques using D3.js. The code explores the `reduce`, `map`, `sort`, and `spread` operators on sample product and cart data, logging results to the console. The visualization portion, which uses `select` and `append` to create SVG circles and rectangles with animation, remains commented out. The active code focuses on computing total prices and grouping products into price categories, showing how array methods can transform and organize data structures.

Jan 27, 2023

Loading thumbnail…

d3 intro

This example renders a full-screen SVG filled with 100 horizontal rectangles, each stacked vertically with a fixed height of 10 pixels and a small gap between them. The visualization uses d3.select and d3.range to generate the data, then binds it to rect elements via a data join. The rectangles span the entire window width, creating a simple striped pattern that highlights D3’s declarative approach to binding data to SVG shapes using the .attr and .join methods.

Jan 25, 2023