Adaptive layouts smarter than ever

It can be difficult to keep up with data changes on your chart, and not every change needs a completely new layout. That's why KeyLines 5.10 introduces new adaptive behaviour for layouts, which will help your charts adapt to changes effectively while minimizing unnecessary movement, large gaps and overlaps.

With the fix option set to adaptive and the tidy option set to true, expanding or adding components modifies only the position of necessary items, leaving the existing nodes fixed in relation to others where possible.

You can also set the packing option to adaptive and the consistent option to true when running layouts to adapt the chart when items are removed.

To see this improved behaviour in action, take a look at our Adaptive Layouts demo.

Stretching the capability of sequential

We continue improving the sequential layout to make it even better for visualising your hierarchical data. The latest addition is the new stretch option which allows you to change spacing between levels of nodes in the layout.

See how this affects the sequential layout in our updated Display Hierarchies demo.

Overview window in colours

The overview window is a helpful navigation tool which displays a thumbnail view of the chart with the currently viewed area highlighted. You can now customise its colours using the backColour and borderColour options. And you can finally have the overview window match your slick dark mode chart!

Enhancements

• We've added a new page on Graph Centrality where you can read about different centrality measures that KeyLines uses to identify important features of your network.

Discontinued support

Following our announcement in September 2019 and the direction given by operating system providers, we've discontinued support of the following operating systems:

• Android: Android 5 (Lollipop)
• Apple: iOS 11
• Apple: OS X El Capitan, OS X Sierra
• Linux: Ubuntu 14.04 LTS, Ubuntu 17.10

For a list of supported devices, operating systems and browsers, see Compatibility & Supported Platforms.

Bug Fixes

• Fixed an issue where narrow shape node borders were not always drawn in WebGL mode after a zoom.
• Fixed an issue with handling of false values passed as a colour in chart options.
• Fixed some issues with reliability of sequential layout packing.
• Fixed an issue where transferring of components between combos under certain circumstances caused double movement.
• Fixed an issue where hover events on combos could be missed in WebGL mode.

Automatic sequential layouts

Data often has a distinct structure, such as a hierarchy or sequence, which the sequential layout is perfectly suited for. With sequential's automatic level detection, you can now lay your data out straight away without the need to specify a top node or provide level information. Sequential intelligently puts nodes in levels based on the direction of links in your data.

Sequential does this by default if the top or level options aren't set.

You can still get the precise control of levels in sequential by using the top or level options. To see how the different methods compare, see the Display Hierarchies demo.

New getItemInfoAt() API

It can be tricky to test visual applications, particularly when they're complex. To assist with detecting the presence of items in the chart, you can now use the new getItemInfoAt() method to check what item is present at any given view coordinate.

Bitcoin demo

Cryptocurrency data is complex and often difficult to follow, with transactions being lost in the sea of data.

KeyLines can help to navigate blockchains by resolving entities and highlighting anomalies.

See the Bitcoin Transactions demo to explore what insights can be gained from analysing cryptocurrency using a chart.

Enhancements

• Thanks to all your great feedback, the time bar's area mode is now out of alpha.
• Reporting of drag events in map mode has been improved.
• Sequential now supports rectangle and circle packing.

Bug Fixes

• Fixed an issue where arrowheads were sometimes drawn over selection markers.
• Fixed an issue where locking the chart in map mode could cause unexpected behaviour.
• Fixed an issue where combining a large number of nodes could result in an error.

More time bar styling options

In the last release we introduced the new area mode for the time bar, letting you display your time-stamped data as a continuous area plot. We’ve now added curved selection lines to area plots to highlight important aspects of your data and see how individual items’ activity compares to the overall trend.

As with the histograms, simply call timebar.selection() once you've set type to 'area' to see the evolution of a subset of your data.

To see how these new line charts look, check out our Filter Data Breaches demo.

New packing options

Packing is a key component of layouts, ensuring that unconnected components are placed in just the right place so they don't overlap or appear too far apart.

Now you can customise what type of packing to use on almost all of our layouts, with the circle packing option now also available for the standard, structural, radial and hierarchy layouts.

Enhancements

• Our site demo pages have been updated. You can now switch between demo controls, informative text and source code on the tabs on the right hand side.
• Rectangle packing has been improved for all our layouts, reducing excess space between components.

Bug Fixes

• Fixed an issue where certain invalid property inputs sometimes caused the chart to enter a broken state.
• Fixed an issue where the drag-over event would sometimes not fire correctly.
• Fixed an issue with the consistent option not always being applied during chart.expand().
• Fixed an issue where loading some data types could cause the chart to become unresponsive.
• Fixed an issue where certain inputs could cause the time bar to become unresponsive when viewed as an area plot.
• Fixed an issue when exporting the chart would sometimes draw background items incorrectly.
• Fixed an issue where laying out an empty chart could cause it to become unresponsive.

Stacks of time bar improvements

The time bar is a great way to show how your data evolves through time. In KeyLines 5.7 we've added more features to the time bar to give your users more value, and more ways to show your data.

Histogram bars can now be displayed as stacked bars, showing a breakdown of the types of data they contain. Simply include the names of groups in a custom property of items, and then define which property to use with the groups time bar option. This can be really useful if you want to highlight what's changed inside the data, or to focus a user's attention on a subset.

Take a look at the fully-customisable stacked bars in our Customise the Time Bar demo.

Area Plots

In addition to stacked bars, the time bar now features an entirely new way to display data; area plots. By setting the type property to 'area', you can now see your temporal data as a continuous evolution. This is great when you want to see a more qualitative view of how your network changes over time, and can make it easier to spot patterns that would be hidden in an aggregated histogram view.

You can check out the new area plots in our Styling Charts demo.

Enhancements

• The performance of circle packing in organic layout is now faster.
• All our database demos and documentation have been modernised.
• Expand is now more intelligent when placing new nodes.
• The packing in lens layout is now more robust.

Bug fixes

• Fixed an issue where certain level values could cause the sequential layout to behave unexpectedly.
• Fixed an issue with sequential layout where links could be drawn incorrectly in some circumstances.
• Fixed an issue where truncated labels could cause unexpected results in the structural layout.
• Fixed some issues where certain emojis could be drawn incorrectly.
• Fixed an issue where invalid data could cause a time bar error.
• Fixed an issue where spacing was sometimes irregular in sequential layouts.
• Fixed an occasional performance issue in WebGL.
• Fixed an issue where some minifier settings could conflict with Leaflet.

Accelerated organic layout

We are always striving to improve KeyLines and make it as quick and efficient as possible. The organic layout is now even faster, with typical performance increases between 2 and 5 times. For some networks this can be even greater, with certain benchmarked networks over 100 times faster than before.

Organic is ideal for getting a clear and attractive layout for large, complex networks in record time, and we recommend using it in place of the standard layout.

Enhancements to sequential layout

We are happy to announce that the sequential layout is officially out of beta development and is now an established part of the KeyLines toolkit.

Sequential has been significantly enhanced, and you can now use it on nodes with incomplete or missing level data by simply defining a top node, just like the hierarchy layout. Sequential will then intelligently place nodes on appropriate levels based on their connected items.

Take a look at our Layouts demo to see how easy using sequential is.

Prevent dragging of links

Working out the right behaviour for your chart can be tricky. The new drag option allows you to customise more precisely how your users interact with the chart, ignoring links when you drag and using hand or pointer mode to control how click events work.

This feature is currently in alpha and we're keen to hear any feedback you have on how we can improve and enhance it.

TypeScript out of alpha

TypeScript continues to grow in popularity, and we're now using it in-house to write KeyLines. We're pleased to announce our TypeScript definitions for the KeyLines API are now out of alpha. If you're using TypeScript, you can now benefit from context-sensitive API documentation and intelligent code completion from within your IDE.

Check out the type definitions in the latest KeyLines download, or take a look at our TypeScript documentation for more information.

Enhancements

• The KeyLines time bar now also features a removeItem() method, letting you completely remove items from the time bar.
• Sequential now has a smaller spacing, making it more compact.
• We've improved the way organic layout arranges multiple components when the packing option is set to 'rectangle'.
• Even more of our demos have now been updated to modern JavaScript.

Bug fixes

• Fixed various issues with the KeyLines TypeScript definitions file.
• Fixed an occasional error when using WebGL with very large datasets.
• Fixed an issue where link ends might not be drawn at some zoom levels.
• Validation of expand is now more robust, fixing an occasional issue for some label values.
• Fixed an issue where transfer could result in combos being left in a broken state.
• Fixed an issue where locking the chart could cause an infinite loop.

Labels along links

Densely connected charts with lots of links can often feel crowded and cluttered. With the new inline link style option you can align labels along the direction of the link, making them look cleaner and fit better into the view.

Take a look at our Style Links demo to find out more.

New: Integrate with Azure Cosmos

KeyLines works seamlessly with all database technologies.

To show this, we've added a new Azure Cosmos DB demo, so you can see just how simple it is to integrate with Microsoft's Azure Platform.

To try out Azure Cosmos DB with KeyLines, check out the Integrate with Cosmos demo.

New: Styling Charts demo

It's often hard to decide what your chart should look and feel like. To give you some inspiration we've added a new demo showing just a few of the different themes that you can create with KeyLines.

To see the variety of views you can create with KeyLines, check out the Styling Charts Demo.

Enhancements

• Thanks to all your great feedback, gradients along links are now out of beta.
• More of our demos have now been updated to modern JavaScript.
• We've updated some of our Basics Documentation to help you get to grips with KeyLines.
• Link flow is now stable and ready for production.
• Various improvements to the behaviour of layouts:
  • Higher values for the tightness property are now tighter on the standard layout.
  • Organic layout recentring has been improved.

Known Issues

Be aware that emojis on inline labels do not draw correctly to Canvas on Chrome in MacOS. This issue has been raised with and confirmed by Google, and we will provide an update when it is resolved.

Bug fixes

• Fixed an issue where long press touch events could lock chart items on some OS.
• Fixed an issue where panning the chart background was prevented by watermark images.
• Fixed an issue with invalid geo positions causing unexpected behaviour.
• Multiple minor enhancements to data validation.
• Fixed an issue where the consistent layout option could produce unexpected results.
• Fixed an issue with absolute positions when running arrange.

Smarter styling

KeyLines 5.4 makes it easier for you to to modify your chart and reduce clutter, with new features like styling that adapts to the zoom level and animated flows on links.

Adaptive styling

When viewing large, densely-connected graphs some items can start to dominate the visual aesthetics, while others are rendered almost invisible. This can make graphs unclear and harder to read. The new adaptive styling option allows KeyLines to dynamically enhance the chart's aesthetics, adjusting how nodes and links are drawn to suit the zoom level, and fading out labels.

This gives large charts a much cleaner and clutter-free appearance when at low zoom levels.

See how adaptive styling can help clean up clutter from a chart in our Visualising Big Data demo.

Flow on Links

It's often difficult to convey traffic around networks. Now you can add an animated flow to links to show movement around your graph.

The new flow functionality (currently in alpha) can be combined with all our other link styles to give you full control.

Check out the Link Styles demo and our API reference for flow on links to learn more.

Organic layout stable and ready for production

We'd like to thank you for all your feedback, and are delighted to announce that the organic layout (now in beta) is now stable and ready for production. This means that the behaviour will be consistent in the future and you can use it in your shipped products.

There are now more options to choose from too, including tightness, consistent and packing, allowing customisation just like our other layouts.

Enhancements

• KeyLines is now fully supported when used in a shadow DOM. This means that KeyLines is now more compatible with Web Components and related tools like Polymer.
• There's a new Layout Basics page to help you discover the various options available with KeyLines.
• Donuts in charts with dark backgrounds now have better fade in and out animations.
• Many of our demos have been updated to more modern JavaScript syntax.

Bug fixes

• The Leaflet version is now only checked if you use KeyLines in map mode, rather than during KeyLines.create().
• Fixed an issue with halos occasionally disappearing after combo operations.
• Fixed an issue where exporting a hidden chart could result in a blank image.
• Fixed an issue with the Vue component not correctly handling chart options.

KeyLines streamlined

We know that performance is always an important factor when you're building an app. To help you speed things up, we've made significant improvements to our WebGL rendering performance, with our benchmarks now delivering a 50% increase in frames per second compared to previous releases.

We've also added new options for finer control over KeyLines elements' creation, modification and removal, giving you better control over resources and simplifying your code.

Full lifecycle management

In KeyLines 5.3 we've added a new way to create KeyLines elements by specifying their parent container. These elements are much more configurable in terms of their lifecycle; you can now call chart.destroy() or timebar.destroy() on an element to completely remove it from the page, freeing up any associated resources. This allows you to remove KeyLines assets quickly and cleanly from your app.

