#INTERACTIVE INFOGRAPHIC CODE#
#INTERACTIVE INFOGRAPHIC SERIES#
#INTERACTIVE INFOGRAPHIC DOWNLOAD#

Part-four adds an inline UI to access layered content. Part-three adds a dynamic mini-map to enhance navigation. Part-two adds navigation features to browse content. Many thanks to Chuck Erickson and the Google Team for the wonderful GCP solutions icon and diagram pack. While the demo is based on GCP, you can find applications in org charts, ecosystems, subway maps, flowcharts, progression trees, network topologies, and any graph diagrams.

#INTERACTIVE INFOGRAPHIC CODE#

Non-relevant code blocks are glossed over.Īll video illustrations are screen captured from a Chrome browser. It does help that you have some knowledge of CSS and HTML. We’ve handpicked what’s important so that you can get to the essential parts quickly and adapt them in your project.

#INTERACTIVE INFOGRAPHIC SERIES#

This story is a 5-part series on creating interactive infographics with Javascript. In the next part, we’ll add navigation capabilities to the UI. We’ve devised a schema and a view engine as a foundation for our design workflow.

Use dashed to illustrate different relationships.

Use scale3d effect to create impactful highlighting effects.

Graph relationships and interacting with SVG content Let’s see how a sample layout with GCP content looks so far.

#INTERACTIVE INFOGRAPHIC DOWNLOAD#

Visit the official GCP icon library to download the complete icon pack. contains the SVG data that describes our zoomable icon.

display:flex and align-items:center uses Flexbox, now supported on all major browsers, to automatically align our SVG and text content.

Instead of rendering an HTML circle shape, it now contains SVG data. To change the HTML/CSS circle 1, or node11, into a hexagonal SVG shape, simply wrap your SVG content within an HTML container (see bold). Our GCP infographics use SVG extensively to support high-def resolution for a zooming feature that’ll be implemented in the next part of our discussion. Each object is a dataset that will correspond to a specific user action.

Next set up legend to hold an array of objects. You can think of item as a master registry. Var item = Įach value in the item array will correspond to the unique id value of each node or link (e.g. Store your HTML element’s unique id values as an item array. Let’s bind the node and link elements to its event listeners within a loop in two steps: We’ll use this Javascript API to detect user actions and trigger a whole range of functionalities to create interactive web pages. spring an animation sequence or retrieve information from a database). Upon detection, it’ll call m圜ustomFunction to do something (e.g.mouseover detects a mouse cursor hovering over a particular DOM document such as a button.In our project, we would like these nodes and links to respond to a specific user action such as a mouseover event.ĭocument.addEventListener( 'mouseover', m圜ustomFunction ) The DOM, or Document Object Model, is a tree-like data structure for representing HTML elements and mapping content onto a physical display.Ĭonversely, we can also interact with any display elements by manipulating the DOM. The nodes and links we’ve discussed are essentially DOM elements at browser runtime.

Concept aside - how interaction works on a webpage Tip: Use an image overlay to guide your CSS positioning of the HTML elements. For example, link1112 connects node11 and node12. The circular nodes in our videos are simply div tags with a CSS border-radius. You can use any HTML, CSS, icons or images to represent a node or link. Let’s use the style attribute to describe the unique position, shape and behaviour of each element. branch #1) would connect circle “1” and “2”, as well as other circles (i.e. In the above diagram, that would be circle “1” and “2”.

Similarly, node12 would be node #2 of branch #1. For example, node11 would be node #1 of branch #1. We can use an HTML element and a unique id to describe a node. Basic building blocks : each node describes a set of unique relationships

Interactive infographic