Proof of concept chart showing spelling (Sankey diagram?)
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I found this chart interaction a few days ago and would like to make a proof of concept using some data that we have about how people spell things in our business.

I have also put this video together showing the interaction

Basically as you type it will show this flow branch diagram (i think called a Sankey Diagram formally) showing how you are spelling something vs your sample data set. At the end you can submit to then see the diagram update with all of the branch and percents so you know if you spell it similar to other people or in our case how other people tend to spell the thing you are looking at.

It might give more context if you look at all of the results together seen here

For my data set i think it would be reasonable to assume we have up to 20 branches whereas this demo seems to have up to 10. Mine will take up the entire page width so I think we will have more room to work with.

My current data is shaped something like

Word | Count

I think your js can handle calculating the overlap between two rows of data and then applying the percent from the sample set and then rendering the chart. ideally you can come up with a nice easy to manage json file for structuring the data, unless im missing something we just have word + value pairs.

One assumption I want to make in my sample is that we care about text case.

What we want from you:

- jsfiddle or codepen of a page that has a text input

-as i type my letters the chart below will render in a similar way to the demo

-can support up to 20 branches in the chart, would be cool if unbounded but if we need to make an upper limit 20 would be great

- casing matters on the input

- spaces matter on input " Bob Thomas" would be an example entry whereas from our sample set of data there might be a "Bobby Thomas" and we would see the branch after the second B in position 4.

-you can use jquery or any 3rd party, this is just a POC so it will be internal for now.

I think the demo I have referenced is using d3.js which would be fine

Good Luck!

That looks like a trie! You always ask the good stuff :)
alixaxel over 1 year ago
Thx @alixaxel!
Qdev over 1 year ago
awarded to Wuddrum

Crowdsource coding tasks.

2 Solutions

Here is the fiddle :
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

Winning solution

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

Demo: OR


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


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

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


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

OMG you are cool! this is really amazing. Thanks a ton for this solution
Qdev over 1 year ago
Thank you! I'm glad you like it
Wuddrum over 1 year ago
View Timeline