Elements created using this method can now also be manipulated using the new chart.setContainer() and timebar.setContainer() APIs. You can use these to move charts and time bars around much more easily and even hide them from the page to be recalled later. This allows you to re-assign resources when, for example, switching between tabs in a single page application.

Charts created this way also automatically resize to fit their parent containers, making things like fullscreen mode simpler and removing the need for complex custom code for resizing.

For more information on resizing, see Resizing components.

Vue tutorial

As promised in the previous release, we have updated our Vue tutorial to align it with modern standards and practices. It now has all the great features, advice and helpful content of our Angular, React and plain JavaScript tutorials. The Vue component has also been revised to align with improvements to the Vue framework.

Enhancements

Thanks to those of you who have tried out organic layout during its alpha release. We’ve listened to your feedback and have updated the layout to give it a tighter arrangement by default. There’s also a new tightness option to give you more control over node spacing.

• Rendering performance is now 50% faster.
• Lens layout is now better at handling mixtures of node sizes, as are combo arrangements.
• New destroy() and setContainer() APIs for manipulating and destroying elements.
• Updated the Vue component to be more robust and up-to-date.
• Font icons can now be drawn in glyphs in bubbles.

Deprecations

We recommend using the new container approach to creating KeyLines elements, and have deprecated the old method (setSize() and using the 'element' property in KeyLines.create()). The new approach gives you automatic resizing and much greater control over resource management, but we’ll continue to support the older methods for backwards compatibility. For the full list, see Deprecations.

Bug fixes

• Fixed an issue with animateProperties sometimes not drawing halos.
• Fixed an issue where the tweak layout wouldn’t always take node sizes into account.
• Item positions remain fixed when opening or closing hidden combos.
• Fixed an issue where charts were sometimes not created when using Vue routing.
• Fixed an issue with watermarks sometimes not drawing correctly.
• Fixed an issue where data could in some circumstances be mutated by merge and expand.
• Fixed an issue where panning the chart could cause some links inside nested combos to briefly disappear.

Combos out of beta

After releasing some big combos enhancements in 5.1, we are happy to announce that the combos feature is officially out of beta development and is now an established part of the KeyLines toolkit.

In this release, we have also incorporated feedback from several customers to provide denser node arrangements inside combos, ensuring that open combos do not dominate too much of your chart real estate. Several other tweaks and fixes to outstanding combos issues are also included.

If you haven’t checked out combos before, our Combos: Basic and Network Alerts demos are good places to start.

New tutorials

To help developers hit the ground running with KeyLines, we have rewritten our quick start guides for React, Angular and plain JavaScript. The new guides give a comprehensive overview of how to get your first KeyLines chart up and running with your favourite JavaScript framework. The guides also include a number of best practice recommendations for each framework, and we have updated our popular React and Angular components as well (See React and Angular components below for a full list of component changes).

Check out the updated tutorials by clicking on the icons above (and don’t worry Vue fans, your updated guide is coming soon).

Enhancements

• We’ve improved the arrangement of structurally similar nodes in our structural layout to avoid overlapping labels.
• Performance when selecting nodes or switching between dragging modes has been improved.

React and Angular components

As always our framework components are there for you to modify as you see fit, but to make them more useful and consistent we've given them an update. If you’re using our React or Angular components, we recommend you upgrade to the latest versions, but you’ll need to be aware of the following changes before you do so.

If you’re using a modified version of the components we recommend you backup your files before merging the new versions into your code.

• Changes to the React component:

  • The component now exports the KeyLines global.
  • The DOM element is now passed to ready() as well as chart.
  • Promise is now passed to KeyLines.promisify to make it compatible with Internet Explorer 11.

• Changes to the Angular component:

  • You can now specify an id for the chart or time bar in the Angular component.

Deprecations

We've added some legacy API calls to our list of Deprecations.

Bug fixes

• Fixed several combos issues.
• Small time bar values are no longer rounded to zero in the presence of much larger values.
• Resolved unexpected behaviour with layouts being affected by enlargement on shape nodes.
• Fixed an issue with emojis being distorted in some browsers.

Combo enhancements

Combos are a great way to organise complex data in a concise way to reveal hidden patterns quickly and easily. We’ve had a huge amount of feedback since their original release and version 5.1 brings some major changes to the ways you can create and use combos. We've also made some big improvements to combo performance.

Most significantly, from KeyLines 5.1 onwards you can define combos in your data when it is loaded into the chart. This means you can bring in data pre-combined, without having to load data first and then combine it afterwards. We accomplish this by allowing you to specify a ‘parent ID’ for any nodes you load or merge into the chart. As well as loading pre-combined datasets, this opens up a number of exciting use cases. For example, you can now populate the contents of combos on demand, by bringing in data from your backend and adding it to existing combos, or even promoting existing nodes in the chart into combos:

For more information, see the Combos documentation.

b Note: Charts created using the new parentId property which are then serialized cannot be loaded in versions of KeyLines older than 5.1.

Default styles

Combos have a complex hierarchical data structure. In previous versions, this made jobs like styling combo links harder than they needed to be. From 5.1 onwards you can specify default styles for combo links, avoiding the need for any complex code. You can also specify default styles for open combos and combo glyph counters. This, coupled with the fact that your combo structure can now be entirely driven by your data model, means that your combo code should be significantly simpler and easier to maintain.

Enhancements

• When using the new parentId method, you can now specify custom IDs for combos.
• We've improved the performance of combos, particularly when creating combos and when using the transfer() function.
• New demos: We've added two new demos to show off the combos functionality. Load Data into Combos provides a simple code example of merging data into combos from a backend using the parentId property. Social Media Analysis showcases the power of combos, allowing you to explore people's relationships based on their underlying social network activity.

Discontinued support

Following our announcement in May 2018 and the direction given by operating system providers, we've discontinued support of the following operating systems:

• Apple: iOS 5, iOS 6, iOS 7, iOS 8, iOS 9, iOS 10
• Apple: OS X Mountain Lion, OS X Mavericks, OS X Yosemite
• Linux: Ubuntu 10.04 LTS, Ubuntu 12.04 LTS
• Microsoft: Windows XP, Windows Vista, Windows 10.1507, Windows 10.1511 (does not affect later versions of Windows 10 - these are still supported)

We will provide Extended Support for:

• Microsoft: Windows 7 SP1
• Microsoft: Windows 8.1

Extended Support means we’ll keep testing and supporting these platforms unless withdrawal of Microsoft's Mainstream Support means we’re unable to do so.

For a list of supported devices, operating systems and browsers, see Compatibility & Supported Platforms.

Bug fixes

• Fixed an issue where link labels could use the wrong font family in canvas mode
• Fixed an issue with DOM resizing when transitioning to or from map mode
• Fixed an issue with merge not respecting link offset inputs
• Fixed an issue where pinch to zoom could cause the graph to move unexpectedly
• For shape nodes, we've fixed issues where:
  • incorrect resizing occurred at different zoom levels
  • combo children were occasionally backgrounded
  • resizing with no colour or image could cause an exception to be thrown
• Fixed an issue where the time bar fit had unexpected behaviour under some circumstances
• HTML5 drag and drop correctly fires the hover event in map mode
• Fixed an issue where in some circumstances images would flicker
• Fixed an issue with drag events not publishing node ids

Next generation KeyLines Geospatial

KeyLines 5.0 lets you map a connected world with better performance and more clarity and insight than ever before. We've completely overhauled our map mode, exposing new capabilities and improving the speed, smoothness and reliability of your geospatial views.

Based on Leaflet 1.3.4, the new map mode features smoother panning and improved reliability across platforms and browsers, particularly on touch devices. We've also exposed more of the underlying Leaflet options, giving you the freedom to use layers and options such as alternative Coordinate Reference Systems (CRS).

Mapping flexibility

With KeyLines 5.0 you can use your own images instead of pointing to a map server. As well as giving you the flexibility to use offline images when you want to, this feature opens the door to a wide range of new and exciting possibilities. You can place nodes and links on any image backdrop - from floorplans and building layouts, to virtual representations of IT infrastructure.

The Leaflet upgrade also means you can integrate KeyLines with a far wider choice of map tile providers and plugins. We've created an integrate with Esri demo to show how you can use Esri's tiles and geospatial services in KeyLines.

New: asynchronous image loading

KeyLines 5.0 now loads its images asynchronously, so you don't need to keep your users waiting while large numbers of images are downloaded from backend servers. Images are loaded into the chart as soon as they're ready.

Enhancements

• KeyLines 5.0 features a new error event which fires when an error occurs inside the callback of another event.
• KeyLines assets (navigation controls, cursor images, etc.) are now embedded directly into KeyLines, so you no longer need to reference the assets folder in your projects.
• Map mode now uses the chart background colour or gradient instead of Leaflet's default colour.
• We've improved the performance of setProperties() in some situations.

Breaking API changes

Like our previous annual major releases, Version 5.0 contains breaking changes. Without them, we couldn't evolve KeyLines and deliver the features you want.

In particular, KeyLines 5.0 makes changes to the way images, including KeyLines assets such as our navigation controls, are loaded. We recommend reading 5.0 Breaking Changes carefully before you install this version.

Deprecations

We've added some legacy API calls to our list of Deprecations.

Bug fixes

• Fixed various issues that could occur when using toDataURL() in map mode.
• Clicks on the chart background no longer raise a selectionchange event when the selection remains unchanged.
• Fixed an issue which could cause an error when loading circularised images.
• Fixed an issue where links with gradients could draw incorrectly if arrowheads are not present.
• Fixed an issue which could cause errors when resizing the screen on downloaded framework demos (React, Angular, Vue).
• Fixed an issue in the lens layout which could cause nodes to overlap.

Breaking Changes

Map mode

• drag-start returns: The drag-start event now always returns a 'hand' type when dragging on the map in map mode, where previously it could return ‘move’ even though nodes cannot be dragged.
• Leaflet version support: Map mode requires Leaflet version 1.3.4, which is included in the KeyLines download. Earlier versions of Leaflet aren't supported, and later versions will trigger console warnings.
• Map tile wrapping: By default, map tiles wrap around the world, so you'll see Asia to the west of America if you zoom out far enough. To restore the previous behaviour, specify noWrap: true in the tiles map options settings.
• toDataURL image exports: If you use chart.toDataURL to export an image of the chart, the width and height parameters are ignored. To get different sized images, use KeyLines.setSize before calling toDataURL, and then reset to the previous size. To mask the underlying transition and let your users know that an export is running in the background, you may want to add a loading "spinner".
• viewchange events: When in map mode, multiple view-change events are now no longer fired during a pan of the map. Instead a single ‘view-change’ event is fired at the end of the drag.

Assets

• Asset images: These are now embedded in KeyLines, so you no longer have to add the KeyLines assets folder to your projects. The 'assets' option in KeyLines.paths() no longer has any effect. To replace the navigation controls with your own custom images, turn off navigation controls and add your own controls as elements in your page. For an example, see the Social Network Analysis demo.
• Missing images: It's no longer possible to overwrite the 'missing images' icon. To display your own icon for missing images, replace them before they're added to KeyLines.
• Cursor support in IE11 and Microsoft Edge: IE11 and Edge don't support embedded cursors. If you hover over a node, the default pointer will show as the mouse icon instead of the KeyLines 'openhand' cursor.

Image loading

Unlike previous versions, KeyLines 5.0 loads images asynchronously, so images are added to the chart as soon as they're available.

Asynchronous functions that load image data into the chart, such as chart.load() and chart.setProperties(), are returned before image loading is complete Their callbacks/promises are resolved once images are loaded. See Asynchronous JavaScript for more details.

Using images from different domains in HTML5 Canvas

In most cases, you couldn't view insecure images from different domains in earlier KeyLines versions due to CORS security restrictions. One exception was images shown in KeyLines Canvas mode. These could be rendered but not exported or cut out into circular shapes.

In KeyLines 5.0 and later, i all insecure images will be marked as missing. This means KeyLines will be consistently clear about which images can be exported. For details of how to make sure all images are secure, see Cross-Origin Images (CORS).

One effect of this is that if you download demos from this site and run them directly from the file system, you'll no longer see any images in the chart. We always recommend serving downloaded demos from a web server instead of the file system.

chart.toDataURL

• Default size: In previous versions, the default size for the image created by chart.toDataURL was 100x100 pixels if no width and height were specified. The default size is now the size of the chart element.
• Callback values: We've removed an undocumented, legacy return value for this function, so you should check to make sure you're using the value returned by the callback. For more information, see Asynchronous JavaScript.
• fit option: The default fit option has changed from 'view' to 'exact'.

chart.setProperties

chart.setProperties() no longer removes properties that are set to null or undefined. If your code previously used 'undefined' to test whether properties existed, you'll now also need to check for values.

