H

hanulik.ondrej@gmail.com

@hanulik·41 public vizzes

Loading thumbnail…

D3.js| Path

The example displays a collection of primitive shapes and line types in an SVG canvas using D3.js v4. It shows circles, rectangles, and various path elements, including arcs drawn with the `arc()` function and lines generated by `d3.line()` and `d3.path()`. The visualization uses D3’s selection, data-binding with `.datum()`, and data-driven loops via `.data()` and `.enter()` to create elements from an array of values. The SVG background is green, with a GeeksforGeeks header, and all shapes are rendered statically without interaction.

Loading thumbnail…

zkusebna

This example reads asset values from a CSV and displays them as colored text labels, while also showing maximum and minimum values from arrays in separate headings. The visualization uses D3 v6 to load and parse the data, with `d3.csv` fetching data.csv and `d3.max`/`d3.min` computing ranges. The SVG output is static, with text elements positioned vertically at fixed intervals. The page also includes hardcoded numeric arrays and CSS-styled headers in red, green, and brown to present the computed results.

Loading thumbnail…

Edible insect

The visualization compares the environmental impact of four protein sources—cattle, pork, poultry, and mealworms—using a grid of small colored squares to represent land use, water consumption, and greenhouse gas emissions. Each square encodes a unit of resource use, with colors distinguishing the three metrics: orange for land, blue for water, and red for warming. The chart is built with D3 v4, drawing SVG rectangles in a loop for each metric, positioned in a 5-column grid with spacing. Data comes from a local CSV file, and the visualization uses raw numeric values directly without scaling.

Loading thumbnail…

Blog

This example demonstrates a simple D3.js visualization that renders static text values derived from a small dataset, displaying the minimum of an array using `d3.min()`. The page loads data from CSV files (data.csv and data2.csv) but primarily uses hardcoded values from the `values` array in the script. Built with D3 v7, the code selects an SVG element, appends a text label, and positions it at fixed coordinates with blue fill. The visualization is minimal, focusing on basic SVG text manipulation rather than complex data binding or interactive features.

Loading thumbnail…

How to create a line chart using D3

This example demonstrates how to build a line chart with D3 v6, rendering an SVG with a pink background. It plots two lines: one from a dataset of coordinate pairs using `d3.line()` with `curveMonotoneX`, and a second hardcoded line, alongside red circles for the data points. The chart includes axes created with `d3.axisBottom` and `d3.axisLeft`, a title, and axis labels, with styling applied via CSS classes for stroke and fill.

Loading thumbnail…

merge

A set of colored circles displays the relative values of financial assets such as EUR, BTC, and GOLD loaded from data.csv. Each circle’s radius encodes its value, while its fill color is assigned using a d3.scaleOrdinal with a range generated by d3.quantize and d3.interpolateYlOrRd. The example demonstrates the d3 .merge() method, combining enter and update selections so that all circles are repositioned to a common x-coordinate after initial rendering.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements inside an HTML page. The shapes are grouped and scaled using SVG transforms, with styles applied via CSS classes and attributes, including custom fill colors, strokes, and a rounded line join on the path. It shows how raw SVG markup combined with CSS can create a static composition without any JavaScript libraries. The rendering approach relies on the browser’s native SVG support, with the `.lines` class controlling stroke properties.

Loading thumbnail…

Basic shapes

This example demonstrates a collection of fundamental D3.js shapes, including circles, rectangles, arcs, lines, and paths, all rendered as SVG elements on a canvas. It showcases various ways to construct these shapes, such as using the `d3.arc` function for annular sectors, `d3.line` for splines, and data-driven bindings with `.datum()` and `.data()`. The scene also includes programmatically generated rectangles with a purple fill, a pink circle, and a custom path created via `d3.path`. A small CSV dataset is linked but not directly used. The code relies on D3 v6 for shape creation and SVG manipulation.

Loading thumbnail…

Pie chart II

This bar chart displays the population of the top 10 most populous countries, using a horizontal bar layout where each bar’s length corresponds to population size in millions. The data is loaded from a local CSV file with `d3.csv`, and scales are created with `d3.scaleLinear` and `d3.scaleBand`. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with tick formatting via `d3.format` to abbreviate large numbers. The chart is drawn as SVG elements, with bars styled through CSS and a title added as text.

Loading thumbnail…

Bar chart TT

This example displays a vertical bar chart of yearly values from a CSV file, using D3 v4 (loaded via both a CDN link and the `d3.v4.js` script). The visualization uses SVG rendering with the `d3.select` and `d3.scaleBand`/`d3.scaleLinear` APIs to map years and values to bar positions, while `d3.axisBottom` and `d3.axisLeft` generate the axes. The bars are drawn as `rect` elements, styled with a class from the provided CSS.

Loading thumbnail…

Untitled

