Alenka Guček

@lenkica·6 public vizzes

Line Chart with rectangles

This line chart displays one week of temperature data for cities worldwide, sourced from Data Canvas - Sense Your City. Multicolored lines represent each district’s temperature over time, with a legend clarifying the color mapping. Semi-transparent yellow and blue rectangles overlay the chart to highlight specific time ranges, complemented by an axis and title. The visualization uses d3.csv for data loading, d3.scaleTime and d3.scaleLinear for scales, d3.line with curveBasis for path generation, and d3.nest for grouping, rendering in SVG with animation.

Sep 17, 2021

Loading thumbnail…

DVStockholm4

A circular network diagram displays overlapping circles of varying sizes and colors, representing clusters with labeled nodes. The visualization uses SVG shapes created in Figma, with circles drawn via path elements and grouped nodes positioned through translations. Labels are placed using SVG text elements with Arial font, while the layout is static with no interactive or animated behavior.

May 18, 2021

Loading thumbnail…

W3 circles

This example shows a grid of 10,000 empty circles arranged in a staggered pattern across the full browser window. The rendering approach creates a generative art piece in the spirit of Sol LeWitt, using raw SVG elements created via the Document Object Model API. Each circle is styled programmatically with a thin black stroke and no fill, with positions calculated in a nested loop that offsets columns and rows. The code uses `document.createElementNS` with the W3 SVG namespace and sets circle attributes like `cx`, `cy`, and `r` through inline style properties.

Apr 1, 2021

Loading thumbnail…

W3 Sol LeWitt Reproduction

This example reproduces a Sol LeWitt wall drawing as an interactive SVG composition of alternating horizontal and vertical stripes. A central circular mask reveals horizontal black bars over a white background, while a second inverted mask reveals vertical black bars, creating a checkerboard-like optical effect. The piece uses two SVG `<mask>` elements with `<circle>` and `<rect>` primitives to define the visible regions, and generates 100 striped rectangles in each direction via a JavaScript loop.

Apr 1, 2021

Loading thumbnail…

W2 pseudo joyplot

This pseudo joyplot stacks five layered paths to create a mountainous terrain effect. Each path is built from an SVG path element with hand-crafted bezier curves, drawn with black or green strokes over a rectangular border. The overlapping shapes simulate a ridge-line chart without using data-driven libraries such as D3. The SVG markup is generated in Figma and rendered directly in a web page, using inline styles for full-bleed display.

Mar 19, 2021

Loading thumbnail…

W1 SVG essentials

This example demonstrates layered SVG shapes to create symmetric, abstract compositions across a 960×500 canvas. It uses red and white circles of varying radii positioned at the center and edges, combined with rectangular strokes and diagonal lines to form balanced, mirrored patterns. The code employs basic SVG elements—`circle`, `rect`, `line`, and a black `path` with `M` and `l` commands—all rendered directly in the HTML markup without additional libraries. The illustration focuses on fundamental shape layering and symmetry, as noted in the accompanying README.

Mar 6, 2021