Skip to main content
Log in
R

Rostyslav

@BeerDRinker·6 public vizzes

Loading thumbnail…

Table

This visualization is an interactive dashboard that displays a single chart at a time, selected from a drop-down menu of eleven different chart types, including bar charts, pie charts, area charts, scatterplots, and a spectrogram. The dashboard generates charts using D3 v5, rendering with SVG and canvas, and supports an animated spectrogram that analyzes audio data. It uses D3 scales and axes, including `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisBottom`, to map data from sample CSV files.

Jan 3, 2020
Loading thumbnail…

HTML Starter

This example shows a time series of monthly stock price data with a focus and context view. The main chart displays the price trend as an area chart, while a smaller brushable overview allows users to select a date range. The selection is reflected in the main chart through a coordinated zoom and pan interaction. The visualization is built with D3 v5, using `d3.brushX` for the range selection and `d3.zoom` for pan and zoom transforms. The SVG rendering uses `d3.area` with a monotone curve, and the data is loaded from a CSV file containing date and price pairs.

Jan 3, 2020
Loading thumbnail…

Blank Canvas

A slider controls the background hue of an SVG canvas. Dragging the handle updates the color in real time, with tick labels showing the degree value. The visualization uses d3.drag for interaction, d3.interpolate for a smooth intro animation, and d3.hsl to convert the slider value to a color. The code imports d3 via `import {} from 'd3'` and renders with SVG elements.

Dec 31, 2019
Loading thumbnail…

Customizing Axes

This bar chart visualizes the top 10 most populous countries using 2018 population estimates from the United Nations World Population Prospects. It demonstrates how to customize D3 axes, including label font sizes, colors, and tick styling via CSS. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom to render the chart as SVG elements. The example builds on a simpler bar chart tutorial, adding enhanced axis formatting and a larger title.

Dec 30, 2019
Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of used cars, filtered to show only those priced under $2,000 and formatted as a list. The page initially displays a "Loading..." message while a JavaScript promise, created via `getCars`, simulates a two-second fetch of hardcoded JSON data. Once resolved, the `generateReport` function filters, maps, and joins the car objects into a readable string, which is then inserted into the DOM's `message-element` using standard JavaScript and ECMAScript module imports.

Dec 18, 2019
Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of used cars, filtered to show only those priced under $2,000 and formatted as a list. The page initially displays a "Loading..." message while a JavaScript promise, created via `getCars`, simulates a two-second fetch of hardcoded JSON data. Once resolved, the `generateReport` function filters, maps, and joins the car objects into a readable string, which is then inserted into the DOM's `message-element` using standard JavaScript and ECMAScript module imports.

Dec 17, 2019