This bar chart displays the number of students for various grades and locations, with bars colored blue and axes labeled "Grades" and "Num_students." The visualization uses D3.js v6 to create an SVG rendering, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis. Data is hardcoded in an array of objects, while axes are generated with `d3.axisLeft` and `d3.axisBottom`. The chart includes a pink background rectangle and console logs for debugging scale behavior.

Loading thumbnail…

Treemap

This treemap visualizes hierarchical data from a CSV file, showing production values for countries grouped under parent categories as nested rectangles. The example uses D3.js v6 with a CSV-parsed hierarchy, stratifying the data via `d3.stratify()` and computing rectangle positions with `d3.treemap()`. Rectangles are rendered as SVG elements with a teal fill and black stroke, while country labels appear in white text within each cell. The layout uses a fixed canvas size with padding between nodes, and styling comes from the included CSS.

Loading thumbnail…

chloropleth

This choropleth map displays global population by country, with a blue color scale indicating population ranges. Built with d3.js, it uses `d3.geoMercator` for projection and `d3.geoPath` to draw country boundaries from a GeoJSON dataset. Population data from a CSV file is matched to each country via a `Map`, and `d3.scaleThreshold` maps values to a color scheme. Hovering over a country triggers a transition that dims other countries and highlights the selected one with a black stroke.

Loading thumbnail…

Oblicej with D3.js

This example shows a yellow, smiley face built with SVG shapes, including eyes, eyebrows, a red nose, and a mouth, which is created using the `arc` function to define its path. The piece is constructed by appending SVG elements, such as `circle` and `rect`, to a central group, and one of the eyebrows uses a `transition` to animate its vertical position over a two-second duration. The code leverages D3.js v6, specifically using `select` and `arc` from the D3 API, and includes a static, transform-based layout for the face features.

Loading thumbnail…

myByways SVG to PNG Converter

This example is a tool for converting SVG images into PNG files directly in the browser. It demonstrates a workflow where a user pastes SVG markup, loads it into the DOM, and sets a custom width and height. The converter then serializes the SVG with `XMLSerializer`, creates a Blob URL, and draws the result onto a Canvas using `drawImage`. Finally, it exports the canvas as a PNG via `toDataURL` and triggers a file download, relying on standard browser APIs for image processing.

Loading thumbnail…

bubble

This bubble map displays global natural gas production by country, with circle size proportional to production volume. The visualization uses D3.js v6 with a Mercator projection, plotting latitude and longitude coordinates from a CSV file onto a GeoJSON world map. The map renders as gray SVG paths with blue semi-transparent bubbles, sized using d3.scaleLinear. Country positions are projected via d3.geoPath with a custom geoMercator projection, while the data loading relies on Promise.all to fetch both the GeoJSON and CSV sources.

Loading thumbnail…

Histogram

This example shows a histogram of 24 integers, ranging from 0 to 9, distributed into 10 bins. The plot uses a bar chart to display the frequency of each value, with bars colored teal on a white background. The code builds the chart with D3 v7, using `d3.scaleLinear` for both the x and y axes, `d3.histogram` and `d3.ticks` to bin the data, and `d3.axisBottom` and `d3.axisLeft` for the tick marks. The SVG rendering is set up with fixed dimensions and margins, and the data is provided as a static array in the script.

Loading thumbnail…

Learn D3 Tutorial

This example demonstrates basic D3.js concepts by rendering static SVG text elements that display the results of simple array operations. It reads numeric values from an embedded array and uses the `d3.min` function to compute and display the minimum value as blue text on an SVG canvas, while also populating HTML headings with CSS class styling. The visualization serves as an introductory tutorial, combining D3 selections and SVG attributes with external CSS rules for text coloring. Data from CSV files is loaded but not visualized, keeping the focus on fundamental D3 syntax and DOM manipulation.

Loading thumbnail…

Easy Pie Chart

This example displays a simple pie chart with four slices, using colors and numeric labels to represent the provided dataset. The chart is built with D3 v4 on an SVG canvas, where a group element is centered and `d3.pie()` computes the start and end angles for each arc. These angles are rendered using `d3.arc()` with a specified inner and outer radius and pad angle, while `d3.scaleOrdinal` assigns the slice colors. Each wedge is labeled with its data value using `arc.centroid` to position the text.

Loading thumbnail…

Pie chart TT

This example presents a simple pie chart built with D3.js (v4), visualizing a small static dataset of four numeric values. The chart is rendered as SVG within an 800x700 viewport. The code uses the `d3.pie()` layout generator to compute arc segments and the `d3.arc()` function to draw the resulting paths. Each slice is filled with a distinct color from a predefined array. The implementation also highlights direct manipulation of the `d3.arc()` API by logging arcs generated with both computed and constant angle/radius parameters, demonstrating how the path data is constructed.

Loading thumbnail…

Easy bar chart