chart.setProperties({ id: '1', t: null }, false, function () {
  var item = chart.getItem('1');

  console.log(item.t); // null
  console.log(item.hasOwnProperty('t')); // true
});

Events behaviour

• selection-change chart event: The selection-change chart event no longer incorrectly fires during clicks on the chart background when nothing was previously selected. If you still need to react to a click on the background, use the click event instead.
• 'redraw' event: We've removed an undocumented event of type 'redraw'.

Node shape object property options: 'e' and 'w'

Following our deprecation announcement on 15 January 2018, the following node shape (sh) object property options are no longer available or supported:

• 'e' - east-pointing signpost
• 'w' - west-pointing signpost

If you want to customise node shapes, use font icons. For examples, see the Style Nodes demo.

Link object properties: st and y

Following our deprecation announcement on 15 January 2018, the horizontal links feature is no longer available or supported. As a result, the following link properties have been removed:

• 'st' - sets a horizontal link style
• 'y' - sets the position of the central section of the link along the Y-axis in world coordinates

We've also removed the 'fanLength' chart option, previously used to configure horizontal links.

TypeScript definition updates

We've taken the properties 'glyphs' and 'transition' (used for the 'linkStyle' chart option) out of the 'LinkStyle' interface and moved them to a new interface 'LinkStyleOptions'.

New: more control over glyph positioning

Glyphs on nodes can now be given a radius property to control their distance from the centre of their parent node. This gives you fine-grained control over the look and feel of your nodes, and opens up the possibility of creative node designs such as aligning glyphs with halos.

Take a look at our Style Nodes demo for an example of aligning glyphs with halos.

New: KeyLines.info() API

We've added a new API to help with troubleshooting and support. The KeyLines.info() function will return helpful information about your version and settings, and the environment KeyLines is running in. You can use it to diagnose issues when troubleshooting and when sending background information to [email protected].

Bug fixes

• Fixed an issue where link offsets could be drawn incorrectly in WebGL
• Improved the drawing quality of links joining to large open combos
• Improved robustness of some graph calculations, such as closeness, on very large datasets

Introducing the organic layout (Alpha)

We're excited to present our new organic layout, designed to help untangle complex networks. By spreading the nodes and links apart in a distinctive fan-like pattern, the underlying structure becomes much clearer. It's also fast, offering significant performance improvements over the standard layout, particularly on large datasets.

The layout arranges multiple components in a circular pattern with larger components in the centre. This gives a more natural, organic feel to your data.

To see the new layout for yourself, have a look at our layouts and performance demos. For API Reference details, see chart.layout().

This feature is currently in Alpha and there are some known issues. We'd love to hear what you think, so please send your feedback to us at [email protected].

Time bar: mark times of interest

The time bar histogram helps to explain how events and relationships evolve over time. We've added the ability to mark times or time ranges of interest in a different colour to make them stand out. It's an effective way to highlight unusual activity, such as IT network anomalies, or disputed transactions in this Credit Card Fraud demo.

Font Awesome Version 5 support

We've updated our demos to use the latest Font Awesome 5 icon set. It includes the ability to use font weights to specify different styles: solid, regular and light. For details on how to access the new styles with KeyLines and use different styles in the same chart, see the Font weights and Font Awesome 5 section of the Fonts and Font Icons page.

Bug fixes

• Fixed an issue where wide glyphs would occasionally be aligned incorrectly.
• Improved rendering when calling KeyLines.setSize() with non-integer values.
• Fixed an issue where the font family attribute could be ignored when using multiple font families in WebGL.
• Fixed an issue where the shortestPaths function did not always return all links between the same pairs of nodes.

Organic layout (Alpha) - known issues

• Since the organic layout tends to spread nodes apart to show structure, you may need to modify the zoom limits in KeyLines to fit everything in.
• Currently, the organic layout doesn't take label size into account when positioning nodes, so labels may overlap.
• Currently, the organic layout does not fire intermediate progress events during its calculation.
• Currently, the organic layout doesn't have a tightness option like some other layouts.

New: Colour gradients on links (Beta)

Customising links is a good way to make the connections in your data clearer and more meaningful. In this release we've introduced the ability to add colour gradients to links. As well as creating a striking visual effect, gradients are great for helping users understand flows between nodes, and for highlighting clusters of different types of node even at low zoom levels.

The transition between colours can be sharp instead of gradual. This example uses a two-tone effect to signify the health of an interface between two devices:

For a first look at colour gradients in action, try the Style Links and Impact Analysis demos. For API Reference details, see the c2 link property and linkStyle chart option.

More database demos updated with expand indicators

In recent releases, we've added glyphs to expandable nodes in Integrate with Neo4j demos. It's an effective way to show which nodes have connections that can be brought into the chart dynamically from the back-end database.

The feedback has been hugely positive, so we decided to enhance a further five database demos in the same way. See:

• Integrate with DataStax
• Integrate with JanusGraph
• Integrate with Neptune
• Integrate with OrientDB
• Integrate with Titan

Restyled KeyLines SDK site

You'll notice that we've given this site a makeover. It's part of a wider project to improve the look and feel of all Cambridge Intelligence websites. There are further improvements planned, but we'd love to hear what you think about the changes so far. Contact [email protected].

Enhancements

• The KeyLines Angular component now supports Angular 6. See the Angular documentation and the Angular Integration: Time demo.
• Drawing improvements: the size of borders on nodes is now more consistent at different zoom levels. In WebGL, the borders on bubbles and wide glyphs also appear much smoother.
• Updated demo: we've added emoji examples to the Style Nodes demo.

Bug fixes

• In WebGL, we've fixed issues where:
  • borders on shape nodes could sometimes disappear at certain zoom levels.
  • the contents of shape nodes didn't fit inside their borders correctly.
• Fixed an issue with the toDataURL gradient option which meant the background was missing from exported charts.

New: Integrate with Stardog

We're always keen to demonstrate how easy it is to get KeyLines working with popular database technologies. Our latest demo shows how to integrate with Stardog - the enterprise knowledge graph platform.

Stardog maps source data in its Resource Description Framework (RDF) database to a target of RDF 'triples' on the chart. KeyLines retrieves data using SPARQL queries that match specific triple patterns.

The demo also features expand indicators to make clear which nodes have additional connections associated with them.

Animated donuts

Donuts are great for visualising numeric proportions of data. To draw attention to those donut segments, use animation. You can now use the animateProperties() function to animate the colour and value properties of donuts, allowing you to achieve eye-catching effects, such as mimicking a progress wheel.

To find out more, see the animateProperties API Reference documentation.

Full support for emojis in WebGL

We now provide full support for emojis in KeyLines, removing the restriction that meant they were only available in Canvas mode. This includes support for combined emojis, such as family emojis, and the use of modifiers such as skin tone.

Bug fixes

• Fixed issue where you could only see data loaded in map mode once you'd interacted with the chart.
• Fixed issue preventing you from disabling the time bar dblclick event.
• Properties with names containing underscore characters are now correctly returned on 'd' objects by chart.each.

Search for demos

With more than 80 downloadable KeyLines demos to choose from, finding those that showcase the features you're interested in can take time. Not any more.

We've added the ability to search demos, so it's now much easier to find and download the examples you want. The search 'fuzzy matches' words in demo titles, thumbnail descriptions and keywords.

If you'd prefer to browse through areas of interest, you can still use filters for the most popular demo categories - from styling and layouts to combos and time.

Head to the Demos page to start searching.

Drawing, layering and performance improvements

In response to your feedback on the combos functionality released in KeyLines 4.0, we've improved the way items are drawn and layered. The key changes are:

• the contents of open combos are now correctly obscured by any open combos drawn in front of them
• links not contained within combos are now drawn behind open combos instead of in front of them
• revealed links in combos and their connecting nodes are now drawn in front of any other items in the chart, including open combos
• when any items including open combos are dragged, selected, transferred or resized, they're now drawn in front of most chart items so the focus is clear
• halos and selection borders are now always drawn behind links so they don't obscure arrowheads

To try out these changes, see the Combos demos.

We're also happy to announce general improvements to rendering performance. To measure this, use the Test Performance demo.

Support for future React changes

The React team intend to stop supporting problematic legacy component lifecyles in React 17.

To get ready for this change, we've updated the KeyLines React component to stop using these methods. We've also upgraded the component to support React 16.3.

To get started with KeyLines and React, see the React documentation and the React Integration and React Integration: Time demos.

Enhancements

We've renamed many of the demos to make sure the titles best represent the features they showcase. See the Demos page.

Bug fixes

• Fixed issue where self links disappeared from selected image nodes with borders and loose spacing set.
• Fixed known issues affecting the way open combos are drawn and layered. For details, see Drawing and layering improvements.
• Fixed WebGL rendering issue affecting arcs with large radiuses.

Glyphs align with link direction

Multiple glyphs on links are currently displayed in a row from left to right. Now you have the option for all glyphs in the chart to follow the direction of the link instead. This works well in charts containing crossed links. In this example, it's hard to see which glyphs belong to which link:

The new option makes things much clearer:

To try the new alignment, use the linkStyle chart option, fully documented in the API Reference.

Improved SVG support

We're happy to announce full support for SVGs in Chrome, Firefox, Microsoft Edge and Safari. As long as SVG files have width and height attributes set and don't have foreign object tags, you can use them to enhance your charts just like any other image format.

For more details, see the updated Image Formats documentation.

Neo4j demo updated with expand indicators

The 'double-click/tap to explore' analyst workflow relies on the expand function to bring connections from back-end databases into the chart dynamically. But without clicking/tapping every node, users don't know which nodes are expandable and which aren't.

By adding visual indicators to nodes, it's clear which ones have additional connections associated with them. We've used glyphs to enhance our popular Integrate with Neo4j demo to show you how this works.

Enhancements

• Users can now zoom out further, thanks to a change we've made to the chart's minimum zoom value. See minZoom API Reference documentation.
• WebGL: the overview window is already available in demos rendered in Canvas. It's now supported in WebGL too.
• New demo: Group Links shows how to group multiple links between two nodes into a single link for each direction, or into a single bidirectional link.
• Updated demo: we've made significant improvements to the styling and usability of the Ransomware Attacks demo.

Bug fixes

• Fixed issue to make sure KeyLines fully supports Font Awesome 5.
• Fixed issue that displayed underlined characters when using WebGL and Firefox.
• Fixed WebGL drawing issue affecting charts displayed inside a hidden element.
• Fixed issue where zooming to fit the time bar would throw an error when using old dates.

Support for time periods

The time bar already shows events that occur at a particular instant in time. Now it also shows events that represent a period of time. Exploring how and when connections between nodes start, evolve and end makes it easier to spot trends and identify unusual patterns.

You can try this latest time bar feature for yourself with our new Time Periods demo:

The demo cycles through the changing relationships between entrepreneurs and the companies they’re directors of. You’ll see that time periods don’t need a fixed start and end time: you can choose one or the other or both. In this way, you can support open-ended events.

You’ll find the new TimePeriod object type fully documented in the API Reference.

New: Integrate with Amazon Neptune demo

When Amazon announced the preview of their purpose-built, high-performance Neptune graph database, we were keen to show you how it works with KeyLines.

The new Integrate with Neptune demo supports the Apache TinkerPop3 property graph model queried with Gremlin. The demo also shows how to map visual information to items in the graph database.

Enhancements

• WebGL: we've improved how curved lines are rendered - they're now much smoother at all sizes. If you try the Filter Mapping Data by Time demo, you'll also notice a significant improvement to animation performance.
• Documentation improvement: we’ve rewritten the Time Bar page to help you get started with the time bar more quickly, or make the most of your existing implementation.
• We're happy to announce details of our KeyLines consulting and training services. For more information, see Support.

Bug fixes

• Fixed WebGL issues that meant KeyLines didn't run validity checks after images were fetched using CORS, and didn't fall back to Canvas if a virtual machine was detected.
• Fixed an issue where halos didn't work correctly on selectedNode and selectedLink.

Greater flexibility with glyphs

Glyphs are a great way to enhance nodes and links with additional key attributes. You can now add as many glyphs to a node as you like. Using either compass points or integers, you can also position them exactly where you want.

To learn more, see the Style Nodes demo and Glyphs API Reference documentation.

Enhancements

• The KeyLines Angular component now supports Angular 5. We've updated the examples in the Angular documentation and the Angular Integration: Time demo.
• The KeyLines React component now supports React 16.2 and uses promises. We've updated the examples in the React documentation and the React Integration and React Integration: Time demos.
• The KeyLines AngularJS directive now uses promises. We've updated the examples in the AngularJS Directive 1.x documentation and the AngularJS Integration and AngularJS Integration: Time demos.
• Pings no longer take up halo properties ( ha0-9), so you now have greater flexibility when using halos and pings together. See chart.ping() API Reference documentation.
• We've made performance improvements to the way KeyLines handles connected components. You'll see faster layout times for charts containing large numbers of separate connected components.
• New demo: Use Keyboard Shortcuts shows how you can use KeyLines and HTML events to control KeyLines with keyboard shortcuts.
• Updated demo: Donuts and Email Traffic now includes examples of binding to hover and touchdown events to show legends and colour highlighting on donut segments.
• Updated demo: we've made significant improvements to the styling and usability of the Impact Analysis demo.
• Documentation improvements: we've documented the key concepts behind the combos feature released in KeyLines 4.0. See Combos Concepts. We've also updated the existing Combos documentation with details of how to find items.

