Skip to main content
Log in
S

sakhabutdinov

@sakhabutdinov·45 public vizzes

Loading thumbnail…

FullStack D3 1

A line chart displays daily maximum temperatures over time, with a light blue rectangular region highlighting temperatures below the freezing point of 32 degrees Fahrenheit. The visualization uses D3 v5 to load JSON weather data, parse dates, and generate the SVG line and axes. The chart is rendered inside a React application, with margins and scales configured programmatically to fit the window width.

Jul 24, 2020
Loading thumbnail…

Mouse follower

A React-driven SVG visualization tracks the user's cursor with a single gray circle. The circle’s position updates on every mousemove event using React’s `useState` and `useCallback` hooks, reading the event’s `clientX` and `clientY` coordinates. It renders a 960×500 SVG viewport that responds only to pointer movement, with no additional data or interaction logic.

Jul 5, 2020
Loading thumbnail…

Example

A scatter plot displays the relationship between two selectable attributes of a dataset, with red semi-transparent circles animating from the center to their scaled positions. Two dropdown menus, built with a reusable `dropdownMenu` module, allow users to choose which columns map to the x- and y-axes. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `transition.attr` to update axes and points with a staggered delay. SVG rendering with CSS-styled ticks and labels completes the interactive visualization.

Apr 8, 2020
Loading thumbnail…

Danil Selecting a Year on Line Chart

This line chart shows population trends over time for global regions, with a vertical black line marking the currently selected year and circles highlighting data points at that year. Users can hover over the chart to update the selected year, which re-renders the visualization using D3’s scaleTime, scaleLinear, line generator with curveBasis, and an axis with custom tick formatting. Data comes from UN population estimates (1950–2014) combined with medium-variant projections (2015–2100), processed via nest() and loaded through csv(). The SVG includes a color legend and styled grid lines.

Apr 4, 2020
Loading thumbnail…

Danil Melting Data for Multiple Lines

This visualization displays population trends over time for global regions, using multiple colored lines to compare regional growth from 1950 through 2100. The chart combines historical data from U.N. population estimates with medium-variant projections, melting the dataset to create one line per region. The code uses D3 v5 with `d3.nest`, `d3.line`, `d3.scaleTime`, and `d3.scaleOrdinal` with `schemeCategory10` colors, rendering as SVG paths with a custom color legend.

Apr 3, 2020
Loading thumbnail…

Danil Line chart with Multiple Lines

This multi-line chart displays a week of temperature readings for multiple cities around the world, using time on the x-axis and temperature on the y-axis. The lines are color-coded by city and sorted by each city's final temperature value. The visualization is built with D3 v5, using `scaleTime` and `scaleLinear` for axes, `nest` and `descending` for data grouping, and `line` with `curveBasis` for smooth paths. Data comes from a CSV file sourced from data-canvas-sense-your-city-one-week.

Apr 1, 2020
Loading thumbnail…

Danil Circles on a Map

This visualization combines a choropleth map with proportional circles to display population data by country. The map uses d3.geoNaturalEarth1 projection and d3.geoPath to render world geography, while d3.scaleSqrt sizes circles at each country’s centroid based on 2018 population figures. A color legend built with d3.scaleOrdinal filters countries by economy type, and a size legend explains circle scaling. Users can zoom and pan via d3.zoom, with hover tooltips showing region names and population values.

Mar 31, 2020
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot uses dropdown menus to let users choose which columns of the auto-mpg dataset appear on the x- and y-axes. The code employs d3.scaleLinear, d3.axisBottom, and d3.axisLeft, with a custom dropdownMenu component that updates the chart on selection changes. Circles transition with a staggered delay of 2 seconds each time the axes change, rendered as SVG elements with a red, semi-transparent fill.

Mar 26, 2020
Loading thumbnail…

Danil's many faces

A grid of procedurally generated cartoon faces, each with randomized features, replaces the classic smiley with a field of distinct, animated personalities. The faces' eyes, eyebrows, mouths, and teeth vary in size and position, while eyebrow movements and a rotating color gradient add individual character. Built with React and D3's `arc` for mouth shapes, the implementation renders each face as SVG, leveraging D3's `range` to map out the 64-face layout.

Mar 22, 2020
Loading thumbnail…

