Skip to main content
SimilarExport ZIP
100%

D3.js - Barchart for counting characters in text

✓ Published1🌍 Public
AAxVa 🐍 💪
Last edited Nov 16, 2024
Created on Nov 15, 2024

This example visualizes character frequency in a text area as a horizontally oriented bar chart that updates dynamically with each keystroke or paste. It counts all characters, standardizing whitespace variants to a single "\\s" label, and color-codes bars by category: lowercase, uppercase, numbers, whitespace, and other symbols. Built with D3 v7, the chart uses `d3.scaleLinear` and `d3.scaleBand` for scaling, `d3.axisTop` and `d3.axisLeft` for ticks, and `selection.join` with transitions to animate bar height and position changes. The source text is derived from Nick Morgan's JavaScript Crash Course, 2024.

AI-generated description

Write a text in the textarea to see a bartchart for counting written characters. Try out writing "Hello, my friend! 123".

This example is based on the book "JavaScript Crash Course: A Hands-On, Project-Based Introduction to Programming" by Nick Morgan, No Starch Press, 2024.

Visit also my repo https://github.com/ax-va/JavaScript-Crash-Course-Morgan-2024.

MIT Licensed

Similar vizzes

Loading thumbnail…

Letter Count Bar Chart

This interactive bar chart visualizes the frequency of each letter in a text file, updating live as the user types in a textarea. The chart loads Peter Piper’s tongue twister asynchronously via `d3.text`, counts characters with JavaScript, and renders SVG rectangles using `d3.scaleLinear` and `d3.scaleBand`. Axes are drawn with `d3.axisBottom` and `d3.axisRight`, and the chart animates with D3’s enter/update/exit pattern on each `keyup` event.

115Dkatz
79% match
Loading thumbnail…

Letter Count Bar Chart

This interactive bar chart displays the frequency of each letter in a text file loaded asynchronously via `d3.text`. The visualization updates in real time as users type into a textarea, triggering a redraw of the SVG bars through a `keyup` event. Letter counts are computed client-side with a `d3.map`, while vertical spacing uses `d3.scaleLinear` and horizontal categories use `d3.scaleBand`. The chart renders its axes with `d3.axisBottom` and `d3.axisRight`, and includes SVG animation for enter/update transitions.

SShuangjiaoHu
78% match
Loading thumbnail…

Letter Count Bar Chart

A bar chart displays the frequency of each letter in an input text file, updating dynamically as the user edits the text. The D3.js v4 code uses `d3.text` to load the file, `d3.map` and `countLetters` to count occurrences, and `d3.scaleLinear` and `d3.scaleBand` for axes. The SVG chart renders bars and axes, with a `keyup` event listener triggering redraws.

SShuangjiaoHu
78% match
Loading thumbnail…

Making a Barchart

A bar chart displays the frequency of each letter in the English alphabet. The chart uses D3 v5’s `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with data loaded via `d3.csv`. Two additional axes show the same data with different scales: a right y-axis uses a scale from 0 to 100, while the primary left y-axis displays percentages with ten ticks. Bars are rendered as SVG rectangles, styled with the CSS class `bar`, and turn brown on hover. Data comes from the letters’ frequency in the CSV file.

NNoWizards
77% match
Loading thumbnail…

Letter Count Bar Chart

This example demonstrates a bar chart that visualizes the frequency of each letter in a text excerpt from the Peter Piper nursery rhyme. It asynchronously loads the text file via `d3.text`, counts letters using JavaScript `Map` objects, and renders the chart with SVG rectangles. The visualization uses D3 v5 scales (`scaleLinear`, `scaleBand`) and axes (`axisBottom`, `axisRight`) to map counts to bar heights, with interactive updates triggered by `keyup` events on a textarea.

SSophie Engle
76% 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
76% match
Loading thumbnail…

Letter Count Bar Chart

A bar chart displays the frequency of each letter in the text of "Peter Piper," loaded asynchronously via `d3.text`. The chart updates live as users type in a textarea, using `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisRight` to render SVG bars and axes. Enter and update selections handle dynamic data changes, with a key-based data join for smooth transitions.

115Dkatz
75% 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
75% match