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 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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Something a bit more visually appealing

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.

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
77% 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
77% match
Loading thumbnail…

D3 bar chart without data-binding

This example displays a simple bar chart of ten numeric values, with each bar labeled by its corresponding data point. The chart is rendered entirely as SVG elements, and the bars react to mouseover events by turning yellow. The code uses D3 v4 to select the body element and append an SVG canvas, then applies a linear scale to map the data values to bar heights. Each rectangle and text label is created through D3's selection and append methods, with positions calculated from the array index.

RRade-Mathis
76% match
Loading thumbnail…

D3: An SVG element tooltip

This example shows a bar chart built from a hardcoded array of numbers, with an SVG text tooltip that appears on mouseover to display each bar’s value. The tooltip is appended directly to the SVG and removed on mouseout. Clicking a bar sorts the rectangles in ascending or descending order using a staggered transition. The code uses D3 v4 with `scaleBand`, `scaleLinear`, and `transition` for sorting, while CSS `rect:hover` styling changes the fill to orange.

深深度碎片
76% 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
76% 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
75% 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
75% match