Creating interactive infographics with plain Javascript (Part-three) Recap This article is a five-part series on creating interactive infographics with plain Javascript. Previously we added navigation features to interact with content. We can scroll, zoom, pan, or drag a large canvas any way we like. Integrated usage (so far) Did you notice something special? There’s a mini-map that responds to user actions. What’s going on? Objective We are going to add a map locator to enhance navigation. Introduction Map locators are useful for exploring large canvases. It is a simple yet effective visualisation gadget that provides continuous updates on the current locations. The gadget is also ideal for illustrating thematic relationships among interacting components. Concept The map locator comprises a and a . A miniMap is a scaled-down version of the actual-sized . The location indicator is an icon or a marker that states the user’s current location. miniMap location indicator canvas You can use the map locator in two ways: When visitors scroll/zoom/pan/drag the canvas, the indicator automatically moves to its new position. You’ve seen that in action at the earlier intro/recap demo video. Conversely, visitors can also use the indicator itself to interact with the canvas. You can either drag the indicator or point-and-click on any areas to navigate to any new regions. Navigate by mini-map: drag bracket, or, point-and-click Getting started — the concept of action and reaction Recall from the part-two discussion that we have a concept of action and reaction for our UI? In gist, an on a mouse produces an equal on an HTML element. For example, a cursor movement causes the canvas to move by the same distance. This mirroring effect is measured as the . action reaction mouse delta value We’ll apply the same concept to build the map locator. A delta movement of the location indicator translates into a new relative scroll value on a bigger canvas. We can map this both ways to create a versatile . two-way navigation gadget Prepping the miniMap container Create a reference to the container. It will stay on top of the canvas to guide navigation. miniMap var miniMap = document.getElementById( “miniMap” ); Create a reference that exists inside the container. indicator miniMap var indicator = document.getElementById( "indicator" ); Use any method to generate your miniMap. We’ll take a shortcut and use a scaled down static image of the canvas. <img src=”myMap.jpg” id=”miniMap”> Remember to use to set the correct order of appearance. z-index Navigating with the indicator Add an event listener to capture the mouse delta value of the and update the new relative scroll position of the . indicator canvas miniMap.addEventListener("mousedown", handlerIndicator, false); function handlerIndicator(event) {if (event.which == 1) {// formula}} The formula should dynamically update the canvas scroll value based on the relative mouse delta value: canvas.scrollTo(( canvas.scrollWidth * (event.clientX - boundingbox(0, 0, miniMap).x) / boundingbox(0, 0, miniMap).w ) - canvas.offsetWidth/2,(canvas.scrollHeight * (event.clientY - boundingbox(0, 0, miniMap).y) / boundingbox(0, 0, miniMap).h ) - canvas.offsetHeight/2); tells the browser to execute a scroll whenever a event on the is detected. canvas.scrollTo mousedown miniMap and returns the X and Y coordinates of the mouse cursor. These values are dynamically updated by the browser engine. event.clientX event.clientY returns the width of the canvas (i.e. the parent container). scrollWidth translates the relative indicator movement onto the actual-sized canvas. event.clientX — boundingbox(0, 0, miniMap).x) / boundingbox(0, 0, miniMap).w and initiates the correct scroll offset values. canvas.offsetWidth/2 canvas.offsetHeight/2 We have created a one-way navigation aid. Let’s make it two-way. Navigating the canvas Create an event listener to call a custom function whenever interaction is detected on the canvas (i.e. scroll/pan/drag) handler_mouseScroll canvas.addEventListener("scroll", handlerMouseScroll, false); function handlerMouseScroll(event) { _var_ scrollpercentX = canvas.scrollLeft / canvas.scrollWidth; _var_ scrollpercentY = canvas.scrollTop / canvas.scrollHeight; indicator.style.left = miniMap.offsetWidth \* scrollpercentx + "px"; indicator.style.top = miniMap.offsetHeight \* scrollpercenty + "px"; ... } and gives the conversion ratio for calculating the relative scroll values on the mini-map. scrollpercentX scrollpercentY and gives the dimensions of the miniMap. miniMap.offsetWidth miniMap.offsetHeight and updates the position of the indicator on the mini map. indicator.style.left indicator.style.top Next Steps With a two-way navigation gadget, visitors can explore a large canvas without getting disoriented. We can create infographics that are sophisticated yet easy to use. In the next article, we’ll design a UI that can represent the information architecture of multifaceted content. Links to other parts sets the foundation for designing interactive infographics. Part-one adds navigation features to browse content. Part-two Part-three → You’re are here. 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
