View allAll Photos Tagged devtools
DISCLAIMER: THESE ICONS ARE PROPERTY OF APPLE. I DID NOT DESIGN THEM OR HAVE ANY PART IN DESIGNING THEM. Full credit to the amazing designer(s) that did these.
COPYRIGHT APPLE INC.
Icons from Instruments, a developer tool by Apple. Some of the greatest icons are the ones you hadn't seen yet.
This is a browser-based remake of an old Commodore 64 game I made in 2012; with Chrome's nifty DevTools, I thought it would be fun to run some performance tests and see what elements of the game could be optimized in terms of hardware acceleration.
Via DevTools' "paint borders", you can see areas being repainted (redrawn) in red. Borders around composited areas are brown, with tiles being teal. Generally, more red = bad.
There is less repainting here, I think, than previously; this was taken after putting game elements like blocks, turret gunfire, bad guys and so forth on the GPU via transform3d().
I think I may be able to improve performance (following my findings from the new Flickr Home Page) further, by using translate3d() to move elements instead of changing the background-position of sprites. The "blocks" which make up the world are numerous and repaint every second (or more.) It may take effort to refactor the code, but the GPU-based compositing just might justify the effort.
Side note: I think is some lag/jank from running this full-screen on an external monitor and using my laptop to record this screencast.
Debug options are also shown in the UI where elements of the game like the "pulse" effect, background images (sprites) and so on can be disabled as a way of testing performance. Live DOM stats are also displayed. The game uses hundreds of DIV elements.
Side note: The base explosion/death sequence flashes the screen red by design, but it could be that the whole screen is also being repainted during the flash as well.
You can also try it with the debug options enabled via profile=1.
The full write-up on the game itself, history etc., is on my personal site (from 2012).
I started investigating performance in this game after doing a round on the redesigned Flickr Home page in May 2013, which used a good amount of parallax scrolling effects - see Adventures in Jank Busting: Parallax, performance, and the new Flickr Home Page for more.
Despite having a collection of developer tools called Chrome DevTools integrated right into the browser, Chrome still lacks key functionalities. For instance, state management-focused front-end programming might make it challenging to gauge site performance and simple to troubleshoot.
Read More: pebtechsolutions.com/blog/best-devtools-extensions-for-mo...
"Timeline" view.
A few expensive image decodes and resize operations, but the page is quite smooth overall in terms of scroll performance.
I noticed in Safari that I was getting some pretty severe jank (lag) when firing the machine gun in this web-based game prototype, so I started digging.
It wasn't DOM manipulation, className changes or node removal - turned out it was cloned audio resources being freed from memory after playing, and garbage allocation interrupting the game animation pretty severely in Safari (and Webkit nightly) every so often.
Using standard HTML5 audio, you can't do "multi-shot" - each audio object is single-fire and monophonic. Thus when a machine gun fires, SM2 clones the Audio() instance to make a new object that can play independently, with its own timeline and events.
These screenshots are from Chrome DevTools. Interestingly, Chrome was less-affected by this issue despite having notably-larger GC events as well. I'm not sure how long Safari was taking, but it felt like up to 1 second in Safari 6 in some cases.
In the first case, the GC event is for 9.3 MB and takes 25 msec - blowing the 16 msec / 60fps ideal framerate budget.
In the case where audio is muted and inactive, the first GC event to happen is for 3.6 MB and takes 1.9 msec.
As Mythbusters' Adam Savage would say, "Well there's your problem!"
The solution to this is to simply create a pool of sound objects and rotate through them, if the play() rate is such that the sounds would need to overlap. While this will consume more memory (if not shared/reused by the browser) up front, it should prevent a lot of dynamic memory allocation and resulting expensive garbage collection events.
In fact, most sounds (like machine gun fire) are short enough that multi-shot is not even needed.
Maybe those guys were right about writing JavaScript more like C++ after all, static and all that.
This is a personal side/weekend project: a work-in-progress remake of an old PC game I've been creating in-browser, and a general exercise in OO-JS design and performance testing.
This is a screenshot from an old WinXP laptop, also a good testing candidate: It's a 2006-era Fujitsu notebook, 1.2 GHz CPU, 512 MB of RAM and an Intel 915-series GMA graphics card.
Garbage Collection can interrupt your script execution, meaning jank and/or dropped frames and reduced performance in your web work - so it's helpful to reduce the amount of "garbage" you create in the first place.
In this case, there was an expensive loop within the collisionCheckArray() function with a lot of calls and many iterations and due to inefficient design, it was making a local copy of a {x, y, width, height}-like parameter object on each call so it could be modified without affecting the original object.
The copying resulted in a lot of temporary objects being created, contributing to nearly 20 MB of RAM being used overall before GC (or other de-allocation / memory freeing routines) kicked in and brought the levels back down.
As a quick test, simply shunting the collisionCheckArray() function via return: false; proved that it was one of the big contributors to memory use.
The screenshot above shows the memory graph over time while running the game, before and after the "shunt".
The proper fix involved storing the "extra" collision data on the object being passed into the function, eliminating the cloning and just passing by reference - which in retrospect, is now pretty obvious.
More performance troubleshooting with Chrome DevTools. At this point, I've either found a bug or I'm doing something wrong; I suspect the latter.
Using the Timeline, I record gameplay and fire 64 rounds of the machine gun. This results in JS object and DOM node creation. Once those objects die, they should clean up and remove both DOM nodes and JS references to the nodes. The expected result is that the next GC event should free resources used by the nodes and JS objects.
What is observed is somewhat different: There is a linear growth in the DOM Node Count graph, with no drop even after a forced GC event.
However in the Heap snapshot view, you will note that the Document DOM tree represents a total of 904 nodes, only two more than when I began recording (and before adding 64 nodes via the machine gun firing.) Additionally, if nodes were indeed leaking, I would expect to see those under "Detached DOM tree" entries in the Heap snapshot view - and those are not shown.
It appears there is a disconnect between the DOM Node Count and the Heap snapshot, possibly a bug, and/or I'm doing something wrong.
See also, part 1 (basically, the top screenshot with prior thoughts.)
Some progress on this weird behaviour...
Applying GPU acceleration via transform: translate3d(0,0,0); appears to confuse the DOM Node Count under Chrome DevTools, Timeline → Memory view when you're looking to confirm the effects of garbage collection.
The first staircase shows creation and removal of DOM nodes and JS-DOM references under normal circumstances, followed by garbage collection. Memory and node counts return to their previous values.
When the CSS transform is applied to the newly-created elements, something confuses the DOM Node Count graph and it does not drop the nodes even after GC.
The Heap snapshot tool (bottom screenshot) does not show evidence of disconnected DOM nodes after the GPU case, so this seems like a problem with the DOM Node Count panel itself.
Chrome Canary 32.0.1661.0 on OS X 10.8.5.
Update: This appears not to happen under Chrome on an old Windows XP laptop (w/Intel 915 GMA chipset graphics.)
I've added a test page for the curious.
Lots of repaint (red) areas can be seen here. This was before I started putting blocks like walls, bad guys and so forth on the GPU via transform3d().
Debug options are also shown in the UI where elements of the game like the "pulse" effect, background images (sprites) and so on can be disabled as a way of testing performance. Live DOM stats are also displayed. The game uses hundreds of DIV elements.
You can also try it with the debug options enabled via profile=1.
The full write-up on the game itself, history etc., is on my personal site (from 2012).
Here's more ammo suggesting the behaviour I'm seeing on an OS X machine is perhaps OS and/or hardware-specific.
Test case: Start the game, fire the machine gun (new JS objects and nodes), and wait to confirm that they are properly reclaimed.
In this screenshot, you can see DOM nodes created for machine gun ammunition are garbage collected once things settle down. A forced GC at the end captured a little more.
A simple test page is here.
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
Without 3D transforms enabling GPU-accelerated compositing on this particular laptop (a 15" Retina Macbook Pro), performance takes a hit as the frames are rendered slowly due to expensive repaints during scroll.
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
来自 dl.dropbox.com/u/39519/talks/tooling-q1/index.html
ln.hixie.ch/?start=1037910467&count=1
ln.hixie.ch/?start=1137740632&count=1
software.hixie.ch/utilities/js/live-dom-viewer/
sassymothereffingtextshadow.com/
clausreinke.github.com/js-tools/resources.html
Boilerplate:
github.com/csnover/dojo-boilerplate
Authoring Abstractions:
code.google.com/p/closure-stylesheets/
daringfireball.net/projects/markdown/
github.com/jashkenas/coffee-script/wiki/List-of-languages...
Frameworks, Clientside Stack, Application Architecture:
rmurphey.com/blog/2010/08/11/on-rolling-your-own/
addyosmani.com/resources/toolschart/chart.pdf
zetafleet.com/i/4d75a4efc33d4.png
addyosmani.com/toolsforjqueryapparchitecture/
Iteration Workflow
Iteration Automators:
compass watch
addyosmani.com/blog/autosave-changes-chrome-dev-tools/
Editors and IDEs:
net.tutsplus.com/tutorials/tools-and-tips/sublime-text-2-...
net.tutsplus.com/tutorials/tools-and-tips/essential-textm...
www.jetbrains.com/webstorm/features/
Browser Dev Tools:
code.google.com/chrome/devtools/
benvanik.github.com/WebGL-Inspector/
code.google.com/chrome/mobile/docs/debugging.html
Linting:
code.google.com/closure/utilities/
code.google.com/p/closure-stylesheets/
Testing:
code.google.com/p/js-test-driver/
plus.google.com/113127438179392830442/posts/Z1LpEhfKTqo
code.google.com/chrome/devtools/docs/cpu-profiling.html
gent.ilcore.com/2011/08/finding-memory-leaks.html
code.google.com/chrome/devtools/docs/heap-profiling.html
Build + Optimization:
code.google.com/closure/compiler/
developer.yahoo.com/yui/compressor/
code.google.com/p/htmlcompressor/
Automating the automators:
html5boilerplate.com/docs/Build-script/
github.com/balupton/buildr.npm
Deployment:
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata
ZoomCharts at DevClub.lv: Developing a Javascript SDK
On January 15, 2015, ZoomCharts Co-Founder and CTO Viesturs Zariņš presented at DevClub.lv - a community of Latvian IT specialists that gather monthly and host free talks, presentations, and events to allow the local IT community to share knowledge, network, and communicate. Zariņš discussed the unique challenges faced in developing JavaScript SDK.
Here is a brief overview of his PowerPoint presentation on ZoomCharts, the world’s most interactive data visualization software that will support all your data presentation needs with incredible speed.
What is ZoomCharts?
What defines ZoomCharts advanced data visualization software? It is NOT another HTML5 charts library. It is:
- Interactive
- Fast
- Touch enabled
- Supports big data
A long time ago
DOS 6.2 allowed for:
- 320x240x8bpp
- Direct access to pixels on screen
- Assembler for performance
Today, the Web has finally caught up in the graphics department. Now, we have access to:
- Multiple browsers and rendering technologies
- Multiple resolutions
- Performance that varies by browser and device
Development setup:
- We write in JavaScript
- Commit to GitHub
- Build system in JavaScript
- Debug in Chrome
- Run automated tests
- Like WebStorm (and Vim)
Graphics:
Canvas (fast)
SVG (slow)
WebGL (>50%)
Interactive animations:
Zoom in and out of the graph, drag and drop data, all with your mouse or trackpad.
Graceful degradation:
High FPS (frames per second) lets you scale graphics with low image degradation.
Third party libraries:
- Raphael
- Hammer.js
- Leaflet
- Moment.js
Challenges:
- Responsive design: layouts can shift and look nice on desktop screens vs. not so nice on vertical, mobile screens
- Big screen resolutions: uses devicePixelRatio for sharp rendering, but no hardware acceleration beyond 2048x2048
- Safari compatibility: with 100% CPU, input events are blocked and browser locks up; strange code offers fixes
- HTML on canvas: DOM is slow; basic HTML markup must be parsed and rendered manually; text caching helps
Support:
- Process: TrialSupportBuy
- 1 day issue resolution
- #1 Tell me what I did wrong
- #2 Can you do…
Testing:
- Automated tests on every GIT push
Automatically:
- Compare images
- Record performance
- View errors in console
Interactive testing:
- Next step: record and playback
BrowserStack:
- Interactive mode
- Automated: Selenium API
Debugging:
Chrome Developer tools (F12)
- Debugging
- Profiling
- Timeline
Remote debugging available: developer.chrome.com/devtools/docs/remote-debugging
Future:
- More charts
- Extension API
- Memory allocation tracking
- WebGL
We are looking for statically-typed language:
- Error checking
- Performance
- Superior minification
- Easy to write and read
- Easy to call from JS
Building
Custom build script:
- Compile
- Minify
- Extract documentation
- Embed customer data
Check out ZoomCharts products:
Network Chart
Big network exploration
Explore linked data sets. Highlight relevant data with dynamic filters and visual styles. Incremental data loading. Exploration with focus nodes.
Time Chart
Time navigation and exploration tool
Browse activity logs, select time ranges. Multiple data series and value axes. Switch between time units.
Pie Chart
Amazingly intuitive hierarchical data exploration
Get quick overview of your data and drill down when necessary. All in a single easy to use chart.
Facet Chart
Scrollable bar chart with drill-down
Compare values side by side and provide easy access to the long tail.
ZoomCharts
The world’s most interactive data visualization software
#zoomcharts #interactive #data #interactivedata #datavisualization #interactivedatavisualization #chart #graph #charts #graphs #Javascript #JavascriptSDK #DevClubIV #Latvia #PowerPoint #PowerPointpresentation #fast #bigdata