serebryanaya.n@gmail.com

@resnica·26 public vizzes

Scatter PLot with Menus

This interactive scatter plot displays the classic Iris dataset, with drop-down menus to switch which quantitative attribute is shown on the X axis. Animated transitions move circles to new positions over two seconds, while the radius grows on entry. Built with React and D3, it uses `scaleLinear` for axes, `selectAll` with data joins for rendering, and custom menu and scatter plot modules, rendering as SVG.

Mar 20, 2023

Loading thumbnail…

Fork of #4 COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework Animated

This animated scatter plot tracks COVID-19 deaths and case averages across the United States using a reusable D3 chart framework. The visualization cycles between two metrics every five seconds, transitioning circles smoothly along the time-based x-axis and linear y-axis. Data comes from the NY Times rolling averages dataset, rendered as SVG circles with a dual-axis format showing month labels and annual year markers. The chart uses D3 v6.7 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, and `transition` to handle the temporal updates and animated position changes.

Mar 10, 2023

Loading thumbnail…

Fork of Labeled Animated Reusable D3 Scatter Plot

This animated scatter plot cycles through the numeric columns of the Iris dataset, updating the x-axis to show each measurement while the y-axis remains fixed on petal width. Built with D3 v6, it uses SVG circles and smooth transitions to reposition points between axes, with axis titles sliding in and out. The visualization employs reusable chart components and demonstrates a looping animation driven by setInterval that sequentially calls the plot function with new data mappings.

Mar 10, 2023

Loading thumbnail…

Animated Reusable Scatter PLot

This animated scatter plot cycles through the four numeric columns of the Iris dataset every five seconds, smoothly transitioning points between axes using D3 transitions. Built with reusable custom code and React scaffolding, the visualization leverages D3’s `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` APIs within an SVG rendering. Circles are color-coded by species (e.g., setosa in olive, virginica in yellow), and enter/update/exit joins animate radius growth and positions. Data loads from a CSV via D3’s `csv` and `parseRow`.

Mar 10, 2023

Loading thumbnail…

Selfupdated Reusable Scatter PLot

This example demonstrates a reusable scatter plot of the Iris dataset, cycling through different flower measurements every two seconds. Built with D3 and React, it uses `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles colored by species. The chart updates dynamically via `setInterval`, calling the plot’s accessor methods like `xValue()` and `yValue()` to re-bind data, while `join()` handles enter/update/exit transitions. Data loads from a CSV URL using `d3.csv` with parsed numeric columns, and margins, radius, and species accessors are configurable through a fluent API.

Mar 9, 2023

Loading thumbnail…

Reusable Componenet

This example demonstrates a reusable D3.js chart component implemented in React, visualizing JavaScript libraries by their GitHub stars (x-axis) and minified file size (y-axis). Circle size and fill color encode star count, with a tooltip revealing library name and metrics. Built with D3's `scaleSqrt`, `scaleLinear`, `axisBottom`, and `axisLeft`, it loads data from a CSV via `d3.csv` and renders SVG, leveraging a fluent chart factory with configurable accessors for margins and data fields.

Mar 6, 2023

Loading thumbnail…

Fork of Reusable Scatter PLot

This interactive scatter plot visualizes JavaScript libraries by their GitHub stars and minified file size, with circle radius and color encoding additional data dimensions. Built with React and D3 v7, it uses `scaleSqrt` for proportional radii, `scaleSequential` with `interpolateCool` for color mapping, and renders SVG circles with tooltips. Data loads from a CSV file via `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`, with margins configured for layout.

Mar 6, 2023

Loading thumbnail…

Reusable Scatter PLot with Symbols

This example demonstrates a reusable scatter plot that displays the Iris dataset, mapping petal length and width along the axes while encoding species with distinct symbols and colors. The chart uses d3.scaleLinear for positioning, d3.scaleOrdinal with d3.symbols to generate symbol paths, and d3.axisLeft/axisBottom for ticks. The SVG is rendered via React, and the plot is built as a configurable closure function, with hover tooltips added using SVG `<title>` elements.

Mar 6, 2023

Loading thumbnail…

Reusable Scatter PLot

This example shows a reusable scatter plot of the Iris dataset, colored by species, with petal length on the x-axis and petal width on the y-axis. The plot is built with React and rendered as SVG using D3’s `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, while circles are added via `selection.join`. The dataset is loaded as CSV using D3’s `csv` function, with numeric parsing applied to each row. The scatter plot component is configurable through a fluent API for width, height, data, margins, and other properties.

