Kateryna

@kateryna-git·9 public vizzes

HTML Starter

This example shows two text messages displayed on a coral background, with the first name “pasha” in blue and the concatenated string “pashamasha” in red. The HTML page includes a text input field for a first name and uses vanilla JavaScript to write values into DOM elements via `getElementById` and `textContent`. Styles are applied through a linked CSS file that sets font size, colors, and text alignment. The code also logs messages to the browser console, but the input value is not used in the displayed output.

Sep 30, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

Five fruits appear as red circles labeled “apple” in an SVG bowl. Over time, the array shrinks, one apple changes to a yellow lemon, and another apple is removed, with each change animated using D3 transitions. The code imports `scaleOrdinal` and `range` from D3 v6, and uses `selection.data`, `.enter`, `.merge`, and `.exit` to update circles and text labels. Styling is handled by CSS, with D3 controlling SVG attributes like `cx`, `r`, and `fill`.

Sep 24, 2020

Loading thumbnail…

Shapes With SVG

This example demonstrates how to draw and group basic shapes using only SVG, with no external libraries or data. It shows circles and rectangles in different positions and sizes, some with individual colors and others grouped inside a `<g>` element that applies a shared blue fill and a translation transform. The code defines shapes directly in a static SVG canvas using standard elements such as `<circle>` and `<rect>`, with styling from a linked stylesheet that sets page margins and hides overflow.

Sep 24, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

A scatterplot of automobile data from the `cars.csv` dataset displays each car as a semi-transparent circle, with weight on the x-axis and horsepower on the y-axis. The visualization uses D3 v6 to load the CSV, create linear scales with `scaleLinear`, and append SVG circles. Grid lines are drawn via `axisBottom` and `axisLeft` with custom tick sizes, while CSS styles the circles in steelblue. A text label incorrectly reads "Months, count," and the axis title is placed at a fixed position.

Sep 21, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows the duration of unemployment by industry, plotting each industry on a vertical scale against the number of months on a horizontal axis. Circles represent individual data points from a CSV file, with all circles uniformly filled in steelblue via CSS. The visualization uses d3.scaleLinear and d3.scalePoint for positioning, while d3.axisLeft and d3.axisBottom generate the axes with gridlines. SVG rendering is handled through D3 selections, and the chart includes a title and axis label.

Sep 19, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This visualization displays the number of months requested per industry category using horizontal bars, with each bar’s length mapped to the numeric month value from the loaded CSV dataset. The code uses d3.csv to parse data.csv, d3.scaleLinear for the x-axis, d3.scaleBand with padding for the y-axis, and d3.axisBottom and d3.axisLeft to render axes. Rects are appended to an SVG group, styled with a steelblue fill via CSS, while the axis domain lines and ticks for the y-axis are explicitly removed.

Sep 19, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows a simple yellow face built from SVG shapes, including a circular head, eyes, eyebrows, and a mouth formed by a curved path. The SVG elements are positioned and styled using D3 v6 methods such as `select`, `append`, and `attr`. A CSS transition animates the eyebrows upward and back downward over two seconds, while the mouth is drawn using the `d3.arc` generator with specified angles. The data is generated procedurally within the code rather than loaded from an external source, and the animation relies on D3’s built-in `transition` method.

Sep 18, 2020

Loading thumbnail…

HTML Starter

This example displays a list of color names alongside their numerical values, filtered to show only entries exceeding a threshold of 2000. It begins with a loading message, then asynchronously retrieves the dataset via a Promise-based `getColors` function after a 2-second delay. The filtering and formatting logic is implemented in `report.js` using the `formatColor` helper, while the final output is rendered as plain text into a `<pre>` element on the page.

Sep 18, 2020

Loading thumbnail…

HTML Starter

This example demonstrates how to display and filter a static dataset of named colors with numeric values, rendering a formatted text report in the browser. The code imports color data from a JavaScript module, filters entries to values greater than 1,000, and maps them into readable strings using a custom formatting function. The result is inserted into a `<pre>` element via the DOM API, while startup messages appear in the browser console. The visualization relies on plain JavaScript modules and the standard `document.getElementById` method, with no external libraries.

Sep 17, 2020