├── .drone.yml ├── .gitignore ├── .npmignore ├── .travis.yml ├── .vscode ├── launch.json └── tasks.json ├── CONTRIBUTING.md ├── ChartViewer.md ├── Gruntfile.js ├── IDD Architecture.docx ├── IDD Overview.docx ├── IDDSamples.html ├── LICENSE ├── README.md ├── RELEASE_NOTES.md ├── docs ├── ChartViewerUI.png └── ChartViewerUI.vsdx ├── jsconfig.json ├── package.json ├── samples ├── Add and Remove plots using API.html ├── Animated markers update.html ├── AutoFitSample.html ├── Axes and navigation.html ├── Bar chart - custom marker shape.html ├── Bar chart - individual colors.html ├── Bar chart.html ├── BingMapsHeatmapSample.html ├── Bound plots.html ├── BoundaryLine.html ├── Boxplot sample.html ├── ChangeBottomAxisLabelsAngle.html ├── ChangeChartAxis.html ├── ChangeFontSize.html ├── ChangePlotOrders.html ├── Color Palette Editor.html ├── Color palettes.html ├── Custom map layers.html ├── Custom plot.html ├── DOM elements in a plot.html ├── DashedPolyline.html ├── Data series titles.html ├── DeclarativeBarChart.html ├── DepthGraphSample.html ├── Draw a polyline in HTML.html ├── Dynamic Gradient Heatmap with Knockout.html ├── Dynamic Gradient Heatmap.html ├── Dynamic Markers.html ├── Dynamic Matrix Heatmap.html ├── Dynamic polyline.html ├── DynamicArea.html ├── Error bars.html ├── FigureToSVG.html ├── FitToView ignores plot.html ├── Heatmap.html ├── HeatmapBase64.html ├── KO.Area.html ├── KO.AutoFitMode.html ├── KO.Bars.html ├── KO.BoundaryLineForeachBinding.html ├── KO.BoundaryLineStyledForeach.html ├── KO.DashedPolyline.html ├── KO.DynamicPolyline.html ├── KO.Heatmap.html ├── KO.IgnoreFitToViewByAxis.html ├── KO.Labels.html ├── KO.LogTransform.html ├── KO.Markers.html ├── KO.Order.html ├── KO.Plots.html ├── KO.Polyline.html ├── KO.UncertaintyMarkers.html ├── KO.VisibleRegion.html ├── KO.VisibleRegionDynamic.html ├── LabelledAxisDeclarative.html ├── LabelledAxisSVGSample.html ├── LabelledAxisSample.html ├── LabelsTicksAxisSample.html ├── LegendSample.html ├── Logarithmic Palette Heatmap.html ├── Logarithmic transform.html ├── Markers on a map.html ├── Markers with color uncertain data.html ├── Markers with custom series.html ├── Markers with size uncertain data.html ├── Markers.html ├── Navigation Panel.html ├── Nested charts.html ├── NestedChartAsDOMPlot.html ├── NumericAxis.html ├── Plot grid.html ├── PolylineInFigure.html ├── ResponsiveLayout.html ├── ResponsiveTabs.html ├── StandaloneBingMaps.html ├── Subplots.ExtLegend.html ├── Subplots.html ├── SubplotsCommonVisibility.html ├── SubplotsMargin.html ├── SubplotsVisualRectBinding.html ├── Tick labels with newlines.html ├── TiltedLabelAxisTest.html ├── Titles.html ├── Uncertain polyline.html ├── Vector Subplots.html ├── Vector export.html ├── VisibleRegions.html └── viewer │ ├── Band live.html │ ├── Band.html │ ├── Combine three plots with NPZ data.html │ ├── Error Bars.html │ ├── Markers with color uncertain data.html │ └── Markers with size uncertain data.html ├── sln └── idd.sln ├── src ├── css │ ├── IDDTheme.css │ ├── chartViewer.css │ └── idd.css ├── icons │ ├── excl.png │ ├── ic_center_focus_strong.png │ ├── ic_center_focus_strong_black.png │ ├── ic_center_focus_weak.png │ ├── ic_center_focus_weak_black.png │ ├── ic_delete_gray.png │ ├── ic_file_download.png │ ├── ic_file_download_black.png │ ├── ic_help.png │ ├── ic_help_black.png │ ├── ic_info.png │ ├── ic_info_black.png │ ├── ic_info_outline.png │ ├── ic_info_outline_black.png │ ├── ic_lock.png │ ├── ic_lock_black.png │ ├── ic_lock_open.png │ ├── ic_lock_open_black.png │ ├── ic_my_location_gray.png │ ├── ic_pan.png │ ├── ic_pan_black.png │ ├── ic_place_black.png │ ├── ic_place_standart.png │ ├── ic_straighten.png │ ├── ic_straighten_black.png │ ├── ic_visibility-grey.png │ ├── ic_visibility_off-grey.png │ ├── ic_visibility_off-red.png │ ├── ic_zoom_in.png │ ├── ic_zoom_in_black.png │ ├── ic_zoom_out.png │ ├── ic_zoom_out_black.png │ ├── toLeft.png │ └── toRight.png ├── idd │ ├── heatmap_worker_footer.txt │ ├── heatmap_worker_header.txt │ ├── idd.animation.js │ ├── idd.area.js │ ├── idd.axis.js │ ├── idd.base.js │ ├── idd.bingMapsAnimation.js │ ├── idd.bingmapsplot.js │ ├── idd.boundplots.js │ ├── idd.chart.js │ ├── idd.figure.js │ ├── idd.formatter.js │ ├── idd.gestures.js │ ├── idd.heatmap.js │ ├── idd.heatmapworker.js │ ├── idd.ko.area.js │ ├── idd.ko.boundaryLine.js │ ├── idd.ko.domplot.js │ ├── idd.ko.heatmap.js │ ├── idd.ko.js │ ├── idd.ko.labels.js │ ├── idd.ko.markers.js │ ├── idd.ko.polyline.js │ ├── idd.labels.js │ ├── idd.markers.js │ ├── idd.markers.primitives.js │ ├── idd.markers.uncertain.js │ ├── idd.multithreading.js │ ├── idd.navigation.js │ ├── idd.onscreennavigation.js │ ├── idd.palette.js │ ├── idd.paletteEditor.js │ ├── idd.readers.js │ ├── idd.settings.js │ ├── idd.subplots.js │ ├── idd.transforms.js │ ├── idd.utils.js │ ├── wrapper_footer.txt │ ├── wrapper_footer_knockout.txt │ ├── wrapper_header.txt │ ├── wrapper_header_knockout.txt │ └── wrapper_header_webpack.txt └── viewer │ ├── Band.ts │ ├── ChartViewer.ts │ ├── ChartViewerControl.ts │ ├── Fallback.ts │ ├── Heatmap.ts │ ├── Line.ts │ ├── Markers.ts │ ├── Plot.ts │ ├── PlotList.ts │ ├── PlotRegistry.ts │ ├── PlotViewer.ts │ ├── Utils.ts │ ├── ViewState.ts │ ├── chartViewer.d.ts │ └── onScreenNavigation.ts ├── test ├── AdaptiveFormatterTest.js ├── SpecRunner.html ├── bingMapsAnimationTests.js ├── coordinateTransformTests.js ├── domPlotTests.js ├── exportSvgTest.js ├── jasmine.tmpl ├── manual │ ├── Boxwhisker plot.html │ ├── Dispose test page.html │ ├── Global using chartViewer testpage.html │ ├── Input data to idd and chartViewer (heatmap).html │ ├── Input data to idd and chartViewer (line).html │ ├── Input data to idd and chartViewer (markers).html │ ├── Legend testpage.html │ ├── Require using chartViewer testpage.html │ ├── Svg export testpage.html │ ├── Update test page.html │ ├── Wrong plot kind test page.html │ ├── config.js │ ├── main.ts │ ├── mainGlobal.ts │ └── png │ │ ├── dispose_state0.PNG │ │ ├── legend_action1.PNG │ │ ├── legend_action2.PNG │ │ ├── legend_action3.PNG │ │ ├── legend_action4.PNG │ │ ├── legend_state0.PNG │ │ ├── update_state0.PNG │ │ └── update_state1.PNG ├── navigationTests.js ├── paletteTests.js ├── plotTests.js └── utilsTests.js └── yarn.lock /.drone.yml: -------------------------------------------------------------------------------- 1 | --- 2 | kind: pipeline 3 | type: kubernetes 4 | name: default 5 | 6 | steps: 7 | - name: build 8 | image: dgrechka/node-with-chromium-build-agent:2021090805 9 | commands: 10 | - yarn install --pure-lockfile 11 | - yarn run build 12 | --- 13 | kind: signature 14 | hmac: 84c8785d9dd8a1a4b55aedd73c8d171bc7247292c30a7b89b22ea585f5695c98 15 | 16 | ... 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /ext/** 2 | /dist/** 3 | /node_modules/** 4 | /sln/*.suo 5 | /sln/.vs/** 6 | /generated/** 7 | /idd.heatmapworker.js 8 | /.grunt/** 9 | /.tscache/** 10 | # /typings/** 11 | # JS Map files 12 | /src/viewer/*.js.map 13 | # JS files 14 | /src/viewer/*.js 15 | /test/manual/main.js 16 | /test/manual/mainGlobal.js 17 | !src/viewer/MathUtils.js 18 | !src/viewer/Chart.header.js 19 | !src/viewer/Chart.footer.js 20 | .baseDir.* 21 | debug.log 22 | _SpecRunner.html -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /samples/** 2 | /sln/** 3 | /src/** 4 | .travis.yml 5 | .npmignore 6 | .gitignore 7 | _SpecRunner.html 8 | .bowerrc 9 | jsconfig.json 10 | Gruntfile.js 11 | IDDSamples.html 12 | package.json 13 | /generated/** 14 | /.vscode/** 15 | /test/** 16 | !/dist/** 17 | /.tscache/** 18 | /.grunt/** 19 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - lts/* 4 | before_script: 5 | - yarn install --pure-lockfile 6 | deploy: 7 | provider: npm 8 | email: dmitry@itis.cs.msu.ru 9 | skip_cleanup: true 10 | api_key: 11 | secure: "hBIZXndUMdLkXYMJuZ+5B4GuCx42G8mywUoe6iS8tuVSm6TvrWi/AMbNxw003qtyPP6/6bXd+8p+EqkK68B6x2J9n/YkVIgyhA5wxoR033JW0LIu4NR2Nu8u0JQUiFm+BjBjUBF0Jr0uBoNxoxLlOlsLjxHIQvkiuB3pzkZ5Q3MWX6eTTMLLDOAg8qDD4beunyEPrZ29u3FWO4qGDqWFCkak5eJ+UU0Vuapk0Bw/13UxQyvqmEjVTvirSNOkXwkLnQi4j3t1hB52mMFJRoC9Ule2fhLBI9AEJb6nJGclzbVwpeeTEGtLGBbMxqHQBRfqZdkt8YoUbmPNmHo3PuiT+K7MEGxZZLbtH9xEPthC/tfrWNrNLlqeQ+Osg96x8kEs7TDDCBDNAMrBAsB13zrdLPsVZrbrsRVxthDlTSbA4u4LjcxBGN1EcTGkQSnVRTL8g1Itl/O10b3wve6bDAWeeqt47pCAZeUerpKM9eO+SQ9p32YEU95iaCIJoKJuCKNobdPFuC5dfNUzQG5DqwRNHECG70qqYCcgySWFLQlLXqk3Xf6QIK9XEWrZgOp+XWjJqClrmMcVwntwPczhQYQeO/IckWzDtoWDLB+NYL/hIdQhT8THxdEoRBDhukGtfJliur+E2LPSt2TLtBYcopv5Th4fH2xDAfA8/mBrXFgfnKY=" 12 | on: 13 | tags: true 14 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "Launch", 6 | "type": "node", 7 | "request": "launch", 8 | "program": "${workspaceRoot}/Gruntfile.js", 9 | "stopOnEntry": false, 10 | "args": [], 11 | "cwd": "${workspaceRoot}", 12 | "preLaunchTask": null, 13 | "runtimeExecutable": null, 14 | "runtimeArgs": [ 15 | "--nolazy" 16 | ], 17 | "env": { 18 | "NODE_ENV": "development" 19 | }, 20 | "externalConsole": false, 21 | "sourceMaps": false, 22 | "outDir": null 23 | }, 24 | { 25 | "name": "Attach", 26 | "type": "node", 27 | "request": "attach", 28 | "port": 5858, 29 | "address": "localhost", 30 | "restart": false, 31 | "sourceMaps": false, 32 | "outDir": null, 33 | "localRoot": "${workspaceRoot}", 34 | "remoteRoot": null 35 | } 36 | ] 37 | } -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.1.0", 3 | "command": "grunt", 4 | "isShellCommand": true, 5 | "tasks": [ 6 | { 7 | "taskName": "test", 8 | "args": [], 9 | "isTestCommand": true 10 | }, 11 | { 12 | "taskName": "default", 13 | "args": [], 14 | "isBuildCommand": true 15 | } 16 | ] 17 | } -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/CONTRIBUTING.md -------------------------------------------------------------------------------- /IDD Architecture.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/IDD Architecture.docx -------------------------------------------------------------------------------- /IDD Overview.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/IDD Overview.docx -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) Microsoft Corporation 2 | All rights reserved. 3 | 4 | Licensed under the Apache License, Version 2.0 (the ""License""); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 5 | 6 | THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABLITY OR NON-INFRINGEMENT. 7 | 8 | See the Apache Version 2.0 License for specific language governing permissions and limitations under the License. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Interactive Data Display 2 | ------------------------ 3 | 4 | [![Build Status](https://drone.k8s.grechka.family/api/badges/predictionmachines/InteractiveDataDisplay/status.svg)](https://drone.k8s.grechka.family/predictionmachines/InteractiveDataDisplay) 5 | [![npm](https://img.shields.io/npm/v/interactive-data-display.svg)](https://www.npmjs.com/package/interactive-data-display) 6 | [![CDNJS](https://img.shields.io/cdnjs/v/interactive-data-display.svg)](https://cdnjs.com/libraries/interactive-data-display) 7 | [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/interactive-data-display/badge)](https://www.jsdelivr.com/package/npm/interactive-data-display) 8 | 9 | Interactive Data Display for JavaScript (IDD for short) is a set of controls for adding interactive visualization of dynamic data to your application. 10 | It allows to create line graphs, bubble charts, heat maps and other complex 2D plots which are very common in scientific software. 11 | Dynamic Data Display integrates well with Bing Maps control to show data on a geographic map in latitude/longitude coordinates. 12 | The controls can also be operated programmatically. 13 | 14 | IDD is being developed in close collaboration between [Information Technologies in Sciences laboratory](http://itis.cs.msu.ru) of Moscow State University and Microsoft Research Cambridge. 15 | 16 | Documentation is available [here](https://github.com/predictionmachines/InteractiveDataDisplay/wiki). 17 | 18 | ## Samples 19 | 20 | You can find several [live samples here](http://predictionmachines.github.io/InteractiveDataDisplay/samples/IDDSamples.html). Note that they can use not the latest release of the IDD. 21 | 22 | For the full set of samples which work with the latest release consider Building IDD (section below) and open samples from "Samples" directory after the build succeeds. 23 | 24 | Building IDD 25 | ------------ 26 | 27 | In order to build IDD, you need Node.js/npm and git. 28 | 29 | Clone a copy of the IDD git repo, enter IDD directory and install development tools packages: 30 | 31 | `cd idd` 32 | 33 | `npm install -g yarn` 34 | 35 | `yarn install` 36 | 37 | Now you can build and test IDD by running the grunt command without arguments: 38 | 39 | `grunt` 40 | 41 | File IDDSamples.html in the root of idd repository contains many samples. Note that some browsers don't run web workers from local file system 42 | for security reasons so some samples may not work if opening IDDSamples.html as local file. 43 | 44 | Referencing IDD 45 | --------------- 46 | 47 | Interactive Data Display is available as [NPM package](https://www.npmjs.com/package/interactive-data-display). 48 | 49 | Use yarn: 50 | `yarn add interactive-data-display` 51 | 52 | or npm: 53 | `npm i interactive-data-display` 54 | 55 | Licensing 56 | --------- 57 | 58 | Please see the file called LICENSE. 59 | -------------------------------------------------------------------------------- /docs/ChartViewerUI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/docs/ChartViewerUI.png -------------------------------------------------------------------------------- /docs/ChartViewerUI.vsdx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/docs/ChartViewerUI.vsdx -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // See https://go.microsoft.com/fwlink/?LinkId=759670 3 | // for the documentation about the jsconfig.json format 4 | "compilerOptions": { 5 | "target": "es6", 6 | "module": "commonjs", 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "exclude": [ 10 | "node_modules", 11 | "bower_components", 12 | "jspm_packages", 13 | "tmp", 14 | "temp" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "interactive-data-display", 3 | "version": "1.5.39", 4 | "license": "Apache-2.0", 5 | "homepage": "https://github.com/predictionmachines/InteractiveDataDisplay/wiki", 6 | "description": "A JavaScript visualization library for dynamic data", 7 | "keywords": [ 8 | "visualization", 9 | "animation", 10 | "canvas", 11 | "chart", 12 | "plot" 13 | ], 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/predictionmachines/InteractiveDataDisplay.git" 17 | }, 18 | "types": "dist/idd.webpack.d.ts", 19 | "main": "dist/idd.webpack.js", 20 | "dependencies": { 21 | "file-saver": "~1.3.3", 22 | "jasmine": "~2.99.0", 23 | "jquery": "~3.4.0", 24 | "jquery-mousewheel": "~3.1.13", 25 | "jquery-ui": "~1.12.1", 26 | "npm-modernizr": "^2.8.3", 27 | "require-css": "~0.1.8", 28 | "requirejs": "~2.1.22", 29 | "rx": "~4.1.0", 30 | "svg.js": "~2.7" 31 | }, 32 | "devDependencies": { 33 | "grunt": "^1.0.3", 34 | "grunt-base64": "^0.1.0", 35 | "grunt-cli": "^1.3.2", 36 | "grunt-contrib-concat": "^1.0.1", 37 | "grunt-contrib-copy": "^1.0.0", 38 | "grunt-contrib-jasmine": "^2.1.0", 39 | "grunt-contrib-uglify": "^4.0.1", 40 | "grunt-ts": "^6.0.0-beta", 41 | "request": "^2.81.0", 42 | "typescript": "^3.7.0", 43 | "@types/jquery": "^3.3.32", 44 | "@types/jqueryui": "^1.12.10" 45 | }, 46 | "scripts": { 47 | "build": "node --unhandled-rejections=strict node_modules/grunt-cli/bin/grunt default --verbose" 48 | }, 49 | "engines": { 50 | "yarn": "^1.15.2" 51 | }, 52 | "author": "Microsoft Research, MSU ITIS Lab" 53 | } 54 | -------------------------------------------------------------------------------- /samples/Add and Remove plots using API.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Add and Remove plots using API 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 47 | 48 | 49 |
50 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /samples/AutoFitSample.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | InteractiveDataDisplay AutoFit Sample 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 66 | 67 | 68 |
69 | 70 |
71 |
72 | 73 | AutoFit Mode
74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /samples/Bar chart - individual colors.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Bar chart 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 46 | 47 | 48 |
49 |
50 |
51 |
52 | 53 | 54 | -------------------------------------------------------------------------------- /samples/Bar chart.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Bar chart 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 43 | 44 | 45 |
46 |
47 |
48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /samples/BoundaryLine.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Boundary line with Knockout 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 45 | 46 | 47 |
48 |
49 |

This sample demonstrates various options to work with boundary line settings.

50 |

Boundary line name can be set either via data-idd-name attribute or div's id.

51 |

Boundary line can be styled with stroke and thickness.

52 |

X or Y coordinate for a boundary line can be set by iddX/iddY knockout binding or by a plain text in html.

53 |

Boundary line itself set be added in html (with data-idd-plot='boundaryLine' attribute) or in javascript (chart.boundaryLine(name, settings))

54 |
55 |
56 |
63 |
64 |
65 |
66 | x 67 | 4 68 |
69 |
70 | y 71 | 1 72 |
73 |
74 |
75 |
76 | Every time you click here you get an SVG snapshot of the chart below. 77 |
78 | 79 | -------------------------------------------------------------------------------- /samples/ChangeBottomAxisLabelsAngle.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Heatmap with Knockout 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 52 | 53 | 54 |
55 |
56 |
57 |
58 |
59 | 60 | 61 |
62 |
63 | 64 | -------------------------------------------------------------------------------- /samples/ChangeChartAxis.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Changes chart axis 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 46 | 47 | 48 |
49 |
Boxplot
50 |
51 | x y 52 | 0 0 53 | 0.1 0.099833417 54 | 1.1 0.89120736 55 | 2.1 0.863209367 56 | 3.1 0.041580662 57 | 4.1 -0.818277111 58 | 5.1 -0.925814682 59 | 6.1 -0.182162504 60 | 7.1 0.72896904 61 | 8.1 0.969889811 62 | 9.1 0.319098362 63 | 10.1 -0.625070649 64 | 11.1 -0.994552588 65 | 12.1 -0.449647465 66 | 13.1 0.508661464 67 | 14.1 0.999309389 68 | 15.1 0.57119687 69 | 16.1 -0.382071417 70 | 17.1 -0.984065005 71 | 18.1 -0.681313766 72 | 19.1 0.247834208 73 | 20.1 0.949124554 74 | 21.1 0.777794162 75 | 22.1 -0.108636595 76 | 23.1 -0.895187368 77 | 24.1 -0.858707003 78 | 25.1 -0.032735379 79 | 26.1 0.823333001 80 | 27.1 0.922432817 81 |
82 |
83 |
84 |
85 | 86 | 87 |
88 |
89 | 90 | -------------------------------------------------------------------------------- /samples/Color Palette Editor.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Color palettes 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 32 | 33 | 34 |
35 |
white,blue,red
36 | 37 | 38 | -------------------------------------------------------------------------------- /samples/Color palettes.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Color palettes 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 50 | 51 | 52 |
53 | 54 |

Try these palettes:

55 | 62 |
63 |
64 |
palette.relative()
65 |
66 |
palette.absolute(0, 100)
67 |
68 |
palette.banded(5)
69 |
70 | 71 | 72 | -------------------------------------------------------------------------------- /samples/Custom plot.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Custom plot 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 55 | 56 | 57 |
58 |
59 |
60 | 61 | 62 | -------------------------------------------------------------------------------- /samples/DashedPolyline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dashed polyline sample page 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 42 | 43 | 44 |
45 |
46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /samples/Data series titles.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Edit titles of a plot and its data series 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 57 | 58 | 59 |
60 |
61 |
62 | Name of the plot: 63 |
64 |
65 | Title for color data series: 66 |
67 |
68 | Title for size data series: 69 |
70 | 71 | 72 | -------------------------------------------------------------------------------- /samples/DeclarativeBarChart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Declarative bar chart 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 | 27 |
28 |
30 | 31 |
33 | 34 |
35 | x y 36 | 1.7 2 37 | 2.4 4 38 | 3.1 6 39 | 3.8 10 40 | 4.5 6 41 | 5.2 4 42 | 5.9 2 43 | 6.6 1 44 |
45 | 46 |
47 |
48 |
49 |
50 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /samples/Dynamic Gradient Heatmap with Knockout.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Dynamic Gradient Heatmap 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 71 | 72 | 73 |
74 |
Dynamic Heatmap
75 |
76 |
77 |
78 | 79 | 80 | -------------------------------------------------------------------------------- /samples/Dynamic Gradient Heatmap.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Dynamic Gradient Heatmap 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 58 | 59 | 60 |
61 |
Dynamic Heatmap
62 |
63 |
64 |
65 | 66 | 67 | -------------------------------------------------------------------------------- /samples/Dynamic Markers.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Dynamic Markers 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 41 | 42 | 43 |
44 |
Markers Sample
45 |
46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /samples/Dynamic Matrix Heatmap.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Dynamic Matrix Heatmap 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 58 | 59 | 60 |
61 |
Dynamic Heatmap
62 |
63 |
64 |
65 | 66 | 67 | -------------------------------------------------------------------------------- /samples/Dynamic polyline.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 05 Update polyline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 49 | 50 | 51 |
52 |
X
53 |
54 |
55 | Y 56 |
57 |
58 | 59 |
60 | 61 | 62 | -------------------------------------------------------------------------------- /samples/DynamicArea.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 05 Update polyline 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 51 | 52 | 53 |
54 |
X
55 |
56 |
57 | Y 58 |
59 |
60 | 61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /samples/FitToView ignores plot.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Axes and navigation 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 56 | 57 | 58 |
59 |
60 |
61 |
62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /samples/KO.Area.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Area with Knockout 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 66 | 67 | 68 |
69 |
70 |
78 |
79 |
80 |
81 |

Inner colour: 82 | 83 |

84 |

Poisson lambda: 85 | 86 |

87 |
88 |
89 | 90 | -------------------------------------------------------------------------------- /samples/KO.Bars.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bar chart with Knockout 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 38 | 39 | 40 |

X log axis

41 |
42 |
43 |
54 |
55 |
56 |
57 |

Height 1:

58 |

Height 2:

59 |

Height 3:

60 |

61 |
62 |
63 | 64 | -------------------------------------------------------------------------------- /samples/KO.BoundaryLineForeachBinding.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Boundary line with Knockout (Foreach KO binding) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 45 | 46 | 47 |
48 |
49 |
56 |
57 | 58 | 59 |
60 | 61 | 62 |
63 | 64 |
65 |
66 | Every time you click here you get an SVG snapshot of the chart below. 67 |
68 |
69 | 70 | -------------------------------------------------------------------------------- /samples/KO.BoundaryLineStyledForeach.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Boundary line with Knockout (Foreach KO binding) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 51 | 52 | 53 |
54 |
55 |
62 |
63 | 64 | 65 | 66 |
71 | 72 | 73 |
78 | 79 |
80 |
81 | Every time you click here you get an SVG snapshot of the chart below. 82 |
83 |
84 | 85 | -------------------------------------------------------------------------------- /samples/KO.DynamicPolyline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dynamic polyline with KO binding 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 51 | 52 | 53 |
54 |
55 |

Zero padding

56 |
60 |
67 |
68 |
69 |
70 |
71 |

Auto padding

72 |
75 |
82 |
83 |
84 |
85 |
86 | 87 | -------------------------------------------------------------------------------- /samples/KO.Heatmap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Heatmap with Knockout 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 70 | 71 | 72 |
73 |
74 |
83 |
84 |
85 |
86 |

From colour: 87 | 88 |

89 |

To colour: 90 | 91 |

92 |

Opacity (%): 93 | 94 |

95 |

Logarithmic colors 96 |

97 |
98 |
99 | 100 | -------------------------------------------------------------------------------- /samples/KO.Labels.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Label plot with Knockout 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 57 | 58 | 59 |
60 |
61 |
67 |
68 |
69 |
70 | 71 | -------------------------------------------------------------------------------- /samples/KO.Markers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Markers with Knockout 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 46 | 47 | 48 |
49 |
50 |
59 |
60 |
61 |
62 |

Inner colour: 63 | 64 |

65 |

Border colour: 66 | 67 |

68 |

Size: 69 | 70 |

71 |

Shape: 72 | 73 |

74 |
75 |
76 | 77 | -------------------------------------------------------------------------------- /samples/KO.Order.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Plots order change using KO bindings 6 | 7 | 8 | 9 | 10 | 11 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 56 | 57 | 58 |
59 |
63 | x y 64 | 0 0 65 | 0.5 1 66 |
67 |
71 | x y 72 | 0 1 73 | 0.5 0 74 |
75 |
79 | x y 80 | 0 0.8 81 | 0.5 0.8 82 |
83 |
84 |
85 | 1 86 | 2 87 | 3 88 |
89 | 90 | -------------------------------------------------------------------------------- /samples/KO.Plots.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Add/remove plots with Knockout 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 55 | 56 | 57 |
58 |
59 | 60 |
64 | 65 | 66 |
77 | 78 | 79 |
83 | 84 |
85 |
86 |

Line:

87 |

Band:

88 |

Markers: 89 |

90 |
91 |
92 | 93 | -------------------------------------------------------------------------------- /samples/KO.Polyline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Polyline with Knockout 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 46 | 47 | 48 |
49 |
50 |
59 |
60 |
61 |
62 |
63 |
64 |

Colour: 65 | 66 |

67 |

Thickness: 68 | 69 |

70 |

Line join: 71 | 72 |

73 |

Line cap: 74 | 75 |

76 |
77 |
78 | 79 | -------------------------------------------------------------------------------- /samples/LabelledAxisSample.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Labelled Axis Sample Page 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 47 | 48 | 49 |
50 |
51 |
52 |
53 |
54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /samples/LabelsTicksAxisSample.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Labelled axis sample: labels, ticks 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 42 | 43 | 44 |
45 |
46 |
47 |
48 |
49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /samples/Logarithmic Palette Heatmap.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Dynamic Gradient Heatmap 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 65 | 66 | 67 |
68 |
Logarithmic color palette
69 |
70 |
71 |
72 |
73 |
Normal color palette
74 |
75 |
76 |
77 | 78 |
79 | 80 | 81 | -------------------------------------------------------------------------------- /samples/Markers on a map.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Markers on a map 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 27 | 28 | 29 |
30 |
Bing Maps Chart
31 |
32 |
33 |
34 | x y 35 | -1.3174 51.7828 36 | 16.1450064726981 69.2923853345889 37 | 36.8418531340113 -1.26065068958957 38 | -0.12456397132825092 51.50064068372273 39 | 37.61806507988748 55.751810400951186 40 | 2.2946168987417703 48.85851040838576 41 | -73.98587708777025 40.74829606871251 42 | 25.852425882170028 -17.923747000541198 43 |
44 |
45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /samples/Markers with custom series.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 02 Markers with custom color and size series 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 40 | 41 | 42 |
43 |
44 |
45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /samples/NestedChartAsDOMPlot.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Nested chart as DOM Plot 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 25 | 26 | 27 |
28 |
X
29 |
30 |
31 | Y 32 |
33 |
34 | 35 |
36 | x y 37 | 0 0 38 | 1 0.5 39 | 2 0 40 |
41 | 42 |
43 | 44 |
45 |
46 | x y 47 | 0 0 48 | 1 1 49 |
50 |
51 | 52 |
53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /samples/NumericAxis.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Numeric sample 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 |
28 |
30 |
31 |
32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /samples/ResponsiveLayout.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Bar chart 6 | 7 | 8 | 9 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 67 | 68 | 69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 | 81 | 82 | -------------------------------------------------------------------------------- /samples/ResponsiveTabs.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Bar chart 6 | 7 | 8 | 9 | 10 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 68 | 69 | 70 |
71 | 75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 | 83 | 84 | -------------------------------------------------------------------------------- /samples/StandaloneBingMaps.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Bing Maps With No Axis Sample 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 30 | 31 | 32 |
33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /samples/Tick labels with newlines.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Labelled Axis Sample Page 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 50 | 51 | 52 |
53 |
54 |
55 | 56 |
57 |
58 | 59 | 60 | -------------------------------------------------------------------------------- /samples/viewer/Band live.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Area 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 59 | 60 | 61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /samples/viewer/Band.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Area 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 39 | 40 | 41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /sln/idd.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio 2013 4 | VisualStudioVersion = 12.0.31101.0 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{E24C65DC-7377-472B-9ABA-BC803B73C61A}") = "InteractiveDataDisplay", "http://localhost:6822", "{5EDC0499-89A4-40C3-B9DD-61CA2ED7674B}" 7 | ProjectSection(WebsiteProperties) = preProject 8 | UseIISExpress = "true" 9 | TargetFrameworkMoniker = ".NETFramework,Version%3Dv4.5" 10 | Debug.AspNetCompiler.VirtualPath = "/localhost_6822" 11 | Debug.AspNetCompiler.PhysicalPath = "..\..\InteractiveDataDisplay\" 12 | Debug.AspNetCompiler.TargetPath = "PrecompiledWeb\localhost_6822\" 13 | Debug.AspNetCompiler.Updateable = "true" 14 | Debug.AspNetCompiler.ForceOverwrite = "true" 15 | Debug.AspNetCompiler.FixedNames = "false" 16 | Debug.AspNetCompiler.Debug = "True" 17 | Release.AspNetCompiler.VirtualPath = "/localhost_6822" 18 | Release.AspNetCompiler.PhysicalPath = "..\..\InteractiveDataDisplay\" 19 | Release.AspNetCompiler.TargetPath = "PrecompiledWeb\localhost_6822\" 20 | Release.AspNetCompiler.Updateable = "true" 21 | Release.AspNetCompiler.ForceOverwrite = "true" 22 | Release.AspNetCompiler.FixedNames = "false" 23 | Release.AspNetCompiler.Debug = "False" 24 | SlnRelativePath = "../" 25 | DefaultWebSiteLanguage = "Visual C#" 26 | EndProjectSection 27 | EndProject 28 | Global 29 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 30 | Debug|Any CPU = Debug|Any CPU 31 | EndGlobalSection 32 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 33 | {5EDC0499-89A4-40C3-B9DD-61CA2ED7674B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 34 | {5EDC0499-89A4-40C3-B9DD-61CA2ED7674B}.Debug|Any CPU.Build.0 = Debug|Any CPU 35 | EndGlobalSection 36 | GlobalSection(SolutionProperties) = preSolution 37 | HideSolutionNode = FALSE 38 | EndGlobalSection 39 | EndGlobal 40 | -------------------------------------------------------------------------------- /src/css/IDDTheme.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'Segoe UI Light', 'Segoe UI', 'Calibri' 3 | } 4 | 5 | .idd-axis-label 6 | { 7 | font-size: small; 8 | } -------------------------------------------------------------------------------- /src/icons/excl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/excl.png -------------------------------------------------------------------------------- /src/icons/ic_center_focus_strong.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_center_focus_strong.png -------------------------------------------------------------------------------- /src/icons/ic_center_focus_strong_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_center_focus_strong_black.png -------------------------------------------------------------------------------- /src/icons/ic_center_focus_weak.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_center_focus_weak.png -------------------------------------------------------------------------------- /src/icons/ic_center_focus_weak_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_center_focus_weak_black.png -------------------------------------------------------------------------------- /src/icons/ic_delete_gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_delete_gray.png -------------------------------------------------------------------------------- /src/icons/ic_file_download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_file_download.png -------------------------------------------------------------------------------- /src/icons/ic_file_download_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_file_download_black.png -------------------------------------------------------------------------------- /src/icons/ic_help.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_help.png -------------------------------------------------------------------------------- /src/icons/ic_help_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_help_black.png -------------------------------------------------------------------------------- /src/icons/ic_info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_info.png -------------------------------------------------------------------------------- /src/icons/ic_info_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_info_black.png -------------------------------------------------------------------------------- /src/icons/ic_info_outline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_info_outline.png -------------------------------------------------------------------------------- /src/icons/ic_info_outline_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_info_outline_black.png -------------------------------------------------------------------------------- /src/icons/ic_lock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_lock.png -------------------------------------------------------------------------------- /src/icons/ic_lock_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_lock_black.png -------------------------------------------------------------------------------- /src/icons/ic_lock_open.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_lock_open.png -------------------------------------------------------------------------------- /src/icons/ic_lock_open_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_lock_open_black.png -------------------------------------------------------------------------------- /src/icons/ic_my_location_gray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_my_location_gray.png -------------------------------------------------------------------------------- /src/icons/ic_pan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_pan.png -------------------------------------------------------------------------------- /src/icons/ic_pan_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_pan_black.png -------------------------------------------------------------------------------- /src/icons/ic_place_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_place_black.png -------------------------------------------------------------------------------- /src/icons/ic_place_standart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_place_standart.png -------------------------------------------------------------------------------- /src/icons/ic_straighten.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_straighten.png -------------------------------------------------------------------------------- /src/icons/ic_straighten_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_straighten_black.png -------------------------------------------------------------------------------- /src/icons/ic_visibility-grey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_visibility-grey.png -------------------------------------------------------------------------------- /src/icons/ic_visibility_off-grey.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_visibility_off-grey.png -------------------------------------------------------------------------------- /src/icons/ic_visibility_off-red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_visibility_off-red.png -------------------------------------------------------------------------------- /src/icons/ic_zoom_in.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_zoom_in.png -------------------------------------------------------------------------------- /src/icons/ic_zoom_in_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_zoom_in_black.png -------------------------------------------------------------------------------- /src/icons/ic_zoom_out.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_zoom_out.png -------------------------------------------------------------------------------- /src/icons/ic_zoom_out_black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/ic_zoom_out_black.png -------------------------------------------------------------------------------- /src/icons/toLeft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/toLeft.png -------------------------------------------------------------------------------- /src/icons/toRight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/src/icons/toRight.png -------------------------------------------------------------------------------- /src/idd/heatmap_worker_footer.txt: -------------------------------------------------------------------------------- 1 | "; -------------------------------------------------------------------------------- /src/idd/heatmap_worker_header.txt: -------------------------------------------------------------------------------- 1 | InteractiveDataDisplay.heatmapBackgroundRendererCodeBase64 = " -------------------------------------------------------------------------------- /src/idd/idd.ko.area.js: -------------------------------------------------------------------------------- 1 | 2 | (function(InteractiveDataDisplay) { 3 | if (!ko) { 4 | console.log("Knockout was no found, please load Knockout first"); 5 | } else { 6 | var updateArea = function(element, valueAccessor, allBindings, viewModel, bindingContext) { 7 | var data = {}; 8 | if (!allBindings.has('iddY1')) 9 | throw new Error("Please define iddY1 and iddY2 bindings along with iddX"); 10 | else 11 | data.y1 = ko.unwrap(allBindings.get('iddY1')); 12 | if (!allBindings.has('iddY2')) 13 | throw new Error("Please define iddY1 and iddY2 bindings along with iddX"); 14 | else 15 | data.y2 = ko.unwrap(allBindings.get('iddY2')); 16 | 17 | if (!allBindings.has('iddX')) 18 | throw new Error("Please define iddX binding along with iddY1 and iddY2"); 19 | else 20 | data.x = ko.unwrap(allBindings.get('iddX')); 21 | 22 | var n; 23 | if (Array.isArray(data.x)) 24 | n = data.x.length; 25 | else throw new Error("iddX is not an array"); 26 | 27 | if (Array.isArray(data.y1)) 28 | if (data.y1.length !== n) 29 | return; 30 | if (Array.isArray(data.y2)) 31 | if (data.y2.length !== n) 32 | return; 33 | 34 | if (allBindings.has('iddFill')) 35 | data.fill = ko.unwrap(allBindings.get('iddFill')); 36 | if (allBindings.has('iddOpacity')) 37 | data.opacity = ko.unwrap(allBindings.get('iddOpacity')); 38 | 39 | var plotAttr = element.getAttribute("data-idd-plot"); 40 | if (plotAttr != null) { 41 | if (typeof element.plot != 'undefined') { 42 | element.plot.draw(data); 43 | } 44 | else { //the case when the element was not yet initialized and not yet bound to the logical entity (plot) 45 | //storing the data in data-idd-datasource attribute as JSON string. it will be used by IDD during IDD-initializing of the dom element 46 | element.setAttribute("data-idd-datasource", JSON.stringify(data)); 47 | } 48 | } 49 | } 50 | 51 | InteractiveDataDisplay.KnockoutBindings.registerPlotBinding("area", updateArea, ['iddX', 'iddY1', 'iddY2', 'iddFill', 'iddOpacity']) 52 | } 53 | })(InteractiveDataDisplay || (InteractiveDataDisplay = {})) 54 | -------------------------------------------------------------------------------- /src/idd/idd.ko.boundaryLine.js: -------------------------------------------------------------------------------- 1 | (function (InteractiveDataDisplay) { 2 | if (!ko) { 3 | console.log("Knockout was no found, please load Knockout first"); 4 | } 5 | else { 6 | var updateBoundaryLine = function (element, valueAccessor, allBindings, viewModel, bindingContext) { 7 | var data = {}; 8 | if (!allBindings.has('iddX')) 9 | if (!allBindings.has('iddY')) 10 | throw new Error("Please define iddX or iddY binding"); 11 | else 12 | data.y = ko.unwrap(allBindings.get('iddY')); 13 | else 14 | if (allBindings.has('iddY')) 15 | throw new Error("Please define either iddX or iddY binding"); 16 | else 17 | data.x = ko.unwrap(allBindings.get('iddX')); 18 | 19 | if (allBindings.has('iddStroke')) 20 | data.stroke = ko.unwrap(allBindings.get('iddStroke')); 21 | if (allBindings.has('iddThickness')) 22 | data.thickness = ko.unwrap(allBindings.get('iddThickness')); 23 | if (allBindings.has('iddLineDash')) 24 | data.lineDash = ko.unwrap(allBindings.get('iddLineDash')); 25 | 26 | var plotAttr = element.getAttribute("data-idd-plot"); 27 | if (plotAttr != null) { 28 | if (typeof element.plot != 'undefined') { 29 | element.plot.draw(data); 30 | } 31 | else { //the case when the element was not yet initialized and not yet bound to the logical entity (plot) 32 | //storing the data in data-idd-datasource attribute as JSON string. it will be used by IDD during IDD-initializing of the dom element 33 | element.setAttribute("data-idd-datasource", JSON.stringify(data)); 34 | } 35 | } 36 | } 37 | InteractiveDataDisplay.KnockoutBindings.registerPlotBinding("boundaryLine", updateBoundaryLine, ['iddX', 'iddY', 'iddStroke', 'iddThickness', 'iddLineDash']) 38 | } 39 | })(InteractiveDataDisplay || (InteractiveDataDisplay = {})) -------------------------------------------------------------------------------- /src/idd/idd.ko.domplot.js: -------------------------------------------------------------------------------- 1 | 2 | (function(InteractiveDataDisplay) { 3 | if (!ko) { 4 | console.log("Knockout was no found, please load Knockout first"); 5 | } else { 6 | var updateDOM = function(element, valueAccessor, allBindings, viewModel, bindingContext) { 7 | var x, y, width, height; 8 | if (!allBindings.has('iddY')) 9 | throw new Error("Please define iddY binding along with iddX"); 10 | else 11 | y = ko.unwrap(allBindings.get('iddY')); 12 | 13 | if (!allBindings.has('iddX')) 14 | throw new Error("Please define iddX binding along with iddY"); 15 | else 16 | x = ko.unwrap(allBindings.get('iddX')); 17 | 18 | if (allBindings.has('iddWidth')) 19 | width = ko.unwrap(allBindings.get('iddWidth')); 20 | if (allBindings.has('iddHeight')) 21 | height = ko.unwrap(allBindings.get('iddHeight')); 22 | 23 | 24 | if (typeof element.parentElement.plot != 'undefined') { 25 | var plot = element.parentElement.plot; 26 | if (typeof plot.domElements !== 'undefined') { //plot is initialized 27 | var domElems = plot.domElements; 28 | var registered = false; 29 | registered = domElems.some(function(val) { 30 | return (val[0] === element); 31 | }); 32 | 33 | if (registered) { 34 | //(element, x, y, width, height, ox, oy) 35 | plot.set(element, x, y, width, height, 0.5, 1); 36 | } 37 | else { 38 | //(element, scaleMode, x, y, width, height, originX, originY) 39 | plot.add(element, 'none', x, y, width, height, 0.5, 1); 40 | } 41 | } 42 | } 43 | else { 44 | } 45 | } 46 | 47 | InteractiveDataDisplay.KnockoutBindings.registerPlotBinding("dom", updateDOM, ['iddX', 'iddY', 'iddWidth', 'iddHeight']) 48 | } 49 | })(InteractiveDataDisplay || (InteractiveDataDisplay = {})) 50 | -------------------------------------------------------------------------------- /src/idd/idd.ko.heatmap.js: -------------------------------------------------------------------------------- 1 | (function (InteractiveDataDisplay) { 2 | if (!ko) { 3 | console.log("Knockout was no found, please load Knockout first"); 4 | } else { 5 | var updateHeatmap = function (element, valueAccessor, allBindings, viewModel, bindingContext) { 6 | var data = {}; 7 | if (!allBindings.has('iddX')) 8 | throw new Error("Please define iddX and iddY"); 9 | else 10 | data.x = ko.unwrap(allBindings.get('iddX')); 11 | if (!allBindings.has('iddY')) 12 | throw new Error("Please define iddX and iddY"); 13 | else 14 | data.y = ko.unwrap(allBindings.get('iddY')); 15 | 16 | if (!allBindings.has('iddValues')) 17 | throw new Error("Please define iddValues binding along with iddX and iddY"); 18 | else 19 | data.values = ko.unwrap(allBindings.get('iddValues')); 20 | 21 | var N = data.x.length; 22 | var M = data.y.length; 23 | if (data.values.length !== N || !Array.isArray(data.values[0]) || data.values[0].length !== M || 24 | N < 2 || M < 2) 25 | return; 26 | 27 | var titles = undefined; 28 | if (allBindings.has('iddInterval')) 29 | data.interval = ko.unwrap(allBindings.get('iddInterval')); 30 | if (allBindings.has('iddColorPalette')) 31 | data.colorPalette = ko.unwrap(allBindings.get('iddColorPalette')); 32 | if (allBindings.has('iddOpacity')) 33 | data.opacity = ko.unwrap(allBindings.get('iddOpacity')); 34 | if (allBindings.has('iddPlotTitles')) 35 | titles = ko.unwrap(allBindings.get('iddPlotTitles')); 36 | if (allBindings.has('iddLogColors')) 37 | data.logPalette = ko.unwrap(allBindings.get('iddLogColors')); 38 | if (allBindings.has('iddLogTolerance')) 39 | data.logTolerance = ko.unwrap(allBindings.get('iddLogTolerance')); 40 | 41 | var plotAttr = element.getAttribute("data-idd-plot"); 42 | if (plotAttr != null) { 43 | if (typeof element.plot != 'undefined') { 44 | element.plot.draw(data, titles); 45 | } 46 | else { //the case when the element was not yet initialized and not yet bound to the logical entity (plot) 47 | //storing the data in data-idd-datasource attribute as JSON string. it will be used by IDD during IDD-initializing of the dom element 48 | var evalstr = "(function(){return " + JSON.stringify(data) + "})"; 49 | element.setAttribute("data-idd-datasource", evalstr); 50 | } 51 | } 52 | } 53 | 54 | InteractiveDataDisplay.KnockoutBindings.registerPlotBinding("heatmap", updateHeatmap, ['iddX', 'iddY', 'iddValues', 'iddOpacity', 'iddColorPalette', 'iddInterval']) 55 | } 56 | })(InteractiveDataDisplay || (InteractiveDataDisplay = {})) 57 | -------------------------------------------------------------------------------- /src/idd/idd.settings.js: -------------------------------------------------------------------------------- 1 | InteractiveDataDisplay = { 2 | MinSizeToShow: 1, // minimum size in pixels of the element to be rendered 3 | Padding: 20, // extra padding in pixels which is added to padding computed by the plots 4 | maxTickArrangeIterations: 5, // max number of iterations in loop of ticks creating 5 | tickLength: 10, // length of ordinary tick 6 | minLabelSpace: 60, // minimum space (in px) between 2 labels on axis 7 | minTickSpace: 5, // minimum space (in px) between 2 ticks on axis 8 | minLogOrder: 4, // minimum order when labels on logarithmic scale are written with supscript 9 | minNumOrder: 8, // minimum order when labels on numeric scale are written with supscript 10 | TooltipDelay: 1, // delay (seconds) between mouse stops over an element and the tooltip appears 11 | TooltipDuration: 10, // duration (seconds) when tooltip is shown 12 | CssPrefix: '', // browser-dependent prefix for the set of css styles 13 | ZIndexNavigationLayer: 1000, 14 | ZIndexDOMMarkers: 1500, 15 | ZIndexTooltipLayer: 2000, 16 | MaxInteger: 9007199254740991, 17 | HeatmapworkerPath: undefined,// prefix for idd.heatmapworker.js for using in IE10 and IE11 18 | factory: {} // table of values (key: string, plot-factory: jqDiv x master plot -> plot) 19 | }; 20 | -------------------------------------------------------------------------------- /src/idd/idd.transforms.js: -------------------------------------------------------------------------------- 1 | InteractiveDataDisplay = typeof InteractiveDataDisplay == 'undefined' ? {} : InteractiveDataDisplay; 2 | 3 | InteractiveDataDisplay.DataTransform = function (dataToPlot, plotToData, domain, type) { 4 | this.dataToPlot = dataToPlot; 5 | this.plotToData = plotToData; 6 | 7 | this.domain = domain || { 8 | isInDomain: function (value) { 9 | return true; 10 | } 11 | }; 12 | 13 | this.type = type; 14 | }; 15 | 16 | var mercator_maxPhi = 85.05112878; //87.1147576363384; // deg 17 | var mercator_R = mercator_maxPhi / Math.log(Math.tan(mercator_maxPhi * Math.PI / 360.0 + Math.PI / 4)); 18 | InteractiveDataDisplay.mercatorTransform = new InteractiveDataDisplay.DataTransform( 19 | function (phi_deg) { 20 | if (phi_deg >= -mercator_maxPhi && phi_deg <= mercator_maxPhi) 21 | return mercator_R * Math.log(Math.tan(Math.PI * (phi_deg + 90) / 360)); 22 | else return phi_deg; 23 | }, 24 | function (y) { 25 | if (-mercator_maxPhi <= y && y <= mercator_maxPhi) { 26 | return 360 * Math.atan(Math.exp(y / mercator_R)) / Math.PI - 90; 27 | } 28 | return y; 29 | }, 30 | undefined, 31 | "mercator" 32 | ); 33 | 34 | 35 | Math.LOGE10 = Math.log(10); 36 | 37 | InteractiveDataDisplay.logTransform = new InteractiveDataDisplay.DataTransform( 38 | function (x_d) { 39 | return Math.log(x_d) / Math.LOGE10; 40 | }, 41 | function (x_p) { 42 | return Math.pow(10, x_p); 43 | }, 44 | { isInDomain: function (x) { return x > 0.00000001; } }, 45 | "log10" 46 | ); 47 | 48 | InteractiveDataDisplay.identityTransform = new InteractiveDataDisplay.DataTransform( 49 | function (x_d) { return x_d; }, 50 | function (x_p) { return x_p; }, 51 | { isInDomain: function (x) { return true } }, 52 | "identity" 53 | ); -------------------------------------------------------------------------------- /src/idd/wrapper_footer.txt: -------------------------------------------------------------------------------- 1 | return {"InteractiveDataDisplay" : InteractiveDataDisplay, "Plot" : Plot}; 2 | }); // end of the factory function 3 | -------------------------------------------------------------------------------- /src/idd/wrapper_footer_knockout.txt: -------------------------------------------------------------------------------- 1 | return InteractiveDataDisplay; 2 | } 3 | (function () { 4 | if (window.define) { 5 | define(['jquery', 'rx', 'knockout', 'svg', 'filesaver', 'jquery-ui', 'jquery-mousewheel'], 6 | function ($, Rx, ko, SVG, filesaver) { 7 | var InteractiveDataDisplay = IDD($, Rx, ko, SVG, filesaver); 8 | return InteractiveDataDisplay; 9 | }); 10 | } else { 11 | var InteractiveDataDisplay = IDD($, Rx, ko, SVG, saveAs); 12 | window.InteractiveDataDisplay = InteractiveDataDisplay; 13 | } 14 | }()); -------------------------------------------------------------------------------- /src/idd/wrapper_header.txt: -------------------------------------------------------------------------------- 1 | (function(root, factory) { 2 | 'use strict'; 3 | //Define as an AMD Module if possible 4 | if (typeof define === 'function' && define.amd) { 5 | //AMD 6 | define(['jquery', 'rx', 'svg', 'filesaver', 'css!idd-css', 'jquery-ui', 'jquery-mousewheel'], 7 | function ($, Rx, SVG, filesaver) { 8 | var expr = factory(root, $, Rx, SVG, filesaver); 9 | return {"InteractiveDataDisplay": expr.InteractiveDataDisplay, "Plot": expr.Plot}; 10 | }); 11 | } else if (typeof exports == 'object') { 12 | //Node, CommonJS-like 13 | var $ = root.jQuery = require('jquery'); 14 | require('jquery-mousewheel')($); 15 | require('jquery-ui'); 16 | var filesaver = require('filesaver.js'); 17 | module.exports = factory(root, $, require('rx'), require('svg.js'), filesaver.saveAs); 18 | } else { 19 | console.error("idd.umd.js cannot be used without RequireJS or CommonJS"); 20 | } 21 | })( typeof window !== "undefined" ? window : this, function(window, $, Rx, SVG, saveAs) { -------------------------------------------------------------------------------- /src/idd/wrapper_header_knockout.txt: -------------------------------------------------------------------------------- 1 | function IDD($, Rx, ko, SVG, saveAs) { 2 | if (Number.MAX_SAFE_INTEGER == undefined) Number.MAX_SAFE_INTEGER = 9007199254740991; -------------------------------------------------------------------------------- /src/idd/wrapper_header_webpack.txt: -------------------------------------------------------------------------------- 1 | (function(root, factory) { 2 | 'use strict'; 3 | //Define as an AMD Module if possible 4 | if (typeof define === 'function' && define.amd) { 5 | //AMD 6 | define(['jquery', 'rx', 'svg.js', 'file-saver', './idd.webpack.css', 'jquery-ui', 'jquery-mousewheel'], 7 | function ($, Rx, SVG, filesaver) { 8 | var expr = factory(root, $, Rx, SVG, filesaver); 9 | return {"InteractiveDataDisplay": expr.InteractiveDataDisplay, "Plot": expr.Plot}; 10 | }); 11 | } else if (typeof exports == 'object') { 12 | //Node, CommonJS-like 13 | var $ = root.jQuery = require('jquery'); 14 | require('jquery-mousewheel')($); 15 | require('jquery-ui'); 16 | var filesaver = require('file-saver'); 17 | module.exports = factory(root, $, require('rx'), require('svg.js'), filesaver.saveAs); 18 | } else { 19 | console.error("idd.webpack.js cannot be used without RequireJS or CommonJS compatible bundler"); 20 | } 21 | })( typeof window !== "undefined" ? window : this, function(window, $, Rx, SVG, saveAs) { -------------------------------------------------------------------------------- /src/viewer/Band.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | module InteractiveDataDisplay { 5 | PlotRegistry["area"] = { 6 | initialize(plotDefinition: PlotInfo, viewState: ViewState, chart: IDDPlot) { 7 | var div = $("
") 8 | .attr("data-idd-name", plotDefinition.displayName) 9 | .appendTo(chart.host); 10 | var bandgraph = new InteractiveDataDisplay.Area(div, chart.master); 11 | chart.addChild(bandgraph); 12 | chart.assignChildOrder(bandgraph); 13 | return [bandgraph]; 14 | }, 15 | 16 | draw(plots: IDDPlot[], plotDefinition: PlotInfo) { 17 | // The method actually just passed data from plotDefinition to IDD plot 18 | // except it also can sort data series by x. 19 | var plot = plots[0]; 20 | var bandDef = plotDefinition; 21 | plot.draw(bandDef); 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/viewer/Fallback.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | module InteractiveDataDisplay { 5 | PlotRegistry["fallback"] = { 6 | initialize(plotDefinition: PlotInfo, viewState: ViewState, chart: IDDPlot) { 7 | var div = $("
") 8 | .attr("data-idd-name", plotDefinition.displayName) 9 | .appendTo(chart.host); 10 | var plot = new FallbackPlot(div, chart.master); 11 | chart.addChild(plot); 12 | chart.assignChildOrder(plot); 13 | return [plot]; 14 | }, 15 | 16 | draw(plots: IDDPlot[], plotDefinition: PlotInfo) { 17 | var drawArgs = { 18 | kind: plotDefinition.kind, 19 | error: plotDefinition["error"] 20 | } 21 | plots[0].draw(drawArgs); 22 | 23 | } 24 | } 25 | 26 | export function FallbackPlot(div, master) { 27 | var that = this; 28 | 29 | // Initialization (#1) 30 | var initializer = InteractiveDataDisplay.Utils.getDataSourceFunction(div, InteractiveDataDisplay.readCsv); 31 | var initialData = initializer(div); 32 | 33 | this.base = InteractiveDataDisplay.CanvasPlot; 34 | this.base(div, master); 35 | 36 | var _kind; 37 | var _error; 38 | if (initialData) _kind = initialData.kind; 39 | this.draw = function (data) { 40 | _kind = data.kind; 41 | _error = data.error; 42 | this.fireAppearanceChanged('error'); 43 | 44 | 45 | }; 46 | 47 | Object.defineProperty(this, "isErrorVisible", { 48 | get: function () { return true; }, 49 | configurable: true 50 | }); 51 | // Returns 4 margins in the screen coordinate system 52 | this.getLocalPadding = function () { 53 | return { left: 0, right: 0, top: 0, bottom: 0 }; 54 | }; 55 | 56 | this.renderCore = function (plotRect, screenSize) { 57 | }; 58 | 59 | this.getLegend = function () { 60 | var that = this; 61 | var nameDiv = $(""); 62 | var contentDiv = $("
"); 63 | var setName = function () { 64 | nameDiv.text(that.name); 65 | } 66 | setName(); 67 | var content = ""; 68 | var setContent = function () { 69 | var content = ""; 70 | if (_error) content = _error; 71 | else if (_kind) content = 'kind "' + _kind + '" is unknown'; 72 | else content = "Error plot definition!"; 73 | contentDiv.text(content); 74 | } 75 | setContent(); 76 | 77 | this.host.bind("appearanceChanged", 78 | function (event, propertyName) { 79 | if (!propertyName || propertyName == "error") 80 | setContent(); 81 | if (!propertyName || propertyName == "name") 82 | setName(); 83 | }); 84 | 85 | var that = this; 86 | 87 | var onLegendRemove = function () { 88 | that.host.unbind("appearanceChanged"); 89 | 90 | div[0].innerHTML = ""; 91 | div.removeClass("idd-legend-item"); 92 | }; 93 | 94 | return { name: nameDiv, legend: { thumbnail: undefined, content: contentDiv }, onLegendRemove: onLegendRemove }; 95 | }; 96 | } 97 | FallbackPlot.prototype = new InteractiveDataDisplay.CanvasPlot; 98 | } -------------------------------------------------------------------------------- /src/viewer/Heatmap.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | module InteractiveDataDisplay { 5 | PlotRegistry["heatmap"] = { 6 | initialize(plotDefinition: PlotInfo, viewState, chart: IDDPlot) { 7 | var div = $("
") 8 | .attr("data-idd-name", plotDefinition.displayName) 9 | .appendTo(chart.host); 10 | var heatmap = new InteractiveDataDisplay.Heatmap(div, chart.master); 11 | chart.addChild(heatmap); 12 | chart.assignChildOrder(heatmap); 13 | 14 | var plots = [heatmap]; 15 | return plots; 16 | }, 17 | 18 | draw(plots: IDDPlot[], plotDefinition: PlotInfo) { 19 | var heatmap = plotDefinition; 20 | plots[0].draw(heatmap, heatmap.titles); 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /src/viewer/Line.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | module InteractiveDataDisplay { 5 | PlotRegistry["line"] = { 6 | initialize(plotDefinition: PlotInfo, viewState: ViewState, chart: IDDPlot) { 7 | var div = $("
") 8 | .attr("data-idd-name", plotDefinition.displayName) 9 | .appendTo(chart.host); 10 | var plot = new InteractiveDataDisplay.Polyline(div, chart.master); 11 | chart.addChild(plot); 12 | chart.assignChildOrder(plot); 13 | return [plot]; 14 | }, 15 | 16 | draw(plots: IDDPlot[], plotDefinition: PlotInfo) { 17 | // The method actually just passed data from plotDefinition to IDD plot 18 | // except it also can sort data series by x. 19 | var plot = plots[0]; 20 | var lineDef = plotDefinition; 21 | plot.draw(lineDef); 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/viewer/Markers.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | module InteractiveDataDisplay { 5 | PlotRegistry["markers"] = { 6 | initialize(plotDefinition: PlotInfo, viewState: ViewState, chart: IDDPlot) { 7 | var div = $("
") 8 | .attr("data-idd-name", plotDefinition.displayName) 9 | .appendTo(chart.host); 10 | var markerGraph = new InteractiveDataDisplay.Markers(div, chart.master); 11 | chart.addChild(markerGraph); 12 | chart.assignChildOrder(markerGraph); 13 | return [markerGraph]; 14 | }, 15 | 16 | draw(plots: IDDPlot[], plotDefinition: PlotInfo) { 17 | var plot = plotDefinition; 18 | plots[0].draw(plot, plot.titles); 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /src/viewer/PlotList.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | /// 5 | 6 | module InteractiveDataDisplay { 7 | export function PlotList(rootDiv, plotViewer, persistentViewState, transientViewState) { 8 | var that = this; 9 | var _isEditable = true; 10 | var _cards = []; 11 | var _plots = []; 12 | // Create element structure inside root 'div' 13 | rootDiv.addClass("dsv-plotlist"); 14 | var legendDiv = $("
").appendTo(rootDiv); 15 | var legend = new InteractiveDataDisplay.Legend(plotViewer.iddChart, legendDiv, false, true); 16 | plotViewer.iddChart.host.bind("visibleChanged", function () { 17 | persistentViewState.probesViewModel.refresh(persistentViewState.probesViewModel.getProbes()); 18 | }); 19 | persistentViewState.probesViewModel.refresh(persistentViewState.probesViewModel.getProbes()); 20 | var probesDiv = $("
").addClass('probes').appendTo(rootDiv); 21 | var probesTitle = $("
").appendTo(probesDiv); 22 | var probePullDiv = $("
").addClass("dsv-onscreennavigation-probepull").appendTo(probesTitle); 23 | var probePull = new ProbePull(probePullDiv, plotViewer.iddChart.centralPart); 24 | var titleDiv = $("
").appendTo(probesTitle); 25 | $("
").appendTo(titleDiv); 26 | $("
Probes
").appendTo(titleDiv); 27 | var probeListHost = $("
").addClass("probes-list").appendTo(probesDiv); 28 | probeListHost[0].style.display = "none"; 29 | var probesControl = new ProbesControl(probesDiv, probeListHost, persistentViewState, transientViewState); 30 | this.remove = function () { 31 | plotViewer.iddChart.host.bind("visibleChanged"); 32 | legend.remove(); 33 | }; 34 | } 35 | } -------------------------------------------------------------------------------- /src/viewer/PlotRegistry.ts: -------------------------------------------------------------------------------- 1 | /// 2 | module InteractiveDataDisplay { 3 | export type PlotRegistry = { 4 | [plotKind: string]: IDDPlotFactory; 5 | } 6 | export interface IDDPlotFactory { 7 | initialize(plotDefinition: PlotInfo, viewState, chart: IDDPlot): IDDPlot[]; 8 | draw(plots: IDDPlot[], plotDefinition: PlotInfo): void; 9 | } 10 | /* A libary of plots supported by the ChartViewer. */ 11 | export var PlotRegistry: PlotRegistry = {} 12 | } -------------------------------------------------------------------------------- /test/AdaptiveFormatterTest.js: -------------------------------------------------------------------------------- 1 | describe('InteractiveDataDisplay.AdaptiveFormatter', function () { 2 | it('0.0000nn___ -> 0.nn x 10^-mmm in segment case', function () { 3 | var format = new InteractiveDataDisplay.AdaptiveFormatter(0.000000001, 0.000003); 4 | expect(format.toString(0.00000003)).toBe('0.030e-6'); 5 | }); 6 | it('0.0000nn___ -> 0.nn x 10^-mmm in array case', function () { 7 | var array = [0.00000001, 0.000004, 0.0000054, 0.000005]; 8 | var format = new InteractiveDataDisplay.AdaptiveFormatter(array); 9 | expect(format.toString(array[1])).toBe('4.00e-6'); 10 | }); 11 | 12 | it('nnnnn.nn__ -> nnnnn.nn in segment case', function () { 13 | var format = new InteractiveDataDisplay.AdaptiveFormatter(0.123423526264523, 0.25341234235234); 14 | expect(format.toString(0.13451525234235)).toBe('0.1345'); 15 | }); 16 | it('nnnnn.nn__ -> nnnnn.nn in array case', function () { 17 | var array = [0.12342342341235, 0.123532789847987, 0.123409898787, 0.2342634534523]; 18 | var format = new InteractiveDataDisplay.AdaptiveFormatter(array); 19 | expect(format.toString(array[0])).toBe('0.1234'); 20 | }); 21 | 22 | it('nnnnn.___ -> nnnnn. in segment case', function () { 23 | var format = new InteractiveDataDisplay.AdaptiveFormatter(1234.23526264523, 2534.1234235234); 24 | expect(format.toString(1345.1525234235)).toBe('1345.'); 25 | }); 26 | it('nnnnn.___ -> nnnnn. in array case', function () { 27 | var array = [1234.2342341235, 1235.32789847987, 1234.09898787, 2342.634534523]; 28 | var format = new InteractiveDataDisplay.AdaptiveFormatter(array); 29 | expect(format.toString(array[0])).toBe('1234.'); 30 | }); 31 | 32 | it('nnnnnn.___ -> nnnn x 10^mmm in segment case', function () { 33 | var format = new InteractiveDataDisplay.AdaptiveFormatter(123412342343, 8768767643); 34 | expect(format.toString(13451525234235)).toBe('134.52e+11'); 35 | }); 36 | it('nnnnnn.___ -> nnnn x 10^mmm in array case', function () { 37 | var array = [12342342341235, 123532789847987, 123409898787, 2342634534523]; 38 | var format = new InteractiveDataDisplay.AdaptiveFormatter(array); 39 | expect(format.toString(array[0])).toBe('1.23e+13'); 40 | }); 41 | }); -------------------------------------------------------------------------------- /test/SpecRunner.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Jasmine Spec Runner v2.3.4 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /test/bingMapsAnimationTests.js: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // quick reference for Jasmine framework: 6 | // http://pivotal.github.com/jasmine/ 7 | // https://github.com/pivotal/jasmine/wiki 8 | 9 | describe('idd.js BingMapsAnimation during navigation', function () { 10 | it('should pan plot rect for 2 units right and top', function () { 11 | var screenRect = { left: 0, top: 0, width: 100, height: 100 }; 12 | var plotRect = { x: 0, y: 0, width: 100, height: 100 }; 13 | var t = new InteractiveDataDisplay.CoordinateTransform(plotRect, screenRect); 14 | 15 | var pannedPlotRect = InteractiveDataDisplay.NavigationUtils.calcPannedRect(plotRect, screenRect, new InteractiveDataDisplay.Gestures.PanGesture(2, 2, "Mouse")); 16 | 17 | expect(pannedPlotRect.x).toBe(-2); 18 | expect(pannedPlotRect.y).toBe(2); 19 | expect(pannedPlotRect.width).toBe(100); 20 | expect(pannedPlotRect.height).toBe(100); 21 | }); 22 | 23 | }); -------------------------------------------------------------------------------- /test/coordinateTransformTests.js: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // quick reference for Jasmine framework: 6 | // http://pivotal.github.com/jasmine/ 7 | // https://github.com/pivotal/jasmine/wiki 8 | 9 | describe('idd.js CoordinateTransform', function () { 10 | it('should transform (50, 50) on the plot to (320, 240) on the screen and vice versa', function () { 11 | var screenRect = { left: 0, top: 0, width: 640, height: 480 }; 12 | var plotRect = { x: 0, y: 0, width: 100, height: 100 }; 13 | var t = new InteractiveDataDisplay.CoordinateTransform(plotRect, screenRect); 14 | 15 | expect(t.plotToScreenX(50)).toBe(320); 16 | expect(t.plotToScreenY(50)).toBe(240); 17 | 18 | expect(t.screenToPlotX(320)).toBe(50); 19 | expect(t.screenToPlotY(240)).toBe(50); 20 | }); 21 | 22 | it('should transform corner points of the screen to corner points of visible region (expanded by Y)', function () { 23 | var screenRect = { left: 0, top: 0, width: 90, height: 60 }; 24 | var plotRect = { x: 0, y: 0, width: 3, height: 2 }; 25 | var aspectRatio = 2; 26 | var t = new InteractiveDataDisplay.CoordinateTransform(plotRect, screenRect, aspectRatio); 27 | 28 | expect(t.screenToPlotX(0)).toBe(0); 29 | expect(t.screenToPlotX(90)).toBe(3); 30 | expect(t.screenToPlotY(0)).toBe(4); 31 | expect(t.screenToPlotY(60)).toBe(0); 32 | }); 33 | 34 | it('should transform corner points of the screen to corner points of visible region (expanded by X)', function () { 35 | var screenRect = { left: 0, top: 0, width: 90, height: 60 }; 36 | var plotRect = { x: 0, y: 0, width: 3, height: 2 }; 37 | var aspectRatio = 0.5; 38 | var t = new InteractiveDataDisplay.CoordinateTransform(plotRect, screenRect, aspectRatio); 39 | 40 | expect(t.screenToPlotX(0)).toBe(0); 41 | expect(t.screenToPlotX(90)).toBe(6); 42 | expect(t.screenToPlotY(0)).toBe(2); 43 | expect(t.screenToPlotY(60)).toBe(0); 44 | }); 45 | 46 | it('should transform internal points of visible region (expanded by Y) to appropriate points of the screen', function () { 47 | var screenRect = { left: 3, top: 2.3, width: 202, height: 104.7 }; 48 | var plotRect = { x: -3.88, y: -3.88, width: 14.38, height: 8.58 }; 49 | var aspectRatio = 2; 50 | var t = new InteractiveDataDisplay.CoordinateTransform(plotRect, screenRect, aspectRatio); 51 | 52 | expect(t.plotToScreenX(0)).toBeCloseTo(57.50349, 0.00001); 53 | expect(t.plotToScreenY(11.02679)).toBeCloseTo(2.3, 0.00001); 54 | 55 | expect(t.plotToScreenX(8)).toBeCloseTo(169.8818, 0.00001); 56 | expect(t.plotToScreenY(-2)).toBeCloseTo(93.7955, 0.00001); 57 | 58 | expect(t.plotToScreenX(9)).toBeCloseTo(183.92910, 0.00001); 59 | expect(t.plotToScreenY(6)).toBeCloseTo(37.60639, 0.00001); 60 | }); 61 | 62 | it('should calculate correct plot rect from coordinate transform for given screen rect ', function () { 63 | var screenRect = { left: 0, top: 0, width: 100, height: 100 }; 64 | var plotRect = { x: -50, y: -50, width: 100, height: 70 }; 65 | var aspectRatio = -1; 66 | var t = new InteractiveDataDisplay.CoordinateTransform(plotRect, screenRect, aspectRatio); 67 | 68 | var expectedPlotRect = t.getPlotRect({ x: 0, y: 0, width: 100, height: 100 }); 69 | 70 | expect(expectedPlotRect.x).toBeCloseTo(-50, 0.00001); 71 | expect(expectedPlotRect.y).toBeCloseTo(-50, 0.00001); 72 | expect(expectedPlotRect.width).toBeCloseTo(100, 0.00001); 73 | expect(expectedPlotRect.height).toBeCloseTo(70, 0.00001); 74 | 75 | }); 76 | 77 | }); -------------------------------------------------------------------------------- /test/jasmine.tmpl: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Jasmine Spec Runner 6 | <% css.forEach(function(style){ %> 7 | 8 | <% }) %> 9 | 10 | 11 | 12 | <% with (scripts) { %> 13 | <% [].concat(polyfills, jasmine, boot, vendor, helpers, src, specs,reporters).forEach(function(script){ %> 14 | 15 | <% }) %> 16 | <% }; %> 17 | 18 | 19 | -------------------------------------------------------------------------------- /test/manual/Boxwhisker plot.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | Box&Whisker plot 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 81 | 82 | 83 |
84 |

