predictionmachines/interactivedatadisplay

Interactive Data Display for JavaScript

interactivedatadisplay's Issues

Chart Viewer navigation in Mozilla Firefox 45.0.2

Open sample samples/viewer/Band.html.
Unlock navigation (on right navigation panel).
Add a probe on chart.
Now you can zoom a chart regardless of the position of cursor (left panel, right panel, under the chart).
It is expected that you can zoom chart only when the cursor is on chart.

"All samples" link from github.io samples page does not load

1. Go to https://predictionmachines.github.io/InteractiveDataDisplay/ (the link is at the top of IDD github project landing page)
2. Click on "All samples" (link to https://predictionmachines.github.io/InteractiveDataDisplay/all-samples.html) at the bottom of the page

expected:
The page is loaded

actual:
the page is blank

IDD bower file specifies rx, jquery and modernizr as 'devDependencies', though they should be 'dependencies'

Hence when IDD package is used from another component through bower, the dependencies are not installed.

Instead of 3 different marker shapes (boxwhisker, boxnowhisker, whisker) one is enough (boxwhisker)

Now idd.markers.uncertain.js contains 3 similar marker shapes:

InteractiveDataDisplay.Markers.shapes["boxwhisker"] = InteractiveDataDisplay.BoxWhisker;
 InteractiveDataDisplay.Markers.shapes["boxnowhisker"] = InteractiveDataDisplay.BoxNoWhisker;
 InteractiveDataDisplay.Markers.shapes["whisker"] = InteractiveDataDisplay.Whisker;

They can be combined into a single shape,

• if there're u/l for 95 and 68 percentiles, it is boxwhisker;
• if there're only u/l95, it is whisker;
• if there're only u/l68, it is box-no-whisker.

Touch-based zoom and pan doesn't work on "More samples" page in Edge running on Surface

1. Open http://predictionmachines.github.io/InteractiveDataDisplay/all-samples.html in Edge on Surface
2. Try to zoom or pan some chart using touch.
3. Observed: entire web page is zoomed or panned
4. Expected: selected chart is zoomed or panned

Wiki for "Area" has mistakes

@ElenaPochernina Please see https://github.com/predictionmachines/InteractiveDataDisplay/wiki/Area:

1. Section "Html" is just a copy of the sample for a polyline.
2. Sample in "JavaScript" can use name "area" instead of "band".
3. It would be better if ChartViewer would use "area" instead of "band".

It is impossible to have two axes having different length of ticks on one page

I would like to have a chart with a legend, where legend shows color palette.
The palette itself has an axis with ticks.
I want to make that ticks smaller than ticks of the chart's axes.

Now it is impossible, since tick size is a global settings which cannot be tuned for an individual axis.
These settings are in idd.settings.js, InteractiveDataDisplay.tickLength.

Pull probes in Mozilla Firefox 45.0.2

When I pull the first probe it isn't visible under the cursor (it disappears until I put it on chart). Other probes (second, third etc) works as they should.

Restore chart viewer state when page is reloaded

As an end-user of the ChartViewer,
I want it to retain certain settings which I change during my interaction with the ChartViewer, such as

• visible rectangle,
• probe locations,
• state of the legend panel and the navigation panel,
• axis transformation,
• auto-fit mode,

so that when I reload the page (or leave and then return) I would see the same settings.

Cursor turns into "text selection" when dragging a plot in chromiums

Repro: open http://predictionmachines.github.io/InteractiveDataDisplay/all-samples.html in a chromium-based browser, select some text, try dragging a cart.
Observed: mouse cursor turns into "text selection" cursor

Expected: mouse cursor either does not change at all or change into something appropriate.

Include label when exporting a plot with label to SVG

As a developer using IDD,
I want that if my IDD plot instance has text label element (the element can have any placement of left, top, right, bottom), it is included to the exported SVG for this plot,
so that I get SVG image identical to the original plot.

dynamic example does not work

The page https://predictionmachines.github.io/InteractiveDataDisplay/sample-dynline.html does not show dynamically changing plot.

Bower.json: "main" element doesn't satisfy the specification

The bower documentation: https://github.com/bower/spec/blob/master/json.md#main
In particular, it is said Only one file per filetype.

The "main" of IDD's bower.json includes two *.js files.

DOM plot attribute update issue

DOM plot doesnt update attribute data-idd-origin, when IDD API is used(method add).

Simple markers sample does not work in Chrome

Simple markers looks wrong in Chrome browser.

Chrome Version 45.0.2454.93 m

Hiding legend items do not work in IE 11 and Edge

Removing plots causes the following code to execute:

var removeLegendItem = function (i) {
                    var legend = plotLegends[i];
                    plotLegends.splice(i, 1);
                    removeLegend(legend);
                    legend.plot.host.unbind("childrenChanged", childrenChangedHandler);
                    legend.plot.host.unbind("visibleChanged", visibleChangedHandler);
                    if (legend.onLegendRemove) legend.onLegendRemove();
                    legend[0].innerHTML = "";
                    if (isCompact) legend.removeClass("idd-legend-item-compact");
                    else legend.removeClass("idd-legend-item");
                    _jqdiv[0].removeChild(legend[0]);
                    var childDivs = legend.plot.children;
                    childDivs.forEach(function (childPlot) {
                        for (var j = 0, len = plotLegends.length; j < len; j++)
                            if (plotLegends[j].plot === childPlot) {
                                removeLegendItem(plotLegends[j]);
                            }
                    });
                    legend[0].style = "display: none";
                    if (plotLegends.length == 0) divStyle.display = "none";
                };
                for (var i = 0, len = plotLegends.length; i < len; i++)
                    if (plotLegends[i].plot === params.plot) {
                        removeLegendItem(i);
                        break;

The bold line causes error in IE11 and Edge:

SCRIPT5045: Assignment to read-only properties is not allowed in strict mode
idd.js (2177,21)

Build fails on unix as filenames are case sensitive

See https://travis-ci.org/itislab/InteractiveDataDisplay/builds/122745386

E.g. Band.ts references utils.ts however file actually named Utils.ts

Freezes

After some time of execution this sample some freezes and lags appear

1). Open this page from your local repository
2). Wait several minutes
3). Try to move or zoom a plot