Bug fixes

• Fixed an issue where using chart.graph() centrality functions with combos would return items at the underlying level.
• Fixed an issue where running chart.graph().eigenCentrality(), chart.graph().pageRank() or chart.graph().clusters() without an options object would throw an error.
• Fixed an issue which prevented the re-playing of a time bar animation after a previous animation had finished.
• Fixed several WebGL issues to improve the quality of SVG rendering, scrolling performance, line antialiasing and arrowhead sizing.
• Fixed an issue where serializing a chart could record an intermediate ping state.

Enhanced Combos: more insight than ever before

We're delighted to bring you KeyLines 4.0. Featuring groundbreaking new combos functionality, this version lets you minimise chart clutter while providing users with unprecedented insight into complex networks.

Use the brand new combos functionality to create visual groupings for nodes. They can be styled, moved around, opened and closed, and nested together to suit even the most complex and demanding networks. The result provides an innovative way to explore connected data. Users can navigate clearer charts and expose detail on demand at their own pace.

For a detailed overview, see the Combos documentation.

New and updated demos: Combos

We've designed a set of demos to help you get started with the new combos feature:

• Combos: Basic (Updated) - shows open and closed combos, and lets you create nested combos.
• Combos: Advanced (Updated) - shows how to drill down into a complex network and reveal connections.
• Combo Dragging (New) - shows the easiest ways to transfer and arrange nodes and combos.
• Combos: Find Paths (New) - shows how to use graph functions in conjunction with combos.
• Combos: Reveal Links (New) - shows how to expose and examine the links between nodes in different combos.
• Network Alerts (New) - shows how to use combos to drill down into layers of IT network topology.

Enhancements

• We've improved the way standard and structural layouts handle large nodes, and how lens layout deals with thinly dispersed nodes.
• To stop selected nodes being obscured by other items, they are now always drawn on top of unselected nodes.
• chart.each has a new 'items' option that lets you set which items to iterate over when you use combos.
• chart.getItem now returns items inside combos.
• The chart.hide, chart.show and chart.removeItem functions now apply to items inside combos.
• If you call chart.ping on a node that's inside a closed combo, KeyLines will ping the first visible parent combo.
• If you use chart.ping to animate a node or link, the animated effect now appears in front of any shapes on the chart.
• The default hover chart option was too slow, so we've changed it from 1000 to 150 milliseconds.

Donuts feature moves out of Beta

We're happy to announce that the donuts feature is out of Beta development and is now an established part of the KeyLines toolkit.

End of support for IE9 and IE10

Microsoft stopped supporting these older versions back in January 2016. In KeyLines 3.5, we announced our intention to follow their direction. KeyLines support for IE9 and IE10 has now ended.

Breaking API changes

See 4.0 Breaking Changes.

Bug fixes

• Fixed small memory leak associated with lens layout.
• Fixed an issue with chart.clear() that could cause rendering issues in WebGL.
• Fixed Object prototype issues that caused console errors.
• Removed map mode's default 5ms hover value.

Known issue

We're aware of an issue with the way open combos behave when they overlap. Currently, the combo drawn on top does not obscure the items inside the combo behind it.

Breaking Changes

chart.bind('double-click')

In previous versions, double-clicking a combo had no effect. Now, double-clicking a combo toggles between open and closed states by default.

To prevent this behaviour, bind to the double-click event and return true. Note that to preserve the default behaviour of a double-click on the chart background causing a zoom, you should not return true in the case where the background is clicked. For example:

chart.on('double-click', function ({id}) {
  return id !== null; // return false if the background is double-clicked; true otherwise
});

chart.each

We've added an 'items' option to chart.each. It lets you choose which items to iterate over when using combos. The options are:

• 'underlying' - iterates over items that are not combo nodes or combo links (default).
• 'toplevel' - iterates over items, including combos, that are not inside other combos.
• 'all' - iterates over every item.

To maintain existing behaviour, add items: 'toplevel' to the chart.each options object.

chart.filter and chart.foreground

We've deprecated the 'combos' option on chart.filter and chart.foreground and replaced it with the 'items' option.

To maintain existing behaviour, if you're using:

• combos: true, replace it with items: 'underlying'
• combos: false, replace it with items: 'toplevel'

The default option has changed from combos: false, to items: 'underlying'. If you were using the default setting in 3.8 and earlier, you need to explicitly set items: 'toplevel' to avoid a behaviour change.

chart.getItem

chart.getItem now returns items inside combos. Previously, it returned null. To find out whether an item is inside a combo, use chart.combo().find.

chart.hide, chart.removeItem and chart.show

chart.hide, chart.removeItem and chart.show now apply to items inside combos; previously they didn't. To find out whether an item is inside a combo, use chart.combo().find.

chart.layout consistent option

If your current KeyLines version has consistent: true set in chart.layout, you may get a different result the first time you run a layout after upgrading. This is a one-off breaking change: subsequent layouts will be consistent with your first result.

chart.layout('lens'), chart.layout('standard') and chart.layout('structural')

We've improved the following layouts:

• Lens - it now provides a more dense layout in some cases where nodes used to be thinly distributed.
• Standard and structural - they're now better at spacing large items that could sometimes overlap. In structural layout only, we've also improved the way nodes are arranged in individual groups to reduce the chance of them overlapping.

The new layout behaviour improves every use case we support, so there is no option to maintain the existing behaviour.

chart.options(hover)

We've reduced the default hover time in the hover chart option from 1000 to 150 milliseconds. To maintain existing behaviour, call:

chart.options({hover: 1000})

chart.ping

If you call chart.ping on a node inside a closed combo, KeyLines will now ping the first visible parent combo. If you want to maintain existing behaviour and not ping the parent, you must first use chart.combo().find and chart.combo().isCombo to determine whether the node is in a closed combo.

If you use chart.ping to animate a node or link, the animated effect now appears in front of any shapes on the chart. This new ping behaviour improves every use case we support, so there is no option to maintain existing behaviour.

Selected nodes

When users select or drag nodes, they're now always drawn on top of unselected nodes and no longer hidden behind them. This new behaviour improves every use case we support, so there is no option to maintain the existing behaviour.

End of support for IE9 and IE10

Microsoft stopped supporting these older versions back in January 2016. In KeyLines 3.5, we announced our intention to follow their direction. KeyLines support for IE9 and IE10 has now ended.

New sequential layout

The highlight of this release is our new sequential layout. It's designed to display data that contains a clear sequence of distinct levels of nodes. It's ideally suited to represent tiered datasets such as IT infrastructure, or flow sequences such as blockchains.

For more details, see the Sequential Layouts demo and chart.layout() API documentation.

Enhancements

• New demo Integrate with JanusGraph shows how to use KeyLines with this scalable graph database forked from TitanDB.
• Improved styling in Databases demos to give the movie data a more modern look and feel.
• Documentation improvements: it's now much easier to find details of Breaking Changes and Deprecations. We've also published the KeyLines Deprecation Process.

Bug fixes

• Fixed issue with mounting/remounting the Vue component.
• Links are no longer drawn to the tip of the arrowhead so they are not visible behind transparent arrowheads.
• chart.labelPosition now returns correct font size.

Enhancements

• Added ability to add labels and glyphs to the ends of links - see the API Reference and Style Links demo
• Added ability to use ping to animate links - see the API Reference and Ping Items demo
• KeyLines updated to support React 16 - see the React Integration and React Integration: Time demos
• New demo: Animate Link Widths
• Added donuts to the Filter Data Breaches demo
• Reorganised the KeyLines Documentation pages so information is easier to find

Bug fixes

• Can now pass a DOM element when using AngularJS
• chart.expand() now handles hidden nodes correctly

Enhancements

• New Vue component and integration demos
• Added ability to pass an array of ids into chart.zoom options
• Added time bar maxRange option so you can set a zoom out limit
• Included webpack.config and package.json files in framework demos (not for AngularJS)
• New demos: Style Links and Style Nodes

Bug fixes

• Multi-selected links now drag correctly
• Fixed stack overflow error when running layouts on 1000s of single node components
• Fixed chart.animateProperties issues affecting how nodes are drawn and properties set
• Made animation smoother for nodes with borders in WebGL
• Expanded links are no longer hidden when you switch from map mode to network mode
• Fixed issue where a nested combo's hide or foreground status didn't match that of its parent

Enhancements

• Added two new link arrowhead size options: 'large' and 'xlarge'
• Added the ability to pass a DOM element instead of an id to KeyLines.create

Bug fixes

• Updated KeyLines TypeScript definition file so you can pass chart.serialize to timebar.load()
• WebGL now handles overlapping nodes correctly
• Fixed issue with creating a link from a combo
• Fixed issue so radial layout 'top' option supports node ids with multiple characters

The fastest KeyLines yet

Now rendering twice as fast as the previous release, KeyLines 3.5 is all about performance.

We've made improvements across the board to give your end users a lightning-fast user experience, even with large numbers of nodes.

We've also revised our API Reference page so developers can find what they need more quickly and easily. There are new demos and sample code to help you make fast progress. We show you how to combine nodes on maps to reduce clutter, and integrate with ArangoDB.

Performance improvements

Benchmarking KeyLines performance is important to us, and we take care to make sure our charts deliver a great user experience. One important benchmark is how many frames per second KeyLines can deliver when animating large numbers of nodes and links. These large-scale animations stress the system, and a good frame rate tells us that end users will get a smooth, enjoyable chart experience.

In our test environment, KeyLines 3.5 delivers more than twice the frame rate of previous versions when animating a densely-connected network of thousands of nodes. This means you can work with bigger and more complex datasets without worrying about the impact on performance.

Other improvements to performance in this release:

• WebGL is now the default rendering mode, so users will see KeyLines at its best. If WebGL is not available in the user's browser, KeyLines will fall back to Canvas mode.
• We've improved performance of combos, particularly when identifying parent combos of an item.

See improved rendering performance in the Test Performance demo.

Redesigned API Reference documentation

We've redesigned the API Reference to make it easier to use. You can now:

• Filter items in the navigation pane to find what you're looking for more quickly.
• See chart, map and time bar options in separate sections without having to hunt through functions to find them.
• Use our new, clearer layout to pick out key information for items more easily.
• Follow links to demos that showcase how to use specific functions and events.

If you have any feedback on these changes, or suggestions for improvements, we're keen to hear from you. Send feedback

New demo: Combos on Maps

Users often want to remove clutter from maps, particularly when zoomed out. The KeyLines Combo feature is great for this. In the new Combos on Maps demo, we show you how to use combos to group items that are in close proximity, and dynamically change the groupings as the user zooms in or out.

New demo: Integrating with ArangoDB

We’ve added an Integrate with ArangoDB demo that shows how to get ArangoDB databases working with KeyLines. ArangoDB's Foxx microservice framework lets you create V8 JavaScript microservices that run directly within the database, so you can serve up data in exactly the form KeyLines needs.

Features move out of Beta

We're happy to announce that a number of features are out of Beta development. These are now established features of the KeyLines toolkit:

• Graph Engine
• Clusters
• Self links
• Support for Promises

The extend option for the time bar play function is out of Alpha and is now an established feature too.

Advanced notice: end of support for IE9 and 10

This KeyLines release will be the last to support Internet Explorer 9 and 10. We're following Microsoft's direction after they stopped support for these older versions back in January 2016.

Breaking API changes

See 3.5 Breaking Changes.

Bug fixes and enhancements

• TypeScript timebar.range() return is now correctly defined.
• Fixed an issue that could cause an exception when creating large numbers of combos.
• Fixed WebGL varyings issue.
• TypeScript now builds without errors in Angular demos.
• toDataURL images now include background colour.
• Fixed an issue where the hierarchy 'level' option could generate an exception with large datasets.

Breaking Changes

• Links - KeyLines now enforces that the id1 and id2 properties on links cannot be changed once a link has been loaded into the chart. To change the nodes that a link points to, you should remove the link and replace it with a new one.
• Shapes - the ci (cutout circle) property no longer applies to this object type.
• chart.contains() - hidden nodes in shape objects are now returned.
• KeyLines.mode() - 'auto' option now defaults to WebGL (if supported).
• chart.serialize() - we’ve changed the way the items property is serialized for combos when using chart.serialize(). Chart data serialized from an older version of KeyLines will still load correctly in 3.5. If you just use chart.serialize() to save the current chart or to maintain an undo/redo stack, you won’t need to change anything. However, if your code parses the output from chart.serialize() and you use combos, chart.serialize().items will now include items contained in combos. To iterate only over items not contained in combos, use chart.each() instead.