Danil working with Coronavirus Data

A single-page visualization displays the total number of COVID-19 deaths worldwide, formatted with commas, alongside the date of the latest data column from the Johns Hopkins CSSE time-series dataset. It loads the CSV via `d3.csv`, sums the numeric values in the final date column using JavaScript’s `reduce`, and formats the result with `d3.format`. The output appears as large red text in a `<pre>` element, updated via the DOM’s `textContent`. The code relies solely on D3 v5 for data fetching and formatting, with no chart or map rendering.

Mar 21, 2020
Loading thumbnail…

Smiley Face Part 6

This example renders one or more procedurally generated smiley faces as SVG, each built from reusable React components for the background, eyes, eyebrows, mouth, teeth, and tongue. It uses d3.arc to draw the mouth and tongue paths, and d3.range to create a grid of faces. Randomized props control each face’s rotation, gradients, colors, and feature sizes. Eyebrows animate via SVG <animate> elements and change color on hover through CSS custom properties.

Mar 21, 2020
Loading thumbnail…

NBA Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each red semi-transparent circle representing a single vehicle. The chart includes labeled axes for both dimensions and a title, with gridlines provided by the axis ticks. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to map data values to SVG coordinates, and loads the auto-mpg CSV dataset from a remote URL. Axis labels and the title are added as SVG text elements, while tick marks and gridlines are styled via CSS.

Mar 14, 2020
Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map displays countries colored by their economy category, with an interactive color legend for filtering. Clicking a legend category highlights only matching countries in full color while dimming others. The visualization uses d3.scaleOrdinal with schemeSpectral for color encoding and d3-geo projections for rendering SVG paths from TopoJSON world data. The legend implements click handling and opacity filtering, while hover states change country fill colors.

Feb 29, 2020
Loading thumbnail…

Customized Face

A large smiling face drawn with SVG occupies the center of the canvas. The face features white circles for the head and eyes, dark outlines, a curved mouth, and a pair of glasses superimposed over the eyes, alongside an orange, angular decorative line piece. The visualization is built with React and D3 v5, using D3’s `arc` to construct the glasses and mouth paths, and D3’s `line` function to define the custom shape. The entire face is rendered within a single SVG group, transformed to center the composition.

Jan 23, 2020
Loading thumbnail…

Smiley Face Part1

A yellow smiley face drawn with SVG in React demonstrates a partially completed visualization. The code uses React to render SVG elements, including a circle for the face, two smaller circles for eyes, and an arc-shaped mouth created with d3.arc(). The face is centered on a 960 by 500 pixel canvas, with the mouth positioned using inner and outer radii and angular extents. The visualization uses static, hardcoded dimensions and offsets, with no interaction or data binding, showcasing a simple geometric composition.

Jan 21, 2020
Loading thumbnail…

Book LRND3 v4 Chapter 5

This interactive chart shows the UK prison population from 1900 to 2013, using animated bar charts to illustrate changes over time. Buttons allow users to jump between historical periods, with bars highlighting specific years (e.g., wartime) and text providing context. The visualization is built with D3 v5, using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with transitions animating bar height and position. Data is loaded from a CSV file via a custom `csvParse` function, and UI elements are added programmatically.

Jan 13, 2020
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification, using a spectral color scale applied to World Atlas TopoJSON data enriched with TSV metadata. The visualization renders via SVG with d3.geoPath and a Natural Earth projection, supporting pan and zoom through d3.zoom. A custom color legend displays ordinal categories with colored circles, while hover interactions highlight individual countries. The map area is tinted blue via a sphere path, and country tooltips show names alongside their assigned economy values.

Jan 8, 2020
Loading thumbnail…

Customizing Axes

This example demonstrates a horizontal bar chart of the world’s most populous countries using a CSV dataset of population figures. It customizes the axes by removing default domain lines, styling tick marks and labels, and formatting tick values with a `.3s` format specifier that converts billions to “B”. The chart uses `d3.scaleLinear` and `d3.scaleBand` to position bars and applies `d3.axisLeft` and `d3.axisBottom` to render SVG axes.

Jan 8, 2020
Loading thumbnail…

Book LRND3 v4 Chapter 5