Unclear mechanism of axis removal from plot

All Axes has "remove" method it their API which should be called in order to delete axis. However, it will not remove axis's div from plot. You need to manually call "plot.removeDiv(axisDiv)" to finally remove all axis contents from plot, which is not at least documented.

Geographical Heatmap sample sets incorrect data transform for heatmap and vertical axis

In Geographical heatmap sample (http://predictionmachines.github.io/InteractiveDataDisplay/sample-geoheatmap.html) heatmap plot and vertical axis doesn't have Mercator transform as YDataTransform and thus placed incorrectly on map.

Markers: drawing an empty array doesn't clear previous image

How to reproduce:

1. Create a chart with markers plot
2. Call markers.draw({x:[1,2,3], y:[1,2,3]}). You should see three markers in a chart.
3. Call markers.draw({x:[], y:[]).

Expected: chart without any marker

Observed: three markers; same image as after step 2.

Workaround: To clear markers, call markers.getContext(true). This is safe since has no side effects except clearing the screen.

Test "InteractiveDataDisplay.Plot should remove plots when corresponding dom elements are removed" fails

Run grunt jasmine and open test/SpecRunner.html.

The output is:

InteractiveDataDisplay.Plot should remove plots when corresponding dom elements are removed
Expected 0 to be 1.
Error: Expected 0 to be 1.
    at stack (http://localhost:6822/ext/jasmine/lib/jasmine-core/jasmine.js:1482:17)
    at buildExpectationResult (http://localhost:6822/ext/jasmine/lib/jasmine-core/jasmine.js:1452:14)
    at Spec.Env.expectationResultFactory (http://localhost:6822/ext/jasmine/lib/jasmine-core/jasmine.js:583:18)
    at Spec.addExpectationResult (http://localhost:6822/ext/jasmine/lib/jasmine-core/jasmine.js:324:34)
    at Expectation.addExpectationResult (http://localhost:6822/ext/jasmine/lib/jasmine-core/jasmine.js:533:21)
    at Expectation.toBe (http://localhost:6822/ext/jasmine/lib/jasmine-core/jasmine.js:1406:12)
    at plot.onChildrenChanged (http://localhost:6822/test/plotTests.js:43:40)
    at addChild (http://localhost:6822/dist/idd.js:987:18)
    at http://localhost:6822/dist/idd.js:550:32
    at Array.forEach (native)
Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
    at http://localhost:6822/ext/jasmine/lib/jasmine-core/jasmine.js:1812:23

Background rendering of markers

As a user of IDD I want markers to be rendered in a web worker on a background and navigation using the previously rendered image so that I could use IDD to interactively (with smooth navigation) display 10k of petals (i.e. uncertain size of markers).

In a similar way it is done for the heatmap plot.

ChartViewer.css includes styles for html and body

See https://github.com/predictionmachines/InteractiveDataDisplay/blob/master/src/css/chartViewer.css
It contains styles for html and body elements therefore I cannot include it to my html page without overriding these styles explicitly otherwise it changes appearance of my page.

Cannot add a probe when the axis has log transformation

1. Open samples/viewer/Combine three plots with NPZ data.html
2. Click 'lock' icon at the chart control panel to unlock navigation.
3. Click 'rule' icon to turn on log-transformation for the horizontal axis.
4. Click 'i' icon to show legend and probes panel.
5. Drag new probe from the probes panel to one of the markers. I did it for the fist maximum marker.

Expected: the probe with number 1 is created and shown on the probes panel with details about the marker.

Observed:

• the probe is displayed above the marker but has no number;
• the "Probes" panel at the right shows an empty panel where the probe details should be shown;
• if I use mouse to pan the chart, all plots disappear (see the screenshots). The probe keeps same location on the screen.

After panning:

Improve heatmap resolution

Heatmap SVG has the same resolution as an original IDD heatmap.
As IDD user, I want to see high-resolution SVG heatmap even if the original IDD heatmap is low-resolution. So I propose generating a high-resolution heatmap when exporting SVG.

Bull-eye markers don't support normalize palette.

Open samples/Color uncertain data.html.

The drawing values don't normalize to range [0,1].

Expected:

There is no documentation describing available plots.

I suggest to add a markdown file(s) describing all available plot types and their settings.

Chart legend becomes opaque on mouse hover

As IDD chart user, I want the legend control that is drawn inside the chart and above all plots to become fully (incl. palettes) transparent when the mouse cursor is outside the legend control and fully opaque on mouse hover, so that I could see the data below the legend control and still able to see what the legend shows me.

Improving IDD samples

Two improvements:

1. At http://predictionmachines.github.io/InteractiveDataDisplay:
   Make "More samples..." more visible: larger margins and probable larger.

2. At http://predictionmachines.github.io/InteractiveDataDisplay/all-samples.html:
   Be more descriptive. E.g. "Bull-eyes" says nothing; it should be "Uncertain data series shown as bull-eyes" with some short text description below the title.

3. Use flex-box for layout of samples.

The x-axis label is shifted down in the exported svg

1. Open the Angara.Chart documentation page: http://predictionmachines.github.io/Angara.Chart/
2. Find the Bull-eyes sample
3. Click download as svg button at the chart panel
4. Open the downloaded svg file in Edge

Expected: the "x" label on the horizontal axis is fully visible
Observed: the "x" label is visible partially

Box-and-whisker markers do not properly compute bounding box and fit-to-view is wrong

Open samples/viewer/Error Bars.html.

Expected: entire markers are within the visible region.

Observed: some whiskers go outside the visible region.
This is because the shape doesn't override getBoundingBox method to include length of the markers.

Number of decimal places should be limited in tooltips

How to reproduce:

1. Open idd sample Simple Line Chart
2. Hover mouse over a blue line.
3. Get a tooltip after a few seconds.

Expected: Coordinates of the cursor should be like "0.75, 0.69" for the given axis ranges.
Observed: Coordinates are of maximum double precision. See the screenshot:

DOM-based axis is slow and makes it hard to build SVG

Problem:

1. IDD Axis is really slow, especially in IE/Edge.

   For example, try profile "samples/Navigation%20Panel.html". In Edge on my machine I see that at least 52% of Inclusive CPU (%) is consumed by axis' updatePlotsOutput -> measure.
   It should be investigated if the div positioning takes too much or the iterative tick selection algorithm is too heavy.

2. IDD Axis cannot be transformed to SVG in general due to it can contain any HTML as labels.

   For example, log axis uses HTML to render exponential form of a value.

Solution:

The axis is rendered completely to canvas with additional renderer of a snapshot to SVG which re-uses the canvas-based layout. We could take font settings from CSS style to make labels customizable. Or probably use SVG as the only renderer at all.

An HTML element can be initialized into two plots

There are two sides of the issue:

1. Some plot factories (e.g. markers()) do not add the data-idd-plot attribute when constructing div for a plot. In this case, the plot is not duplicated but in the DOM the plot host element has no attribute. This is not good because:

• When observing DOM elements for debugging, the plot type is not discoverable.
• It is not possible to create an HTML structure using imperative API and then copy-paste the HTML as a snippet for other applications.

         this.markers = function (name, data, titles) { 
             var plot = this.get(name); 
             if (!plot) { 
                 var div = $("<div></div>") 
                            .attr("data-idd-name", name) 
                            .appendTo(this.host); 
                 plot = new InteractiveDataDisplay.Markers(div); 
                 this.addChild(plot); 
             } 
             if (data !== undefined) { 
                 plot.draw(data, titles); 
             } 
             return plot; 
         }; 

2. Other plot factories (e.g. polyline()) add the attribute. In this case it is detected by the IDD infrastructure and it initializes an extra copy of Plot instance; so the single DOM element has two logical plots. And they both appear in the legend.

         this.polyline = function (name, data) { 
             var plot = this.get(name); 
             if (!plot) { 
                 var div = $("<div></div>") 
                            .attr("data-idd-name", name) 
                            .attr("data-idd-plot", "polyline") 
                            .appendTo(this.host); 
                 plot = new InteractiveDataDisplay.Polyline(div, this.master); 
                 this.addChild(plot); 
             } 
             if (data !== undefined) { 
                 plot.draw(data); 
             } 
             return plot; 
         }; 

How to reproduce
Open samples\Add and Remove plots using API.html and click the button Add Chart, then Draw polyline.

The single call
chart.polyline("polyline", { y: [0.1, 0.2, 0.0, 0.3, 0.2, 0.1, 0.3] });
causes two plots for a single DOM element.

Bull-eyes and petals are gray when loaded in Inkscape

1. Open the Angara.Chart documentation page: http://predictionmachines.github.io/Angara.Chart/
2. Find the Bull-eyes sample
3. Click download as svg button at the chart panel
4. Open the downloaded svg file in the Inkscape

Expected: the plot has colors, as when open in Edge
Observed: the plot is black

ChildrenChanged event duplication

Plot has two events of children change notification InteractiveDataDisplay.Event.childrenChanged and plot.onChildrenChanged implemented in different notification techniques.

e.g. See line 572 of idd.base.js

            this.fireChildrenChanged({ type: "add", plot: childPlot });
            this.onChildrenChanged({ type: "add", plot: childPlot });

Probe for a line could show the nearest point index and coordinates

I propose to show nearest exact point among input data series for the probe location in probe text and visually on a chart:

How to destroy the IDD navigation panel?

@ElenaPochernina, I see that in the NavigationPanel there is no "remove" method (or "destroy", "dispose") which would unsubscribe it from events and clear the DOM object.

In the sample you just create an object and don't even keep the reference to it. Still I might want to remove the panel if show it dynamically on my page.

        $(document).ready(function () {  
            var chart = InteractiveDataDisplay.asPlot($("#chart"));  
            var navigation = $('#navigationPanel');  
            InteractiveDataDisplay.NavigationPanel(chart, navigation);  

The suggestion is to add the NavigationPanel.remove() method which unsubscribe it from events and clears the DOM object.

When using 'data-idd-legend' for a figure, the legend is below the plots

@ElenaPochernina
Try this in IDD 1.2.0:

<body>
    <div id="chart" data-idd-plot="figure" data-idd-legend="legend" style="width: 800px; height: 600px;">
        <div id="grid" data-idd-plot='grid' data-idd-placement='center' data-idd-style='stroke: DarkGray; thickness: 1px'></div>
        <div id="axis1" data-idd-axis="numeric" data-idd-placement="bottom"></div>
        <div id="axis2" data-idd-axis="numeric" data-idd-placement="left"></div>

        <div data-idd-name="bars" data-idd-plot="markers"></div>
        <div id="legend" data-idd-placement='center' style="float: right"></div>
    </div>
</body>
</html>

with code

        $(document).ready(function () {
            var bars = InteractiveDataDisplay.asPlot("chart").get("bars");
            var figure = InteractiveDataDisplay.asPlot("chart")


            var bottomAxis = figure.getAxes("bottom")[0];
            var leftAxis = figure.getAxes("left")[0];

            // If you need grid lines on the background:
            var grid = figure.get("grid");
            grid.xAxis = bottomAxis;
            grid.yAxis = leftAxis;


            // Enables navigation by setting navigation gesture source:
            var gestureSource = InteractiveDataDisplay.Gestures.getGesturesStream(figure.centralPart);
            // If you need navigation over axes:
            var bottomAxisGestures = InteractiveDataDisplay.Gestures.applyHorizontalBehavior(InteractiveDataDisplay.Gestures.getGesturesStream(bottomAxis.host));
            var leftAxisGestures = InteractiveDataDisplay.Gestures.applyVerticalBehavior(InteractiveDataDisplay.Gestures.getGesturesStream(leftAxis.host));

            figure.navigation.gestureSource = gestureSource.merge(bottomAxisGestures.merge(leftAxisGestures));

            var x = new Array(N);
            var y = new Array(N);
            var color = new Array(N);

            var colorPalette = InteractiveDataDisplay.ColorPalette.parse("#69D2E7,#A7DBD8,#E0E4CC,#F38630,#FA6900");

            for (var i = 0; i < N; i++) {
                y[i] = Math.random() * N - N / 2;
                color[i] = y[i];
            }
            bars.draw({ y: y, color: color, colorPalette: colorPalette, , shadow: 'grey' }, 
                { color: "rate" });
        });

And I get

Too many digits in the markers tooltip and probe content for x and y data series

How to reproduce:

1. Open samples/viewer/Combine three plots with NPZ data.html
2. Drag a probe to a marker
3. See the x and y value for the probe.

Observed:
https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/gh-pages/images/ChartViewerUI.png

Expected:
It is seen from the image that the range of y is about 0..15 and it seems that 10-8 is too much.

Fit to view using double tap

Touch devices don't support fit to view using double tap.

Touch-friendly drag and drop implementation

Drag and drop doesn't work with touch events. See sample with ChartViewer.

Nested chart is transparent

How to reproduce:

Open samples/Nested Charts.html

Observed:
The nested chart is transparent

Expected:
The nestsed chart should have white background ("white" is taken from the appropriate CSS class).

No syntax for sizePalette property for markers definition

https://github.com/predictionmachines/InteractiveDataDisplay/wiki/Markers

Please add expected structure for the sizePalette

ChartViewer control cannot be printed

In different browser it looks in different way, but still incorrectly: layout is shifted, some parts disappear.

How to reproduce

1. Open samples/viewer/Error Bars.html in Chrome

1. Run command Print... (Ctrl + P) and see the page preview.

Expected: The preview should look similar to the browser window.

Observed: The preview image has following issues:

• Only part of IDD chart is shown (no left axis, it is obviously zoomed in)
• No control panel at the right

DOM element in a plot doesn't get mouse events

Open samples/DOM elements in a plot.html.

Observed:
When I hover the mouse pointer over the label "Start of the curve" it doesn't become bold.

Expected:
It must become bold because there is an appropriate CSS style in the HTML file:

    <style>
        .idd-dom-marker:hover
        {
            font-weight:bold;
        }
    </style>

It seems that the same problem is with NestedChartAsDomPlot.html: the nested chart doesn't reacts on navigation gestures but propagates them through to the outer plot.

InteractiveDataDisplay.ColorPaletteViewer: its constructor takes a palette as an argument but doesn't use the given value

Problem

When creating InteractiveDataDisplay.ColorPaletteViewer for an absolute palette with custom range, it is still shown with range from 0 to 1.

var paletteViewer = new InteractiveDataDisplay.ColorPaletteViewer(
    divElement,
    InteractiveDataDisplay.ColorPalette.parse("reg,green,blue").absolute(-10, 10),
    {
        axisVisible: true,
        width: 180,
        height: 10
    });

Workaround

Pass null to the constructor function and then assign the palette to the created instance:

var paletteViewer = new InteractiveDataDisplay.ColorPaletteViewer(
    divElement,
    null,
    {
        axisVisible: true,
        width: 180,
        height: 10
    });
paletteViewer.palette = InteractiveDataDisplay.ColorPalette.parse("reg,green,blue").absolute(-10, 10);

Reason of problem

The widget InteractiveDataDisplay.ColorPaletteViewer is constructed from a palette, but assigns the given parameter to an inner field after a while; still it is used before assignment:

InteractiveDataDisplay.ColorPaletteViewer = function (div, palette, options) {
...
     function addAxis() {
...        
        if (_palette && !_palette.isNormalized) // Take axis values from fixed palette
            _axis.update({ min: _palette.range.min, max: _palette.range.max });
...
    }
...
    if (_axisVisible)
        addAxis();
...
    var _palette = palette;
...

SVGjs bower dependency is broken

Travis build fails with "No tag found that was able to satisfy ~2.3.5"
This is about SVGjs

ChartViewer: there is no need in additional PlotRegistry type

The ChartViewer's PlotRegistry duplicates the registry of IDD and can be eliminated.