Pavel Antoshkin

@ant69·9 public vizzes

World population Area Chart

This area chart visualizes San Francisco temperature trends over time, using a green smooth curve against a white background. Built with D3 v5, it loads CSV data from VizHub and maps timestamps to a time scale and temperatures to a linear scale. The visualization includes styled axes with tick marks, grid lines, and rotated labels for the y-axis, while the x-axis displays time ticks and a title. The line is generated using `d3.line` with `curveBasis` for smoothing, and rendered as an SVG path with custom CSS styling.

Aug 7, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays temperature over time in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses D3.js (v5) with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` smoothing. Data is loaded via `csv` from VizHub, parsed into JavaScript Dates and numbers, and rendered as an SVG path with green stroke styling.

Aug 7, 2020

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot visualizes temperature readings in San Francisco over time, with each circle representing a data point and a title identifying the dataset. It uses D3.js APIs including `scaleTime`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to map timestamps and temperatures to positions, while axes display tick marks and labels for both dimensions. The code loads data from a CSV file hosted on VizHub, parses the timestamp and temperature fields, and renders the visualization as an SVG with styled circles and axis grid lines.

Aug 7, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red circle represents a car, with axes labeled and a title displayed. Built with D3.js, it uses `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, map scales, and render axes. The SVG output includes tick lines, grid lines, and an axis-label rotation, styled via CSS.

Aug 6, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the estimated population of Earth’s continents for 2020, using circles positioned along a linear x-axis for population (in thousands) and a point scale y-axis for continent names. The visualization is rendered as SVG and built with D3 v5, using `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` APIs. Data comes from the UN’s World Population Prospects 2020, loaded via `csv`. The chart includes labeled axes, gridlines, and a title, with population values formatted in abbreviated units.

Aug 6, 2020

Loading thumbnail…

Customizing Axes

This example visualizes world population by continent for 2020, using a horizontal bar chart with customized axes. The bars display population values in thousands, while the x-axis labels are formatted with a `.3s` format and converted from billions to a custom notation. The code leverages d3.csv, scaleLinear, scaleBand, axisBottom, and axisLeft from D3 v5, with the y-axis stripped of its domain line and tick lines. The x-axis includes a label and tick marks extending across the chart. Data comes from the UN World Population Prospects 2020.

Aug 6, 2020

Loading thumbnail…

Bar Chart

This bar chart shows the estimated 2020 population of the world’s continents, sourced from the UN World Population Prospects. The visualization uses D3 v5 with `d3.csv` to load data and `scaleLinear` and `scaleBand` for axes, rendered as SVG. Rectangles represent population values, with axis labels generated via `axisLeft` and `axisBottom`. The code applies a steelblue fill to bars and sets margins to accommodate continent names.

Aug 6, 2020

Loading thumbnail…

Face visualization with D3

This example builds a smiling face using D3 v5, rendered as an animated SVG. It constructs the head, eyes, eyebrows, and mouth from primitive shapes, with the eyebrows performing a looping vertical bounce via chained `transition` calls. The code uses D3’s `select` and `arc` APIs directly, setting shape attributes like `r`, `cx`, and `cy` to position elements relative to the SVG’s center. The face’s layout is defined by constants for eye spacing and offsets, demonstrating a simple, reusable composition pattern.

Aug 6, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that generates a text report of trees exceeding a specified height. It processes a hardcoded JSON array of tree data, filters by height, and formats each entry into a sentence. The code uses plain JavaScript with ES6 modules, specifically the `filter` and `map` array methods, and the `JSON.parse` API. The rendered output is displayed in a `<pre>` element, while the console demonstrates a simple JavaScript log.

Aug 5, 2020