This interactive bar chart visualizes the UK prison population from 1900 to 2015, with buttons that let users explore different historical periods (e.g., 1900–1930, 1930–1960). Predefined selections highlight notable years, such as 1993, alongside explanatory text for each era. Built with D3 v5, it uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.transition` for animated updates of bar positions and heights, driven by data from `uk_prison.csv`. Buttons load scenes defined in `data.json`, triggering zoom-like range changes and timed transitions.

Jan 7, 2020
Loading thumbnail…

Book LRND3 v4 Chapter4

This example demonstrates a variety of D3.js scale types and SVG path generation techniques from a chapter on scales and shapes. It renders ordinal, point, and band scales with colored symbols and rectangles, then plots a Weierstrass function through linear, identity, power, log, quantize, and threshold scales. Additional sections display sine wave lines with step and basis curves, filled areas, arcs, and custom SVG symbols. The code uses d3.scaleOrdinal, d3.scaleLinear, d3.line, d3.area, d3.arc, and d3.symbol, all rendered as SVG elements.

Jan 4, 2020
Loading thumbnail…

Book LRND3 v4 Chapter3

This example demonstrates shape generation and path interpolation in D3 v5, drawing a sine wave with multiple curve types including d3.curveStepBefore and d3.curveBasis, alongside an area chart and an arc. The visualization splits the SVG canvas into quadrants, each showing different geometric primitives: a line path, a filled area with symbols, and an arc created via d3.arc. The code uses d3.range, d3.scaleLinear, d3.line, d3.area, and d3.symbol to construct the visuals. The rendering approach uses SVG elements appended to the body via a chart factory function, with data generated programmatically from mathematical functions.

Jan 3, 2020
Loading thumbnail…

Book LRND3 v4 Chapter2 - Part2

This example displays a static SVG composition with a French text label, a green semi-transparent circle, two overlapping ellipses, a blue line, and a rounded rectangle. The shapes are drawn using D3 v5 selection methods like `append`, `insert`, and `selectAll`, with attributes set via `.attr`. A single transform chain applies translate, scale, rotate, and skewY operations to all ellipses and the circle. The code follows the chapter’s chart factory pattern, creating an SVG container sized to the window with margin offsets.

Jan 3, 2020
Loading thumbnail…

Color and Size Legends

This example demonstrates two common legend types for D3 visualizations: an ordinal color legend for categories and a square-root size legend for quantitative values. The color legend maps fruit names to distinct colors, while the size legend encodes numeric values using proportional circle radii. Both legends are rendered as SVG groups using reusable functions that leverage D3's `scaleOrdinal`, `scaleSqrt`, and `selection.join` pattern for enter/update/exit handling.

Dec 3, 2019
Loading thumbnail…

Bowl of Fruit

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are drawn as circles with color and size mapped to fruit type. The scene animates through a sequence of state changes—removing fruits, replacing one type with another, and filtering—using D3.js v5 selections and merge operations. The SVG output is generated declaratively, with the `scaleOrdinal` function mapping fruit types to visual properties like fill color and radius. The bowl itself is a static rectangle with rounded corners, while the fruits are positioned and updated imperatively via a custom `fruitBowl` function that handles entering, exiting, and updating elements.

Nov 26, 2019
Loading thumbnail…

World Countries Tree

This visualization displays a hierarchical tree of world countries organized by continent and subregion, using data from a nested JSON file. Each country is shown as a text label, positioned according to its depth in the hierarchy, with connecting paths. The D3 v5 library powers the layout, using `d3.tree()`, `d3.hierarchy()`, and `d3.linkHorizontal()` to compute positions and draw the SVG paths. Text labels are rendered with varying font sizes based on depth, and the entire tree can be zoomed and panned via `d3.zoom()`.

Nov 26, 2019
Loading thumbnail…

Blank Canvas

This example presents an initially blank, full-viewport canvas. It displays a single, fixed, rounded rectangle that fills the entire browser window. The visualization is rendered using an SVG element, whose dimensions are set to match the document body’s width and height via the D3.js library. The code imports the `select` function from D3 and uses it to configure the SVG, appending a rectangle with rounded corners. The underlying styles, defined in CSS, fix the body to the viewport, ensuring the blank canvas remains the sole focus of the page.

Nov 20, 2019
Loading thumbnail…

Let's make a face with D3.js

A yellow face built from SVG shapes is rendered centered in a 960x500 viewport. D3 selections create circles for the eyes and an arc-generated path for the mouth, while rectangular eyebrows animate vertically via chained `transition().duration()` calls on a group element. The code imports `select` and `arc` from d3 v5, using SVG attributes like `cx`, `r`, and `transform` to compose the figure.

Nov 14, 2019
Loading thumbnail…

Cheap Tricks with CSS

This example displays an interactive world map using a natural Earth projection, with countries colored in light green and hover effects turning them red. It loads geographic data from the World Atlas TopoJSON dataset and country names from corresponding TSV metadata. The visualization uses d3.geoPath for geographic rendering, d3.zoom for pan and zoom interactions, and CSS :hover pseudo-classes to create the highlight effect.

Nov 14, 2019
Loading thumbnail…

Let's make a map with D3.js

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue spherical backdrop. It loads geographic data from the world-atlas TopoJSON dataset and converts it to GeoJSON using the topojson `feature` method. The visualization projects the coordinates with `geoNaturalEarth1` and traces country boundaries via `geoPath`, while drawing the globe outline with a sphere path generator. The layout uses a fixed 960×500 SVG canvas with simple CSS styling.

Nov 9, 2019
Loading thumbnail…

Bowl of Fruit - Hover to Select

A bowl of fruit hovers a row of apples and lemons in an SVG canvas; moving the cursor over a fruit selects it, highlighting it with a black outline and triggering an animated resize of the circles. Data is generated procedurally with random IDs, while the visualization uses D3 v5's `select`, `scaleOrdinal`, and `.merge()` API to handle enter, update, and exit transitions over a one-second duration. The fruit bowl remakes itself as apples are eaten or replaced.

Nov 6, 2019
Loading thumbnail…

Bowl of Fruit - Click to Select

A dynamic fruit bowl displays five circles representing apples and lemons, with each fruit scaled by type and color-coded via a categorical scale. Clicking a fruit selects it and adds a black stroke. The visualization uses D3’s selection API to incrementally update the SVG, animating radius and position changes over one-second transitions as fruits are eaten or replaced, demonstrating stateful, event-driven interactions.

Nov 6, 2019
Loading thumbnail…

Bowl of Fruit - Animated

Five apples in a row shrink and disappear as a lemon slides into place among them. D3's `scaleOrdinal` maps fruit type to radius and color, while `transition().duration(1000)` animates each shape's size and horizontal position. A `merge` handles both entering and updated circles, and `exit` removes circles by shrinking them to zero radius.

Nov 6, 2019
Loading thumbnail…

Bowl of Fruit - Forked

A fork of the "Bowl of Fruit" example animates a changing dataset of apples and lemons over time. Circles and text labels are bound to a JavaScript array using D3's data join, with `scaleOrdinal` mappings for color and radius. Timed `setTimeout` calls remove fruits or change one apple to a lemon, triggering re-renders of the SVG via the `fruitBowl` function. The example demonstrates D3 v5's enter, update, and exit selections for dynamic data.

Nov 3, 2019
Loading thumbnail…

World Population Area Chart

This area chart shows a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for scales, and d3.area with curveBasis to generate the filled path. Axes are rendered via d3.axisBottom and d3.axisLeft, with tick lines extending across the plot using negative tick sizes. The SVG output includes axis labels, a title, and a maroon-filled area beneath the curve.

Oct 28, 2019
Loading thumbnail…

Temperature in SF Area chart

This area chart visualizes a week of temperature data in San Francisco, using a smooth curve to show the trend over time. The chart is rendered as an SVG, with time on the x-axis and temperature on the y-axis, both scaled using `d3.scaleTime` and `d3.scaleLinear`. The data is loaded from a CSV file, and the area fill is generated with `d3.area` and `d3.curveBasis`. Axes are created using `d3.axisBottom` and `d3.axisLeft`.

Oct 26, 2019
Loading thumbnail…

Temperature in SF Line chart

This example shows daily temperature variations in San Francisco over a week with a smooth, curved line chart. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperature values to SVG coordinates, with d3.axisBottom and d3.axisLeft rendering labeled axes. Data is loaded from a CSV file via d3.csv, and the line path is generated using d3.line with a curveBasis interpolation. The chart includes a title, axis labels, and a maroon styled stroke for the line, rendered as SVG with margins and tick marks.

Oct 26, 2019
Loading thumbnail…

Temperature in SF Scatter Plot

This scatter plot displays temperature readings over one week in San Francisco, with time on the x-axis and temperature on the y-axis. Using D3 v5, the code loads CSV data via `d3.csv`, parses timestamps and numeric values, and renders circles scaled with `d3.scaleTime` and `d3.scaleLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, featuring grid lines and custom labels. The SVG output is styled with a clean, minimalist aesthetic, with steel-blue points highlighting the temperature trend across the week.