A bar chart displays XYZ Foods stock prices across five years, from 2009 to 2021, with annual values ranging from 5,000 to 60,000. The visualization uses SVG rendering with D3 v4, employing `d3.scaleBand` for the x-axis years and `d3.scaleLinear` for the y-axis price range. Rectangles are bound to the data array, with axis labels and a title added via D3’s axis and text APIs. The chart is positioned within an 800×700 SVG canvas, using a margin offset for the plot area.

Loading thumbnail…

Untitled

This example shows the distribution of student counts across letter grades, with horizontal bars colored in a solid blue tone. The chart uses D3.js v6 to construct an SVG visualization, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. It renders rectangles whose widths are proportional to `num_students` values, with axes generated via `d3.axisLeft` and `d3.axisBottom`. The data is hardcoded in the script rather than loaded from the available CSV file.

Loading thumbnail…

Data loading

This example demonstrates how to load and inspect a CSV dataset using D3 v4. The code uses the `d3.csv` method to fetch `employees.csv`, which contains three employee records with `Name` and `Age` fields. Each record is logged to the browser console, printing both the name and age values for every row. The visualization itself renders a fixed 960×700 SVG area, though the primary focus is on the asynchronous data-loading workflow rather than producing a visual chart. The page also loads D3 v6.6.2 in addition to v4, though only the older API is invoked for parsing.

Loading thumbnail…

Muj prvni Bar Chart 3:15:00

A bar chart displays population sizes for ten countries, including China, India, and the USA, with a Czech Republic entry also present. The chart uses an SVG rendering with D3 v6, employing `d3.scaleLinear` for the quantitative x-axis and `d3.scaleBand` for the categorical y-axis. Data is loaded asynchronously from a CSV file via `d3.csv`, with population values multiplied by 1000 during preprocessing.

Loading thumbnail…

Pie chart

A pie chart displays the proportional breakdown of a categorical variable, using colored slices to represent each category's share of the whole. The example renders a fixed dummy dataset (`{a: 9, b: 20, c:30, d:8, e:12}`) as SVG paths, with each slice's angle determined by `d3.pie` and its geometry drawn via `d3.arc`. Colors come from `d3.scaleOrdinal` with a manually specified palette, and the chart is centered within a 450×450 pixel canvas. The code uses the D3.js v4 library, appending the visualization to a `<div>` and styling slices with black strokes and 0.7 opacity.

Loading thumbnail…

Zadluženost států Pie chart

A pie chart visualizes the debt-to-GDP ratios of thirteen countries, with Japan, Sudan, and Greece showing the highest values. Each slice is labeled with the country name and its corresponding value. The chart uses D3 v6 to load CSV data, compute arc angles with `d3.pie()`, and render the slices using `d3.arc()`. Colors are generated via an ordinal scale with `d3.interpolateYlOrRd`, and labels are positioned using an arc generator’s `centroid()` method. The SVG output includes white slice borders for clarity.

Loading thumbnail…

Jednoduchy Pie chart

This example shows a simple pie chart built with D3.js v4, displaying eight data values as proportional arcs in a 450-by-450 pixel square. The chart uses `d3.pie()` to compute the arc angles from a hard-coded JavaScript array, with no external data file. The rendering relies on the `d3` library’s default arc generator, though the code defines only the pie layout and dimensions without explicit SVG path creation. Styling comes from a linked stylesheet that sets steelblue fill for rectangles and sans-serif text, while the page loads the D3 script from a CDN. The visualization is static, with no interactions or transitions.

Loading thumbnail…

mujSmile

This dynamic example portrays a smiling face constructed from basic SVG shapes such as circles, rectangles, and paths, all rendered within a 960x500 canvas. The visualization uses D3 v6’s selection and arc API to draw the mouth and nose, while also leveraging D3’s transition system to animate the eyebrows and teeth, creating a playful, bobbing motion. The face components, including yellow head, red nose, and a cigarette, are grouped and transformed around a central point, with animations shifting the eyebrows vertically and rotating the teeth. The code clearly demonstrates D3’s ability to build and animate layered graphics.

Loading thumbnail…

Cars Report

This example displays a report on car data by extracting specific values—such as make, model, and price—from a local JSON array and presenting them as large red text on a webpage. It demonstrates modular JavaScript by importing the car data from `vehicle.js` and a formatting helper from `formatCar.js` using ES6 `import` statements, then updating `<pre>` elements via `document.getElementById` and `innerHTML`. The page loads without external dependencies, relying on plain JavaScript and CSS from `styles.css` to style the highlighted output.

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML page listing three electric car models with prices, each styled differently to demonstrate CSS techniques. The page displays a 2012 Nissan, Ford, and Chevrolet Leaf, all priced at $1800, with visual emphasis applied through a red highlighted class, a pink ID selector, and an inline style that sets blue text at a large 50px font size. The report relies entirely on plain HTML and CSS, using the `body` selector in the linked stylesheet to set a monospace font and 3em base size, with no JavaScript libraries or external data sources involved.

