K

khuton

@khuton·21 public vizzes

Loading thumbnail…

Lets make a face

This visualization assembles a simple cartoon face from basic SVG shapes, featuring a yellow circular head, two dark eyes, and an arc-shaped mouth. The face is centered within a 960 by 500 viewport, with its parts positioned relative to the center point. The example demonstrates declarative component composition in React, where each facial feature is a separate function returning SVG elements. It utilizes d3’s `arc` generator to create the mouth’s path, while the background and eyes are plain SVG circles defined with specific coordinates and radii.

Loading thumbnail…

Fork of HTML Starter

This example shows a simple smiley face drawn with SVG circles, and a React app that renders a “Hello JSX” heading. It demonstrates a minimal integration of React and SVG on a single page, with both elements present but separate. The code loads React and ReactDOM from CDN, uses `ReactDOM.render` to mount the React component, and defines the SVG graphic directly in the HTML. The SVG includes a large yellow circle with two smaller black-outlined circles, all styled with stroke widths to suggest a face.

Loading thumbnail…

Own testing

This example visualizes two linear scales mapping x- and y-values from the data domain into screen coordinates, though no data points are rendered. Relying on D3 v6’s `scaleLinear` functions, it sets the y-domain from 0 to 200 and the x-domain from 0 to 50, each scaled to a 0–100 range on an SVG canvas. The chart’s structure is defined in static HTML and CSS, with a 960×500 SVG element, while the scaling logic is implemented in `index.js`. The visualization currently shows only the empty axes and scale setup, with no visible marks or data drawn.

Loading thumbnail…

Bowl of fruit - General update pattern

Five red apples appear in a row, then disappear one by one. After a moment, the middle apple turns into a yellow lemon, demonstrating a general update pattern with enter, update, and exit selections. Using d3.v6 with SVG, the example applies d3.scaleOrdinal for both fill color and radius, binding fruit data to circles, and merging selections on each render. The code explicitly calls `selection.enter`, `.merge`, and `.exit` to manage the transition from five apples to four apples to four mixed fruits.

Loading thumbnail…

Lets make a face

A simple yellow smiley face is drawn in an SVG, composed of a large circle, two eyes, and a curved mouth. The face’s eyebrows animate upward and then back down in a repeating sequence using D3 v6 transitions. The visualization is built with D3 selections and the `arc` generator for the mouth, while all geometric properties are defined as constants in the code.

Loading thumbnail…

NHL Scatter Plot

This scatter plot shows the relationship between NHL team wins and penalty kill percentage for the 2019-2020 season. Each circle represents a team, positioned by its win total on the x-axis and penalty kill efficiency on the y-axis, with the data loaded from a CSV file. The visualization uses D3 v6 with `scalePoint` for both axes, `axisBottom` and `axisLeft` for ticks, and SVG circles rendered with `selectAll` and `enter()` to join the data.

Loading thumbnail…

Scatter Plot

A scatter plot displays population density for twenty Slovak towns, with each circle representing a town positioned along categorical y-axis and linear x-axis scales. The visualization uses d3.scaleLinear for density values and d3.scalePoint for town names, with axes generated through d3.axisLeft and d3.axisBottom. Data loads from a CSV file using d3.csv, and the SVG rendering applies a steelblue fill to all circles.

Loading thumbnail…

Lets make a map!

This example demonstrates how to load and display world map data using D3.js and TopoJSON. The visualization fetches country boundaries from the world-atlas dataset and projects them as SVG paths. The code uses `d3.json` to retrieve the TopoJSON file, `topojson.feature` to convert it into GeoJSON, and `d3.select` to append the resulting shapes to the chart. The map is rendered as static SVG elements within a fixed 960×500 viewport.

Loading thumbnail…

Bar chart - SK towns by population density

