log bar

100%

✓ Published0🌍 Public

Last edited May 31, 2017

Created on May 31, 2017

A log-scale bar chart displays five categorical values ranging from 100 down to 0.8, with bar widths proportional to the logarithmic scale. The visualization uses d3.scaleLog for the x-axis, d3.scaleOrdinal for vertical placement, and d3.axisBottom with comma-formatted ticks. Rects and text labels are appended to an SVG, with hardcoded margins and a 580×500 canvas. The data is hardcoded in the script, and the axis is positioned below the bars via an SVG transform.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

bar chart

This example shows a small, static bar chart of five categorical values, with each bar colored individually and labeled A through E. The chart displays the data using SVG rectangles, with linear and ordinal scales mapping the values to positions and heights. The code uses d3.js version 3.5, specifically d3.scale.linear and d3.scale.ordinal, along with d3.svg.axis for the x and y axes. The data is hard-coded in the script and rendered on a light grey canvas with margins applied via a group transform.

MMoximillian

81% match

Loading thumbnail…

Bar chart

A bar chart displays categorical values with six colored, semi-transparent rectangles. The visualization maps lettered categories (A through F) to numeric values, with axes labeled and gridlines rendered via D3's SVG axis API. It uses `d3.scale.ordinal` for the x-axis bands and `d3.scale.linear` for the y-axis range, while `d3.svg.axis` generates the ticks. Rectangles are appended and styled with `d3.scale.category10` colors, and the data comes from an inline array of objects with `x` and `y` properties.

DDDDDDanica

81% match

Loading thumbnail…

Bar Chart

A bar chart displays 100 randomly generated numeric values as vertical bars, with bar heights proportional to the data. The bars are colored using a D3 linear scale that maps index positions to a gradient of blue, orange, red, and purple. The visualization is built with D3.js (version 3.5.5) using SVG rendering, where `d3.scale.linear` handles both color and height scaling, `d3.scale.ordinal` positions the bars along the x-axis, and `d3.select` appends the SVG container and rectangles. Data originates from a JavaScript loop pushing random values.

Aaimunoz73

80% match

Loading thumbnail…

Bar Chart I

This bar chart visualizes six numeric values—4, 8, 15, 16, 23, and 42—as horizontal bars whose widths are proportional to the data. The chart uses D3 v3’s `d3.scale.linear` to map the domain from zero to the maximum value (42) onto a pixel range of 0–420. Each bar is a styled `div` element with a steelblue background, white text, and a width set via the `style` operator. The code appends these divs using `d3.select` and `.selectAll("div").data(...)`, with the data bound to the DOM. The bars’ labels display the original values.

Mmbostock

79% match

Loading thumbnail…

Bar Chart

This bar chart visualizes a simple dataset of five values (10, 20, 30, 40, 50) using D3 v5. Rectangles are rendered as SVG elements, with their heights proportional to the data and their x-positions determined by a band scale (`d3.scaleBand`). A linear scale (`d3.scaleLinear`) maps the values to the vertical axis, and axes are generated with `d3.axisBottom` and `d3.axisLeft`. Bars change color on hover via CSS, and the chart includes a fixed 50-pixel left margin and 20-pixel top offset.

OOluoch Odhiambo

79% match

Loading thumbnail…

My bar chart.

This bar chart displays categorical letters on the y-axis against quantitative numbers on the x-axis using d3.scaleBand and d3.scaleLinear. The SVG rendering uses d3.csv to load data.csv, converting the numbers field to numeric values before binding the data to rectangles. d3.axisLeft and d3.axisBottom generate the axes, while the bar height derives from the scale band’s bandwidth.

CChocoOrange

78% match

Loading thumbnail…

Building a bar chart

Five purple bars display a small static dataset, with bar height proportional to values of 100, 250, 175, 200, and 120. Using D3 v4, the SVG selects all rectangles, binds the data, and appends a rect for each entry, setting x positions by index and y based on a fixed chart height minus the value. The bars are filled purple with white strokes, and the SVG fills the entire viewport.

TTollyCoburn

78% match

Loading thumbnail…

bar chart with legend

A bar chart displays four fixed values—20, 30, 40, and 10—as vertical bars rendered in SVG. The chart is built using D3 v4 within a custom `BarChart` class, which configures margins and appends a `<g>` element to the body. The code defines a render method but leaves it empty, so the bars themselves are not actually drawn; only the SVG container is initialized. The example demonstrates a minimal class-based structure for a D3 bar chart, with the data array hardcoded in the script.

Aallyraza

77% match