oefening1

100%

✓ Published0🌍 Public

Last edited Feb 23, 2018

Created on Feb 23, 2018

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/f29574ff59abdab57816da0d9abeb96a'>oefening</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/fd6fd7c5bff42ee2376ccb47cf3a24dc'>oefening1</a>

mit Licensed

Similar vizzes

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.

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

84% 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

81% match

Loading thumbnail…

D3: Drawing a Bar Chart

This example demonstrates a basic bar chart built with D3 v7 in an SVG container, visualizing an array of 20 numeric values. The bars grow downward from the top of a 500×100 pixel canvas, with each bar’s height proportional to its data value multiplied by 4, and its fill color transitioning from dark to lighter blue based on the data. The chart also overlays each bar with white, 11px sans-serif text labels showing the exact data values, centered horizontally within each bar. The code uses `d3.select` to append SVG elements and the data-join pattern with `.enter()` to create rectangles and text nodes.

MMarisa Tania

80% 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

80% match

Loading thumbnail…

SVG starter

This example demonstrates a minimal SVG-based bar chart with three static rectangles rendered in steelblue, green, and red. The SVG canvas is created by appending an `svg` element to the HTML body via D3's selection API, with a height of 500 and width of 960. Each rectangle is positioned using explicit `x` and `height` attributes, with widths fixed at 50 pixels. A loop then appends additional red rectangles at intervals of 100 pixels, though the loop condition prevents it from executing properly.

NNita

80% match

Loading thumbnail…

D3 practice

A single row of six vertical bars displays categorical values from a fixed array. The bar heights correspond to the numeric data, and each bar is positioned with a uniform width and small spacing between bars. The visualization is built with D3 v5’s selection and `.data()` methods, appending SVG `rect` elements to an `<svg>` element in a React-free HTML page. The chart’s dimensions and bar positions are explicitly set, while the CSS removes page scrolling by positioning the body absolutely.

AAndy Zhang

79% match

Loading thumbnail…

D3 SVG Tutorial

This example shows a static bar chart of a 20-point dataset rendered as an SVG, with each bar’s height and color intensity tied to its value. The code uses D3.js version 3.5.5, applying the `d3.select` and `data().enter()` pattern to append rectangles and text labels. Bars are positioned with arithmetic on the dataset length and fixed width/height variables, while fill colors are generated as RGB values scaled by data. The chart demonstrates basic SVG shape binding and data-driven styling without axes or interaction.

JJamestiberiuseanes

79% match