Oct 26, 2019
Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each red semi-transparent circle representing a vehicle. The data comes from the auto-mpg dataset loaded via `d3.csv`. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the axes and scales. Grid lines are created through tick sizing, and axis labels and a title are added as SVG text elements.

Oct 26, 2019
Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the world's most populous countries, with countries arranged along the y-axis and their population totals on the x-axis. The visualization uses D3 v5 to load CSV data, scale populations with `scaleLinear`, position countries with `scalePoint`, and render axes with `axisBottom` and `axisLeft`. Circle marks represent each country, and the chart includes formatted tick labels that convert large population numbers into abbreviated units. The SVG rendering includes gridlines and ordered country labels.

Oct 23, 2019
Loading thumbnail…

Customizing Axes

This example demonstrates a horizontal bar chart of the world’s most populous countries using a CSV dataset of population figures. It customizes the axes by removing default domain lines, styling tick marks and labels, and formatting tick values with a `.3s` format specifier that converts billions to “B”. The chart uses `d3.scaleLinear` and `d3.scaleBand` to position bars and applies `d3.axisLeft` and `d3.axisBottom` to render SVG axes.

Oct 21, 2019
Loading thumbnail…

Bar Chart

A horizontal bar chart ranks Russia’s fifteen largest cities by population, using the d3.csv loader to parse data from a local CSV file. The visualization relies on d3.scaleLinear for the population axis and d3.scaleBand for city names, with axes generated by d3.axisLeft and d3.axisBottom. Each rectangle’s height comes from the band scale’s bandwidth, and the SVG viewport is 960 by 500 pixels. Data originates from statdata.ru.

