Dot plot + error bar graph maker for ABC/HR, Frequently Asked Questions

Overview

What's this?

An online dot plot maker, dedicated to visualize the ABC/HR test results.

Why did you create it?

There are many results of public and private listening tests on the web. However, there was once a time, the only visualization and graphs attached to the results were "dynamite plots".
In the past listening tests, their visualization efforts were used to be poor, probably because testers were exhausted after listening tests.

I created this software so that we can visualize the results in minimal time and efforts.

Now this is the standard software to visualize the ABC/HR test results.

How to use

Is there an example input format?

% Totally fake score
encoderA	encoderB	encoderC
5	5	4.5
2.2	3	3.6
4	3.1	3
5	4.4	4.2
2.5	1.9	1.6
opus v0.9.9	aoTuV b6.03	aoTuV b5.7	qaac tvbr
%features	8	Opus	Ogg Vorbis	Ogg Vorbis	AAC-LC	
2.850	3.000	3.100	2.550	
2.900	3.250	3.150	3.050	
2.800	2.850	3.000	3.450	
%samples 41_30sec hihats
%samples finalfantasy strings
%samples Atrain Jazz
opus_75k celt_75k cvbr_75k opus100k celt100k cvbr100k
3.05 3.10 2.50 3.50 3.75 3.70 
3.75 2.95 2.70 4.05 3.80 4.00 
2.80 2.55 3.00 3.60 3.25 4.05 
%features 6 75kbps 75kbps 75kbps 100kbps 100kbps 100kbps
%features 7 OPUS OPUS AAC-LC OPUS OPUS AAC-LC
% MP3 and AAC listening test.
Lame-CBR192k Numa-VBR
3 4
4 5
2 3
%bitrate
192000 189012
192000 210123
192000 123456
% AAC 96kbps ABC/HR score
qaac cvbr	encaacplus	nero abr
3,7	3,0	2,6
3,8	3,3	2,6
3,5	2,9	3,2
3,5	3,5	2,9
%samples	Tarentella
%samples	Minase sanchi
%samples	Miles Davis
%samples	58 Guitar
% You can use spaces if you use tabs as split marks.
% tabs and spaces can coexist.
Opus	FDK-AAC	exhale	LAME
%feature	10	--bitrate 39	-b:a 42k	a	-V 5
%feature	11	album:~40kbps	album:~43kbps	album:~40kbps	album:~131kbps
%y_axis	Bitrates of music tracks [kbps]
46.331	43.282	55.803	159.545
56.552	43.277	42.408	113.421

Is the format compatible with ff123's FRIEDMAN?

Yes. The incompatible part is that FRIEDMAN considers both spaces and tabs as split marks, and confuses the FRIEDMAN if the encoder names include spaces. In this program, only tabs will be recognized as a split mark when both of them are used, so you can use a name with spaces safely. (like "LAME 3.99 V2")

Where can I put supplemental information using %feature?

The %feature position supplemental-encoderA-info supplemental-encoderB-info will appear in a following position.
From %feature 0 to %feature 7 appear inside the graph as braces, from top to bottom.
From %feature 8 and %feature 9 appear below and above the graph as braces.
From %feature 10 to %feature 12 appear below the graph as explanation, from top to bottom.
If two or more duplicated features were detected on a horizontally adjacent position, features are automatically merged, and appear on center. You can disable it by adding space on one of the feature.

A	B
4.1	4.2
4.3	4.4
%feature	0	%feature 0	%feature 0
%feature	1	%feature 1	%feature 1
%feature	2	%feature 2	%feature 2
%feature	3	%feature 3	%feature 3
%feature	4	%feature 4	%feature 4
%feature	5	%feature 5	%feature 5
%feature	6	%feature 6	%feature 6
%feature	7	%feature 7	%feature 7

%feature	8	%feature 8	%feature 8
%feature	9	%feature 9	%feature 9

%feature	10	%feature 10	%feature 10
%feature	11	%feature 11	%feature 11
%feature	12	%feature 12	%feature 12

How to save

How can I save the graph?

Version/Browser Firefox Chrome IE11, 10, 9 IE8, 7, 6
graphmaker 6 Right click Right click Unsupported Unsupported
graphmaker 5 Right click Right click Right click PrintScreen
graphmaker 3 Right click Right click Right click PrintScreen
graphmaker 2 Right click PrintScreen PrintScreen Unsupported
graphmaker 1 Right click PrintScreen PrintScreen Unsupported

Right click: Right click the graph/table you want to save, and save the image.

PrintScreen: Press the PrintScreen key and paste the screenshot image to somewhere else.

Unsupported: You can't make the graph/table.

I want to save the graphmaker 6 app engine itself.

Please save these components by right-clicking the link. Graphmaker 6 and Canvas2Svg and the main Javascript engine.

About Errorbars

There are two buttons, and . What's the difference?

"Make graph" produces slightly more accurate results at the cost of more time. Press the "Make graph" for the final outputs.

What algorithm is used to compute error bars?

CI95%, percentile bootstrap (N=10,000 for preview, N=200,000 for "Make graph", non-parametric; it doesn't assume normal distribution).

The error bars look asymmetric. Are they correct?

Yes, they can be asymmetric, as the bootstrap method is used to compute confidence intervals.

The error bars moves slightly as I change one of the settings or redraw the graph.

Yes, they move. The graph you get is not very accurate as it's a preview. Make sure you press "Make Graph" before you save the graph.

About Dot plots

I want to use a similar visualization, using other software.

Search "beeswarm" or "dot plot".

Privacy

Will this program send my data on the server?

No. Your data will be processed inside your browser. It won't submit the data on anywhere else.
However, if you use any of the Google Fonts, requests for required glyphs will be carried out.

Compatibility

It does not work with Microsoft Internet Explorer 11. I see no graphs at all.

The support for the Internet Explorer 11 has been omitted in the graphmaker 6, sorry. It won't work with Opera Mini, neither.
Please use Edge 79 or later, Firefox 41 and later, or Chrome 35 and later.

The graph is collapsed.

Use the newest graphmaker 6. It should work. (Hydrogenaudio board automatically converts tabs into multiple spaces, and it was causing problems.)
Try widening the "Width:".

Font issues

The Google Fonts won't change the font on the graphs. I don't see any difference.

Please press the twice in that case.

The Google Fonts won't change the font on the graphs, when the image format is SVG.

The Google Fonts will NOT work with SVG format in many cases.
First, in preview, Google Fonts won't work.
Second, if the SVG is encapsulated, such as in an <img> tag, or opened in a stand-alone fashion, Google Fonts won't load neither.
This can be solved with text-to-svg-path, but it's not done at this moment.

Some font won't change the font on the graphs. It's not google fonts.

They use local fonts. Make sure your computer has the same font.

Rotobo Flex (Google Fonts) doesn't work in Firefox.

I am aware of the issue. Meanwhile, please consider using Edge or Chrome.

Project

Are there any future development plan?

Yes, as of June 2022, I'm planning to add multilevel visualization as well (that's what many users are manually doing at this moment).

Opinion/bug report?

Contact me via twitter (@kamedo2) or hydrogenaudio.