This horizontal bar chart ranks Slovak towns by population density, from Svit (1760.67) down to Leopoldov (725.13). The visualization uses an SVG rendering with a linear x-scale and banded y-scale to encode the density values. Data is loaded from a CSV file and parsed as numeric values before being passed to the render function. The chart employs D3 v6 APIs including `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to generate the bars and axes.

Loading thumbnail…

Bar chart - Sekule pocet obyv

This bar chart visualizes the population of Sekule from 1996 to 2019, using steel-blue rectangles to represent yearly counts. Data is loaded from a CSV file via the D3 `csv` function, and the chart is rendered as an SVG. The example uses D3 v6 to select the SVG element and apply the height and width attributes. The chart shows a generally increasing trend, with values rising from 1,569 in 1996 to 1,782 in 2019.

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart of the population of 20 countries, sorted from largest to smallest, using a bar for each nation. The chart is built with D3.js version 6, using `d3.select`, `d3.csv`, `d3.scaleLinear`, and `d3.scaleBand` to map population values to bar widths and country names to vertical positions. Rendered as an SVG, the chart displays axes generated by `d3.axisLeft` and `d3.axisBottom`, with bars styled via the `styles.css` file. Data comes from a local `data.csv` file.

Loading thumbnail…

Test file

A test visualization displays a static text message, "helou," inside a large-font HTML div. It loads data from a local `cars.js` module containing an array of car objects, though this data is not rendered. The page imports D3 v5 from a CDN but uses no D3 APIs. Instead, it relies on standard JavaScript DOM manipulation via `document.getElementById()` to set the text content. The example demonstrates a minimal setup for integrating external data modules with plain HTML output.

Loading thumbnail…

Test file

This example demonstrates a minimal data pipeline for reading a CSV file containing yearly revenue figures and logging the parsed data to the console. It uses the `csv` function from the D3.js library (version 5.11.0) to load and parse `data.csv`, which includes columns for year and sales. The code then outputs the resulting array of objects to the browser’s console via `console.log`, with no visual rendering or chart creation present. The page structure is defined in `index.html`, which includes a root div and links the JavaScript file.

Loading thumbnail…

Making a bar chart

A horizontal bar chart ranks Slovak municipalities by their 2019 population, using data from a local CSV file. The chart displays each city district’s name on the y-axis and the population value on the x-axis. Built with d3.v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering rectangular bars with an SVG `rect` element. Axes are generated via `axisLeft` and `axisBottom`, and the bars are styled with a steelblue fill via CSS.

Loading thumbnail…

Making a bar chart

This example shows a bar chart of COVID-19 total cases by country, ordered from China at the top to Qatar at the bottom. The chart is rendered as an SVG using the D3.js library, which loads the CSV data asynchronously via the `csv` function. The code selects the existing SVG element using `select` and reads its width and height attributes with `attr` to establish the chart dimensions.

Loading thumbnail…

HTML Starter

This example displays a blank SVG canvas with a hidden dataset of country population densities loaded from a CSV file. The page uses D3’s `select` and `csv` methods to fetch and parse the data, logging it to the console. The visualization skeleton is minimal, featuring only a styled SVG element, leaving the actual plotting logic unimplemented.

Loading thumbnail…

Lets make face with D3.js

This example uses D3.js v5 to create a simple bar chart from a hardcoded array of six numbers. The visualization shows each value as a horizontal bar, where the bar width is proportional to the number and the value is displayed at the right end. Using D3's selection API, the code targets the `.chart` div, binds the data array, and appends new div elements, setting each one's width style and text content. The bars render in steelblue with white text, producing a compact, unadorned visual representation of the dataset.

Loading thumbnail…

Lets make face with D3.js

This example visualizes a simple bar chart from an array of numeric values, `[4,8,15,16,23,42]`, where each value determines the width of a colored bar. The page uses D3.js v5 loaded from a CDN, alongside plain HTML and CSS, to render the bars with steel-blue backgrounds and right-aligned white text inside each div. The chart demonstrates basic data binding and styling without complex D3 scales or axes, relying instead on static div elements with inline width styles. It serves as a minimal introduction to representing data as proportional rectangles.

Loading thumbnail…

Let's make face with D3!

This example shows how to build a simple cartoon face using SVG primitives in D3. It draws a yellow circle for the head, two black circles for eyes, and an arc-based path for a mouth, all positioned relative to the SVG’s width and height. The code uses `d3.select` to access the SVG element, `append` to create shapes, and the `d3.arc` generator to compute the mouth’s path with inner and outer radii and specified angles. The face is centered horizontally and vertically, with fixed offsets for the eyes and mouth placement.

Loading thumbnail…

Let's make face with D3!

This example renders a simple red SVG background using D3.js within a minimal HTML page. The code selects the `svg` element with `d3.select('svg')` and applies a red fill via `svg.style('background-color', 'red')`. It demonstrates the basic setup for D3 version 3 with a React framework, loading D3 from a CDN and styling SVG elements directly. The visualization is static, showing only the initial styling result without any interactive or data-driven features.

Loading thumbnail…

HTML Starter

This example demonstrates the simplest possible webpage using HTML, with a body that is mostly empty aside from a style rule setting centered text at an enormous font size. It shows how minimal markup can be used as a starting point for any visualization. The code uses plain HTML and CSS, with the style block defining the body’s text alignment and font size, but contains no JavaScript or data. It serves as a bare foundation for adding charts or graphics later.