Box&Whisker plot

85 |
86 | 87 | 88 | -------------------------------------------------------------------------------- /test/manual/Dispose test page.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | Dispose test page 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 35 | 36 | 37 |
38 |

Dispose test page

39 |
40 |
41 | 42 |
43 |
44 | [State 0] You should see: 45 |
46 | 47 |
48 | [User Action 1] Click 'Dispose' button. 49 |
50 | [State 1] Div element with Chart Viewer should be cleared (but with the same size). 51 |
52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /test/manual/Global using chartViewer testpage.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Global using chartViewer test page 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 25 | 26 |
27 |

Global using chartViewer test page

28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /test/manual/Require using chartViewer testpage.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | Require using chartViewer test page 5 | 6 | 7 | 8 | 9 | 10 |
11 |

Require using chartViewer test page

12 |
13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /test/manual/Update test page.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | Update test page 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 42 | 43 | 44 |
45 |

Update test page

46 |
47 |
48 | 49 |
50 |

51 | [State 0] On this page you should see Chart Viewer containing 4 elements: 'elem1' - line, 'elem2' - yellow-green circle markers, 'elem3' - red-blue heatmap, 'elem4' - green-blue triangle markers. 52 |
53 | 54 |
55 | [User Action 1] Click 'Update' button. 56 |
57 | [State 1] Char Viewer should contain: 'elem1' - updated line, 'elem2' - no changes, 'elem3' - removed, 'elem4' - yellow-red heatmap, 'elem5' - new element (red-blue diamond markers). 58 |
59 | 60 |
61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /test/manual/Wrong plot kind test page.html: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | Wrong plot kind test page 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 37 | 38 | 39 |
40 |

