Adapted from https://github.com/akleemans/letter-frequency

100%

Adapted from https://github.com/akleemans/letter-frequency

✓ Published0🌍 Public

Last edited Apr 4, 2022

Created on Apr 4, 2022

A comparative visualization of letter frequencies across 16 languages, shown as an interactive network of letters and language nodes. The visualization uses `d3.forceSimulation` to position nodes, with link widths encoding frequency values from the CSV dataset. Hovering highlights a selected language or letter, revealing its frequency distribution across connected nodes. The code accesses the raw CSV data and applies force-directed layout to cluster related letters and languages, making cross-linguistic similarities and differences visually apparent.

AI-generated description

Similar vizzes

Loading thumbnail…

LI Analytics

This example uses D3.js v4 to visualize letter frequency data from a TSV file as a bar chart with SVG rendering. The chart displays the frequency of letters in the English language, with bars colored steel blue that transition to brown on hover. The visualization includes axes for both the letter categories and their frequencies, and the title "BIG TEXT" serves as a placeholder. The page also logs the total number of comment letters received from a separate CSV file to the console, though this data is not visualized.

BBillyBHWong

71% match

Loading thumbnail…

Alpha frequencies

This example displays the relative frequencies of letters in the English language as horizontal bars, sorted from most to least frequent. It uses a linear x-scale (d3.scaleLinear) to map frequency values to pixel widths, with each bar’s height fixed at 10 pixels and positioned vertically by index. The chart renders as an SVG element appended to the page body, with data loaded from a local CSV file via d3.csv, parsed, and sorted in descending order before drawing. The visualization is built with D3 v4.

KK-Du

68% match

Loading thumbnail…

Frequency of letters used in the English language

This example visualizes the frequency of letters in the English language as a horizontal bar chart. The 26 letters are sorted from most to least frequent, with each bar’s length proportional to its percentage occurrence. The chart is built using D3 v7, with `d3.scaleBand` for the categorical letter axis and `d3.scaleLinear` for the frequency values. Data is hardcoded as an array of objects, sourced from a StackOverflow discussion, and rendered via SVG rectangles with `d3.axisLeft` and `d3.axisBottom` for the axes.

SSebastian Barrett

67% match

Loading thumbnail…

Force Directed Graph

This interactive force-directed graph visualizes relationships among programming languages, with nodes representing languages and curved links showing connections. The simulation uses `d3.forceSimulation` with link, charge, center, and positional forces to arrange nodes, while SVG paths render edges with dashed or solid strokes distinguishing link values. Node size and color intensity reflect connection counts, with labels positioned beside each node. Drag behavior is implemented via `d3.drag`, allowing users to reposition nodes interactively within the 1200x700 viewport.

MMike Wolfgram

67% match

Loading thumbnail…

Bar Chart

This bar chart displays the frequency of each letter in the English language, with letters arranged along the x-axis and their proportional occurrence on the y-axis. It uses D3 v4 with SVG rendering, parsing tab-separated values from a TSV file via `d3.tsv` and `d3.dsv`. The chart applies conventional margins and employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the continuous y-axis, and `d3.axis` components for tick marks. Hovering over a bar changes its fill from steelblue to brown, as defined in the CSS.

GGolodhros

67% match

Loading thumbnail…

Bar Chart: stripped easier

This bar chart displays the frequency of letters in the English language, with each letter represented as a steelblue bar that turns brown on hover. The chart loads data from a TSV file using `d3.tsv`, parses the frequency values, and encodes the x-position with `d3.scale.ordinal` and the y-position with `d3.scale.linear`. Axes are rendered via `d3.svg.axis`, and the domains are computed using `d3.max`. The SVG output uses conventional margins and a 10px sans-serif font for the axis labels.

BBeaupe

66% match

Loading thumbnail…

Force Directed Graph

This force-directed graph visualizes relationships between programming languages as a network of labeled, colored nodes connected by curved links. It uses `d3.forceSimulation` with link, center, and many-body charges to compute node positions, while each node’s radius and blue color intensity scale with its degree (weight). Links are styled differently based on a binary value: dashed black lines indicate zero, solid green lines indicate one. The chart is rendered as an SVG using d3.v5.

IIcecreamneverfall

66% match

Loading thumbnail…

Making a Bar Chart

This bar chart displays the frequency of each letter in the English alphabet, based on a CSV dataset, using D3 v5 with SVG rendering. The example highlights population data from the United Nations’ 2018 estimates for the top 10 most populous countries, though the plotted frequencies come from the provided `data.csv`. The code demonstrates customizing D3 axes by removing the y-axis domain line and adding outer tick removal on the x-axis, while using `scaleBand` and `scaleLinear` to map categorical and continuous scales.

WWarren-Fitzhenry

66% match