Loading thumbnail…

Untitled

A treemap visualizes the distribution of Czech energy sources, with rectangles sized by value and labeled with names like uhlí, nafta, and plyn. The code uses D3 v4’s `d3.stratify` to build a hierarchy from CSV data and `d3.treemap` to compute layout positions. SVG rectangles and text labels are appended to the chart, with fills styled via a linked stylesheet.

Loading thumbnail…

AzimutalMap

This example shows a world map projected using the Bertin 1953 projection, rendered as an SVG with a white sphere background and interactive country outlines. Hovering over a country changes its fill color to red. The code loads GeoJSON country boundaries from the world-atlas TopoJSON dataset via `d3.json` and converts them using `topojson.feature`. It then applies the `d3.geoPath` generator with the `d3.geoBertin1953` projection to draw each path, and relies on `d3.select` and SVG elements for rendering.

Loading thumbnail…

.call()

This example demonstrates the JavaScript `.call()` method within a D3.js context, showing how a custom function can be invoked with an explicit `this` binding and arguments. An SVG element is selected using `d3.select` and then passed to the function via the selection’s `.call()` method, along with a data object containing numeric properties. The function logs the selected DOM element, the passed object, and concatenated property values to the console. The visualization itself renders a blank SVG canvas, with the primary output being console-based rather than graphical, using D3 v6 and plain JavaScript.

Loading thumbnail…

Color and Size Legends

A legend example displays categorical color scales using D3 v6’s scaleOrdinal, rendering SVG circles and text labels. Each circle’s fill is mapped directly from the color scale’s domain, while a text offset places labels beside the markers. The colorLegend function accepts a color scale and spacing properties, using selection.merge and enter/update patterns to manage the DOM. Data originates from a hardcoded array of fruit names, with no external dataset loaded.

Loading thumbnail…

join

This example demonstrates how D3’s data join reconciles SVG circles with an array of values, updating existing elements and appending new ones via `.join('circle')`. The visualization pairs two fixed circles with a joined selection of four circles, whose radii derive from the data `[20,30,40,60]`. Using d3.select and d3.csv, the code reads `data.csv` and `data2.csv` but does not display their contents, instead focusing solely on the join mechanics. Rendered as SVG, the circles are styled with red, green, and blue strokes, highlighting how the join overrides attributes like position and fill.

Loading thumbnail…

Bowl of fruit 5:06:00

Five apples animate into view as red circles, then sequentially demonstrate D3 data joins: one apple disappears, another turns into a yellow lemon, and a third is removed. The example uses `d3.select` and `scaleOrdinal` for color and radius, with `selection.enter`, `merge`, and `exit` to manage updates. Transitions via `transition.duration` and `attr` animate the changes over one-second intervals, rendering static SVG circles that reshape and recolor in place.

Loading thumbnail…

Mapa světa

This example displays an interactive world map with countries rendered in light green, shading to red on hover, against a blue ocean sphere. It uses the `d3.geoFahey` projection and `d3.geoPath` to convert TopoJSON country boundaries from the world-atlas dataset into SVG paths. The code loads data via `json`, adds tooltips with country names through `title` elements, and applies hover styling via CSS. The map itself is static, with no zoom or pan behavior implemented.

Loading thumbnail…

Zadluženost států

A horizontal bar chart displays national debt as a percentage of GDP for thirteen countries, from Japan at 257% down to Singapore at 130%. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Data is loaded from a CSV file and parsed with the `csv` method. Axis labels are generated with `axisBottom` and `axisLeft`, while bars are drawn as `rect` elements with a fixed steelblue fill.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with each country positioned along the y-axis and its population on the x-axis. The visualization uses D3 v6 with SVG rendering, employing `scaleLinear` and `scalePoint` for the axes, and includes a customized tick format converting values to millions. Population data comes from a CSV file and is multiplied by 1000 before scaling, with axis labels and a title styled via CSS.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes automobile data from the auto-mpg dataset, plotting each car as a circle positioned by its horsepower and weight. The SVG rendering uses D3 v6 scales including `scaleLinear` for the x-axis and `scalePoint` for the y-axis, with axes generated by `axisBottom` and `axisLeft`. Circles are appended via data joins, and tick formatting converts large numbers using D3's `format` function, while styling is applied through external CSS classes.

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of the ten most populous countries using population data from the UN, with each bar labeled by country and a formatted x-axis in millions. It renders with SVG, and the code uses D3 v6 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `csv` to load and parse the data. The chart includes a title, axis labels, and styled grid lines, with bars filled via CSS. The y-axis is ordered alphabetically by country, and population values are multiplied by 1000 before scaling.