Njord

@NNjord·4 public vizzes

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles, lines, and paths—rendered in a fixed 960×500 viewport. Overlapping red and green circles illustrate layering, while a navy line and black polyline with fill-none stroke show stroke rendering. A commented-out rect remains inactive. All shapes use raw SVG attributes like `cx`, `r`, `stroke-width`, and path data `d`, without any JavaScript libraries. The presentation relies purely on inline SVG markup within an HTML document.

Jun 20, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This is an abstract generative art piece that recreates a Sol LeWitt drawing using overlapping horizontal and vertical bands. A central circular mask isolates the grid of horizontal stripes, while an inverse mask reveals vertical stripes only outside the circle, creating a dynamic interplay of line and form. The visualization is rendered entirely with dynamically created SVG elements, using the standard DOM API `document.createElementNS` and `setAttribute` to build the shapes. No external libraries are used; the code relies purely on JavaScript and SVG masks to achieve the composition.

Jun 20, 2022

Loading thumbnail…

Fork of Sin circles

Fifteen circles and connected lines oscillate in a sine-wave pattern, with each circle’s vertical position and radius periodically changing. The animation updates every 130 milliseconds, redrawing the SVG elements with new coordinates computed from a phase-shifted sine function. Using D3’s `select`, `range`, and `rgb` APIs, the visualization assigns black strokes to the lines and fixed gray fills to the circles, creating a rhythmic, looping composition. The code dynamically updates both the `x` and `y` attributes of the lines and circles, while the radius of the circles varies between 10 and 30 pixels.

Jun 20, 2022

Loading thumbnail…

Fork of D3 Scatter Plot

This example presents a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. The visualization uses D3 v7 to load CSV data, apply linear scales, and render circular marks within an SVG. The code imports a custom `scatterPlot` module for creating the chart, and the plot includes axes with labels. The rendering approach uses D3’s `scaleLinear`, `axisLeft`, and `axisBottom` functions to construct the graphical output.

Jun 20, 2022