oefening2

100%

✓ Published0🌍 Public

Last edited Feb 23, 2018

Created on Feb 23, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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.

GGeoJonna

92% match

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.

GGeoJonna

88% match

Loading thumbnail…

SVG Example

Five static SVG rectangles form a simple bar chart, descending diagonally from the top-left to the bottom-right. The bars have equal widths and varying heights and y-positions, creating a staircase-like visual from a hardcoded JavaScript array of objects. The example uses D3 v4’s selection API to append rectangles to an SVG canvas, setting x, y, width, and height attributes from the data. The code demonstrates basic declarative binding of data to SVG shapes without animation or axes.

CCurran Kelleher

80% match

Loading thumbnail…

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.

GGeoJonna

79% match

Loading thumbnail…

D3 bar chart with data-binding

This example demonstrates a simple D3 bar chart that binds an array of numeric values to SVG rectangles, with each bar’s height proportional to its data point. It uses D3 v4’s `scaleLinear` to map the data domain to a fixed pixel range, then applies the `data()` and `enter()` methods to create and position the rectangles. The chart renders with a minimal style—unfilled bars with black outlines—and the data is hardcoded as a static array. The code relies on standard D3 selection and scale APIs, with the SVG container set to 960 by 500 pixels.

4456lumen

79% match

Loading thumbnail…

SVG Example

This example displays a simple bar chart with five bars labeled A through E, where bar heights correspond to values from 5 down to 1. The visualization uses D3 v4’s `d3-selection` to bind data to SVG `rect` elements, and `d3-scale` with `scaleBand` for the x-axis positions and `scaleLinear` for the y-axis scaling. The page creates an SVG canvas in the body and renders all bars via chained `enter()` and `append` calls, with no axes or labels added.

CCurran Kelleher

78% match

Loading thumbnail…

Lab2-Task2

This example displays a histogram of 20 fixed numeric values using SVG rectangles, with each bar’s height and color encoding the data magnitude. A linear color scale maps the minimum value to dark blue and the maximum to light blue. D3.js v4 selects the SVG, binds the array via `data()`, and appends `rect` elements for bars plus `text` elements showing each value in white. The rendering uses static JavaScript data, not an external dataset.

XXuân Vinh

78% match

Loading thumbnail…

Stacked bars

Stacked bars shows four horizontal bars sorted in descending order, each with a cumulative value label at its right edge. The example uses d3.scale.linear for the x-axis range, d3.scale.ordinal with a custom color range for the bars, and d3.selectAll to bind the data array to SVG groups. The code draws rectangles with varying widths based on the data, while text elements display a running total that accumulates as the bars are processed. The data is hardcoded as an array, and the visualization is rendered in SVG with a gray background and black border.

AAlexDaGr8

77% match