Skip to main content
100%

ekample1

✓ Published0🌍 Public
Aaraft
Last edited May 16, 2018
Created on May 16, 2018

Six vertical bars display six numeric values in a simple bar chart. The bars are positioned with `d3.scaleBand` along the x-axis and sized with `d3.scaleLinear` for the y-axis. Bar colors transition from blue to red based on value using a second `d3.scaleLinear` with a domain from the data extent. The SVG is rendered directly with D3 v4, using hardcoded data and a fixed 960 by 600 pixel canvas.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

example0

Four vertical red bars stand on an SVG canvas, with heights of 40, 60, 80, and 70 pixels. The bars are drawn as rectangles, each 40 pixels wide and spaced 50 pixels apart, starting at x-coordinate 100. The code uses D3 v4 to append SVG `rect` elements to a 960×500 canvas, positioning each bar’s baseline at y=200 and filling it with red. The dataset is a simple hardcoded array, and the rendering relies on D3’s selection and attribute methods.

Aaraft
82% 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
81% match
Loading thumbnail…

gráfico de barras con SVG

A bar chart displays six numeric values as horizontal steelblue bars with white strokes, each labeled with its value at the bar’s end. The chart uses a linear scale (`d3.scaleLinear`) to map the data domain to pixel widths, with bars positioned vertically using the index and fixed height derived from the container dimensions. Built with D3 v5, the SVG rendering appends `rect` elements with `title` tooltips and `text` labels, all within a 500×200 viewport. The data is hardcoded in the script as an array of numbers.

Aaaizemberg
81% match
Loading thumbnail…

Bar Chart

This bar chart displays six numeric values as horizontal rectangles, with each bar’s length scaled linearly from its minimum to maximum value. The visualization uses D3 v7 to bind the data array to SVG groups, appending a rectangle and a text label per value. The chart positions each row using transform translations, and the x-axis scaling is handled by d3.scaleLinear. The SVG dimensions are fixed at 500 pixels wide with a bar height of 20 pixels, and the chart is rendered directly into the body element.

Jjajinkya
80% match
Loading thumbnail…

D3: Basic Barchart

This example shows a basic bar chart of 20 numeric values rendered as SVG rectangles, with each bar labeled by its value in white text. The chart uses D3 v5 scales, including a `scaleBand` for the x-axis positioning and a `scaleLinear` for the y-axis height calculation. Data is bound via `selectAll("rect").data()`, with bars and text labels positioned using the scales. The code loads D3 from UNPKG and demonstrates simple SVG generation without axes or interactivity.

AAnissa Belkelfa
80% match
Loading thumbnail…

Bar Chart Example

This example demonstrates a basic bar chart built with D3 version 6. It visualizes a small dataset of four categorical values using an SVG container. The code creates an SVG, applies d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis, then renders steelblue rectangles for each data point. It also appends axes with d3.axisBottom and d3.axisLeft.

VVamshi Amudala
79% match
Loading thumbnail…

Bar Chart

This example shows a bar chart with six labeled bars (a–f) of varying heights, rendered as an SVG in a React environment using D3 v3. The code defines a band scale for the horizontal axis, a linear scale for the vertical axis, and draws axes with tick marks. It uses D3’s selection and data-join pattern (`selectAll`, `data`, `enter`) to create a `rect` for each data point, with bars filled in steel blue. The data is hardcoded in the script, with margins and padding configured around the 500-by-500 pixel canvas.

Ssojung114
79% match
Loading thumbnail…

Fork of Simple Exploration with bars

A simple D3 bar chart displays six static data values with corresponding letter labels. The visualization uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, rendering bars as SVG rectangles with steelblue fill. It includes labeled axes for "Data Value" and "Data Count," along with `d3.axisBottom` and `d3.axisLeft` tick marks. The fixed dataset is hardcoded in JavaScript, and the chart is drawn in an SVG container with specified margins.

Ssharmamilan632.m@gmail.com
79% match