Wrong plot kind test page

41 |
42 |
43 |
44 |

45 | On this page you should see Chart Viewer containing line and heatmap. 46 |
47 | In a plot list there are 3 cards. Second card should contain name 'elem2' and text 'kind "mark" is uknown'. 48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /test/manual/config.js: -------------------------------------------------------------------------------- 1 | requirejs.config({ 2 | baseUrl: ".", 3 | paths: { 4 | "jquery": "../../ext/jquery/dist/jquery", 5 | "css": "../../ext/require-css/css", 6 | "idd": "../../dist/idd", 7 | "idd-css": "../../dist/idd", 8 | "jquery-ui": "../../ext/jqueryui/jquery-ui", 9 | "rx": "../../ext/rxjs/dist/rx.all", 10 | "svg": "../../ext/svg.js/dist/svg.min", 11 | "filesaver": "../../ext/FileSaver.js/FileSaver.min", 12 | "jquery-mousewheel": "../../ext/jquery-mousewheel/jquery.mousewheel.min" 13 | } 14 | }); 15 | 16 | require(["main"]); -------------------------------------------------------------------------------- /test/manual/main.ts: -------------------------------------------------------------------------------- 1 | 2 | 3 | import Charting = require("../../dist/idd.webpack"); 4 | Charting.InteractiveDataDisplay.show(document.getElementById("chart"), { 5 | "elem1": Charting.Plot.line({ 6 | x: [1, 2, 3, 4], 7 | y: [1, 4, 6, 9], 8 | thickness: 3, 9 | displayName: "y[x]", 10 | titles: { 11 | x: "w", y: "c" 12 | } 13 | }), 14 | "elem2": Charting.Plot.markers({ 15 | x: [1, 2, 3, 4], 16 | y: [1, 4, 6, 9], 17 | shape: Charting.Plot.MarkerShape.Cross, 18 | size: 8, 19 | color: "red", 20 | displayName: "mark" 21 | }), 22 | "elem3": Charting.Plot.heatmap({ 23 | x: [-1, 0, 1, -1, 0, 1, -1, 0, 1], 24 | y: [-1, -1, -1, 0, 0, 0, 1, 1, 1], 25 | values: [0.1, 0.2, 0.23, -0.5, 0.1, 0.2, -0.2, 0.4, 0.3], 26 | colorPalette: "red, purple", 27 | displayName: "map" 28 | }) 29 | }); 30 | -------------------------------------------------------------------------------- /test/manual/mainGlobal.ts: -------------------------------------------------------------------------------- 1 | /// 2 | import {InteractiveDataDisplay, Plot} from "../../dist/idd.webpack" 3 | module main { 4 | export function start() { 5 | var el = document.getElementById("chart"); 6 | InteractiveDataDisplay.show(el, { 7 | "elem1": { kind: "line3",//Plot.line({ 8 | x: [1, 2, 3, 4], 9 | y: [1, 4, 6, 9], 10 | thickness: 3, 11 | displayName: "y[x]", 12 | titles: { 13 | x: "w", y: "c" 14 | } 15 | },//), 16 | "elem2": Plot.markers({ 17 | x: [1, 2, 3, 4], 18 | y: [1, 4, 6, 9], 19 | shape: Plot.MarkerShape.Cross, 20 | size: [1, 2, 3, 4], 21 | sizePalette: new InteractiveDataDisplay.SizePalette(true, { min: 5, max: 25 }), 22 | color: [1, 2, 3, 4], 23 | colorPalette: 'green, blue', 24 | displayName: "mark", 25 | }), 26 | "elem3": Plot.heatmap({ 27 | x: [-1, 0, 1, -1, 0, 1, -1, 0, 1], 28 | y: [-1, -1, -1, 0, 0, 0, 1, 1, 1], 29 | values: [0.1, 0.2, 0.23, -0.5, 0.1, 0.2, -0.2, 0.4, 0.3], 30 | colorPalette: "red, purple", 31 | displayName: "map" 32 | }) 33 | }); 34 | } 35 | } -------------------------------------------------------------------------------- /test/manual/png/dispose_state0.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/test/manual/png/dispose_state0.PNG -------------------------------------------------------------------------------- /test/manual/png/legend_action1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/test/manual/png/legend_action1.PNG -------------------------------------------------------------------------------- /test/manual/png/legend_action2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/test/manual/png/legend_action2.PNG -------------------------------------------------------------------------------- /test/manual/png/legend_action3.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/test/manual/png/legend_action3.PNG -------------------------------------------------------------------------------- /test/manual/png/legend_action4.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/test/manual/png/legend_action4.PNG -------------------------------------------------------------------------------- /test/manual/png/legend_state0.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/test/manual/png/legend_state0.PNG -------------------------------------------------------------------------------- /test/manual/png/update_state0.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/test/manual/png/update_state0.PNG -------------------------------------------------------------------------------- /test/manual/png/update_state1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/predictionmachines/InteractiveDataDisplay/ae638f72b0d178429572e61d551c4db689ebdee8/test/manual/png/update_state1.PNG -------------------------------------------------------------------------------- /test/navigationTests.js: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // quick reference for Jasmine framework: 6 | // http://pivotal.github.com/jasmine/ 7 | // https://github.com/pivotal/jasmine/wiki 8 | 9 | describe('idd.js Navigation', function () { 10 | it('should pan plot rect for 2 units right and top', function () { 11 | var screenRect = { left: 0, top: 0, width: 100, height: 100 }; 12 | var plotRect = { x: 0, y: 0, width: 100, height: 100 }; 13 | var t = new InteractiveDataDisplay.CoordinateTransform(plotRect, screenRect); 14 | 15 | var pannedPlotRect = InteractiveDataDisplay.NavigationUtils.calcPannedRect(plotRect, screenRect, new InteractiveDataDisplay.Gestures.PanGesture(2, 2, "Mouse")); 16 | 17 | expect(pannedPlotRect.x).toBe(-2); 18 | expect(pannedPlotRect.y).toBe(2); 19 | expect(pannedPlotRect.width).toBe(100); 20 | expect(pannedPlotRect.height).toBe(100); 21 | }); 22 | 23 | it('should pan plot rect for 3 units right and top', function () { 24 | var screenRect = { left: 0, top: 0, width: 200, height: 200 }; 25 | var plotRect = { x: 0, y: 0, width: 100, height: 100 }; 26 | var t = new InteractiveDataDisplay.CoordinateTransform(plotRect, screenRect); 27 | 28 | var pannedPlotRect = InteractiveDataDisplay.NavigationUtils.calcPannedRect(plotRect, screenRect, new InteractiveDataDisplay.Gestures.PanGesture(6, 6, "Mouse")); 29 | 30 | expect(pannedPlotRect.x).toBe(-3); 31 | expect(pannedPlotRect.y).toBe(3); 32 | expect(pannedPlotRect.width).toBe(100); 33 | expect(pannedPlotRect.height).toBe(100); 34 | }); 35 | 36 | it('should zoom rect for 2 times relative to the center', function () { 37 | var screenRect = { left: 0, top: 0, width: 100, height: 100 }; 38 | var plotRect = { x: 0, y: 0, width: 100, height: 100 }; 39 | var t = new InteractiveDataDisplay.CoordinateTransform(plotRect, screenRect); 40 | 41 | var zoomedPlotRect = InteractiveDataDisplay.NavigationUtils.calcZoomedRect(plotRect, t, new InteractiveDataDisplay.Gestures.ZoomGesture(50, 50, 0.5, "Mouse")); 42 | 43 | expect(zoomedPlotRect.x).toBe(25); 44 | expect(zoomedPlotRect.y).toBe(25); 45 | expect(zoomedPlotRect.width).toBe(50); 46 | expect(zoomedPlotRect.height).toBe(50); 47 | }); 48 | 49 | it('should zoom rect for 2 times relative to the point (25,25) in screen coordinates', function () { 50 | var screenRect = { left: 0, top: 0, width: 100, height: 100 }; 51 | var plotRect = { x: 0, y: 0, width: 100, height: 100 }; 52 | var t = new InteractiveDataDisplay.CoordinateTransform(plotRect, screenRect); 53 | 54 | var zoomedPlotRect = InteractiveDataDisplay.NavigationUtils.calcZoomedRect(plotRect, t, new InteractiveDataDisplay.Gestures.ZoomGesture(25, 25, 0.5, "Mouse")); 55 | 56 | expect(zoomedPlotRect.x).toBe(12.5); 57 | expect(zoomedPlotRect.y).toBe(37.5); 58 | expect(zoomedPlotRect.width).toBe(50); 59 | expect(zoomedPlotRect.height).toBe(50); 60 | }); 61 | 62 | }); --------------------------------------------------------------------------------