Introducing donuts

Graphs are great for getting a sense of network i structure at a glance, but sometimes you need to convey data i values quickly too. To help, we've created a new donuts feature. Donuts display relative data values as node borders, so charts are enriched with information without becoming too complicated. More details

The rest of this release is about improving the developer experience. If you're new to the SDK, our updated Quick Start guide means you can get KeyLines working and start visualizing data in minutes. New support for TypeScript also lets you take advantage of the time-saving features it offers while you're writing code for KeyLines.

Together with support for Angular and new demos, we hope you'll think that our development effort has been time well spent.

New: Donuts (Beta)

Sometimes you want to show node values as numeric proportions. For example, you might want to know the relative proportions of certain kinds of network traffic handled by a router. Or, if you're investigating fraudulent reviews of shopping experiences, you want to show the ratio of positive reviews a person writes compared with negative ones. It’s hard to represent these clearly with labels or glyphs, so we’ve developed donuts.

Donuts are circular node borders divided into segments that add up to 360 degrees. They work just like pie charts.

Donuts are entirely customisable - you can select how many segments you want, choose colour palettes, set segment and border widths, add tooltips and more.

We’ve created demos to help you get started with donuts. See:

• Show Data in a Donut
• Donuts and Email Traffic

New: Support for TypeScript (Alpha)

We know many of you use TypeScript code, so we've added support for this. It means you can take advantage of key features including strong typing, context docs and IntelliSense.

TypeScript supports type annotations that let you record contracts of functions and variables in a lightweight way. You can use existing JavaScript code, other JavaScript libraries, and call TypeScript code from JavaScript.

KeyLines comes with detailed type definitions that you can include in your TypeScript project which makes coding in TypeScript much easier. For more information, see TypeScript (Alpha).

New: Support for Angular

We're pleased to announce support for the latest Angular platform with our Angular component.

Angular is the official name of the latest web application platform from the team that built AngularJS 1.x. The two platforms are not the same - Angular is a complete rewrite of AngularJS.

We've also created a new demo to help get you up to speed with Angular. See:

• Angular Integration: Time

We still support AngularJS 1.x with our AngularJS directive, in fact we've improved the current documentation and demos. See:

• AngularJS 1.x
• AngularJS Integration
• ngularJS Integration: Time

Updated Quick Start guide and other doc improvements

We want to make the KeyLines evaluation experience as simple as possible. This includes making sure new users can get up and running quickly and easily, which is why we've rewritten our Quick Start guide.

We've made other documentation improvements by adding guidelines on:

• how to improve accessibility in your KeyLines application
• how to upgrade KeyLines
• using right-to-left text

Demo changes

New

• Show Data in a Donut
• Donuts and Email Traffic
• Angular Integration: Time

Updated

• Test Performance - there's now an option to show/hide labels
• AngularJS Integration - improved demo description
• AngularJS Integration: Time - improved demo description
• React Integration - improved demo description
• React Integration: Time - improved demo description
• Integrate with Neo4j - updated to use Neo4j 3.1.1
• Neo4j Integration: Time - updated to use Neo4j 3.1.1
• Layouts - runs fit and tightness separately to show the effects more clearly

API changes

• New Donuts (Beta) object
• chart.unbind: you can now unbind all handlers from specified events or from all events

Bug fixes and enhancements

• Fixed WebGL flattened font icon issue
• RTL text in WebGL supports newline characters
• Characters displayed correctly when nodes are moved using the keyboard in WebGL
• Added blacklist support of Google SwiftShader rendering to WebGL
• Map-Based Networks demo no longer crashes in Firefox
• Maps dragged out of bounds bounce back correctly
• Map touch functions work on Windows touch devices in Chrome
• Fixed unexpected grey background during transition to map mode
• Touch functions on Windows touch devices in Chrome no longer throw MSGesture errors
• KeyLines now supplies subwidget ids for glyphs displayed in a row
• Double-clicking on right mouse button no longer zooms in on Firefox
• Layouts no longer straighten self links
• Standard layout now fixes two-node components properly

Self-Linking Nodes

We’ve responded to user requests and developed a new Beta feature: self-linking nodes. More details

We’re also happy to announce that our high-performing WebGL rendering engine is out of Beta and is now an established feature of KeyLines. More details

You'll notice that we've revamped the Demo page to make navigation easier. Amongst the new demos we've added, there's one showing you how to use a REST API to integrate with Elasticsearch.

We've made improvements to existing established features too, including clusters, font icons and the time bar. More details

New: Self-linking nodes (Beta)

If you're analysing an IT network or cyber threat, it's not unusual to find nodes that send network traffic to themselves. For example, an email may be copied to a sender's address. But how do you represent this behaviour on a chart? The answer is by using self-linking nodes. These are nodes with outgoing single or multiple links that loop back to themselves.

There’s also a demo to showcase self-linking nodes. See the Nodes with Self Links demo.

WebGL improvements (out of Beta)

WebGL is no longer in Beta and is now an established feature of KeyLines. Since the last release we’ve made the following key changes:

• Added support for right-to-left (RTL) writing systems such as Arabic and Hebrew. We’ve also added a demo to show how this works. See the Multiple Languages demo.
• Improved curved lines. Arcs in WebGL are made up of a fixed number of segments. Previously, these could look jagged when you zoomed in, but they’re now much smoother.
• General improvements to stability and performance.

New: Elasticsearch Demo

We’ve added a new Integrate with Elasticsearch demo that shows how to get Elasticsearch data working with KeyLines.

You can use REST queries to retrieve data and let users explore complex networks in large databases. The demo also shows how to map visual information to the items in the graph database. To get started, view the source code and then download it.

For more information, see our web article Visualizing the Elasticsearch Graph API with KeyLines

Font Icon position improvements (out of Beta)

We’ve improved the way selected font icons are displayed. When you select a regular icon, KeyLines adjusts the width and height so it fits inside the selection boundary. The same now applies to font icons, so font characters can no longer overlap the boundary.

If icons still aren’t positioned exactly as you’d like, use the new imageAlignment chart option to make further tweaks.

Lens Layout includes the tightness option (out of Beta)

By default, the tightness option now applies to the Lens Layout. Previously, applying the layout would give you a fish eye view of the chart, and some nodes would be spread far apart across the chart. The Chart layout tightness option automatically positions the nodes closer together.

To try out Lens Layout tightness for yourself, see the Layouts demo.

React component rewritten

Many React users prefer ES6/JSX, so we’ve rewritten the React component to support ES6 classes.

We’ve also updated the React component to support the time bar. There's a new React demo to show how you can filter chart items by time. See React Integration: Time

The react-keylines.js file in the demo source code also contains an example of how to use ES6 class syntax.

New: Support for Promises ES6 (Beta)

To comply with the ES6 version of JavaScript, we’ve added a KeyLines.promisify() function that lets you use promises instead of callbacks. A promise represents the result of an async function before that result is known.

There’s also a demo that shows how you can organise your code to support promises. See Promises.

Cluster discovery is now deterministic

You can now choose whether you want your results to be the same or different every time you run a cluster. To do this, in the Graph clusters function, use the consistent option.

Time bar improvements

Choose a time bar font

You can now use a fontFamily option to specify which font to use in the time bar, just as you can already for main chart objects.

Set the time bar font size

If you change the height of your time bar, it makes sense to change the relative size of the time bar font too. We’ve added a fontSize option that lets you do this.

Support for multiple font icon families

You can now use the 'ff' option on nodes to include icons from different font families on the same chart. The 'iconFontFamily' chart option sets the global family. The 'ff' node option lets you overwrite this and use a different font family for a specific icon. It works the same way as the existing 'ff' font option.

It can take a long time to load Font Icons from multiple Font Families. To improve performance, we recommend that you create a single, custom Font Family containing the icons you want to use. See What's the best way to load Multiple Font Icons?

Control alignment of font icons and images

Font icons and images are not always positioned accurately inside nodes and glyphs. You can now adjust their position and scale using the new chart ‘imageAlignment’ option. We’ve also added a demo to showcase how it works. See Align Images.

Demo page improvements

We've added filters, so it's easier to find the demos you’re interested in.

• If you're evaluating KeyLines, start with the featured demos, case studies and fundamentals.
• If you're an existing user, see What's New?, or find demos that show the features or types of analysis you’re interested in. We've also made the demo names and descriptions clearer, so you can identify at first glance which demos showcase the features you want to include in your application.

Demo changes

New

• Nodes with Self Links
• Integrate with Elastic
• React Integration: Time
• Multiple Languages
• Promises
• Align Images

Updated

• Animate Items - now demonstrates how font icons can be animated too
• Integrate with Titan - supports Titan 1.x and TinkerPop 3.x
• React Integration - supports ES6
• Font Icons - supports the imageAlignment function
• Clusters - supports the tightness function
• Customise the Time Bar - lets you change the time bar font family and size

Breaking API changes

See 3.3 Breaking Changes.

API changes

• New Font Icons iconFontFamily option
• New chart imageAlignment option
• New KeyLines.promisify() function
• Time bar:
  • New fontSize option
  • New fontFamily option
• These have moved out of Beta and are now established functions in KeyLines:
  • graph().eigenCentrality()
  • graph().pageRank()
  • graph().clusters()

Bug fixes and enhancements

• WebGL text rendering bug fixed by the Firefox team in Firefox 49.0.2.
• Links rendered correctly using WebGL in Chrome with Radeon 370m Graphics Card.
• Fixed misleading time bar decade labelling.
• The WebGL switch works correctly in demos.
• Combos no longer inherit their visible status from the first node.
• Fixed issue where histogram bars extended past the time bar range.
• CreateLink callback now returns null if the link isn't created
• Nodes in the Neo4j demo no longer move to the other side of the chart.
• KeyLines downloads won’t serve expired keylines.js.
• Layouts in the Titan demo work correctly.
• Right hand demo panel is no longer broken in Chrome 55.

Breaking Changes

• Time bar: removed longDays and shortDays options.

Better ways to work with large datasets

In this release, we’ve made working with larger datasets quicker and easier. You’ll see improvements to the way filtering, expanding and layouts work, and for the first time be able to run graph calculations without visualisations. We’ve also added a demo on how to integrate with vast datasets in DataStax Enterprise Graph, and upgraded WebGL from Alpha to Beta status.

Highlights include:

• Better filtering
• Greater flexibility and control over layouts
• Flexible graph functions without graph rendering
• New time bar option to limit zoom level
• Beta version of WebGL
• New DataStax Integration Demo
• Withdrawal of support for Flash
• Demo changes
• API changes
• Bug fixes and enhancements

Better filtering

We’ve made it much easier to use combos with filters. You can use the new filter option to apply filters to items inside combos. If every item in a combo is filtered out, that combo won’t be displayed. This means you’re only ever looking at the items and combos you’re interested in. It saves you having to write custom combo filter code to handle this.

To improve filtering further, we’ve added a filter condition to the expand function. When you expand an item, your existing filters are applied to the new nodes and links added to the chart.

Greater flexibility and control over layouts

If you’re analysing a chart with lots of items, you don’t want node positions to shift unexpectedly when you change layout or add items. We’ve added an option to retain the position of existing nodes whenever you:

• re-apply a standard, structural or lens layout
• expand an item to add new data to the chart

We’ve improved the default hierarchy layout. Higher-level node structures are now stretched, fully exposed and much easier to read. This is useful when you’re analysing large, flat hierarchical data that can produce long, narrow charts with links and structures that are difficult to see. To revert from the default layout to the previous style, use the flatten option.

Previously, the expand function displayed new items on the chart using the standard layout. This wasn’t ideal if the rest of your chart used a different layout.

We’ve updated this function so you can choose a layout style to match the rest of your chart: standard, hierarchy, radial or tweak.

Want to see how it works? Try the new Incremental Layout Demo

Flexible graph functions without graph rendering (Beta)

In previous releases, KeyLines had to render a graph before you could start analysing the data. This was okay for small datasets, but not for larger ones that took much longer to render.

We’ve fixed this in 3.2 by creating a separate Graph Engine to perform analysis. You can now run graph calculations on larger datasets without having to wait for charts to display fully. You can also:

• run the Graph Engine on a different server using Node.js
• filter the dataset to display only the items you need to analyse

For more information, see the Graph Engine Documentation

The Graph Engine is in Beta development. Your feedback will help shape the future of this feature, so we’d love to hear your thoughts. Email [email protected]

DataStax Integration Demo

