Skip to main content
100%

Something a bit more visually appealing

✓ Published0🌍 Public
VVanBantam
Last edited Mar 4, 2017
Created on Mar 4, 2017

This visualization displays the frequency of digits 0 through 9 in Josh's bank account using a bar chart. The chart renders as two SVG canvases—one for navigation and one for the main display—created with D3 v3, using an ordinal xScale and linear yScale to map the dataset. Hovering over a rectangle turns it orange and reveals a tooltip with the digit’s value and frequency. The page includes styled text elements, such as a green title, and references blockbuilder.org as the source.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Something a bit more visually appealing

This example displays the frequency of digits 0 through 9 in a fictional bank account balance as a bar chart. The visualization uses D3 v3 with SVG rendering, employing `d3.scale.ordinal` for the x-axis bands and `d3.scale.linear` for the y-axis heights. Two separate SVG canvases are created for navigation and main display areas, with hover effects that turn bars orange and a tooltip showing the digit and its frequency. The page also includes experimental text elements and styling that are not part of the final chart.

VVanBantam
94% match
Loading thumbnail…

Simple Vertical Bar Chart

This example presents a simple vertical bar chart that displays six financial metrics, such as total deposits and credit ratios, as orange bars with hover effects that darken the bars. The data is loaded from a tab-separated values file (data.tsv) containing label–value pairs. The visualization uses D3.js v3 with an ordinal x-scale and a linear y-scale formatted as percentages, alongside the d3-tip library to show tooltips with each bar’s exact value on mouseover. Axes are rendered via d3.svg.axis.

MMohamedZaki
75% match
Loading thumbnail…

80. D3 Click

A bar chart displays a dataset of 20 numeric values, rendered as blue SVG rectangles with white value labels. Each bar darkens as its value increases. When a user clicks any bar, the corresponding data value is logged to the browser's developer console. The visualization uses D3 v4.5.0, employing `d3.scaleBand` and `d3.scaleLinear` for positioning and height, with the click event handled via `.on("click", ...)`. The y-axis is implied through bar heights that grow from the bottom, and the chart is static apart from the logging interaction.

Aamakanju@nyit.edu
74% match
Loading thumbnail…

simple bar chat with interaction

Ten labeled bars display numeric values in a simple SVG bar chart. Hovering a bar turns it red and enlarges its corresponding text label; moving the mouse out triggers a 500-millisecond transition restoring the original fill and font size. The example uses D3 v4 with `d3.scaleLinear` for positioning, `d3.select` and `.on("mouseover")`/`.on("mouseout")` for interaction, and `.transition().duration()` to animate the visual feedback. The chart is built from a static array of ten numbers.

EElisaDnr
74% match
Loading thumbnail…

D3 Bar Chart

This interactive D3 v4 bar chart displays two datasets of numbers as vertical steel-blue bars with value labels and a y-axis. Clicking the Update button toggles between a 10-element ascending dataset and an 8-element descending one, demonstrating the enter, update, and exit pattern. The code uses d3.scaleLinear for the y-scale, d3.axisLeft for the axis, and transition().duration(500) to smoothly animate bar heights, positions, widths, and labels when the data changes. SVG rendering handles all visual elements.

MMaxBotta
74% match
Loading thumbnail…

VI2

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.

NN0taN3rd
73% match
Loading thumbnail…

BankInfo Barchart Practice

This example visualizes bank customer data as an interactive bar chart with five series of ten values each, rendered as SVG rectangles. Users can toggle between grouped and stacked layouts using custom radio buttons built with D3 selections. The chart uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` for layout, with hover tooltips displaying precise values via a D3-managed HTML div. Data comes from a CSV file loaded asynchronously through a custom `useData` React hook, and transitions animate between layout states.

AAndre J Denais
73% match
Loading thumbnail…

81. D3 Hover

A simple bar chart displays twenty numeric values as vertical bars, with each bar labeled by its value and colored in a blue gradient. The example demonstrates a CSS-only hover effect, where hovering over any rectangle turns it orange. Built with D3.js version 4.5.0, the code uses `d3.scaleBand` to position bars along the x-axis, `d3.scaleLinear` for the y-axis, and SVG `rect` and `text` elements for rendering, with hover styling defined via CSS `:hover` selector.

Aamakanju@nyit.edu
73% match