woznicak

@woznicak·7 public vizzes

Making a Bar Chart

This bar chart displays population estimates for eight countries, loading data from a CSV file. Using D3 v5, the code applies `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft` and `d3.axisBottom` to render the axes. Each country’s population, multiplied by 1000, sets the bar width, with tick labels formatted via `d3.format`. The visualization demonstrates SVG rectangle binding through `selectAll().data().enter().append()`, placing bars in a group element with specified margins.

Aug 13, 2020

Loading thumbnail…

Scatterplot

A scatterplot displays country populations as circles, with population values mapped along both x and y axes using linear scales. The visualization loads data from a CSV file, multiplies each population value by 1000, and renders circles sized at a fixed radius. Built with D3 v5, the code uses `select`, `csv`, `scaleLinear`, and `max` to append SVG circles, positioning them by scaling population values against the chart dimensions. No axes or labels are drawn, making the plot purely positional.

Aug 13, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates how a D3.js visualization can adapt to browser resizing by redrawing an SVG scene to match the container’s new dimensions. It shows a green X shape whose endpoints always stretch to the current width and height, using a fixed-positioned `#chart` div whose size is read via `clientWidth` and `clientHeight`. The code appends an SVG element with d3.v5, binds line data, and calls a `redraw()` function on the window’s `resize` event, resetting the SVG attributes and line coordinates each time.

Aug 8, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in SVG is built from scratch using D3.js, with a yellow circle for the head, two eyes, a mouth arc, and rectangular eyebrows. The eyebrows animate upward and back down using chained `transition` calls with `duration` settings. The code uses `d3.select` to manipulate SVG elements and `d3.arc` to generate the mouth path, while all positions are computed from the SVG’s width and height attributes.

Aug 8, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example shows a simple, animated smiley face built entirely with D3.js, where the eyebrows move up and down. It demonstrates fundamental DOM manipulation by selecting an SVG element and using D3’s data join and transition methods to update attributes over time. The code uses `d3.select` and `d3.transition` to animate the eyebrows, while the face itself is drawn with basic SVG shapes. The rendering is SVG-based within a 960×500 viewport, with styles defined in a separate CSS file. No external data source is used; the entire visual is generated programmatically.

Aug 6, 2020

Loading thumbnail…

Moje strona

This example demonstrates a hand-coded SVG composition combining basic geometric shapes, including circles, rectangles, lines, and paths, arranged within groups and transformed with translation and scaling. The visualization places shapes on a 960x500 canvas with one circle colored green and a red group of shapes offset below, while line elements receive a thick black stroke and paths use a teal stroke with rounded joins. The page also includes an HTML list of used car prices with a highlighted first item, styled using a monospace font and CSS class selectors. The rendering relies entirely on native SVG elements within a React framework, with no external visualization libraries.

Aug 6, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes can be styled using both inline attributes and CSS classes. It shows circles and rectangles with default black fills, explicit red and green fills, and a group that inherits a light blue fill with a black stroke. Two additional elements, a line and a polyline path, are styled through the `.lines` CSS class with a thick stroke and rounded joins. The SVG uses transform groups for scaling and translation, while the HTML document links to an external stylesheet that also sets the page’s font size and hides overflow.

Aug 6, 2020