We’ve added a new DataStax Integration Demo to show you how to get DataStax Enterprise (DSE) Graph databases working with KeyLines. You can use Gremlin queries to retrieve data, letting users explore highly complex relationships in vast datasets. The demo also shows how to map visual information to the items in the graph database. To get started, view the source code and then download it.

For more information, see our web article Visualising the DataStax Enterprise Graph

New time bar option to limit zoom level

The time bar lets users zoom into an ever decreasing date and time interval. However, if your time data is constrained to a particular minimum level such as a day, zooming beyond that level may not be useful. A new time bar option, minScale, lets users limit their zoom level.

Note: minScale replaces the minRange option, which has been deprecated. You can still use minRange, but we recommend using minScale instead.

WebGL moves to Beta

Thanks to your feedback we’ve continued to make significant improvements to WebGL. We’re happy to announce that it’s now moved to Beta. In this release we’ve focused on rendering quality to make sure there’s better consistency with the charts rendered in Canvas. Key improvements include:

• the appearance of dotted and dashed lines
• the clarity of text and images so they’re sharp at any zoom level

For more information, see the WebGL Documentation

Removed Flash support

Earlier this year we announced plans to end Flash support, and we’ve removed it from this release. If you need to continue supporting Flash, email [email protected]

Demo changes

• DataStax Integration for more details see the earlier section
• Undo/ Redo - learn how to add an unlimited undo/redo stack to your application
• Incremental Layout - display expanded items in the best position available while maintaining the position of the existing network
• Neo4j Integration
• OrientDB Integration
• Time Bar: Basics
• Ransomware Tracker (filter and combos) - change to the source code
• Time Bar: Fetch & Merge (filter) - change to the source code
• Neo4j and Time Bar

API changes

• Expand has two additional options, layout and filter:
  • layout specifies the layout of newly returned items
  • filter applies filtering constraints to newly returned items
• Layout has new consistent and flatten options:
  • consistent retains node positions between similar layouts
  • flatten controls how hierarchy layouts are displayed
• The new minScale time bar option lets you limit the zoom level
• Filters have new combo and updateGlyph options:
  • combos are used to filter the contents of the combo
  • updateGlyph updates the text of the combo’s glyph to show the number of visible items inside the combo node
• You can use the Graph Engine and the visual KeyLines chart separately (getGraphEngine, graph.clear & graph.load)

Deprecations

• The minRange Time bar option has been deprecated. We recommend using minScale instead.

Bug fixes and enhancements

• Background correctly displays RTL text (Canvas)
• Better exception text when setting an invalid link
• Standard layout now restores large charts successfully after radial layout
• Able to navigate and pan the dependencies demo
• Sliders on the time bar are easier to use on touch devices
• Can drag the time bar by the major and minor scales
• Improved appearance of WebGL text, icons and nodes
• Better exception text for WebGL when the number of unique text characters are exceeded
• Combo link remains deleted
• Combo in map mode applies the 'e' style object properly
• Tweak layout now works correctly when nodes are stacked and have the 'e' size set

Greater Control and React

Introducing KeyLines 3.1 – built to give you greater control, more flexibility and a faster developer experience.

Highlights include:

• An improved hierarchy layout
• New glyph resizing controls
• Auto-ellipsis of long labels
• High-definition assets for your charts
• Integration with React.

br

As always, we would love your input for our future releases. Make your voice heard! Send thoughts and suggestions to [email protected].

Adding controls to the hierarchy layout

Many datasets include some kind of hierarchy or dependency. In this release, we have added the ability to override the automatic layout so you can place a node in a specific vertical layer. This means you can force nodes with shared attributes into layers, flowing from top to bottom to give a clearer presentation:

See our new Hierarchies demo for more details.

Display enhancements

Other enhancements in this release are designed to help you build clearer, easier to use applications:

• Labels: A new ‘text centre’ option allows you to override the automatic positioning of labels below nodes.
• Glyphs: KeyLines’ glyph sizes are now configurable – so the most important ones can be appropriately sized.
• Auto-ellipsis: We’ve made it simpler for you to automatically truncate long labels in a clean and predictable way.

Important: Changes to font loading

This release contains some significant changes to the way KeyLines deals with loading fonts.

If you use Font Icons in a production environment you will need to make some changes to your code before deploying this version of KeyLines.

For reasons of performance, simplicity and compatibility KeyLines now defers to an external font loader if required. Full information on the changes and a migration guide is available here.

Contact us if you need more information or clarification.

Get started faster with React

We are delighted to announce our new documentation to help you integrate KeyLines into your React app. A new demo and helpful notes will get you started.

Our React integration is currently in Alpha release. This means we need your feedback before we recommend using it in production. Send our support team your thoughts.

Note: KeyLines is compatible with most JavaScript frameworks, so you’re welcome to use whichever you prefer. We don’t prescribe or prefer any of them! If there’s an integration you would like to see us work on next, just let us know.

An update on WebGL

Thank you for all of your comments and suggestions on our new WebGL functionality. To respond to all of your feedback, we are going to keep it in Alpha stage for a little longer – so we recommend you do not use it in production environments yet.

We will update you when WebGL moves into Beta stage.

Other Enhancements

Retina-ready resources

More and more of your users are adopting 4k monitors and retina screens. To give them the best experience possible, we have released our fixed assets in beautiful better-than-HD resolution.

New Combos demo

You asked us for more demos to help you make better use of Combos. So our new Ransomware demo lets you explore the spread of ransomware over time and regions, showing how to use KeyLines combos with the time bar component.

New license mechanisms

This release includes some changes ‘under the hood’ that will mean our Proof of Concept customers no longer need to replace their KeyLines files each month. This will reduce interruption to your projects and maintenance overhead.

End of Flash Support

We contacted all customers some time ago to warn you of our plans to end support for our Flash component. This release will be the last to support Flash.

By dropping Flash, we will be able to dedicate more time to better and more modern technologies that your users prefer – including WebGL.

We do have a long-term support option in place for any customers who need to continue supporting Flash, but you must let us know. Contact our support team with your requirements.

Breaking API changes

See 3.1 Breaking Changes.

API changes

• The 'tc' property (text centre) now applies to all nodes, not just shapes
• Glyphs have a new 'e' property specifying their enlargement
• chart.expand has a new 'straighten' option to control whether it straightens links
• The hierarchy and radial layouts now have a 'level' option to control which level nodes are placed in
• chart.options has a new 'truncateLabels' setting that controls how item labels are truncated

Bug fixes and improvements

• Fixed the type parameter of the time bar 'play' event, which was sometimes incorrect
• Corrected the triggering of time bar start events when dragging the sliders
• Stopped Chrome v50 and later generating lots of WebGL warning messages on the developer console
• Fixed an error dragging the time bar sliders with no data loaded
• Made KeyLines map mode respect disabling of double-click zoom on the Leaflet map control
• Fixed a problem which stopped chart.merge adjusting link offsets correctly
• Fixed the extents used by toDataURL when the 'fit' option was 'oneToOne'
• Eliminated a ten-second delay in loading the chart with certain font settings
• Corrected the display of text labels in canvas elements with dir="rtl" in Internet Explorer
• Hovering over a previously-hovered item after clicking the chart background now triggers a new hover event
• Improved the way font icons are drawn to reduce overlap with selection indicators
• Improved how the hierarchy layout handles long node labels with the 'right' and 'left' orientations

Breaking Changes

• We've changed the way KeyLines handles fonts. Earlier versions used the Ubuntu font family. KeyLines now uses your browser's default sans-serif font, and defers to an external font loader for font icons. If you're using font icons, follow the migration steps described in Font Loading.

Supercharge your charts with WebGL

Performance boosted to meet cyber-data challenges

Significant optimizations increase rendering performance by up to 10 times; selected graph functions by up to 50 times. New demos illustrate support for fast-growing Cyber security markets.

This release gives access to the power of WebGL, allowing analysts to manipulate bigger graphs more easily. All users will appreciate greater smoothness and fluidity when panning and zooming.

To reinforce our support for ‘Cyber’ we’ve included three compelling new demos showing the insight that KeyLines can provide. Complex data-breach, malware propagation and vulnerability-exploit data are all shown to quickly reveal underlying patterns and trends that can inform proactive behaviour.

There are brand-new Fraud demos to show the power of KeyLines in exposing suspicious transactions, and, for developers, there’s a great new demo showing integration with the popular Neo4j database. Here the graph is combined with the power of KeyLines’ time bar to dynamically pull more data from Neo as the user explores the data. And, as usual, you can download all the assets behind all the demos with one click to get more productive, more quickly.

To support the increasing number of applications being developed within the Angular framework, we are delighted to release a brand new directive for KeyLines. This gives a clean and compatible way to access the power of KeyLines from other Angular components. To support your development we’ve added some fresh demos and new Angular-specific documentation.

As usual your feedback on the release is really appreciated – we’d particularly like to know what you value most in this release and what you’d like to see in the future. Email your comments to [email protected].

Harnessing the power of WebGL, and more

KeyLines has always been a high performance, feature rich toolkit. But, increasingly, you have been asking us to help you visualize bigger networks. There are several discrete areas we’ve focussed on that combine to make light work of heavy visualisations for those customers with challenging datasets, while giving valuable headroom for those whose data-volumes are still increasing.

And, in case you’re concerned that it’s going to take effort to exploit these changes in your application – good news! – we’ve maintained API compatibility, so you’ll see some dramatic improvements with no code changes.

WebGL – unlocking the power of modern hardware

In this release, in addition to Canvas and Flash options, we make available the option to use WebGL for rendering KeyLines assets. WebGL directly offloads calculation to the GPU available in modern PCs, Laptops and tablets running the vast majority of modern OS and Browser combinations. And, more good news, no new hardware is required to access this resource!

Graph function optimisation

KeyLines’ graph functions are the ‘engine room’ of our code; this is where you explore the graph structure of your data. Some of these operations are computationally expensive: e.g. the ‘neighbours’ call for a large graph has been relatively time-consuming, but its use is common with large and dense datasets.

With some clever optimisations, including the dynamic construction of a cache, we see improvements of around 50-fold when making repeated graph.neighbours calls (average gain benchmarked against our most challenging data-sets).

WebGL Alpha release

As ever, we’ve tested this release very thoroughly on a broad range of devices, and across our usual suite of OS and browsers. We’re confident in the quality and compatibility of WebGL and encourage you to experiment with the functionality in the context of your applications.

We’re making this capability available under our Alpha program. Dependent on the feedback we receive we expect to be able to mature the capability rapidly through 2016.

More control, better controls

Time bar - new set of events available

KeyLines’ time bar provides a powerful way to interact with data that has time-stamped information encoded in it. We’ve added a number of new events that give you more customisation and control of time bar events – e.g. you can now present tool-tips on the control buttons; you can detect more types of discrete events to allow construction of completely custom controls that blend in seamlessly with your app.

Nav Controls fit in better

As a response to many requests, we’ve delivered the ability to move our standard navigation controls from the top left-hand corner of the canvas. You now have flexibility on the placement of the chart along with the ability to ‘nudge’ the controls to fit in with other assets.

Performance Benchmarks: Details

The figures quoted are average across a range of datasets. We’ve tested on 2014 MacBook Pro with OSX version 10.11 and Chrome 49. Due to the variation of hardware platforms the achieved performance when invoking WebGL rendering may vary significantly.

API Changes

• Changes to chart.options:
  • Added a setting to the overview option to allow its position to be adjusted.
  • Changed the logo and navigation options from strings to objects with properties, to allow their positions to be adjusted. However, code using string values for these options will work in a backward-compatible way.
• New time bar events: contextmenu, dblclick, dragstart, dragend, dragcomplete, end, flashclick, mousewheel, pause, play and start.
• graph().neigbours has a new 'hops' option to specify how many links away to look for neighbours.
• KeyLines.mode has a new 'webgl' setting to enable WebGL drawing.
• There is a new KeyLines.webGLSupport method which returns whether WebGL drawing is supported on the current device.

Bug Fixes and Improvements

• Fixed a regression related to calling ‘setProperties’ on a node when selecting it would cancel dragging.
• Fixed a bug causing ugly font rendering in Chrome where a minimum font size was not being correctly detected.
• Fixed a bug where dragover event would occasionally not be fired.
• Fixed a bug where mousewheel zoom would stop working after being bound to wheel event handler.
• Updated Angular directive to allow image base path to be adjusted separately.
• Fixed a bug where the time bar major scale would sometimes be missing.
• Fixed a bug where the a single data-point would not show correctly in the time bar.
• Fixed issue where a link with a single arrow head could be reversed after being combined and uncombined.
• Fixed issue where zooming in and out would occasionally displace nodes on map (Geo mode).
• Fixed an interaction between Leaflet and Angular; now correctly allows access to Leaflet map object.

Location, Location, Location (...and Analysis)