Oct 19, 2019
Loading thumbnail…

Bar Chart

This bar chart displays population figures for 13 countries, with countries listed along the y-axis and population values on the x-axis. The visualization uses d3.scaleBand to position each country’s bar and d3.scaleLinear to map population counts to bar widths. The code employs d3.svg.axis for the left and bottom axes, and renders everything as SVG elements within a 960×500 viewport. Data is loaded from a CSV file using d3.csv, with population values converted to numbers before rendering.

Oct 19, 2019
Loading thumbnail…

Shapes and Colors with SVG and CSS

SVG shapes demonstrate inline presentation attributes and CSS styling within a single visualization. Circles and rectangles display default black fills, explicit red and green fills, and a group-level fill with individual stroke overrides. Line and path elements use CSS classes to apply stroke color, width, and rounded line joins and caps. The SVG is scaled with a transform and rendered directly in HTML without additional libraries.

Oct 17, 2019
Loading thumbnail…

Cars Report

This example displays a text-based report of affordable cars, filtering a static JSON dataset to show models priced under $2,000. The plain JavaScript code uses `Array.filter` and `Array.map` to process the data, then updates the DOM via `textContent` to render each car’s year, make, model, and price. Styled with CSS and the Ubuntu font, the visualization relies on ES6 module imports and JSON parsing to generate a simple, readable summary.

Oct 17, 2019
Loading thumbnail…

Cars Report

This example displays a static text message, "hello," rendered prominently on a dark blue background with large Ubuntu typography. The visualization imports car data from a JSON array defined in `cars.js` but does not currently use it for any graphical output. The page structure is set up in `index.html`, with styling applied via `styles.css`. The JavaScript in `index.js` directly accesses the DOM element, setting its `textContent` property. The code demonstrates basic ES6 module import syntax and DOM manipulation without relying on any external visualization libraries like D3.

Oct 17, 2019