- #Make interactive infographic how to#
- #Make interactive infographic code#
Next, I created charts for each section of the infographic. I typed "GAMERS" into the text box and updated the font style, size, and color: 
Insert a text box by going to Anything > Page Design > Text Box and place it to the left of the control. Move the drop-down combo box to the top of the screen and style as desired (font size, color, border). #Make interactive infographic code#
Under Properties > GENERAL > Name name the control Country. This name will be used in the R code when creating charts. In the object inspector, go to Control and enter the following for the Item list: China, US, Europe. From the toolbar, go to Anything > Page Design > Control > Combo Box (Drop-Down). Next, I added a control so that the user can change the geography to see the corresponding results. I repeated this process for AverageAge, Ratio, and Multiplayer data. It will stay visible but will be invisible when you share the infographic. Hide the table by right-clicking and selecting Hide. Drag the table off to the side of the page. Under Properties > GENERAL, I've updated the table Name to AgeDistribution and ticked the Automatic option. For my first table, I pasted in Age Distribution data and clicked OK. Alternatively, you could type it into the screen. In the object inspector, go to Inputs > DATA SOURCE > Paste or type data. From the toolbar, go to Table > Paste or Enter Table. For this example, the data has been pasted into Displayr from Excel using the steps below: There are lots of ways to import data into Displayr (eg, importing a raw data file and creating the tables in Displayr). Hook up the data that you will use in the infographic. Move and resize the image to fit the page (tip: you can use the Properties > LAYOUT settings on the right to type in the width (800) x length (2000) to reset the correct aspect ratio of the image). Next, insert the downloaded infographic by going to Anything > Page Design > Image and select the location where the infographic is stored. For this example, the page should be 20 inches high and 8 inches wide. Then, from the object inspector, go to Pages > DOCUMENT LAYOUT > Page size (all pages) > Custom and set the Width (inches) and Height (inches). In your Displayr document, set the page size to the same aspect ratio as the PNG file that you're using as your infographic by selecting a page from the Pages tree or clicking in a blank space on a page. 
A data set that contains various data that you would like to display.You could design your own infographic, either in Canva or elsewhere.I edited the template by deleting the bits that I wanted to replace with interactive charts and visualizations and then downloaded the infographic as a PNG file:
I started by going to Canva, and choosing the Neat Interactive Gaming Infographic (tip: click on the Templates section to search).
Canva was used to create the base infographic in this example. Tools used to create an interactive infographic: The interactive example is designed so that the user can change the geography and the infographic updates automatically.
#Make interactive infographic how to#
like the legs of a sheep to move independently of the body and head make sure you save those elements on separate layers regardless of which programme you prefer to use.This article describes how to create an interactive infographic using Displayr, Canva, and R code. If you want to have elements of graphics that are animated separately from the whole image i.e. If you really want to learn code then websites like exist for such reasons. Whilst you could learn the basics of HTML and CSS it would be more efficient (although perhaps not cost effective) to use either of the above suggestions. Just to add to Monika's statement - This type of Interactive infographic also uses some parallax scrolling techniques ( How To Create a Parallax Scrolling Effect) but on the whole all of the javascript etc is just used to make it look animated.įollow Monika's advice and make all the graphics as normal in Illustrator and Photoshop (Make sure you use transparent backgrounds unless you really need it) and either use Muse to get the majority of the content or get a programmer/coder to write it how you want.
0 kommentar(er)