Mar 3, 2023

Loading thumbnail…

Java Script Libraries

This example visualizes popular JavaScript libraries as circles arranged along a horizontal axis. Each circle’s area corresponds to the library’s GitHub star count, while its lightness reflects the minified file size in kilobytes, with darker colors indicating larger codebases. Hovering reveals a tooltip with the library name, star count, and size. The code uses D3’s `csv`, `scaleSqrt`, `scaleLinear`, and `max` to load and scale data from a remote CSV, then renders SVG circles with appended `title` elements for interactivity.

Mar 2, 2023

Loading thumbnail…

Java Script Libraries with axis

This example visualizes JavaScript libraries as circles, mapping their GitHub Stars to the x-axis, Minified File Size to the y-axis, and using area to show star count. It uses d3.csv to load data, d3.scaleSqrt for radius, d3.scaleLinear for axes, and d3.axisLeft/axisBottom for labeled ticks. The SVG rendering includes hover opacity changes and tooltip titles. The circles are colored using an HSL function driven by file size, creating a density-focused scatterplot.

Mar 2, 2023

Loading thumbnail…

d3 multiple simbols

This example demonstrates a grid of intersecting horizontal and vertical bars, overlaid with multiple distinct SVG symbols. The visual effect is achieved by using SVG masks to selectively reveal the grid lines through the shapes of the symbols. The code uses the d3 library's `select`, `range`, `symbols`, and `symbol` functions to generate the paths, and renders the final result as an SVG element. Two masks, one inverted and one not, are applied to the bars to create the layered, symbolic pattern.

Mar 2, 2023

Loading thumbnail…

D3 Scatter PLot

This scatter plot visualizes the Iris dataset, showing petal length against petal width. Points are colored by species—red for virginica, blue for setosa, and green for versicolor—with tooltips revealing exact values and species names. The visualization uses D3 v7 APIs including `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` within an SVG rendered via React. Axes are positioned using margin offsets, and the plot fills the browser window.

Mar 1, 2023

Loading thumbnail…

Barchart Vanila Javascript

This example displays a bar chart of 80 randomly generated values, rendered as green bars with their numerical values appearing on hover. The visualization is built entirely with vanilla JavaScript and the SVG API, creating each rectangle and text element programmatically using `createElementNS`. The bars have a semi-transparent appearance that becomes fully opaque with a thicker stroke on mouseover, while the corresponding value label fades in using a CSS sibling selector. The chart fills the entire browser window by using `window.innerWidth` and `window.innerHeight` to set the SVG dimensions.

Feb 21, 2023

Loading thumbnail…

Wave animation with d3

This example animates a dynamic wave of circles that continuously change in number, position, and radius across the screen. The visualization uses D3 v7’s `select` and `range` functions to generate positional data based on a cosine function, with a time variable `t` incrementing every frame. The circles are rendered as SVG elements and updated via D3’s `join` pattern, which efficiently manages enter, update, and exit selections. The animation runs at 60 frames per second using `setInterval`, creating a smooth, oscillating motion that responds to the evolving data.

Feb 18, 2023

Loading thumbnail…

d3 Slection

This example demonstrates a dynamic scatter plot of animated circles whose vertical positions oscillate sinusoidally over time. It uses React and the D3.js v7 library, specifically `select`, `range`, `data`, and the `join` API to create and update SVG circles each frame. The visualization runs on a 60Hz interval, recomputing data with the sine of a time variable to produce smooth, continuous motion across the screen.

Feb 17, 2023

Loading thumbnail…

JavaScript Arrays

This example demonstrates common JavaScript array operations, including sorting with custom comparators, mapping to objects, reducing to a total, and converting arrays to nested objects. It compares default lexicographic sorting with numeric ascending and descending sorts using both plain JavaScript and D3’s `ascending` function. The code logs sorted arrays, transformed objects, and reduced results to the console, showing how D3’s `ascending` handles key-based sorting for objects. The visualization is purely computational, with no DOM or graphical output, relying on D3 v7.8.2 for its comparator utilities.

Feb 16, 2023

