fresh block

100%

✓ Published0🌍 Public

Last edited Dec 17, 2017

Created on Dec 17, 2017

This example constructs a minimal bar chart using D3 v4, placing data points on a linear scale that maps a city-based domain to the vertical extent of an SVG canvas. It uses `d3.extent` to calculate the domain, `d3.scaleLinear` for the y-axis transformation, and `d3.axisLeft` to render the axis. The code appends an axis group to the SVG, offset by a fixed translation, and assumes data is already available in a global variable. The visualization itself only shows the axis, not the plotted data bars.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example shows a vertical axis with a linear scale, positioned inside an SVG. The code uses d3.min, d3.max, and d3.extend to compute the domain from an external `data` array, referencing a city variable. A d3.scaleLinear maps this domain to pixel heights, and d3.axisLeft with the scale generates the tick marks and labels. The axis is appended to an SVG g element, translated 40 pixels from the left and 20 from the top. The data itself is not defined in the visible HTML, leaving its source unspecified.

SSnyplife

88% match

Loading thumbnail…

fresh block

A simple bar chart displays five hardcoded values—10, 30, 15, 20, and 100—as vertical rectangles. The chart uses D3 v4’s selection and `append` API to create SVGs directly: `d3.select("body").append("svg")` builds the canvas, then `.selectAll("rect").data(data).enter()` generates bars whose height, y-position, and opacity are derived from each data value. Text labels repeat the same numbers below each bar using `d3.selectAll("text")`, with fixed styling for font size and monospace family. All geometry and styling are set via SVG attributes and styles, with no axes or gridlines present.

GGregory-Howard

85% match

Loading thumbnail…

fresh block

This example shows a simple bar chart built from an array of five numeric values, rendered as blue rectangles with white strokes on an SVG canvas. The code uses D3 v4’s selection and data binding to map each data point to a rectangle, with the x-position determined by an index-based offset and the y-position calculated as the height minus the data value, so bars rise from the bottom. The chart’s fixed width per bar is set via a constant, while the height directly encodes each number. The data is hardcoded in the script, and the rendering relies on SVG’s native shape elements.

BBraMKJ

85% match

Loading thumbnail…

fresh block

A simple bar chart displays six hardcoded values as blue vertical bars on a 900 by 900 SVG canvas. Each bar’s height corresponds to its data value, while the `x` position is determined by an index multiplied by a fixed width. The visualization uses D3 v4’s selection and attribute methods to append rectangles and set their positions, dimensions, fill, and stroke. The data set is a static array, not loaded from an external source.

MMcZieuwa

84% match

Loading thumbnail…

fresh block

A set of five blue rectangles forms a simple bar chart, with each bar’s height directly proportional to values from an inline array. The code uses D3 v4’s selection and data-binding methods (`selectAll`, `data`, `attr`) to map each data point to an SVG `rect`, positioning bars side‑by‑side along the x‑axis and scaling their y‑positions and heights from a fixed baseline. The bars are evenly spaced using a constant `rectWidth`, while the SVG’s total height is fixed at 300 pixels. The chart is rendered entirely with SVG elements and hardcoded data, without scales or axes.

DDanielAguirre

84% match

Loading thumbnail…

fresh block

Four small multiples display vertical bar charts, each with its own set of bars and labeled axes. D3 v3 is used to generate the charts, with `d3.scale.ordinal` and `d3.scale.linear` mapping data to positions and heights. A click on the text in the fourth panel triggers a one-time update, replacing the existing bar data via `d3.select` and `data()`. The axes are rendered with `d3.svg.axis` and styled with black strokes.

NN0taN3rd

84% match

Loading thumbnail…

fresh block

This example shows a simple bar chart with five vertical bars of varying heights. The bars are positioned side-by-side and share a consistent width. The chart uses D3 v4 with SVG rendering, and the data is a hardcoded array of numeric values. It binds the data to pre-existing `rect` elements using `selectAll('rect')` and sets their position, size, and fill color. The chart's height and bar widths are fixed constants, and stroke is applied for clear separation between bars. The code relies on D3’s selection API to directly update attributes without creating new elements.

PPabloRiv

84% match

Loading thumbnail…

fresh block

A bar chart displays six hardcoded numeric values as vertically scaled blue rectangles, with white strokes separating them. Each bar's height is proportional to the value divided by the maximum of the dataset, computed using `d3.max`. The chart renders in SVG via `d3.select` and `selection.append`, positioning bars with `attr('x')` based on their index and using a percentage-based height. The data is static, and the visualization uses d3.v4 without axes or labels.

MMilliners-Son

84% match