Creating interactive infographics with plain Javascript (Part-one) Interactive infographics with plain Javascript Introduction Today’s browsers let us connect information in ways never seen before. Infographics is one such area. As a pictogram, it is an excellent visualisation tool. As an interactive webpage, you can achieve a new level of engagement with just a little bit of coding. Many open-source libraries render fantastic infographics. Our favourites are D3, and vis.js. However, there are other times when we needed features that aren’t available from public libraries. Objective Let’s build an interactive infographic with plain Javascript. Case Study The Google Cloud Platform (GCP) is like a candy store to a web developer. Its product categories are more than fingers can count and each interconnects in different ways to solve complex problems. The GCP “Org chart”. Official source: Google Cloud Platform If we harness the power of a modern browser to showcase the benefits of GCP products, how would the UI look like? Is it possible to use basic Javascript techniques to produce extraordinary results? Design approach Our design approach is based on the idea of using a consistent and persistent User Interface (UI) to tell an engaging story. Let’s rethink design in two areas: . Can we treat information as a continuous path and not pieces of jig-saw puzzles stitched through repetitive page loads? Information architecture . Can we present information through an interactive and consistent UI that works a looking glass? User Interface (UI) UI concept: the looking-glass . We want to create a customisable UI with as little code as possible. Brevity . We want to use out-of-the-box browser features and not third-party libraries. That means using only Plain Javascript. Simplicity . We want to separate the view from the model so that it is easier to adapt our project to other use-cases. Reusability Getting started — the basic building blocks Let’s introduce the notion of and as the basic building blocks of our design workflow. nodes links are the start and end points. For example, a bus stop can be called a node. A bus route from one node to another can be called a . A group of related nodes and links can be called a . Nodes link branch Basic building blocks : each node describes a set of unique relationships . We can use an HTML element and a unique id to describe a node. For example, would be node #1 of branch #1. Similarly, would be node #2 of branch #1. In the above diagram, that would be circle “1” and “2”. The bus route #1 (i.e. branch #1) would connect circle “1” and “2”, as well as other circles (i.e. 2a,3,3a,3b). Node elements node11 node12 Let’s use the attribute to describe the unique position, shape and behaviour of each element. You can use any HTML, CSS, icons or images to represent a node or link. The circular nodes in our videos are simply div tags with a CSS . style border-radius <div id=”node11" style=”…”>1–1 Occupation Name</div><div id=”node12" style=”…”>1–2 Occupation Name</div> . Links connects nodes. For example, connects and . Link elements link1112 node11 node12 <div style=”...” id=”link1112"></div> Tip: Use an image overlay to guide your CSS positioning of the HTML elements. Concept aside — how interaction works on a webpage The nodes and links we’ve discussed are essentially DOM elements at browser runtime. The DOM, or Document Object Model, is a tree-like data structure for representing HTML elements and mapping content onto a physical display. Conversely, we can also interact with any display elements by manipulating the DOM. In our project, we would like these nodes and links to respond to a specific user action such as a event. mouseover document.addEventListener( "mouseover", myCustomFunction ); detects a mouse cursor hovering over a particular DOM document such as a button. mouseover Upon detection, it’ll call to do something (e.g. spring an animation sequence or retrieve information from a database). myCustomFunction We’ll use this Javascript API to detect user actions and trigger a whole range of functionalities to create interactive web pages. Creating workflow shortcuts Let’s bind the node and link elements to its within a in two steps: event listeners loop . Assign the model (data). Step one Store your HTML element’s unique values as an array. id item[] var item = [‘11’,’12',’1112',‘21’,’22',’2122',...]; Each value in the item[] array will correspond to the unique id value of each node or link (e.g. refers to ; refers to .). You can think of item[] as a master registry. 11 node11 1112 link1112 Next set up to hold . Each object is a dataset that will correspond to a specific user action. legend[] an array of objects legend = {'item11' : { "node" : ['11'], "links" : [] },'item12' : { "node" : ['11','12'], "links" : ['1112'], },...} var When a mouse cursor hovers over , the object will call for CSS targeting. node11 item11 node11 Similarly, when a cursor hovers over node12, the object calls , , and for CSS targeting. item12 node11 node12 link1112 is just a prefix label. Use your naming convention. item Let’s take a moment to consider the implication of the above schema. Not only have we created a system to store content, we have also created a to describe data connections. graph relationship We’ve reduced tons of code; sped up the design workflow; and separated the view from the model (data). Let’s move on to build the view engine. Tip: For dynamic content management, consider encoding your dataset as JSON and access them via a database. Also, use any tools to edit your dataset and HTML layouts. . Loop through each HTML element to associate event listeners programmatically. Step two while (item[i]) {itemElement[i] = "node".concat(item[i]);itemElementName[i] = document.getElementById( itemElement[i] );itemElementName[i].addEventListener( "mouseover", mouseOver );itemElementName[i].addEventListener( "mouseout", mouseOut );...i++;} iterates through the id values of each DOM element registered at . while item[] reattaches any custom prefixes you may have (i.e. “node”) to match the actual id values. “item”.concat(item[i]) builds an array of DOM references. itemElementName[i] = document.getElementById( item[i] ) “ ” and “ ” binds each DOM element to a user action. mouseover mouseout Tip # 1: Mobile and touch devices have its own set of event listeners such as _touchstart_ and _touchmove_ . Use them to create responsive designs. Tip #2: Use the “passive” parameter on your touch or wheel event listeners to improve browser performance like so: document.addEventListener('touchstart', onTouchStart, {passive: true}); Customising interactive behaviours with CSS We can create custom functions and to apply CSS effects: mouseOver mouseOut mouseOver(event) { ( i in legend[ .id]["node"]) { currKey = "node".concat(legend[ .id]["node"][i]);document.getElementById(currKey).style.background = "grey";...} ( i in legend[ .id]["link"]) { currKey = "link".concat(legend[ .id]["link"][i]);document.getElementById(currKey).style.border = "1px solid#000";...} function for var this var this for var this var this } Use an event listener to bind a DOM element to your custom function . This function takes in the parameter (provided by the browser) to give the active value. mouseover mouseOver event this.id identifies the dataset for applying CSS targeting. legend[this.id][“node”] loops through the collection . _for_ legend[] In our example, the function turns the background colour of the targeted node(s) grey. mouseOver Use the same idea on elements. In our example, we changed the colour of from grey to solid black when a mouse pointer hovers over (node11 and node12 also turn grey). link links1112 node12 Next, “reset” the CSS behaviour as soon as the cursor exits the current DOM element (see bold). mouseOut() { ( i in legend[ .id]["node"]) { currKey = "node".concat(legend[ .id]["node"][i]); ...} function for var this var this document.getElementById(currKey).style.background = "unset"; ( i in legend[ .id]["link"]) {...} for var this } Unlimited scaling with SVG 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. To change the HTML/CSS , or , into a hexagonal SVG shape, simply wrap your SVG content within an HTML container (see bold). circle 1 node11 <div id=”node11" style=”display:flex; align-items:center;"> <div style="align-items:center; width:100%;">My Text Label</div></div> <svg><path d="...some paths"/></svg> references the same node. Instead of rendering an HTML circle shape, it now contains SVG data. id=”node11" and uses Flexbox, now supported on all major browsers, to automatically align our SVG and text content. display:flex align-items:center contains the SVG data that describes our zoomable icon. Visit the to download the complete icon pack. <svg>...</svg> official GCP icon library Populating content We added SVG to the model. Let’s see how a sample layout with GCP content looks so far. Graph relationships and interacting with SVG content Use effect to create impactful highlighting effects. scale3d Use to illustrate different relationships. dashed Next Steps We’ve devised a schema and a view engine as a foundation for our design workflow. In the next part, we’ll add navigation capabilities to the UI. Side note This story is a 5-part series on creating interactive infographics with Javascript. We’ve handpicked what’s important so that you can get to the essential parts quickly and adapt them in your project. It does help that you have some knowledge of CSS and HTML. Non-relevant code blocks are glossed over. All video illustrations are screen captured from a Chrome browser. 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. Many thanks to Chuck Erickson and the Google Team for the wonderful . GCP solutions icon and diagram pack Links to other parts Part-one → You’re are here. adds navigation features to browse content. Part-two adds a dynamic mini-map to enhance navigation. Part-three adds an inline UI to access layered content. Part-four demonstrates why it is so easy to create UIs with a human touch. Part-five If you enjoyed this story, you can find more at . Pageii Studio
