Solution Timeline

All versions (edits) of solutions to Proof of concept chart showing spelling (Sankey diagram?) appear below in the order they were created. Comments that appear under revisions were those created when that particular revision was current.

To see the revision history of a single solution (with diffs), click on the solution number (ie. "#1") in the upper right corner of a solution revision below.

← Bounty Expand all edits

Here is the fiddle : https://jsfiddle.net/fry0wg6t/3/
There's a lot that can be improved, especially the style, but I think this is a good start.
Please forgive me for bad practices if you spot any, I'm not a frontend developer.
The data is in the format you specified, and the only dependency is d3.

Here is the fiddle : https://jsfiddle.net/fry0wg6t/3/
There's a lot that can be improved, especially the style, but I think this is a good start.
Please forgive me for bad practices if you spot any, I'm not a frontend developer.
The data is in the format you specified, and the only dependency is d3.
A few things :
- You can just press enter twice instead of the buttons
- Checking the spelling adds it to the list of the spelling variations

Here is the fiddle :https://jsfiddle.net/kcpLd97s/1/
There's a lot that can be improved, especially the style, but I think this is a good start.
Please forgive me for bad practices if you spot any, I'm not a frontend developer.
The data is in the format you specified, and the only dependency is d3.
A few things :
- You can just press enter twice instead of the buttons
- Checking the spelling adds it to the list of the spellings.

Here is the fiddle : https://jsfiddle.net/aw5xrsu9/2/
There's a lot that can be improved, especially the style, but I think this is a good start.
Please forgive me for bad practices if you spot any, I'm not a frontend developer.
The data is in the format you specified, and the only dependency is d3.
A few things :
- You can just press enter twice instead of the buttons
- Checking the spelling adds it to the list of the spellings.
- If you hover over the nodes once the spelling is checked, you will get a tooltip saying how many people spelled them that way, in total but also from those that spelled it up until that point.

Edit :
Fixed a bug when adding a word shorter than the correct word

Hey, another fun challenge and a relatively new territory for me, so here's what I came up with:

Demo: https://wuddrum.github.io/sankey-branch/ OR https://jsfiddle.net/Lmakuj6n/9/

Source: https://github.com/Wuddrum/sankey-branch

Dependencies: D3.js and d3-sankey. d3-sankey has some very minor changes made to it - lines 265 and 266 are swapped around. It's not necessary, but makes the graph visually more pleasing.

Data Structure

Input data is structured exactly as you mentioned, requiring only name and count fields. E.g.:

[{
    "name": "deschanel",
    "count": 18338
}]

Usage

var sankeyBranch = new SankeyBranch(inputData, correctInput, inputElement, resultsBtnElement, svgElement);
sankeyBranch.init();

The parameters are pretty self explanatory, so I won't go over them.

Features

Supports lower/upper casing, as well as spaces and other special characters.

Supports unlimited amount of input names. Although as you can see in the demo, on the last example with 44 input names, the diagram is getting visually unpleasing (but still readable).

Winning solution