Pushkov Fedor

@pushkov-fedor·4 public vizzes

Scatter Plot

A scatter plot displays the total earnings of the top six Dota 2 teams, encoding each team’s name on the y-axis and its earnings on the x-axis. Circles are sized to half the bandwidth of the categorical scale. Built with d3.csv, d3.scaleLinear, and d3.scaleBand, the chart uses axes created via d3.axisLeft and d3.axisBottom, and renders SVG circles with formatting via d3.format.

Jul 13, 2020

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top six Dota 2 teams by earnings, using custom tick formatting that abbreviates large numbers with an “s” prefix and then converts “G” to “B” to show values in billions. The chart removes axis domains and gridlines from the y-axis while adding a custom axis label and title. It uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, rendering as SVG. The data comes from a local CSV file with team names and earnings.

Jul 5, 2020

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart comparing esports teams by their total earnings, using a CSV dataset loaded from `data.csv`. The visualization renders as SVG, with each team represented by a steelblue rectangle sized according to its earnings value. The code imports specific D3 v5 modules—`csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`—to parse the data, map earnings to a linear x-scale and team names to a banded y-scale, and generate the corresponding axes. Margins and an inner plotting area are defined to position the chart within a 960×500 SVG canvas.

Jul 5, 2020

Loading thumbnail…

Face with D3.js

This example uses D3.js v5 to draw a stylized animated face in SVG. It shows a yellow circle head with eyes, eyebrows, and a mouth built as a donut-shaped arc path. The eyebrows animate by using chained `transition` calls to move them upward and then back down over two seconds each. The visualization relies on D3’s `select`, `arc`, and transition methods, with coordinates centered via a translated `<g>` element. All elements are rendered as SVG shapes, including circles, rectangles, and a path generated by the arc generator.

Jul 5, 2020