okrzysiek

@okrzysiek·6 public vizzes

d3 start

A simple SVG drawing depicts a yellow circle with a black outline, two black eyes, and a single wedge-shaped mouth segment on a 960 by 500 canvas. The D3.js v5 code uses the `select`, `append`, and `attr` APIs to construct the shapes, while a path’s `d` attribute is generated with the `arc` generator using inner and outer radii and an angle range. The illustration demonstrates basic shape creation and arc path generation in an SVG context.

Aug 25, 2018

Loading thumbnail…

Face in d3

This face-shaped visualization uses a force-directed layout to arrange nodes into a recognizable human profile. The example relies on the d3.js library, likely employing its force simulation and physics engine to position the points, while the SVG canvas handles rendering. The dark background and large, centered typography from the CSS create a stark, minimal aesthetic. The layout is generated from scratch rather than from external data, with the force simulation’s parameters determining the final facial structure.

Aug 25, 2018

Loading thumbnail…

Shape SVG and CSS

This example creates a static SVG scene with geometric shapes, including two circles and a square, rendered at different positions. The markup uses raw SVG elements such as `<circle>` and `<rect>`, with one circle filled red via a `fill` attribute. Styling comes from an external CSS file, which sets the body margin to zero and hides overflow. No JavaScript libraries are used; the visualization relies solely on SVG and CSS, demonstrating basic shape positioning and styling without interaction or data binding.

Aug 25, 2018

Loading thumbnail…

Shape SVG and CSS

This example demonstrates basic SVG shape rendering alongside CSS styling in a simple web page. It shows three geometric shapes—two circles and a rectangle—positioned on a 960 by 500 canvas using inline SVG markup. The first circle and rectangle have no explicit fill, relying on default black rendering, while the second circle is explicitly filled red. The code uses standard HTML5, SVG elements like `circle` and `rect`, and a linked external stylesheet that sets the body margin and overflow properties. No JavaScript libraries or data sources are involved, highlighting raw SVG and CSS techniques.

Aug 24, 2018

Loading thumbnail…

Cars Report

This example presents a simple car report as a plain HTML page. The visualization shows a bulleted list of three car listings, each with a model year, brand, and price in Polish zloty. The report is rendered using basic HTML structure with a monospace font and large text size, while the first item is highlighted in red using a CSS class. No JavaScript libraries or data visualization APIs are used; the page relies solely on static markup and CSS styling.

Aug 24, 2018

Loading thumbnail…

Cars Report

This example displays a formatted list of cars with their year, make, model, and price in Polish zloty, filtering to only include cars priced under 3000 zl. It first shows a "loading..." message while fetching car data asynchronously via a Promise with a 2-second delay, then generates the report using string template literals and array methods like `filter` and `map`. The visualization uses plain HTML and JavaScript ES6 modules, with the result rendered as text in a `<pre>` element.

Aug 24, 2018