VI2

100%

✓ Published0🌍 Public

Last edited Feb 3, 2016

Created on Feb 2, 2016

This example demonstrates a basic D3.js bar chart visualizing a static dataset of twenty numeric values. The visualization uses SVG rectangles to represent each value, with bar height proportional to the data point and a color scale that darkens with increasing magnitude. Text labels display the exact value above each bar, and the chart employs D3’s selection, data binding, and attribute methods (`attr`) to render the visualization. The dataset is hardcoded within the script, and the SVG canvas is sized at 500 by 150 pixels.

AI-generated description

Built with blockbuilder.org

John Berlin

Tableu:

Bar chart of passing yards per player (best displayed as a horizontal bar chart), with conference mapped to color
- Incite: The passing chart did not show much to me other than football players can throw ball for alot of yards. Sry not a big sports fan
Scatterplot of 2 interesting variables, with conference mapped to color
- Incite: The scatter plot showed an incite to see where each conference stands to one another.
One other interesting graph that uses a derived variable
- Incite: The derived variable Completions/Interceptions using tree map showed me how simular completions to intercepetions for each player in the conferences are to each other conference
Tableau
- It is very hidden about what you can do with it
- Wish there was a list of all functions or easy way to find a function list
D3
1. Its really powerful.
2. The tutorial is really great for tip of the ice burge showing. I read the docs immediatly
3. It was a great wet your whistle tutorial really wanted to do more with the bar charts

Similar vizzes

Loading thumbnail…

CS 725 Information Visualization - VI2

This example demonstrates a bar chart for a dataset of 20 numeric values, with each bar’s height and color intensity proportional to its value. The chart is rendered as an SVG using D3.js (version 3.5.5), where `d3.select` appends an SVG element, and `selectAll("rect")` with `data()` and `enter()` creates the bars. Text labels are positioned at each bar’s top using an inverted coordinate system, where `y` is calculated from the height. The source code is a standalone HTML file, and the dataset is hardcoded as an array. The rendering uses basic D3 APIs such as `attr` for styling and `text-anchor` for label alignment.

CChristosT

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

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

84% match

Loading thumbnail…

Learn D3.js

This bar chart visualizes a static dataset of nine numeric values using SVG rectangles. The example demonstrates how to construct a basic chart with the D3.js v4 library. The code sets the SVG canvas dimensions, calculates bar widths based on the data array length, and uses `d3.select` and `selectAll` to append `rect` elements. Each bar’s height and y-position are derived from the data values, with a `transform` attribute translating each rectangle horizontally. The chart is contained within an HTML page with a light background.

Ssafdarnu

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

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

83% match

Loading thumbnail…

Untitled

This example shows a simple bar chart rendered as static SVG rectangles with value labels. The chart displays three bars with heights proportional to the data values 5, 10, and 12, using inline SVG elements styled with orange fills and white text. The code uses D3 version 6 only for loading the library, while the visualization itself is hand-coded in HTML with hardcoded `rect` and `text` elements, not generated through D3 data joins or scales. A separate `index.js` file imports `select` from D3 to append a text message to the page body.

DDebaliena

83% match

Loading thumbnail…

VI4 - Magnitude as Position on a Common Scale

A bar chart displays twenty numeric values as vertical bars positioned along a shared horizontal axis, with each bar’s height encoding the value on a common vertical scale. The bars are rendered in SVG using D3.js, with each rectangle’s x coordinate computed from its index, its y coordinate derived from the height, and its fill color set to a blue shade based on the value. The code uses d3.select and append to create the SVG container and rect elements, and the dataset is hardcoded within the script.

JJamestiberiuseanes

83% match