GeoJonna

@GeoJonna·4 public vizzes

oefening groups axes

A simple bar chart displays four values from a hardcoded array. Linear scales map data values to bar widths and a color range from red to blue. D3 v4's `d3.axisTop` adds a top-oriented axis with five ticks based on the width scale. The SVG rendering uses `rect` elements with fixed height and vertical spacing.

Feb 23, 2018

Loading thumbnail…

oefening scales

Four horizontal bars illustrate linear scaling in D3.js v4. Each rectangle’s width maps a value from the fixed data array `[120,40,5,100]` through a `d3.scaleLinear` domain to a pixel range, while a second `d3.scaleLinear` interpolates fill color from red to blue across the same values. The SVG canvas is 500 by 500 pixels, with bars stacked at 100-pixel intervals. This example demonstrates how a single quantitative scale can drive both geometry and color encoding.

Feb 23, 2018

Loading thumbnail…

oefening1

Three vertical rectangles display a small bar chart from a hardcoded data array of [20, 40, 50]. Each bar’s width is proportional to its value, multiplied by ten, while height is fixed at 50 pixels and vertical positions step by 100 pixels. d3.v4’s selection, data join, and enter methods render the SVG rectangles. The code also contains commented-out attempts at circles and d3.set usage. The page uses steelblue fill for the bars on a 500‑by‑500 SVG canvas.

Feb 23, 2018

Loading thumbnail…

oefening2

This example shows four horizontal bars rendered as SVG rectangles, with their widths proportional to values in a static data array of [20, 40, 50, 60]. The code uses a linear scale (`d3.scale.linear`) to map data values to pixel widths, then appends rectangles via `d3.selectAll("rect").data().enter()`. Each bar is positioned vertically by index, and all bars share a steelblue fill. The visualization duplicates the same bar-drawing block twice, though only the first set of rectangles is visibly rendered.

Feb 23, 2018