Loading thumbnail…

Pseudo Line chart

A pseudo line chart displays 33 randomly generated data points as a connected polyline that spans the full browser viewport. The example generates a path using raw SVG path commands, constructing the `d` attribute with a sequence of `L` (line-to) instructions. Rendered in red with rounded joins and caps at a 10-pixel stroke width, the chart fills the window by setting the SVG dimensions to the viewport size. The visualization does not use a plotting library, relying instead on direct SVG element creation through the Document API.

Feb 15, 2023

Loading thumbnail…

Pseudo Barchart d3

A dense field of semi-transparent green bars spans the full viewport, mapping each item in an array of 80 random numeric values to its vertical position and height via D3’s `selectAll().data().join()` pattern. The bars use SVG `rect` elements generated with a fixed width and horizontal spacing, while hover interactions alter opacity, fill color, and stroke width through CSS transitions. The visualization is built with D3 v7, using random data generated in JavaScript to fill the window dimensions.

Feb 15, 2023

Loading thumbnail…

d3 simbols

A grid of horizontal and vertical stripes alternates through two SVG masks to reveal a large star-shaped symbol at the center. The example demonstrates D3’s `symbol` and `symbols` API to generate the star path, combined with `mask` elements to create intersecting stripe patterns. Fifty rectangles are drawn in each direction using `d3.range` and `join`, with the horizontal set masked by an inverted white-on-black layer and the vertical set by its opposite. The result shows how layered masks can produce dynamic visual interferences.

Feb 15, 2023

Loading thumbnail…

d3

A grid of alternating horizontal and vertical SVG rectangles is masked to reveal a circular window at the center of the viewport. The example demonstrates how to construct and apply multiple SVG masks using D3’s selection and data-join methods, specifically `selectAll` with `range` and `join('rect')`. Two masks (`circle-mask` and `circle-mask-2`) use black-and-white rectangles and circles to control visibility of the 50 strips in each direction.

Feb 13, 2023

Loading thumbnail…

basic svg shapes

This example demonstrates basic SVG shapes—a polygon, circle, and rectangle—styled with fill, stroke, and opacity transitions on hover. It uses the SVG API directly within an HTML document, applying CSS for styling and interactive effects like increased stroke width and full opacity. Line and path elements are also included, with the path using red stroke-linejoin and linecap. The layout is scaled via an SVG transform, and the shapes are grouped for shared positioning and color attributes.

Feb 9, 2023

Loading thumbnail…

svg mask

This example demonstrates the visual effect of SVG masks by layering horizontal and vertical stripes over a full-viewport canvas. It creates two circular masks, one with a white circle on a black background and the other with a black circle on a white background, then applies them to alternating sets of 50 thin rectangles. The code builds the entire scene programmatically using the Document Object Model (DOM) methods such as `createElementNS` and `setAttribute`, without any external libraries, and renders everything directly in SVG.

Feb 9, 2023

Loading thumbnail…

svg gradient animation

A looping animation of a stylized sunrise and sunset over a layered landscape. The scene uses several inline SVG gradients, including a radial gradient for the sky and two linear gradients for the terrain, each with animated `<stop>` color values. A circle representing the sun moves vertically via an SVG `<animate>` element on its `cy` attribute. All animations repeat indefinitely with a 15-second duration, with the code relying solely on native SVG and SMIL APIs, without any external JavaScript libraries.

Feb 8, 2023

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

Shapes and colors transition between transparent and opaque states, with SVG elements responding to hover. Static circles and rectangles demonstrate inherited fill and stroke properties, while a JavaScript-generated path uses relative line commands to construct a polyline. The example applies SVG and CSS, using `getAttribute` and `setAttribute` to modify the path’s `d` attribute, alongside CSS transitions on `opacity` and `stroke-width` for interactive feedback.

Feb 8, 2023

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a yellow smiley face that fills the browser window, scaling with the viewport dimensions. The face, eyes, and mouth are drawn as SVG shapes inside a React component, with the smile created using the d3 `arc` generator applied to a path. The code uses React 16.9 for the component structure, d3.v5 for the arc calculation, and positions all elements relative to the window’s center. The face’s radius adapts to the window height, and the eyes and mouth are offset by fixed pixel values, resulting in a responsive, SVG-based illustration.

Feb 7, 2023