Skip to main content
Log in
T

Tehran Mammadov

@TehranMammadov01·14 public vizzes

Loading thumbnail…

svg circle double

Two layered sets of SVG rectangles create a woven grid pattern that reveals a central circular window. The first set of horizontal stripes uses an SVG `<mask>` with a white circle to show only the circle’s interior, while the second set of vertical stripes uses an inverted mask to show the area outside the circle. All elements are generated via the DOM API (`document.createElementNS`) without any external libraries. The result is a static, full-window composition of intersecting lines whose contrast defines the circular focal point.

Jun 19, 2022
Loading thumbnail…

Custom of Reusable D3 Scatter Plot

This example demonstrates a reusable scatter plot built with D3 v7, visualizing the classic Iris dataset. It maps petal length and sepal length to x and y positions using `d3.scaleLinear` and `d3.extent` for domains, with circles rendered in SVG. The code defines a custom `scatterPlot` function that configures accessors, margins, and radius, then applies it to the chart via `selection.call()`. Axes are generated with `d3.axisLeft` and `d3.axisBottom`. The view fills the entire browser window, and circular marks include tooltip titles.

Jun 19, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This scatter plot displays the Iris flower dataset, plotting petal width against sepal length. It cycles through four different data columns every two seconds, animating the scatter plot's x-axis to show different variable combinations. Built with D3.js v7, it uses a reusable `scatterPlot` module with `scaleLinear`, `extent`, and axis functions. The SVG rendering updates via a `setInterval` loop, re-calling the plot function with new x-axis values.

Jun 19, 2022
Loading thumbnail…

D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal and petal dimensions across three flower species. The visualization cycles through four different attribute combinations every two seconds, automatically updating the x-axis to show petal width, sepal width, petal length, and sepal length in sequence. Built with D3 v7, the example uses d3.scaleLinear for coordinate mapping, d3.axisLeft and d3.axisBottom for axes, and SVG circle elements for data points, with the scatterPlot function handling the chart configuration.

Jun 19, 2022
Loading thumbnail…

Fork of Religions of Largest 20 Countries

This stacked bar chart displays the estimated 2010 religious composition of the world’s 20 most populous countries, using data from the Pew Research Center. Each horizontal bar represents a country, segmented by religion, with the axis scaled by population. Hovering over a bar segment reveals a tooltip with the country, religion, and population estimate. The chart uses D3.js (version 3.5.5) with the `d3.layout.stack` API for stacking, `d3.svg.axis` for axes, and `d3.legend.color` for the legend. Animated hover interactions on the legend highlight specific religion layers by rendering them in a foreground overlay.

Jun 19, 2022
Loading thumbnail…

Fork of React & D3 Starter

This example renders the classic Iris flower dataset as a scatter plot using React for component structure and D3 for scales, axes, and circle positioning. Sepal length appears on the x-axis and petal length on the y-axis, with semi-transparent circles for each data point. The code demonstrates a decoupled React and D3 integration, where a `VizWrapper` component manages the SVG element and calls a `viz` function that selects circles and axes using `d3.selectAll` and `.join`. It uses `d3.scaleLinear` and `d3.extent` for scaling, with axes created via `d3.axisLeft` and `d3.axisBottom`.

Jun 19, 2022
Loading thumbnail…

Fork of Daily new cases of Covid in Italy (Episode 8)

This visualization shows daily new COVID-19 cases in Italy as a time-series scatterplot, with each point’s radius encoding the number of intensive care patients. A toggle button in the top-left corner hides or reveals a connecting path. Built with D3 v6, it uses `scaleTime`, `scaleLinear`, `d3.csv`, `axisLeft`, `axisBottom`, and `line` to render an SVG, pulling live data from the Italian government’s GitHub repository.

Jun 17, 2022
Loading thumbnail…

D3 JS BUBLES

This visualization displays a set of fifteen animated bubbles moving vertically in a sinusoidal wave pattern, with their radii oscillating as they travel across the screen. The circles are rendered as SVG elements using D3 v7, with the data generated procedurally through a sine function that updates each frame. A `setInterval` timer drives the animation at approximately 60 frames per second, recalculating each bubble's `cx`, `cy`, and `r` attributes continuously. The example demonstrates basic D3 data joins and transitions without interaction.

Jun 16, 2022
Loading thumbnail…

Fork of Double Harmonic

A two-link pendulum traces a spherical path as two connected circles rotate around a fixed center point. The animation uses `setInterval` to update the positions every 50 milliseconds, with the second circle’s motion offset by a constant psi value that creates the harmonic fork effect. The SVG rendering uses `selectAll` and `join` to update circle and line elements, applying black strokes for the pendulum arms and a white circle with a black border for the joint. The visualization responds to browser window dimensions, setting its size based on `window.innerWidth` and `window.innerHeight`.

Jun 16, 2022
Loading thumbnail…

D3 JS SHAPES

This example displays an interactive grid of horizontal and vertical stripes that intersect to create a dynamic pattern. The visualization uses D3.js to generate 100 rectangles along both the x and y axes on an SVG canvas, with each line masked by custom patterns containing all D3 symbols. Two masks are created—one inverted and one not—to alternate which lines remain visible as the symbols overlap. The code leverages `d3.range`, `d3.symbols`, and `d3.symbol` to populate the mask shapes, with each symbol scaled to 8000 units for visibility. The result is a geometric composition where the stripe intersections reveal distinct symbol shapes across the full viewport.

Jun 15, 2022
Loading thumbnail…

D3 JS

An SVG grid of 100 horizontal and 100 vertical rectangles covers the full viewport. Two circular masks, defined via D3's `mask` element, create a lens-like effect: the first mask exposes a central white circle outlined by black-filled rectangles, while the second inverts the fill to produce a complementary pattern. Using D3 v7's `join` method, the code binds `d3.range` data to generate the rectangles, with each strip sized 10 pixels thick and spaced 20 pixels apart. The overlapping masks reveal alternating stripe orientations, forming a dynamic moiré-like crosshatch within the central circular region.

Jun 15, 2022
Loading thumbnail…

svg lines

This visualization displays a series of vertical rectangles across the full viewport, creating a pattern resembling spaced lines. The page generates 100 SVG rectangles, each 10 pixels wide and spaced 20 pixels apart, using raw DOM manipulation via `document.createElementNS` to construct the SVG elements. The rectangles span the full height of the window, which is dynamically set using `window.innerWidth` and `window.innerHeight`. The code relies on standard web APIs for SVG creation and attribute setting, with no external libraries or data sources involved.

Jun 14, 2022
Loading thumbnail…

svg circle

This example renders 100 horizontal rectangles on an SVG canvas, with a circular mask applied so only the area inside a 200-pixel-radius circle centered on the screen is visible. The rectangles are spaced every 20 pixels vertically, each 10 pixels tall and spanning the full window width. The code creates the SVG elements using the native `document.createElementNS` API, building a mask containing a white circle and attaching it to each rectangle via the `mask` attribute. The visualization demonstrates basic SVG masking and procedural element creation in a browser environment.

Jun 14, 2022
Loading thumbnail…

beginner svg

This example demonstrates a simple masking effect in SVG, where a set of horizontal stripes is revealed only through a circular window at the center of the viewport. The visualization uses plain SVG elements created dynamically via the `document.createElementNS` method. A white rectangle serves as the mask base, while a black circle defines the transparent region, and the stripes are drawn as individual `rect` elements with the mask applied. The code runs without any external libraries, relying purely on native browser APIs and JavaScript.

Jun 14, 2022