A major piece of KeyLines functionality exits Beta phase. Powerful new graph analysis options and a new layout are added.

With this release of KeyLines we are proud to upgrade Geospatial (Maps) from Beta to full ‘GA’ releases. We’ve added a brand new demo (above) to showcase the benefits of combining Geo with the time bar.

To complement the existing tools we’re excited to offer three new graph functions including ‘clusters’ to find communities in your data and also a brand new layout option, ‘lens’, that places nodes in an attractive circular pattern.

There are a slew of other improvements and enhancements including an enhanced step-by-step guide to Neo4j integration and direct support for layers in Geo mode. To help you be more productive we’ve also added some new documentation on the use of modular JavaScript and best practice when resizing a chart.

To give developers a jump start with projects, we’ve added a new one-click ‘download’ button to the majority of demos: now all the HTML, CSS and JavaScript assets are immediately accessible.

And we know security is important to many of our customers, so we’ve upgraded our KeyLines SDK sites to be SSL protected: protecting traffic and providing stronger authentication.

As usual your feedback on the release is really appreciated – we’d particularly like to know what you value most in this release and what you’d like to see in the future. Email your comments to [email protected].

Geo (Maps)

We introduced Alpha Geo functionality back in April this year but the reaction has been so positive and strong that we’ve accelerated it through Beta and now to “GA” release.

As well as stabilising the maps API, this release introduces a new leafletMap function that provides direct access to the underlying Leaflet map object, allowing you to work with it directly, for example adding custom layers in map mode.

To celebrate the release we’ve created a new ‘showcase’ Geo demo. Using open source data from the Boston “Hubway” cycle hire scheme you can explore how traffic flows vary with time and by location. The source code is directly available so you can immediately apply these powerful techniques to your own data.

New Graph functions including clusters and eigenCentrality

Many large networks will present ‘communities’ or clusters of sets of highly connected nodes that are completely or partially isolated from others. The new clusters function allows KeyLines to automatically identify these sets of nodes. It’s a powerful new tool to unlock insight from your network data.

Other Features

Driven by your feedback there are several other significant features and enhancements in this release, including:

• New Layout: ‘Lens’ complements the existing set, giving an attractive new layout to offer fresh insight into the relations between nodes.
• One-touch demo downloads: all the assets to recreate our demos can now be downloaded as a.zip file.
• Alternative play mode for time bar animations: you can now choose to fix a start time and animate the graph by increasing the ‘end’ time of the range only.
• SDK sites gain SSL security: all your communications with our SDK sites are now 256 bit SSL secured. So your log-in credentials (e.g. email addresses) are now protected by bank-grade encryption.

New Demos!

In addition to the Geo ‘showcase’ demo and Clusters we’ve added some more examples of KeyLines functionality in action. As usual the source code is provided to help inspire you and add more value to your application.

• Ping (New): Ping is an easy-to-use but very powerful technique to draw attention to node(s). This simple demo gives you all you need to add some attractive animation to your charts.
• Geo Custom Layers (New): We’ve had great feedback on our Geo (mapping) releases. With this demo we’re illustrating the new capability to use direct access to the underlying Leaflet map to add custom layers.
• Email Analysis (Updated): Based on the Enron email dataset, we’ve updated this demo to feature two of our new SNA algorithms – EigenCentrality gives you a perspective on the influence of members of a network, while PageRank is an implementation of the original Google algorithm to help assess importance.
• Impact Analysis (New): By using the elements found in a typical IT datacentre, this demo illustrates the power of KeyLines to quickly understand the significance of the relations between elements and the impact of failures on a system.
• OrientDB (New): We’re proud to add a new integration demo, this time for the increasingly popular OrientDB graph database. With just a few lines of code you’ll have your data displayed in all its glory.

API Changes

• Added minZoom option to chart.options() to control how far the chart can be zoomed out.
• Added 'lens' as a new layout type to chart.layout() (beta).
• Added eigenCentrality, pageRank and clusters functions to chart.graph() (beta).
• Added chart.map().leafletMap function.
• Added showExtend option to time bar options.
• Added extend option to time bar play() function.

Bug Fixes and Improvements

• Fixed a bug related to drawing the overview window after going full-screen.
• Improved performance when dragging nodes when there are large number of hidden items.
• Fixed an issue where chart would pan after layout even though all nodes were fixed.
• Fixed a bug related to using Angular where nodes could only be dragged after a second mouse click.
• Fixed a bug where KeyLines.create would default to canvas size of 100 x 100 if the supplied div had display:none.
• Improved the loading time of charts using Font Icons on iOS Safari.
• Corrected the behaviour of the ‘tightness’ option when using arrange with circle and radial shapes, now correctly matches documentation.
• Made changes to reduce the chance of race conditions when using Angular directive.
• Fixed a bug in map mode where changes to lat/lng using setProperties or animateProperties would not be reflected on the map.
• Improved the behaviour of map mode when using pinch to zoom on a trackpad

New Developer Resources & Beta Release of Geospatial

You’ve told us you wanted better and clearer developer resources and we’re happy to respond.

With this release of KeyLines we are proud to introduce a new SDK website featuring new demos and documentation to make getting started and productive with KeyLines even easier.

Due to the great feedback and positive reaction we’ve had to map mode (aka geospatial), this release also takes it from alpha to beta state, removing some restrictions and adding useful functionality.

There are a slew of other improvements and enhancements including fully qualified support for Windows 10 and Microsoft Edge plus the ability to further customize nodes and glyphs using ‘font icons’.

As usual your feedback on the release is really appreciated – we’d particularly like to know what you think of the new SDK site.

Email your comments to [email protected].

New SDK site

The SDK site has been overhauled to improve navigation and usability. There is also some new content in the form of specific demos to better illustrate core functionality. A new and more modern look-and-feel has been applied across the site.

New Demos:

• Dragging
• Context Menu
• Font Icons
• Tooltips

The API documentation layout has been changed to improve navigation and searchability – it’s now presented as a single continuous page with a navigation sidebar.

Other new content includes:

• Revised ‘Getting Started’ section
• New FAQ section

Map / Geospatial Beta Release

Following a successful Alpha release made in April, this release takes Maps / Geospatial to a Beta release.

Significant changes include:

• You can now use the KeyLines navigation controls in map mode.
• You can now use the option 'handMode: false' to enable marquee selection in map mode.
• In map mode, toDataURL now includes the map in the chart image.
• There are new mapCoordinates and viewCoordinates methods to convert between latitude/longitude and view positions.
• The following chart API methods can now be used in map mode:
  • createLink
  • expand
  • load
  • merge
  • pan
  • setItem
  • zoom
  • KeyLines.setSize

Font Icons (beta)

The new font icons feature allows you to use characters from fonts such as FontAwesome as icons for nodes and glyphs, specifying any colour for them. This feature is in beta, and requires the Canvas renderer, so it does not work in Internet Explorer 7 or 8. See font icons in the documentation for details.

New Platform Support

This release introduces support for Windows 10 and the new Microsoft Edge browser.

API Changes

• There is a new unbind method to undo the effect of the bind method.
• The chart hover event is now raised when dragging an external element over the chart

Bug Fixes and Improvements

• Fixed a bug related to hand mode and ctrl + click de-select behaviour
• Fixed behaviour to stop histogram overlapping scale in time bar
• Improved behaviour with large number of hidden items
• Added progress event for tweak layout
• Improved behaviour of createLink to avoid creating unwanted link
• Fixed exception caused by calling setProperties during chart.each
• Fixed behaviour when marquee selection is panned and some nodes would become de-selected

Mapping Integration

Network views are great for looking at logical connections between things - but what if you want to see where the nodes are physically located?

With this release of KeyLines we are proud to introduce a new feature that lets you see how your network is arranged on a map. You can even switch between the map view and the logical view!

The new map mode comes with instructions on how users can use it, new sample code projects and comprehensive reference documentation.

As usual with new features we are releasing this in 'alpha' form and would love to get your feedback before we harden the API in the coming months.

Please give as much feedback as possible on this new way of visualizing graphs!

P Email your comments to [email protected].

Hand Mode

We have altered the implementation of 'hand mode'. From this version of KeyLines, moving the chart by dragging the background will not clear the chart selection. You can still click the background to clear the selection.

If you would like to keep the old behaviour of clearing the selection this code sample will help:

function clearSelection() { if (chart.options().handMode) { chart.selection([ ]); } }

chart.bind('mousedown', clearSelection);

Other Features

• The radial layout is now 'stable', so nodes will move around less when re-applying it.
• When arranging link positions between two nodes, only shown links are now included.
• A new animation bends links to the right position when hiding or showing their sibling links.

API Changes

• Added a parameter to chart.filter 's callback giving details of the items shown and hidden.
• Added a new touchdown event for the time bar.

Bug Fixes and Improvements

• Clarified the documentation of chart.createLink and chart.combo().find.
• Fixed a problem that stopped items with id '0' being selected in Flash mode.
• Added a better error message when KeyLines.create is passed an incorrect element id.
• Improved the performance of chart.each.
• Made the time bar draw more smoothly.
• Improved the behaviour of radial layout in some situations.
• Improved the drawing of bubbles containing several lines of text.
• Fixed a problem with right-click events in the time bar in old IE versions.
• Fixed a problem with dragging the time bar with the right mouse button in Flash mode.
• Made other performance improvements.

Fine-Tune your Charts

Lots of developers have been asking for more control over how the chart looks, so we are happy to introduce a range of new options for visual appearance. Many of these are shown in a new Chart Styles demo:

• Large and small arrows on links
• Selection styling: much more freedom to choose how selected items look
• Label height adjustment for fine control when using certain fonts. See labelOffset chart option
• Fine control over how links join onto nodes
• Dashed borders for nodes
• Glyph border colour can be set using the glyph.b property
• Control over how links select when marquee dragging. See marqueeLinkSelection chart option

Minor Features

• Time bar height transitions are now animated
• New 'click' event for the time bar
• timebar.zoom('fit') has a new option - you can pass in an id or list of ids to fit
• The highlight colour of the time bar scale is now customisable via timebar.options scale.highlightColour
• Single node combos. Previously when creating a combo with just one node inside it the combine function would raise an exception. Now this is allowed and the combo is created.
• KeyLines.dashedLineSupport() returns whether the current browser supports dashed lines
• Hierarchy layout keeps nodes in roughly the same positions when called multiple times
• SDK page source prettified & dependencies made clearer
• Refactoring to reduce size of keyLines.js file
• HTML5/Flash switch removed: to test Flash using the KeyLines site use IE7 or 8.

Bug Fixes

• Performance improvement for chart.merge with large numbers of items
• Faster drawing performance for charts with many hidden items
• IE11 fix: generating PNG images when overview was shown caused error
• Generating PNG images caused navigation controls to behave differently
• Glyph text was rendered too low on the screen at small font sizes
• Radial layout didn't always space out items evenly

Time bar now fully supported!

Following positive feedback from our beta testers we are bringing the time bar out of beta. The API is now fixed and we will keep backwards compatibility with the current API in all future releases.

• Background colour can be set
• Slider colours can be set
• Fix: selection points were drawn one item to the left
• Fix: small ranges were displayed incorrectly

KeyLines AngularJS Directive

Thanks to some great help from our AngularJS alpha testers, our AngularJS directive is now available. Please give us as much feedback as you can.

Changes:

• The directive is now an attribute directive ('A') rather than an element
• The event model uses Angular's $broadcast mechanism
• The KeyLines directive code has been reimplemented
• The directive can be used to create time bars

Features

• New search demo shows how to find nodes, show selection & zoom them into view
• Combo namespace has new find function to find the parent combo of an id
• Yosemite Safari 8 support

Bug Fixes

• Radial layout overlapped child nodes in certain cases
• chart.merge did not behave correctly for items with numeric ids
• Animated glyphs containing text were flickering
• zoom('in') and zoom('out') always animated, even with {animate: false}
• time parameter in chart.expand option was not working
• Cut-out images did not use transparency
• IE10: occasional layout crash due to bad optimisation in the IE10 JavaScript engine
• IE11: a certain Intel HD graphics driver (9.18) on Windows 7 causes HTML5 canvas to behave differently from the HTML5 specification - which caused navigation controls and cut-out icons not to draw

Time bar beta!

New demos:

• Mapping demo combines the time bar with a geographic heat map
• Fetch and merge shows how to merge data into the time bar dynamically
• Overview shows how multiple time bars can be shown and coordinated

New time bar features:

• Histogram colours are now settable
• You can toggle the visibility of time scales and control bar
• There are two new interaction options for the sliders
• There is a new 'merge' function that can be used to add data dynamically

Easier Downloads

We've had feedback that it has been difficult to put together all the files that KeyLines uses. So now the downloads page has a single.zip file that contains the KeyLines JavaScript file, asset files, fonts, etc., all in one place. The zip file also has a simple.htm file to get you started more easily.

Using SVG for nodes

Some developers want to use SVG for their node icons, so we have done extensive testing on browser support for drawing SVG within KeyLines, and had some surprising results. Essentially Chrome and Firefox are OK, but there are some KeyLines functions that are not supported: read the details here.

The safest approach is definitely to use PNG or JPG images until browsers catch up.

Asset deployment

Flash and assets: before this release, the flash file embedded the KeyLines image assets within the.swf file. As the number of assets increases this is no longer a good strategy. As of this release the flash version loads the KeyLines assets dynamically, just like the HTML5 version. This shouldn't cause any compatibility issues as long as you set the asset path before calling KeyLines.create.

Fixes & Improvements

• Full screen now fixed on Safari 7.1
• Demos now can toggle the right hand panel when in full screen mode
• Various time bar fixes
• chart.selection remained after a chart.clear
• chart.viewOptions wasn't checking parameters properly
• Safari 7.1 support
• Getting started guide is much clearer

Introducing the Time Bar!

Ever since KeyLines was first created, people have been asking about how to show their graphs changing over time. So we are excited to announce that KeyLines 2.0 has a whole new time bar component that you can use to explore your graph data.

The new time bar comes with instructions on how users can use it, three new sample code projects ( 1, 2, 3) and comprehensive reference documentation.

We have had to change a few things around to accommodate the new component. See below for details. And because it is such a new feature we've decided to release it as 'alpha' - meaning we'd like your feedback before we harden the functionality and API.

Please give as much feedback as possible on this new way of visualizing graphs!

P Email your comments to [email protected].

Site Redesign

This SDK site has been redesigned to allow easier navigation.

• The API Reference and Formats pages are now easier to find
• Finding functions is now easier using new dropdown menus in the API Reference & links in the Formats page
• Demos have been categorized into 'Basic' and 'Advanced'
• We wrote down our support process to explain how to reach us and what we do when change requests are raised

More Features:

• Chart Layouts: A new 'tweak' layout can be used to adjust the chart when new items arrive or items are removed.
• Graph API: Has a new {all: true} option on all functions which allows graph operations on hidden items
• Chart API: chart.filter has a new 'type' option that allows easier filtering of links or nodes
• Chart API: New chart.pan('selection') call fits selection to window without zooming - use as an alternative to chart.zoom('selection').

API Changes:

• New time bar namespace and associated time bar events.
• New KeyLines.create signature replaces older signature. Scripts using the old signature will still work. The new signature should be used for all new projects & is designed to facilitate creating multipe KeyLines components at once - with a single callback that is called once everything is ready.
• Rename of KeyLines.charts to KeyLines.components. 'Components' can either be time bars or charts. Existing code that uses KeyLines.charts will continue to function as before.
• New paths function replaces imageBasePath, setCanvasPaths and setFlashPaths. The older functions still exist and will continue to work.
• New options function replaces displayOptions and interactionOptions. The older functions still exist and will continue to work.
• The default colour for the chart navigation controls has changed to grey. To change this colour, see chart.options.controlColour

Bug Fixes:

• Layout bug: structural layout had errors with charts with numeric ids
• Documentation: various corrections, including clarification of combos().combine callback arguments
• SDK Site: several bugs on IE7 & 8 fixed
• SDK Site: resize demo had issues with browser resize

Introducing Halos!

Halos are great for showing events on nodes.

See the Animation demo and Data Format documentation for how to use them.

More features:

• New ping function makes it easy to work with halos
• New 'queue' option in animateProperties
• New dashed and dotted styles for links - only for modern browsers!
  • Supported browsers: IE11, Firefox 7+, Chrome (any), Safari 6+

Demos:

• Have a look at the new Animation demo
• The Neo4j demo has been updated to support the new Neo4j 2.0 version, and more!

New website pages:

• New cross-origin images (CORS) documentation page

Fixes:

• Text positioning when using shape nodes, centred text and glyphs had a bit of offset
• Bubbles rendering issue in IE9
• Watermark images on background didn't catch some mouse events
• Fixed an issue with listeners on KeyLines component removal
• Fixed an issue with Unicode encoding on some servers
• Save & Load demo didn't work properly on iOS / Safari
• Thin line drawing issue fixed

Features:

• Retina screen support! Users on retina screens will now see that KeyLines is crystal clear.

Fixes:

• Coordinates did not work correctly in scrollable divs
• Touch device dragging did not raise 'dragover' event
• Add 'gray' to CSS colors
• chart.labelPosition returned incorrect values in some circumstances
• Transparent images cropped to circles drew black borders around the edges
• Setting zoom programmatically failed unless animating
• setSize caused blurriness in some circumstances
• Drawing improved when dragging things near the edge of the canvas
• Flash component not visible in IE11
• chart.load now uses last saved view options
• Various drawing improvements
• Various documentation clarifications

Introducing Bubbles!

Bubbles are a great new way of showing information on nodes and links.

See the Data Format documentation for how to use them.

More features:

• New Titan demo

Fixes:

• Glyphs misplaced on link labels with multiline text
• Multiline text where first line is a new line breaks rendering on chart.load
• Layout has new 'straighten: false' option to prevent link offsets being set to zero on layout
• New dragPan option for customising drag behaviour at the edge of the chart

IMPORTANT: keylines-html5.js is removed at this release. The new version of keylines.js MUST NOT be loaded alongside an old version of keylines-html5.js. Please be sure to remove all references to keylines-html5.js from your web pages when upgrading to this version of KeyLines.

New Features:

• Combined keylines-html5.js into keylines.js
• Enhanced shortestPaths to return onePath including both nodes and links
• IE11 Support
• iOS7 Support

New Demos:

• Find Path demo illustrating the use of the updated shortestPaths API

Fixes:

• Using graph API in flash went wrong when using various special characters as ids
• iOS7 fix for arc rendering
• Stack overflow when laying out a very large number of disconnected components
• When creating combos, combo links were created with the wrong arrow direction
• Console log warning loading background.png removed
• More complete 'hello world' sample in getting started guide
• chart.labelPosition was incorrect for multiline labels

New Features:

• New foreground function makes it easy to foreground/background items
• HMTL5 drag supported via 'hover' event firing during HTML5 drag over chart
• Font colour for selected items now settable in chart.options
• chart.zoom('height') fits height of chart to window
• New cancellable 'mousewheel' event

New Demos:

• Chart saving and loading
• How to resize KeyLines dynamically on a page
• Background items

Fixes:

• animateProperties had bug when specifying undefined properties

Features:

• Full support for touch events & gestures in IE10
• Standard layout reimplemented
• New background layer for items, see new 'bg' property
• New filter function for show and hide makes your code much simpler

The new standard layout has the following improvements:

• Clearer spacing of nodes in dense networks
• More regular link lengths
• Clearer positioning of fans of single nodes
• More compact in general
• Faster to compute (about 30% faster)

Features:

• option maxItemZoom makes links easier to see in dense networks (beta)
• Hidden items can be analysed by graph functions using {all: true} option
• Faster performance per frame - each frame render shorter by approx 25%

Fixes:

• Circular icons now smoothly alpha at their edges
• dblclick event returned null id argument on Windows
• dblclick default action was not overridable
• dblclick on navigation controls zoomed the chart
• shortestPaths returned incorrect results when using distances/weights
• Documentation of IE9/IE10 setting to allow HTML5 canvas on intranet sites
• Text rendering respects alpha when zoomed out
• Layouts reset link offsets (uncurve links)
• Various fixes for combos when used with hidden items
• IE10 lacked mouse interactivity on touch devices (Windows 8)

Features:

• (Beta) Circular icons - see the new 'ci' property on nodes
• New create link function
• New expand function for adding data smoothly to the chart in one function

Fixes:

• dblclick event was not fired properly on items
• Various fixes for Combos (Combos are still in Beta)
• Fixed nodes in pairs weren't actually fixed during the layout

Features:

• (Beta) New 'combo' API for combining/uncombining nodes
• The font family can be set chart-wide, or on a per item basis (HTML5 only).
• Colours can be defined with CSS syntax, e.g.,'#F00', '#FF0000', or 'red'
• Drag 'move' can be customised by adding other items to drag
• New dragover and dragcomplete events
• (Beta) New 'contains' function for finding items within a shape

Fixes:

• Images were loaded too often when the chart changed
• Mouse wheel zoom is now animated
• Mouse wheel is buffered to fix over-quick zoom on OSX with trackpad
• chart.show could be used to show links with only one end

Note that the font changes gives basic support for languages such as Arabic, Chinese, Korean, etc.

Features:

• Hierarchy has new orientation option
• New 'imageBasePath' option
• New 'circle' and 'radial' options when calling arrange
• 'prechange' event now passes argument that describes what is changing
• 'hover' event also raised when chart is locked (allows tooltip behaviour on locked chart)
• createChart now can be called without specifying width and height

Fixes:

• ids returned by events no longer have the sub-item codes appended after '#'
• Dragging occurs only when moving the mouse/touch a few pixels: items are slightly 'sticky'
• Compatibility with RequireJS
• Zero size containing div causes crash on load
• Layout function raises 'prechange' event
• Border colours would sometimes leak across many items at once
• 'dragstart' and 'dragend' now also raised by navigation controls and overview window
• font now looking better on IE<9 on SDK site
• issues with Flash component when id of item was === 0
• graph().distances function no longer returns Infinity for items which are not connected: they are omitted from the returned object instead

Features:

• k-Cores: a way of discovering tightly coupled groups (see the Filters demo)
• Shapes: boxes and circles
• Image nodes are now drawn in a background layer
• Resize handles are turned off by default: use the 're' property to re-enable
• Links without text show selection state as small circles
• Link length is configurable: see new link properties b1 and b2 (b = 'backoff')

Fixes:

• Various fixes for resize handles

API Deprecation:

The '#t', '#ne', etc. that were appended to the id strings returned by events will be deprecated in the next release. The sub-item codes are now returned as additional parameters to the events - see the event documentation.

Features:

• (Beta) Arrange function for 'grids' of nodes
• (Beta) Tightness of layouts is now adjustable

Fixes:

• Chrome/HTML5 was making too many calls during the mouse move event to get cursor images - now less frequent
• The fixed option for layouts did not work in Flash under IE8
• 'Self-loops' are now disregarded: previously links from an end to itself were allowed but never drawn

API Deprecation:

• Events 'layoutstart', 'layout' and 'layoutend' are now removed - please use 'progress' instead. See Filters demo for sample code.

Features:

• Social network analysis measures Closeness and Betweenness
• Radial & Structural layouts now out of beta
• Animating colours is now possible through animateProperties
• Image generation (toDataURL) can now toggle visibility of gradient, watermark & logo

Demos:

• Enron demo more complete, uses new SNA measures and has link strength

Fixes:

• Flash version had issue when using numeric ids for items during graph calls
• Various documentation fixes

API Change:

• New generic 'progress' event.

API Deprecation:

• Events 'layoutstart', 'layout' and 'layoutend' are now deprecated & will be removed in the next release - please use 'progress' instead from now on. See Filters demo for sample code.

Features:

• New Radial layout now in beta!

Fixes:

• Loading keylines-html5.js before keylines.js caused errors
• Packing algorithm very occasionally raised an exception

Fixes:

• HTML5 canvas raised exception when encountering a missing image - now uses blue X as a replacement like Flash implementation
• shortestPaths should return a distance
• chart.clear() function caused hang
• Graph API should check arguments and throw exceptions when ids not present
• Charts with numeric ids caused issues in layouts and graph API in flash only
• Graph traversal functions did not always respect direction
• Dropdown menus work on SDK site work in IE7 & IE8
• Enron demo now works in IE7 & IE8

Features:

• Layouts now arrange disconnected components using a packing algorithm
• Graph API for path finding, navigation, component discovery & more
• New each & clear functions on the chart

Fixes:

• Layout function did not always call the callback on completion
• Layout default options were not set properly
• Layout used too much empty space using the {fit: true} option
• Firefox < 10 now supported
• Layout: Hierarchy threw exception if no top ids were set & if given link ids instead of node ids
• Undocumented 'smoothTransition' call removed

Features:

• Navigation controls now resize down like Google Maps when the component height is small
• Bounding box drag now uses centre of items as the selection rule

Fixes:

• Various documentation bugs
• Hover event passes x, y coordinates

New webiste pages:

• New browser settings page
• New third party tools page

Fixes:

• Canvas: implementation of setSize resets view zoom and origin
• Recent CDN changes did not set Access-Control-Allow-Origin header, causing Firefox and IE9 to not load webfonts in Canvas implementation. Note if serving fonts from a different domain you will need to set this header too
• Flash: navigation controls disappear when showing curved links
• Release Notes started