<?xml version='1.0' encoding='utf-8'?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:ns0="http://www.w3.org/2005/Atom" xmlns:ns1="http://purl.org/rss/1.0/modules/syndication/" xmlns:ns2="com-wordpress:feed-additions:1" xmlns:ns4="http://purl.org/rss/1.0/modules/content/" version="2.0">

<channel>
	<title>Design Archives - geojournalism.org</title>
	<ns0:link href="https://geojournalism.org/category/design/feed/" rel="self" type="application/rss+xml" />
	<link />
	<description>Best tools for multimedia reporting</description>
	<lastBuildDate>Thu, 08 Sep 2016 13:57:29 +0000</lastBuildDate>
	<language>en-US</language>
	<ns1:updatePeriod>
	hourly	</ns1:updatePeriod>
	<ns1:updateFrequency>
	1	</ns1:updateFrequency>
	

<image>
	<url>https://s0.wp.com/i/webclip.png</url>
	<title>Design Archives - geojournalism.org</title>
	<link />
	<width>32</width>
	<height>32</height>
</image> 
<ns2:site>239681374</ns2:site>	<item>
		<title>Create Media-rich Reports with Page Builder</title>
		<link>https://geojournalism.org/2016/08/create-media-rich-reports-with-page-builder/</link>
		
		<dc:creator>Willie Shubert</dc:creator>
		<pubDate>Thu, 11 Aug 2016 01:26:05 +0000</pubDate>
				<category>Design</category>
		<category>Drag and Drop</category>
		<category>JEO Newsroom</category>
		<category>Page Builder</category>
		<category>SiteOrigin</category>
		<category>wordpress</category>
		<guid isPermaLink="false">https://geojournalism.org/?p=1595</guid>

					<description>&lt;p&gt;In-depth multimedia story telling has unique requirements; a narrative is structured around key facts supported by a mix of media elements intended to draw readers into the world the journalist is presenting. Combining the pieces into a cohesive story is one of the most exciting aspects of modern journalism and easing the process of creating [&amp;#8230;]&lt;/p&gt;
&lt;p&gt;The post &lt;a href="https://geojournalism.org/2016/08/create-media-rich-reports-with-page-builder/"&gt;Create Media-rich Reports with Page Builder&lt;/a&gt; appeared first on &lt;a href="https://geojournalism.org"&gt;geojournalism.org&lt;/a&gt;.&lt;/p&gt;
</description>
										<ns4:encoded>&lt;p&gt;In-depth multimedia story telling has unique requirements; a narrative is structured around key facts supported by a mix of media elements intended to draw readers into the world the journalist is presenting. Combining the pieces into a cohesive story is one of the most exciting aspects of modern journalism and easing the process of creating media-rich news articles is a our goal with JEO Newsroom.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://youtu.be/6if_demQp0Y"&gt;https://youtu.be/6if_demQp0Y&lt;/a&gt;&lt;/p&gt;
&lt;h2 class="summary-item" id="whats-is-page-builder"&gt;&lt;a href="#whats-is-page-builder"&gt;What’s is Page Builder &lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Drag and drop editors are a great tool for quickly designing custom layouts without the need to write code. To help journalists to make editorially-driven layouts, JEO Newsroom uses Page Builder by Site Origin. It’s a free and open source plug-in which makes it easy to create responsive grid-based page content in WordPress&lt;/p&gt;
&lt;p&gt;Site Origin has created a useful set of introductory documentation with videos and detailed overview of all of Page Builder’s features. We’re going to cover the basics and go into how we are using Page Builder with the &lt;a href="https://geojournalism.org/tracks/jeo-wordpress-theme/" title="JEO WordPress Theme"&gt;JEO WordPress Theme&lt;/a&gt;. If you’re just getting started please have at this first to familiarize yourself with the terminology and features.&lt;/p&gt;
&lt;a class="small-button smallsilver" href="https://siteorigin.com/page-builder/documentation" target="_blank"&gt;Open the SiteOrigin Documentation&lt;/a&gt;
&lt;h2 class="summary-item" id="build-a-layout-with-rows-and-columns"&gt;&lt;a href="#build-a-layout-with-rows-and-columns"&gt;Build a Layout with Rows and Columns&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2016/08/metal-grid-13951738595M9.jpg"&gt;&lt;img alt="metal-grid-13951738595M9" class="alignnone size-large wp-image-1602" decoding="async" fetchpriority="high" height="768" sizes="(max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/metal-grid-13951738595M9-1024x768.jpg" srcset="https://geojournalism.org/wp-content/uploads/2016/08/metal-grid-13951738595M9-1024x768.jpg 1024w, https://geojournalism.org/wp-content/uploads/2016/08/metal-grid-13951738595M9-300x225.jpg 300w, https://geojournalism.org/wp-content/uploads/2016/08/metal-grid-13951738595M9.jpg 1920w" width="1024"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;The basic structure of page building is the grid.  Configurations of rows and columns create a grid system, which ensures page builder layouts are consistent, modular, and mobile friendly. Once you create the first row, you have the option to add columns within that row to design how many page elements you want to include. You can also control the overall appearance of the row using the row settings. There are three options; Standard, Full Width and Full Width Stretched. Here are some examples for each row style looks:&lt;/p&gt;
&lt;h2 class="summary-item" id="adding-widgets"&gt;&lt;a href="#adding-widgets"&gt;Adding Widgets&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;As are a core part of WordPress, widgets are typically used to create sidebars and page footers. In page builder, widgets have a higher power. They are the building blocks of your story or page. Widgets provide the ability to add multimedia and interactivity to your page.&lt;/p&gt;
&lt;p&gt;In JEO Newsroom, we’ve included are number of fundamental widgets to get you started but you can add others by installing and activating plug-ins. On our Open Earth multi-site, we have a pre-approved set of plug-ins available so I’m limiting this tutorial to what’s available there:&lt;/p&gt;
&lt;h3 class="summary-item" id="newsroom-widgets"&gt;&lt;a href="#newsroom-widgets"&gt;Newsroom Widgets&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;These widgets are prominently featured in the design of home and landing pages. Editors often need the flexibility to chose what types of stories they want to feature and each of these widgets contains a “Query Builder” used to select content based on its tagging. For example, if you want to create a topic page about hydropower, you can build a query for stories using the water and energy category or a specific hydropower tag. You can set the selection criteria once and your content will automatically updated as new stories come in.&lt;/p&gt;
&lt;p&gt;Each widget is has a unique design style and can be mixed and matched with other widgets to build engaging pages.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Highlight Carousel- &lt;/strong&gt;Displays featured posts with featured image as a interactive carousel&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;List Posts&lt;/strong&gt; – Displays a series of images in a regular list format.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;List Images – &lt;/strong&gt;Displays a series of image landscape format.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Square Posts&lt;/strong&gt; -Displays a selection of posts in a small square image format.&lt;/li&gt;
&lt;/ul&gt;

		&lt;div class="et-image-slider et_sliderfx_slide et_sliderauto_true et_sliderauto_speed_5000 et_slidertype_images"&gt;
			&lt;div class="et-image-slides"&gt;
				&lt;div class="et-tabs-content-wrapper"&gt;
					&lt;div class="et_slidecontent et-image-slide"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-Carosel.png"&gt;&lt;img alt="Newsroom Carosel" class="alignnone size-large wp-image-1606" decoding="async" height="382" sizes="(max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-Carosel-1024x382.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-Carosel-1024x382.png 1024w, https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-Carosel-300x112.png 300w" width="1024"/&gt;&lt;/a&gt;&lt;span class="et-image-overlay"&gt; &lt;/span&gt;&lt;/div&gt; 
		&lt;div class="et_slidecontent et-image-slide"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-List-Posts.png"&gt;&lt;img alt="Newsroom List Posts" class="alignnone size-large wp-image-1605" decoding="async" height="364" sizes="(max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-List-Posts-1024x364.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-List-Posts-1024x364.png 1024w, https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-List-Posts-300x107.png 300w" width="1024"/&gt;&lt;/a&gt;&lt;span class="et-image-overlay"&gt; &lt;/span&gt;&lt;/div&gt; 
		&lt;div class="et_slidecontent et-image-slide"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-List-Images.png"&gt;&lt;img alt="Newsroom List Images" class="alignnone size-large wp-image-1608" decoding="async" height="276" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-List-Images-1024x276.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-List-Images-1024x276.png 1024w, https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-List-Images-300x81.png 300w" width="1024"/&gt;&lt;/a&gt;&lt;span class="et-image-overlay"&gt; &lt;/span&gt;&lt;/div&gt; 
		&lt;div class="et_slidecontent et-image-slide"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-Square-Posts.png"&gt;&lt;img alt="Newsroom Square Posts" class="alignnone size-large wp-image-1607" decoding="async" height="214" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-Square-Posts-1024x214.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-Square-Posts-1024x214.png 1024w, https://geojournalism.org/wp-content/uploads/2016/08/Newsroom-Square-Posts-300x63.png 300w" width="1024"/&gt;&lt;/a&gt;&lt;span class="et-image-overlay"&gt; &lt;/span&gt;&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;  .et-image-slider 
		
&lt;h3 class="summary-item" id="jeo-widgets"&gt;&lt;a href="#jeo-widgets"&gt;JEO Widgets&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;JEO is the WordPress theme for integrating mapping into our content. It handles the layers, maps, and integration with map tile providers. JEO is the parent of Newsroom so this site can use all the features of JEO and extend them to match the needs of journalists. Right now, we only have one JEO widget used for adding custom maps to your pages.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2016/08/JEO-Map-Widget.png"&gt;&lt;img alt="JEO Map Widget" class="alignnone size-large wp-image-1612" decoding="async" height="667" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/JEO-Map-Widget-1024x667.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/JEO-Map-Widget-1024x667.png 1024w, https://geojournalism.org/wp-content/uploads/2016/08/JEO-Map-Widget-300x195.png 300w, https://geojournalism.org/wp-content/uploads/2016/08/JEO-Map-Widget.png 1544w" width="1024"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;JEO Map Widget&lt;/strong&gt; – Display a map from JEO Map content type. (Also chose to display with or without geo-located posts)&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 class="summary-item" id="site-origin-widgets"&gt;&lt;a href="#site-origin-widgets"&gt;Site Origin Widgets&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;&lt;strong&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2016/08/Site-Origin-Widgets.png"&gt;&lt;img alt="Site Origin Widgets" class="alignnone size-large wp-image-1603" decoding="async" height="438" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/Site-Origin-Widgets-1024x438.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/Site-Origin-Widgets-1024x438.png 1024w, https://geojournalism.org/wp-content/uploads/2016/08/Site-Origin-Widgets-300x128.png 300w, https://geojournalism.org/wp-content/uploads/2016/08/Site-Origin-Widgets.png 1750w" width="1024"/&gt;&lt;/a&gt;&lt;br/&gt;
&lt;/strong&gt;These are the widgets from the creators of page builder and are really versatile. I often use SiteOrigin widgets for in-depth reports with multimedia elements that would benefit from a more flexible layout. Here are&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;SiteOrigin Editor&lt;/strong&gt; – The familiar WP rich-text editor&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;SiteOrigin Headline&lt;/strong&gt; – Add custom typography for pull quotes and intro text.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Site Origin Image&lt;/strong&gt; – A simple image widget with massive power.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Site Origin Hero Image&lt;/strong&gt; – The widget used for adding text over image or video.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Site Origin Video Player&lt;/strong&gt; – Add videos from the site or a external source.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Site Origin Slider&lt;/strong&gt; – A responsive slider widget that supports images and video.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Site Origin Button&lt;/strong&gt; – A customizable button widget.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Site Origin Google Maps&lt;/strong&gt; – A Google Maps widget.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 class="summary-item" id="jetpack-widgets"&gt;&lt;a href="#jetpack-widgets"&gt;JETPACK Widgets&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;This set of widgets is included to bring in social media to the pages. I’ve highlighted a few I use often below.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2016/08/Jetpack-Widgets.png"&gt;&lt;img alt="Jetpack Widgets" class="alignnone size-large wp-image-1604" decoding="async" height="501" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/Jetpack-Widgets-1024x501.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/Jetpack-Widgets-1024x501.png 1024w, https://geojournalism.org/wp-content/uploads/2016/08/Jetpack-Widgets-300x147.png 300w, https://geojournalism.org/wp-content/uploads/2016/08/Jetpack-Widgets.png 1730w" width="1024"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Twitter Timeline&lt;/strong&gt; -Display an official Twitter Embedded Timeline widget.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Social Media Icons&lt;/strong&gt; – A simple widget that displays social media icons.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Facebook Like Box&lt;/strong&gt;– Display a Facebook Like Box to connect visitors to your Facebook Page&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 class="summary-item" id="live-preview-your-design"&gt;&lt;a href="#live-preview-your-design"&gt;Live Preview your Design&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2016/08/Page-Builder-Live-Preview.png"&gt;&lt;img alt="Page Builder Live Preview" class="alignnone size-large wp-image-1610" decoding="async" height="403" loading="lazy" sizes="auto, (max-width: 1024px) 100vw, 1024px" src="https://geojournalism.org/wp-content/uploads/2016/08/Page-Builder-Live-Preview-1024x403.png" srcset="https://geojournalism.org/wp-content/uploads/2016/08/Page-Builder-Live-Preview-1024x403.png 1024w, https://geojournalism.org/wp-content/uploads/2016/08/Page-Builder-Live-Preview-300x118.png 300w" width="1024"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;One of the most convenient features is the live preview option accessible through the button on the top bar of the text editor. Using preview your work see how your page will look on desktop, tablet, and mobile without having to repeatedly preview your work in a separate tab. For complex reports with lots of multimedia, this feature is a major time saver.&lt;/p&gt;
&lt;h2 class="summary-item" id="publish"&gt;&lt;a href="#publish"&gt;Publish!&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Once you are happy with the content of your page, relish the moment and click the publish button.&lt;/p&gt;
&lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type"/&gt;
&lt;p&gt;The post &lt;a href="https://geojournalism.org/2016/08/create-media-rich-reports-with-page-builder/"&gt;Create Media-rich Reports with Page Builder&lt;/a&gt; appeared first on &lt;a href="https://geojournalism.org"&gt;geojournalism.org&lt;/a&gt;.&lt;/p&gt;
</ns4:encoded>
					
		
		
		<ns2:post-id>1595</ns2:post-id>	</item>
		<item>
		<title>Create immersive photo experiences with Google Photo Sphere</title>
		<link>https://geojournalism.org/2015/02/create-immersive-photo-experiences-with-google-photo-sphere/</link>
		
		<dc:creator>Vanessa Schneider</dc:creator>
		<pubDate>Wed, 04 Feb 2015 19:27:36 +0000</pubDate>
				<category>Design</category>
		<category>Mobile</category>
		<guid isPermaLink="false">https://geojournalism.org/?p=1350</guid>

					<description>&lt;p&gt;In this tutorial, we&amp;#8217;ll learn how to use Google Photo Sphere to capture 360-degree photo panoramas and embed them on your website Introduction You use photographs in your stories every day. They help bring a story to life in the way text can&amp;#8217;t. With better, faster and cheaper mobile technology, journalists are experimenting with panoramas [&amp;#8230;]&lt;/p&gt;
&lt;p&gt;The post &lt;a href="https://geojournalism.org/2015/02/create-immersive-photo-experiences-with-google-photo-sphere/"&gt;Create immersive photo experiences with Google Photo Sphere&lt;/a&gt; appeared first on &lt;a href="https://geojournalism.org"&gt;geojournalism.org&lt;/a&gt;.&lt;/p&gt;
</description>
										<ns4:encoded>&lt;p&gt;In this tutorial, we’ll learn how to use Google Photo Sphere to capture 360-degree photo panoramas and embed them on your website&lt;/p&gt;
&lt;h1 class="summary-item" id="introduction"&gt;&lt;a href="#introduction"&gt;Introduction&lt;/a&gt;&lt;/h1&gt;
&lt;p&gt;You use photographs in your stories every day. They help bring a story to life in the way text can’t. With better, faster and cheaper mobile technology, journalists are experimenting with panoramas to provide a richer photo experience for their audiences. In this tutorial, we’ll highlight &lt;a href="https://www.google.com/maps/about/contribute/photosphere/"&gt;Google Photo Sphere&lt;/a&gt;, 360-panoramas — think: Google Maps Street View — you can create for free using your Android or iOS device. Once you’ve made your photo sphere, you can embed it in your web-based stories to provide immersive, engaging story elements.&lt;/p&gt;
&lt;p&gt;&lt;iframe frameborder="0" height="315" loading="lazy" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.com/maps?layer=c&amp;amp;panoid=komEPgzqjVQAAAQZSFf3cw&amp;amp;ie=UTF8&amp;amp;source=embed&amp;amp;output=svembed&amp;amp;cbp=13%2C42.76491795149667%2C%2C0%2C5.494970183186624" width="560"&gt;&lt;/iframe&gt;&lt;/p&gt;
&lt;div&gt;&lt;small&gt;&lt;a href="https://www.google.com/maps/views/" style="color: #0000ff; text-align: left;"&gt;Views&lt;/a&gt;: &lt;a href="https://www.google.com/maps/views/view/117565688403001302622/gphoto/6106943174652230530" style="color: #0000ff; text-align: left;"&gt;On Top of the Himalayas&lt;/a&gt; by &lt;a href="https://www.google.com/maps/views/profile/117565688403001302622" style="color: #0000ff; text-align: left;"&gt;Arroz Marisco&lt;/a&gt;&lt;/small&gt;&lt;/div&gt;
&lt;h1 class="summary-item" id="getting-started-prerequisites"&gt;&lt;a href="#getting-started-prerequisites"&gt;Getting started (prerequisites)&lt;/a&gt;&lt;/h1&gt;
&lt;p&gt;For this exercise, you’ll need an Android (4.4+) or iOS device. If you’re using an Android device, make sure to have the &lt;a href="https://play.google.com/store/apps/details?id=com.google.android.GoogleCamera&amp;amp;hl=en"&gt;Google Camera app&lt;/a&gt; installed. If using an iOS device, download the &lt;a href="https://itunes.apple.com/us/app/photo-sphere-camera/id904418768?mt=8"&gt;Photo Sphere Camera&lt;/a&gt; app from the App Store. You can also create photo spheres with a DSLR camera and third-party panorama software (more info below).&lt;/p&gt;
&lt;h1 class="summary-item" id="step-1-learn-how-to-create-a-photo-sphere"&gt;&lt;a href="#step-1-learn-how-to-create-a-photo-sphere"&gt;Step 1: Learn how to create a photo sphere&lt;/a&gt;&lt;/h1&gt;
&lt;p&gt;To get started creating photo spheres, first watch the following instructional video:&lt;/p&gt;
&lt;p&gt;&lt;iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" height="281" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/NPs3eIiWRaw?feature=oembed&amp;amp;enablejsapi=1" title="How to create a photo sphere" width="500"&gt;&lt;/iframe&gt;&lt;/p&gt;
&lt;h1 class="summary-item" id="step-2-create-a-photo-sphere"&gt;&lt;a href="#step-2-create-a-photo-sphere"&gt;Step 2: Create a photo sphere&lt;/a&gt;&lt;/h1&gt;
&lt;p&gt;&lt;strong&gt;&lt;em&gt;Create a photo sphere with your Android device:&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Open the &lt;a href="https://play.google.com/store/apps/details?id=com.google.android.GoogleCamera&amp;amp;hl=en" target="_blank"&gt;Google Camera&lt;/a&gt; app on your device.&lt;/li&gt;
&lt;li&gt;Swipe to the right and touch Photo Sphere.&lt;/li&gt;
&lt;li&gt;Hold your device vertically, close to your body.&lt;/li&gt;
&lt;li&gt;Adjust the camera angle so the blue dot is centered inside the circle. Hold the camera steady until a frame of the scene appears.&lt;/li&gt;
&lt;li&gt;Rotate yourself and your camera slowly, following the dots through the area you want to capture.&lt;/li&gt;
&lt;li&gt;Touch the check mark at the bottom of the screen when done.&lt;/li&gt;
&lt;li&gt;When your photo sphere is done processing, you can view it in your device’s gallery.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2015/02/photosphere_camera_android.png"&gt;&lt;img alt="photosphere_camera_android" class="aligncenter size-full wp-image-1378" decoding="async" height="600" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2015/02/photosphere_camera_android.png" width="900"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;em&gt;Create a photo sphere with your iOS device:&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Open the &lt;a href="https://itunes.apple.com/us/app/photo-sphere-camera/id904418768?mt=8" target="_blank"&gt;Photo Sphere Camera app&lt;/a&gt; on your phone.&lt;/li&gt;
&lt;li&gt;Tap the orange camera button.&lt;/li&gt;
&lt;li&gt;Hold your device vertically, close to your body.&lt;/li&gt;
&lt;li&gt;Adjust the camera angle so the orange dot is centered inside the circle. Hold the camera steady until a frame of the scene appears.&lt;/li&gt;
&lt;li&gt;Rotate yourself and your camera slowly, following the dots through the area you want to capture.&lt;/li&gt;
&lt;li&gt;Touch the check mark at the bottom of the screen when done.&lt;/li&gt;
&lt;li&gt;When your photo sphere is done processing, you can view it in your device’s gallery.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2015/02/Photosphere-camera_iOS_flow.png"&gt;&lt;img alt="Photosphere-camera_iOS_flow" class="aligncenter size-full wp-image-1379" decoding="async" height="600" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2015/02/Photosphere-camera_iOS_flow.png" width="900"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;em&gt;Create a photo sphere with your DSLR camera&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Take a series of overlapping photos that together cover a full 360 degrees.&lt;/li&gt;
&lt;li&gt;Make a note of where you’ve taken the panorama so that you can add this information into the image file later.&lt;/li&gt;
&lt;li&gt;Using panorama stitching software, create a 360-degree panorama and save the image as a jpeg.&lt;/li&gt;
&lt;li&gt;Convert your panorama into the photo sphere format using this &lt;a href="https://photo-sphere.appspot.com/" target="_blank"&gt;quick and easy tool&lt;/a&gt;, which will add &lt;a href="https://developers.google.com/photo-sphere/metadata/" target="_blank"&gt;metadata&lt;/a&gt; to your panorama.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;Tips for capturing great photo spheres&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Start capturing your photo sphere around the horizon, then capture above and below&lt;/li&gt;
&lt;li&gt;Slightly tilt the phone up or down, keeping your phone in roughly the same location&lt;/li&gt;
&lt;li&gt;Capture several photos (most devices will require 10 photos for a full sphere)&lt;/li&gt;
&lt;/ul&gt;
&lt;h1 class="summary-item" id="step-3-share-and-embed-your-photo-sphere"&gt;&lt;a href="#step-3-share-and-embed-your-photo-sphere"&gt;Step 3: Share and embed your photo sphere&lt;/a&gt;&lt;/h1&gt;
&lt;p&gt;You’ve created your photo sphere, and now you’re ready to share it with your audience. Here’s how:&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;strong&gt;Quickly and easily embed a photo sphere on your website&lt;/strong&gt;&lt;/em&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Visit your &lt;a href="https://www.google.com/maps/views/home?gl=us"&gt;Views profile&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Click on the photo sphere you’d like to share.&lt;/li&gt;
&lt;li&gt;Select the Share button in the menu on the right&lt;/li&gt;
&lt;li&gt;Copy the snippet of code under “Embed this image”&lt;/li&gt;
&lt;li&gt;Paste the iframe into the source code of your webpage&lt;/li&gt;
&lt;li&gt;Customize the height and width of the photo sphere directly in the iframe&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2015/02/photosphere-camera-desktop-share.png"&gt;&lt;img alt="photosphere-camera-desktop-share" class="aligncenter size-full wp-image-1380" decoding="async" height="600" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2015/02/photosphere-camera-desktop-share.png" width="900"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;&lt;em&gt;Create a Google Maps API custom Street View webpage&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Share the photo sphere saved in your device’s photo gallery with yourself.&lt;/li&gt;
&lt;li&gt;Select “Choose File” and upload that jpeg to the &lt;a href="https://street-sphere.appspot.com/"&gt;Street Sphere generator&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Hit “Upload!” to generate an HTML file of custom Street View code.&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Congratulations! You are now ready to create and share photo spheres.&lt;/p&gt;

		&lt;div class="author-shortcodes"&gt;
			&lt;div class="author-inner"&gt;
				&lt;div class="author-image"&gt;
			&lt;img alt="" src="https://geojournalism.org/wp-content/uploads/2015/02/Vanessa-Schneider.jpg"/&gt;
			&lt;div class="author-overlay"&gt;&lt;/div&gt;
		&lt;/div&gt; &lt;!-- .author-image --&gt; 
		&lt;div class="author-info"&gt;
			&lt;strong&gt;Vanessa Schneider&lt;/strong&gt;
&lt;p&gt;&lt;strong&gt;Program Manager, &lt;/strong&gt;&lt;strong&gt;Google Earth Outreach&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Vanessa has been with Google for four years, most recently as the Geo Media lead, helping journalists around the world tell stories with Google Maps and Google Earth. Before joining Google, Vanessa worked at The New York Times, Time Inc., and at New York startup Hot Potato, acquired by Facebook in summer 2010.
		&lt;/p&gt;&lt;/div&gt; &lt;!-- .author-info --&gt;
			&lt;/div&gt; &lt;!-- .author-inner --&gt;
		&lt;/div&gt;  .author-shortcodes 
&lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type"/&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;The post &lt;a href="https://geojournalism.org/2015/02/create-immersive-photo-experiences-with-google-photo-sphere/"&gt;Create immersive photo experiences with Google Photo Sphere&lt;/a&gt; appeared first on &lt;a href="https://geojournalism.org"&gt;geojournalism.org&lt;/a&gt;.&lt;/p&gt;
</ns4:encoded>
					
		
		
		<ns2:post-id>1350</ns2:post-id>	</item>
		<item>
		<title>Making Maps with JEO</title>
		<link>https://geojournalism.org/2015/02/making-maps-with-jeo/</link>
		
		<dc:creator>Willie Shubert</dc:creator>
		<pubDate>Wed, 04 Feb 2015 17:55:42 +0000</pubDate>
				<category>Apps</category>
		<category>Design</category>
		<category>Maps</category>
		<category>cartography</category>
		<category>environmental data</category>
		<guid isPermaLink="false">https://geojournalism.org/?p=1335</guid>

					<description>&lt;p&gt;The basic component of a map is its layers&amp;#8212;an individually designed dataset&amp;#8212;that are combined together to tell a story. In JEO 1.o and beyond, maps&amp;#160;are built&amp;#160;utilizing a&amp;#160;layers content type which allows editors to more easily reuse the data they mapped. &amp;#160;These layers are organized and configured in combination with a base map that usually consists [&amp;#8230;]&lt;/p&gt;
&lt;p&gt;The post &lt;a href="https://geojournalism.org/2015/02/making-maps-with-jeo/"&gt;Making Maps with JEO&lt;/a&gt; appeared first on &lt;a href="https://geojournalism.org"&gt;geojournalism.org&lt;/a&gt;.&lt;/p&gt;
</description>
										<ns4:encoded>&lt;p&gt;The basic component of a map is its layers—an individually designed dataset—that are combined together to tell a story. In JEO 1.o and beyond, maps are built utilizing a layers content type which allows editors to more easily reuse the data they mapped.  These layers are organized and configured in combination with a base map that usually consists of place names, roads, and major natural features.&lt;/p&gt;
&lt;div class="wp-caption aligncenter" id="attachment_1337" style="width: 570px"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2015/02/Ekuatorial_Marine_Traffic.png"&gt;&lt;img alt="Map of marine traffic in the  Java Sea  published by geojournalism project Ekuatorial" aria-describedby="caption-attachment-1337" class="wp-image-1337" decoding="async" height="376" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2015/02/Ekuatorial_Marine_Traffic.png" width="560"/&gt;&lt;/a&gt;&lt;p class="wp-caption-text" id="caption-attachment-1337"&gt;Map of marine traffic in the Java Sea published by geojournalism project Ekuatorial. The basemap focuses on the readers attention on the ocean areas of the map and is used to contexualize data layers showing shipping lanes and marine protected areas.&lt;/p&gt;&lt;/div&gt;
&lt;h1 class="summary-item" id="add-a-new-layer"&gt;&lt;a href="#add-a-new-layer"&gt; Add a New Layer&lt;/a&gt;&lt;/h1&gt;
&lt;p&gt;JEO’s maps are created by stacking one or more custom thematic layers on top of a basemap. A thematic layer is made from a dataset that illustrates and provides context to the map. Layers are displayed as tiles that are hosted on external servers and connected with the JEO template through APIs and URLs.&lt;/p&gt;
&lt;p&gt;To add more layers, you can use the “Add MapBox layer” and “Add CartoDB layer” buttons if you want to use layers from these servers. Otherwise, use “Add tile layer.” Inside the box that is created after adding a layer you’ll see three fields that need to be filled out:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Title, which is the name of your layer. It will always be used when you need to refer to this layer (in a menu, for example).&lt;/li&gt;
&lt;li&gt;ID or URL. This is where you should put the URL of the layer, or, in the case of a MapBox layer, your ID.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt; &lt;/p&gt;

			&lt;div class="et-tabs-container et_sliderfx_fade et_sliderauto_false et_sliderauto_speed_5000 et_slidertype_top_tabs"&gt;
				&lt;ul class="et-tabs-control"&gt;
			&lt;li&gt;&lt;a href="#"&gt;
			Add a Tile Layer
		&lt;/a&gt;&lt;/li&gt; 
		&lt;li&gt;&lt;a href="#"&gt;
			Add a MapBox Layer
		&lt;/a&gt;&lt;/li&gt; 
		&lt;li&gt;&lt;a href="#"&gt;
			Add a CartoDB Layer
		&lt;/a&gt;&lt;/li&gt; 
		&lt;li&gt;&lt;a href="#"&gt;
			Add a Layer Legend
		&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt; &lt;!-- .et-tabs-control --&gt; 
		&lt;div class="et-tabs-content"&gt;
			&lt;div class="et-tabs-content-wrapper"&gt;
				&lt;div class="et_slidecontent"&gt;
			&lt;a href="https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.17.56-PM.png"&gt;&lt;img alt="Screen Shot 2016-03-16 at 3.17.56 PM" class="alignnone size-medium wp-image-1569" decoding="async" height="276" loading="lazy" sizes="auto, (max-width: 300px) 100vw, 300px" src="https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.17.56-PM-300x276.png" srcset="https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.17.56-PM-300x276.png 300w, https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.17.56-PM-1024x943.png 1024w, https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.17.56-PM.png 1440w" width="300"/&gt;&lt;/a&gt;
		&lt;/div&gt; 
		&lt;div class="et_slidecontent"&gt;
			&lt;img alt="Screen Shot 2016-03-16 at 3.18.02 PM" class="alignnone size-medium wp-image-1570" decoding="async" height="95" loading="lazy" sizes="auto, (max-width: 300px) 100vw, 300px" src="https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.18.02-PM-300x95.png" srcset="https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.18.02-PM-300x95.png 300w, https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.18.02-PM-1024x325.png 1024w, https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.18.02-PM.png 1424w" width="300"/&gt;
		&lt;/div&gt; 
		&lt;div class="et_slidecontent"&gt;
			&lt;a href="https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.18.08-PM.png"&gt;&lt;img alt="Screen Shot 2016-03-16 at 3.18.08 PM" class="alignnone size-medium wp-image-1571" decoding="async" height="137" loading="lazy" sizes="auto, (max-width: 300px) 100vw, 300px" src="https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.18.08-PM-300x137.png" srcset="https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.18.08-PM-300x137.png 300w, https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.18.08-PM-1024x467.png 1024w, https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.18.08-PM.png 1418w" width="300"/&gt;&lt;/a&gt;
		&lt;/div&gt; 
		&lt;div class="et_slidecontent"&gt;
			&lt;a href="https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.18.31-PM.png"&gt;&lt;img alt="Screen Shot 2016-03-16 at 3.18.31 PM" class="alignnone size-medium wp-image-1572" decoding="async" height="300" loading="lazy" sizes="auto, (max-width: 261px) 100vw, 261px" src="https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.18.31-PM-261x300.png" srcset="https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.18.31-PM-261x300.png 261w, https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.18.31-PM.png 552w" width="261"/&gt;&lt;/a&gt;
		&lt;/div&gt;
			&lt;/div&gt;
		&lt;/div&gt;
			&lt;/div&gt;  .et-tabs-container 
&lt;p&gt;Each layer contains a field for adding the legend to describes the dataset and show how it is symbolized. The legend needs to be written in HTML and is flexible to accept a number of custom styles. Please see this the InfoAmazonia, Ekuatorial, or Third Pole github repository for some example of how these are written.&lt;/p&gt;
&lt;h1 class="summary-item" id="add-a-new-map"&gt;&lt;a href="#add-a-new-map"&gt;Add a New Map&lt;/a&gt;&lt;/h1&gt;
&lt;p&gt;JEO’s maps are created by stacking one or more custom thematic layers on top of a base map. The Maps Content Type is there location where layers are named and organized into Maps. This is done by configuring the “Maps Setup” section of the form. The basic component of a map is its layers—an individually designed dataset—that are combined together to tell a story. These layers are organized and configured in combination with a base map that usually consists of place names, roads, and major natural features.&lt;/p&gt;
&lt;h1 class="summary-item" id="choose-a-base-layer"&gt;&lt;a href="#choose-a-base-layer"&gt;Choose a Base Layer&lt;/a&gt;&lt;/h1&gt;
&lt;p&gt;The base layer is the layer is bottom most layer in your map; providing a visual foundation for all of the data added on top. There are a variety of already created base maps you can choose from, including:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;OpenStreetMap,&lt;/li&gt;
&lt;li&gt;Mapquest,&lt;/li&gt;
&lt;li&gt;Mapquest Satellite,&lt;/li&gt;
&lt;li&gt;Stamen Toner,&lt;/li&gt;
&lt;li&gt;Stamen Watercolour,&lt;/li&gt;
&lt;li&gt;Stamen Terrain,&lt;/li&gt;
&lt;li&gt;Other (used for when you have your own tilelayer URL)&lt;/li&gt;
&lt;li&gt;None (in case you want to use a base from an already existing layer in your website).&lt;/li&gt;
&lt;/ul&gt;
&lt;h1 class="summary-item" id="add-and-organize-thematic-layers"&gt;&lt;a href="#add-and-organize-thematic-layers"&gt;Add and Organize Thematic Layers&lt;/a&gt;&lt;/h1&gt;
&lt;p&gt;The design of the map is closely related to its order of information. One of the most important concepts in cartography is called visual hierarchy. The idea is focused on making the most important information the most visually prominent in the design. Once you’ve identified the most important information you put it on the top and add supporting data underneath.&lt;/p&gt;
&lt;p&gt;For example a deforestation map will be ordered like this: forest loss, forest concessions, protected areas, forest height. Layers are displayed according to their visual hierarchy. The higher the layer in the list, the higher its visual priority in the stack of layers that have been added to the map&lt;/p&gt;
&lt;p&gt;Within the Map CT, there is a searchable interface for finding and selecting the layers you want to add to your map. These layers were named during the first step of this tutorial. When you select multiple layers, their display order is from top to bottom.&lt;/p&gt;
&lt;p&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.17.28-PM.png"&gt;&lt;img alt="Map CT Layer Selector" class="size-medium wp-image-1573 aligncenter" decoding="async" height="300" loading="lazy" sizes="auto, (max-width: 300px) 100vw, 300px" src="https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.17.28-PM-300x300.png" srcset="https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.17.28-PM-300x300.png 300w, https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.17.28-PM-150x150.png 150w, https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.17.28-PM-1021x1024.png 1021w, https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.17.28-PM-260x260.png 260w, https://geojournalism.org/wp-content/uploads/2015/02/Screen-Shot-2016-03-16-at-3.17.28-PM.png 1458w" width="300"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Once you have selected the layers you want to appear in your map, you the select options that control how your audience can interact with your selected layers. The layers can be:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Fixed – use this if you don’t want to allow the viewer to turn off the layer.&lt;/li&gt;
&lt;li&gt;Switchable – when you want that the viewer to be able to switch the layer on and off.&lt;/li&gt;
&lt;li&gt;Swapable – when you would like to permit a choice between a set of layers.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;You can review the map design before publishing by clicking on the “UPDATE PREVIEW” button.&lt;/p&gt;
&lt;h1 class="summary-item" id="defining-the-center-point-scale-and-scope-of-the-map"&gt;&lt;a href="#defining-the-center-point-scale-and-scope-of-the-map"&gt;Defining the Center Point, Scale and Scope of the Map&lt;/a&gt;&lt;/h1&gt;
&lt;p&gt;The last step before publishing the map is the “Map Configurations” section. This is located under the preview map window. Here you can set some limits on the where a user can move to within the map (most maps are not global and should be define). There are three ways to hone in on the interaction.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;The center and initial zoom: This is the default view for the map when the page loads.&lt;/li&gt;
&lt;li&gt;The minimum and maximum zoom: This feature allows you to limit the zoom level to a specific range. Sometime data is now very useful at a high zoom level because it is generalized for a regional map. Other times, the scope of data may only cover a single city. If either of these is the case, limiting the zoom levels will help the map load faster.&lt;/li&gt;
&lt;li&gt;The limits for navigation of the map: Similar to zoom limits, if the map is not global in scale then it is important to put limits on “panning.” Panning is the action of moving the map from side (2-dimensions) to side rather than zooming in and out (3-dimensions).&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2015/02/Captura-de-Tela-2015-02-04-%C3%A0s-09.38.35.png"&gt;&lt;img alt="Captura de Tela 2015-02-04 às 09.38.35" class="alignnone size-full wp-image-1347" decoding="async" height="536" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2015/02/Captura-de-Tela-2015-02-04-%C3%A0s-09.38.35.png" width="922"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;To create these configurations, you can navigate the map and when you are in the position that you desire, click the buttons “Define current as center and zoom” and “Define current as navigation limits”.&lt;/p&gt;
&lt;p&gt;Using the other setting, it is possible to:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Turn off the possibility of using the mouse or touchpad to change the zoom&lt;/li&gt;
&lt;li&gt;Turn on a filter, permitting that the visitors choose the start and end date of the posts which they wish to see&lt;/li&gt;
&lt;li&gt;Turn on a search field on the map&lt;/li&gt;
&lt;/ul&gt;

		&lt;div class="author-shortcodes"&gt;
			&lt;div class="author-inner"&gt;
				&lt;div class="author-image"&gt;
			&lt;img alt="" src="https://photos1.meetupstatic.com/photos/member/2/7/7/f/member_18490111.jpeg"/&gt;
			&lt;div class="author-overlay"&gt;&lt;/div&gt;
		&lt;/div&gt; &lt;!-- .author-image --&gt; 
		&lt;div class="author-info"&gt;
			&lt;strong&gt;Willie Shubert&lt;/strong&gt; is the Senior Project Coordinator for Internews’ Earth Journalism Network. As a coordinator of a global network of environmental journalists, Willie helps make tools that enable people to connect with each other, find material support, and amplify their local stories to global audiences. In his previous position at National Geographic Magazine, he coordinated translation for the magazine’s 32 local language partners. He holds a degree in Geography from Humboldt State University with concentrations in cartography, environmental economics, and Chinese Studies. Outside of work, he devotes his time to the development of a free school dedicated to community building through education and to collaborative mapping and audio projects.
		&lt;/div&gt; &lt;!-- .author-info --&gt;
			&lt;/div&gt; &lt;!-- .author-inner --&gt;
		&lt;/div&gt;  .author-shortcodes 
&lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type"/&gt;
&lt;p&gt;The post &lt;a href="https://geojournalism.org/2015/02/making-maps-with-jeo/"&gt;Making Maps with JEO&lt;/a&gt; appeared first on &lt;a href="https://geojournalism.org"&gt;geojournalism.org&lt;/a&gt;.&lt;/p&gt;
</ns4:encoded>
					
		
		
		<ns2:post-id>1335</ns2:post-id>	</item>
		<item>
		<title>Tips for Using Color in Maps</title>
		<link>https://geojournalism.org/2014/06/tips-for-using-color-in-maps/</link>
		
		<dc:creator>Mapbox</dc:creator>
		<pubDate>Wed, 25 Jun 2014 19:31:02 +0000</pubDate>
				<category>Design</category>
		<category>Maps</category>
		<category>cartography</category>
		<category>color</category>
		<category>Easy</category>
		<category>map design</category>
		<guid isPermaLink="false">https://geojournalism.oeco.org.br/?p=1031</guid>

					<description>&lt;p&gt;Color Theory and Mapping It&amp;#8217;s important to realize how much your choice of color on a map can affect the story you are trying to tell with your data. As a brief introduction to some theories behind how to use colors on maps, here are three primary scheming designs for mapping data. Sequential Schemes Sequential [&amp;#8230;]&lt;/p&gt;
&lt;p&gt;The post &lt;a href="https://geojournalism.org/2014/06/tips-for-using-color-in-maps/"&gt;Tips for Using Color in Maps&lt;/a&gt; appeared first on &lt;a href="https://geojournalism.org"&gt;geojournalism.org&lt;/a&gt;.&lt;/p&gt;
</description>
										<ns4:encoded>&lt;h1 class="summary-item" id="color-theory-and-mapping" title="Link to this section"&gt;&lt;a href="#color-theory-and-mapping"&gt;Color Theory and Mapping&lt;/a&gt;&lt;/h1&gt;
&lt;p&gt;It’s important to realize how much your choice of color on a map can affect the story you are trying to tell with your data. As a brief introduction to some theories behind how to use colors on maps, here are three primary scheming designs for mapping data.&lt;/p&gt;
&lt;p id="sequential_schemes" title="Link to this section"&gt;&lt;strong&gt;Sequential Schemes&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Sequential schemes order data from high to low, accenting the highest as a dark shade and the lowest as a light shade (or vice versa). Sequential schemes are best if you are mapping quantitative data and do not want to focus on one particular range within your data.&lt;br/&gt;
&lt;img alt="sequential" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/sequential.png"/&gt;&lt;/p&gt;
&lt;p id="diverging_schemes" title="Link to this section"&gt;&lt;strong&gt;Diverging Schemes&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Divergent schemes are best at highlighting a particular middle range of quantitative data. Pick two saturated contrasting colors for the extremes of the data, and the middle ranges blend into a lighter mix of the two. This is particularly great for accenting the mean of your data and exposing locations that significantly ‘diverge’ from the norm.&lt;br/&gt;
&lt;img alt="diverging" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/diverging.png"/&gt;&lt;/p&gt;
&lt;p id="qualitative_schemes" title="Link to this section"&gt;&lt;strong&gt;Qualitative Schemes&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;If you are working with qualitative data, such as ethnicity or religion, you want to pick a series of ‘unrelated’ colors. The trick is to pick a really nice color theme so your map looks great. You can also accent particular aspects of your data by your choice of color. For example, one strong dark color among a group of lighter colors will ‘pop’ out of the map, highlighting that particular facet of your data against all others.&lt;br/&gt;
&lt;img alt="qualitative" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/qualitative.png"/&gt;&lt;/p&gt;
&lt;h2 class="summary-item" id="sources-for-color-picking" title="Link to this section"&gt;&lt;a href="#sources-for-color-picking"&gt;Sources for Color-Picking&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Fortunately a number of sites are available to explore color themes. Below are links to some of these with a brief synopsis of their main features that will help you more easily navigate the seas of storytelling via aesthetics. The section ends with two reviews of purchasable tools that you can use from your desktop.&lt;/p&gt;
&lt;h3 class="summary-item" id="0_255" title="Link to this section"&gt;&lt;a href="#0_255"&gt;0_255&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;0_255 is a great site for picking between different shades of one color, so it’s ideal for sequential schemes. It gives you thirty options for any given color, allowing you to instantly copy the color’s hex code. There is a large grid of colors to select from for an initial color, and then 0_255 visualizes a range of shades based on that color. If the grid does not have the color you want, you can pick your own color by pasting in the hex code of your chosen color.&lt;br/&gt;
&lt;img alt="0_255" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/0_255_0.jpg"/&gt;&lt;/p&gt;
&lt;h3 class="summary-item" id="color-scheme-designer" title="Link to this section"&gt;&lt;a href="#color-scheme-designer"&gt;Color Scheme Designer&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Color Scheme Designer allows you to select a color from a color wheel and presents several options for automatically generating colors complementary to your initial choice. Specifically, you can choose between:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Complements&lt;/li&gt;
&lt;li&gt;Triads&lt;/li&gt;
&lt;li&gt;Tetrads&lt;/li&gt;
&lt;li&gt;Analogic&lt;/li&gt;
&lt;li&gt;Accented Analogic&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Once you’ve chosen your color and scheme, you’ll have a color table that gives you several variations of your colors and their corresponding hex codes.&lt;/p&gt;
&lt;p&gt;&lt;img alt="colorscheme" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/colorschemedesigner_1.jpg"/&gt;&lt;/p&gt;
&lt;h3 class="summary-item" id="colour-lovers" title="Link to this section"&gt;&lt;a href="#colour-lovers"&gt;Colour Lovers&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Colour Lovers is great if you are looking for a design theme for mapping qualitative data. Active users contribute palettes to the site, and these palettes are searchable, browsable, and ready to be used on your project. Colour Lovers users also post patterns if you need some spatial inspiration as well.&lt;br/&gt;
&lt;img alt="colourlovers" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/colourlovers_0.jpg"/&gt;&lt;/p&gt;
&lt;h3 class="summary-item" id="kuler" title="Link to this section"&gt;&lt;a href="#kuler"&gt;Kuler&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Kuler is a service similar to Colour Lovers offered by Adobe. A community of designers submit their own themes, which are available for RGB values and hex codes. The design of the site is a little less intuitive than Colour Lovers, but still worth checking out.&lt;br/&gt;
&lt;img alt="kuler" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/kuler_1.jpg"/&gt;&lt;/p&gt;
&lt;p&gt;There are a lot of great ideas being posted by an active community of contributing users. Kuler also provides extensive links to things like forums, help pages, as well as several articles on the importance of color and color theory.&lt;/p&gt;
&lt;h3 class="summary-item" id="colorbrewer" title="Link to this section"&gt;&lt;a href="#colorbrewer"&gt;Colorbrewer&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Colorbrewer is great for contrasting the three kinds of color models mentioned in the first section of this article. It allows you to test out different color themes based on whether you want sequential, diverging, or qualitative schemes and to vary the number of color classes you want in your pallet (up to 12). It also provides some useful ‘further reading’ articles on these theories and other cartographic design ideas.&lt;br/&gt;
&lt;img alt="colorbrewer" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/colorbrewer.jpg"/&gt;&lt;/p&gt;
&lt;h3 class="summary-item" id="pochade" title="Link to this section"&gt;&lt;a href="#pochade"&gt;Pochade&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Pochade is a color picking program that allows you to determine the RGB value and hex code of any color you see on your screen. It also provides a few different ways of manipulating your color, such as changing its HSB, RGB, or CMYK values. This program is available for download for $9.99.&lt;br/&gt;
&lt;img alt="pochade" decoding="async" src="https://www.mapbox.com/tilemill/assets/pages/pochade_0.jpg"/&gt;&lt;/p&gt;
&lt;h3 class="summary-item" id="colorschemer-studio" title="Link to this section"&gt;&lt;a href="#colorschemer-studio"&gt;ColorSchemer Studio&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;ColorSchemer Studio provides three main features: (1) a color class generator (up to 254 – many more than Color Brewer) based on two colors of your choice, (2) a ‘PhotoSchemer’, which allows you to upload a photo and determine up to ten different colors on your chosen photo and (3) integration with colourlovers, including a color browser and the ability to load colors into the first tool to manipulate on your own. ColorSchemer is a powerful tool for your desktop, available for the slightly higher price of $49.99.&lt;/p&gt;
&lt;p&gt;Originally posted on Mapbox: &lt;a href="https://www.mapbox.com/tilemill/docs/guides/tips-for-color/" target="_blank"&gt;https://www.mapbox.&lt;wbr/&gt;com/tilemill/docs/guides/tips-&lt;wbr/&gt;for-color/&lt;/a&gt;&lt;/p&gt;
&lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type"/&gt;
&lt;p&gt;The post &lt;a href="https://geojournalism.org/2014/06/tips-for-using-color-in-maps/"&gt;Tips for Using Color in Maps&lt;/a&gt; appeared first on &lt;a href="https://geojournalism.org"&gt;geojournalism.org&lt;/a&gt;.&lt;/p&gt;
</ns4:encoded>
					
		
		
		<ns2:post-id>1031</ns2:post-id>	</item>
		<item>
		<title>Visualizing data with Processing</title>
		<link>https://geojournalism.org/2013/08/portugues-as-cidades-mais-populosas-do-mundo/</link>
		
		<dc:creator>Gabriel Gianordoli</dc:creator>
		<pubDate>Tue, 27 Aug 2013 21:33:46 +0000</pubDate>
				<category>Design</category>
		<category>Visualization</category>
		<category>charts</category>
		<category>cities</category>
		<category>graphs</category>
		<guid isPermaLink="false">https://geojournalism.oeco.org.br/?p=351</guid>

					<description>&lt;p&gt;In this tutorial we will learn how to load data from an external file and we will create a graph with a population area x for the 10 most populous cities in the world. Introduction Originally created as a tool to teach programming to visual artists, Processing language now has applications in several areas, including [&amp;#8230;]&lt;/p&gt;
&lt;p&gt;The post &lt;a href="https://geojournalism.org/2013/08/portugues-as-cidades-mais-populosas-do-mundo/"&gt;Visualizing data with Processing&lt;/a&gt; appeared first on &lt;a href="https://geojournalism.org"&gt;geojournalism.org&lt;/a&gt;.&lt;/p&gt;
</description>
										<ns4:encoded>&lt;p&gt;In this tutorial we will learn how to load data from an external file and we will create a graph with a population area x for the 10 most populous cities in the world.&lt;span id="more-351"&gt;&lt;/span&gt;&lt;/p&gt;
&lt;h2 class="summary-item" id="introduction"&gt;&lt;a href="#introduction"&gt;Introduction&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Originally created as a tool to teach programming to visual artists, &lt;a href="https://processing.org/" target="_blank"&gt;Processing&lt;/a&gt; language now has applications in several areas, including data visualization. Its simplified syntax is a good alternative for beginners to the coding world, and its development platform can be &lt;a href="https://processing.org/download/" target="_blank"&gt;downloaded for free&lt;/a&gt; online.&lt;/p&gt;
&lt;p&gt;In this tutorial we will learn how to load data from an external file and we will create a graph with a population area x for the 10 most populous cities in the world.&lt;/p&gt;
&lt;h2 class="summary-item" id="processing-environment"&gt;&lt;a href="#processing-environment"&gt;Processing Environment&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;When you open the program, you will find something like a text editor. That’s where we will type commands – no, there is not a “toolbar” here, since the original goal of Processing is to teach programming fundamentals.&lt;/p&gt;
&lt;p&gt;To run the script that we are going to write, just click on the play button at the left top corner of the window. A new window will open, empty for now, since we haven’t created any commands yet. Close it (or press the stop button) and save your file before you start programming – by default its name is the creation date, but you can choose any other name.&lt;/p&gt;
&lt;div&gt;&lt;img alt="Processing" class="aligncenter wp-image-352" decoding="async" height="551" loading="lazy" sizes="auto, (max-width: 717px) 100vw, 717px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing01-1024x787.jpeg" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing01-1024x787.jpeg 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing01-300x230.jpeg 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing01.jpeg 1326w" width="717"/&gt;&lt;/div&gt;
&lt;h2 class="summary-item" id="basic-commands"&gt;&lt;a href="#basic-commands"&gt;Basic Commands&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;To begin to understand Processing syntax, type the code below and run the program:&lt;/p&gt;
&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;size(1200, 200);&lt;br/&gt;
ellipse(600, 100, 100, 100);&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;You will see a window like this:&lt;/p&gt;
&lt;div&gt;&lt;img alt="Processing" class="aligncenter wp-image-353" decoding="async" height="226" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing02-1024x376.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing02-1024x376.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing02-300x110.png 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing02.png 1828w" width="614"/&gt;&lt;/div&gt;
&lt;p&gt;&lt;strong&gt;What does this mean?&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;These commands are called &lt;i&gt;functions&lt;/i&gt;. We use two of them: &lt;i&gt;size&lt;/i&gt; and &lt;i&gt;ellipse.&lt;/i&gt;The first defines the size of the document we are going to work with (in pixels). The second draws an ellipse. Beside each one, inside the parentheses, we have the &lt;i&gt;parameters&lt;/i&gt;: information that the program needs to know for how it will perform each function. In our case:&lt;/p&gt;
&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;size (width of the document, height of the document);&lt;br/&gt;
ellipse (horizontal coordinate of the ellipse, vertical coordinate of the ellipse, width of the ellipse, height of the ellipse);&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;It means that it’s possible to translate the second line as “draw an ellipse 400 pixels from the left edge and 100 pixels from the top, 100 pixels high and 100 pixels wide”. Try to change these numbers to better understand how they work.&lt;/p&gt;
&lt;p&gt;At last, some details we need to be aware of:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;parameters must always be separated by commas (white space makes no difference);&lt;/li&gt;
&lt;li&gt;we always need a &lt;strong&gt;;&lt;/strong&gt; after each command.&lt;/li&gt;
&lt;li&gt;It doesn’t matter if you have a space or a paragraph between these symbols, but they must be there!&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;If you’re curious and want to try other ways before going ahead, take a look at the following commands:&lt;/p&gt;
&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;line()&lt;br/&gt;
point()&lt;br/&gt;
rect()&lt;br/&gt;
triangle()&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;You will find instructions for each one on the Processing &lt;a href="https://processing.org/reference/" target="_blank"&gt;reference web site&lt;/a&gt;.&lt;/p&gt;
&lt;h2 class="summary-item" id="visualizing-accuracy-vs-synthesis"&gt;&lt;a href="#visualizing-accuracy-vs-synthesis"&gt;Visualizing: accuracy vs. synthesis&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;To see the density of each city here, we will use a straightforward technique: representing the total number of inhabitants as points within the city area. This feature offers a less precise notion than a bar chart would, for example – you can not tell the area or the population of the cities just by looking at the pictures below:&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;img alt="Processing" class="aligncenter wp-image-354" decoding="async" height="216" loading="lazy" sizes="auto, (max-width: 318px) 100vw, 318px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing03.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing03.png 398w, https://geojournalism.org/wp-content/uploads/2013/08/processing03-300x203.png 300w" width="318"/&gt;&lt;/p&gt;
&lt;p&gt;Our intention, however, is simply to present a direct visual and intuitive comparison of the theme: more points, more people; larger square, the larger area. In choosing one or another way of visualizing, always think about the balance between these two variables and analyze how they can work best according to the purpose of your chart.&lt;/p&gt;
&lt;h2 class="summary-item" id="formatting-data"&gt;&lt;a href="#formatting-data"&gt;Formatting data&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;We will use data from the 2013 &lt;a href="https://www.demographia.com/db-worldua.pdf" target="_blank"&gt;Demographia World Urban Areas&lt;/a&gt; to draw a graph ranking the 10 most populated cities in the world (table 1).&lt;/p&gt;
&lt;p&gt;A simple and practical data format that can be read in Processing is the &lt;a href="https://en.wikipedia.org/wiki/Tab-separated_values" target="_blank"&gt;tsv&lt;/a&gt; (tab-separated values). Basically, it is a text format that works like a table, with values ​​separated by &lt;i&gt;tabs&lt;/i&gt; instead of cells.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;img alt="Processing" class="aligncenter wp-image-355" decoding="async" height="194" loading="lazy" sizes="auto, (max-width: 717px) 100vw, 717px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing04-1024x277.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing04-1024x277.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing04-300x81.png 300w" width="717"/&gt;&lt;/p&gt;
&lt;p&gt;Transferring data from a PDF file into a table is not always an easy task, since the breaks hardly follow the format of the cells that we need.&lt;/p&gt;
&lt;p&gt;In the image above, we will only need the columns &lt;i&gt;Urban Area&lt;/i&gt;, &lt;i&gt;Population Estimate&lt;/i&gt; e &lt;i&gt;Land Area km2&lt;/i&gt;. You can download the formatted file &lt;a href="https://geojournalism.org/wp-content/uploads/2013/08/cidades.tsv"&gt;here&lt;/a&gt; or try to create your own:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Windows: Use &lt;i&gt;Notepad&lt;/i&gt; and save the file as “cidades.tsv”.&lt;/li&gt;
&lt;li&gt;Mac: Use the &lt;i&gt;Text Edit&lt;/i&gt;. Press &lt;i&gt;command + shift + T&lt;/i&gt; to transform the file into unformatted text. When you save, select &lt;i&gt;Unicode (UTF-8)&lt;/i&gt; in the &lt;i&gt;encoding&lt;/i&gt; option.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 class="summary-item" id="loading-data"&gt;&lt;a href="#loading-data"&gt;Loading data&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Drag the file to the Processing window and you will see the message &lt;i&gt;One file added to the sketch&lt;/i&gt;. This just created a copy of cidades.tsv in the folder that Processing created for you. To read it in the script, add the following code and run:&lt;/p&gt;
&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;size(1200, 200);&lt;br/&gt;
Table tabela = loadTable(“cidades.tsv”, “header”);&lt;br/&gt;
for(int i = 0;&lt;br/&gt;
i &amp;lt; tabela.getRowCount();&lt;br/&gt;
i = i + 1){&lt;br/&gt;
TableRow linha = tabela.getRow(i);&lt;br/&gt;
rect(120*i, 50, linha.getInt(“área”), linha.getInt(“área”));&lt;br/&gt;
}&lt;/div&gt;&lt;/div&gt;
&lt;h2 class="summary-item" id="viewing-area"&gt;&lt;a href="#viewing-area"&gt;Viewing area&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Ok, what is this code doing? Let’s understand line by line:&lt;/p&gt;
&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;size(1200, 200);&lt;br/&gt;
// Loading the file into a table. “header” means that the first line of the file should be understood as a header.&lt;br/&gt;
Table tabela = loadTable(“cidades.tsv”, “header”);&lt;br/&gt;
// Creates an action that will be repeated several times,…&lt;br/&gt;&lt;/div&gt;&lt;/div&gt;
&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;for (int i = 0; //…from a counter that starts at zero,… i &amp;lt; tabela.getRowCount(); // … ends on table size … i = i + 1){ // … and it increases one by one. // In short, it is as if the program started counting “0, 1, 2, 3…” up to “10”, which is the number of rows in our table. For each time it counts, it performs the action below:&lt;/div&gt;&lt;/div&gt;
&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;// Select the row corresponding to the count (i) TableRow linha = tabela.getRow(i);
&lt;p&gt;// It draws a rectangle at position y 50 and x according to the formula “120 times counting”.&lt;/p&gt;
&lt;p&gt;// It means that, in the sequence, coordinate x will be: 0, 120, 240, 360 … to 1080.&lt;/p&gt;
&lt;p&gt;// As our count of 10 elements starts at 0, it goes up to 9! rect(120*i, 50, It defines width and height of each rectangle the value that is read in the “area” linha.getInt(“área”), linha.getInt(“área”)); }&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;&lt;/p&gt;&lt;p&gt;In the resulting image, we can’t see the whole rectangles, because the numbers ​​of the area we have for each city are very large:&lt;/p&gt;
&lt;p&gt;&lt;img alt="Processing" class="aligncenter wp-image-356" decoding="async" height="157" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing05-1024x261.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing05-1024x261.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing05-300x76.png 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing05-1160x296.png 1160w" width="614"/&gt;&lt;/p&gt;
&lt;p&gt;A good solution to solve this is to change the command of the rectangle to:&lt;/p&gt;
&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;rect(120*i, 50,&lt;br/&gt;
sqrt(linha.getInt(“área”)), sqrt(linha.getInt(“área”)));&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;The &lt;i&gt;sqrt&lt;/i&gt; function calculates the square root of a value. For us, it’s a quick and useful way to reduce the sizes:&lt;/p&gt;
&lt;p&gt;&lt;img alt="Processing" class="aligncenter wp-image-357" decoding="async" height="157" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing06-1024x261.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing06-1024x261.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing06-300x76.png 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing06-1160x296.png 1160w" width="614"/&gt;&lt;/p&gt;
&lt;p&gt;Additionally, this patch makes the &lt;i&gt;areas&lt;/i&gt;of rectangles proportional to the values ​​that we are representing, not their &lt;i&gt;height&lt;/i&gt; and &lt;i&gt;width&lt;/i&gt;. This is necessary to avoid distortions when we use a figure like a circle or a rectangle. If we only had to divide the area value by 100, for example, we would have a disproportionate image:&lt;/p&gt;
&lt;p&gt;&lt;/p&gt;&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;rect(120*i, 50,&lt;br/&gt;
linha.getInt(“área”)/100, linha.getInt(“área”)/100);&lt;/div&gt;&lt;/div&gt;&lt;br/&gt;
&lt;img alt="Processing" class="aligncenter wp-image-358" decoding="async" height="157" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing07-1024x261.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing07-1024x261.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing07-300x76.png 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing07-1160x296.png 1160w" width="614"/&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;The picture above makes the cities look much different in area than they really are, a distortion caused by the confusion between &lt;i&gt;linear dimension&lt;/i&gt; (height and width) and size&lt;i&gt;(square area)&lt;/i&gt;.&lt;/p&gt;
&lt;h2 class="summary-item" id="simplifying-the-code"&gt;&lt;a href="#simplifying-the-code"&gt;Simplifying the code&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Before leaving for the second data point of our visualization, the population of each city, we will try to simplify some things to make our algorithm more intelligible:&lt;/p&gt;
&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;size(1200, 200); In the case of the side of the rectangle, Table tabela = loadTable(“cidades.tsv”, “header”);&lt;br/&gt;
for(int i = 0;&lt;br/&gt;
i &amp;lt; tabela.getRowCount();&lt;br/&gt;
i = i + 1){&lt;br/&gt;
TableRow linha = tabela.getRow(i); int posX = 120*i;&lt;br/&gt;
int posY = 50;&lt;br/&gt;
float lado = sqrt(linha.getInt(“área”));&lt;br/&gt;
rect(posX, posY, lado, lado);&lt;br/&gt;
}&lt;br/&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;If you run the code above, you will see that the visual result does not change at all. What we did was just write the same commands in a different way: instead of calculating everything inside the function &lt;i&gt;rect()&lt;/i&gt;, we defined three&lt;i&gt;variables&lt;/i&gt; variables with values ​​and then used them in the drawing of the rectangle:&lt;/p&gt;
&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;int //Specifies the creation of a variable with the same number&lt;br/&gt;
posX
&lt;p&gt;// Variable name, invented so I remember what it refers to&lt;br/&gt;
= 120*i;&lt;/p&gt;
&lt;p&gt;// it assigns the value “120 times i” to my variable&lt;br/&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;&lt;/p&gt;&lt;p&gt;&lt;i&gt;float&lt;/i&gt; means that this variable can store a fractional number, since we do not know if the result of the formula “root area” will be a whole number.&lt;/p&gt;
&lt;h2 class="summary-item" id="viewing-the-population"&gt;&lt;a href="#viewing-the-population"&gt;Viewing the population&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;As mentioned earlier, the idea here is to represent the total number of inhabitants of each city as points within the areas that we have already designed. Below the line with the command &lt;i&gt;rect()&lt;/i&gt;, add the following code:&lt;/p&gt;
&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;Contenfor(int j = 0;&lt;br/&gt;
j &amp;lt; linha.getInt(“população”);&lt;br/&gt;
j = j + 1){&lt;br/&gt;
point(posX,posY);&lt;br/&gt;
}&lt;br/&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Be aware to write this command before the last key &lt;i&gt;}&lt;/i&gt; that you already had in the document. Being inside this key, Processing will understand that this command must be repeated every time it is reading a table row – which is what we want, since we are going to draw the population for each city. The structure here is similar to the previous one:&lt;/p&gt;
&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;// From a counter “j”…&lt;br/&gt;
for(int j = 0;
&lt;p&gt;//… starts at zero…&lt;br/&gt;
j &amp;lt; linha.getInt(“população”);&lt;/p&gt;
&lt;p&gt;//..it goes to the read number&lt;/p&gt;
&lt;p&gt;//in the “population” column, of each line…&lt;br/&gt;
j = j + 1){ // …and it increases one by one…&lt;/p&gt;
&lt;p&gt;//…draw a point.&lt;br/&gt;
point(posX,posY);&lt;br/&gt;
}&lt;br/&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;&lt;/p&gt;&lt;p&gt;If you try to run this code, it is likely that your computer will take a long time – if not stall. This is because the number of repetitions that we are using is very large: 37,239,000 points only for the city of Tokyo! To solve this, change the second line of this section to:&lt;/p&gt;
&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;j &amp;lt; linha.getInt(“população”)/5000;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;With this, we draw 1 point for every 5,000 inhabitants (not 1 to 1).&lt;/p&gt;
&lt;p&gt;We still need to correct one detail: if you study carefully the command &lt;i&gt;point()&lt;/i&gt;, you’ll notice that all points of each city are designed in the same place, one above another: on the x and y coordinate that corresponds to the upper left corner of the square. Change this line to:&lt;/p&gt;
&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;point( random(posX, posX + lado),&lt;br/&gt;
random(posY, posY + lado));&lt;br/&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;The command &lt;i&gt;random()&lt;/i&gt; results in a random number, drawn from a minimum and a maximum value. In our case, the result is:&lt;/p&gt;
&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;point( random number between the x coordinate of the rectangle and the same coordinate + o lado,&lt;br/&gt;
random number between (the y coordinate of the rectangle and the same coordinate + o lado);&lt;br/&gt;&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;Run the program and we will have our final result:&lt;/p&gt;
&lt;p&gt;&lt;img alt="Processing" class="aligncenter wp-image-359" decoding="async" height="157" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/08/processing08-1024x261.png" srcset="https://geojournalism.org/wp-content/uploads/2013/08/processing08-1024x261.png 1024w, https://geojournalism.org/wp-content/uploads/2013/08/processing08-300x76.png 300w, https://geojournalism.org/wp-content/uploads/2013/08/processing08-1160x296.png 1160w" width="614"/&gt;&lt;/p&gt;
&lt;p&gt;In the end, comparisons are obvious: Tokyo and New York are the cities with the largest area, but their population density is much lower than cities like Manila and Karachi.&lt;/p&gt;
&lt;p&gt;If you want to save the file that you created as an image to use in another program, simply add one last line:&lt;/p&gt;
&lt;div class="et-box et-shadow"&gt;
					&lt;div class="et-box-content"&gt;save(“cidades.jpg”);&lt;/div&gt;&lt;/div&gt;
&lt;p&gt;To save in another format such as &lt;i&gt;tif&lt;/i&gt; or &lt;i&gt;png&lt;/i&gt;, , simply change the file extension in the code above.&lt;/p&gt;
&lt;h2 class="summary-item" id="conclusion"&gt;&lt;a href="#conclusion"&gt;Conclusion&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Programming for the first time can sound like an unfriendly task. However, as you start to understand the logic behind the commands, to deal with several languages ​​is just a matter of learning different syntaxes, some are more similar than others. It is similar to speaking several languages​​.&lt;/p&gt;
&lt;p&gt;Even though the work is hard in the beginning, you will see that the advantages are worth it: in the case of the file that we used, for example, you can simply change the .tsv data to generate a different version of the view, without having to make manual adjustments to the image. In addition, programming should be understood more as a language than as a tool: instead of pre-defined resources, you can build the graph how you want it to better fit your data. The possibilities are endless.&lt;/p&gt;
&lt;p&gt;Take a look at this example file and try to change a few parameters to customize it: background color, size, space between areas etc. From there, explore the Processing reference page and try to redo this example using another type of visualization, such as bars or lines.&lt;/p&gt;

		&lt;div class="author-shortcodes"&gt;
			&lt;div class="author-inner"&gt;
				&lt;div class="author-image"&gt;
			&lt;img alt="" src="https://si0.twimg.com/profile_images/1298845056/gabriel_2011.jpg"/&gt;
			&lt;div class="author-overlay"&gt;&lt;/div&gt;
		&lt;/div&gt; &lt;!-- .author-image --&gt; 
		&lt;div class="author-info"&gt;
			I’m a graphic designer in love with numbers.
&lt;p&gt;I am currently enrolled in the Master of Fine Arts – Design &amp;amp; Technology program, at Parsons The New School for Design. My last job was as a senior designer for the Innovation in Technology and User Experience team at Itaú, the largest private bank in Brazil. For the past 6 years, I have been working with information and graphic design, mainly in magazines, and have won some awards.&lt;/p&gt;
&lt;p&gt;I have been invited as a speaker for some major events, including Campus Party, World Information Architecture Day and Pixel Show, the Brazilian largest conference on art and creativity. I also ran workshops on data visualization using the Processing programming language.
		&lt;/p&gt;&lt;/div&gt; &lt;!-- .author-info --&gt;
			&lt;/div&gt; &lt;!-- .author-inner --&gt;
		&lt;/div&gt;  .author-shortcodes 
&lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type"/&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;The post &lt;a href="https://geojournalism.org/2013/08/portugues-as-cidades-mais-populosas-do-mundo/"&gt;Visualizing data with Processing&lt;/a&gt; appeared first on &lt;a href="https://geojournalism.org"&gt;geojournalism.org&lt;/a&gt;.&lt;/p&gt;
</ns4:encoded>
					
		
		
		<ns2:post-id>351</ns2:post-id>	</item>
		<item>
		<title>Basic steps for creating animation</title>
		<link>https://geojournalism.org/2013/08/portugues-principios-basicos-para-criar-uma-animacao/</link>
		
		<dc:creator>Mariana Santos</dc:creator>
		<pubDate>Fri, 16 Aug 2013 21:02:22 +0000</pubDate>
				<category>Design</category>
		<category>Visualization</category>
		<category>animation</category>
		<guid isPermaLink="false">https://geojournalism.oeco.org.br/?p=328</guid>

					<description>&lt;p&gt;In this tutorial, we&amp;#8217;ll learn how to create an animation, it must be a short story that will serve as a teaser to invite the user to get to know the story we want to tell Introduction Animation Concepts The most important part of an animation is the story itself. So it is very important [&amp;#8230;]&lt;/p&gt;
&lt;p&gt;The post &lt;a href="https://geojournalism.org/2013/08/portugues-principios-basicos-para-criar-uma-animacao/"&gt;Basic steps for creating animation&lt;/a&gt; appeared first on &lt;a href="https://geojournalism.org"&gt;geojournalism.org&lt;/a&gt;.&lt;/p&gt;
</description>
										<ns4:encoded>&lt;p&gt;In this tutorial, we’ll learn how to create an animation, it must be a short story that will serve as a teaser to invite the user to get to know the story we want to tell&lt;span id="more-328"&gt;&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;span style="font-size: 1.5em;"&gt;Introduction&lt;/span&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Animation Concepts&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;The most important part of an animation is the story itself. So it is very important that the script is written to serve the purposes of the animation, it shouldn’t be written in the same way you would write a narrative for &lt;em&gt;long form reading&lt;/em&gt;.&lt;/p&gt;
&lt;p&gt;The story must be read aloud in less than 2 minutes, as analysts say, if it is longer than 1min30sec, users stop watching and go look for new content on other websites. This is super important not only to save production time, but also to avoid uploading content that won’t be seen. One must understand that animation, films, documentaries and short films are different products and serve different purposes.&lt;/p&gt;
&lt;p&gt;In this tutorial, we’ll learn how to create an animation, it must be a short story that will serve as a teaser to invite the user to get to know the story we want to tell. After this introduction to the subject, articles released with the teaser can be read to learn more. Animation is a very effective way to introduce a topic, it’s easy to share and it can attract more users to our website.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Story&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;Not all stories are appropriate for animation. Here is a cut from the original story: &lt;a href="https://news.mongabay.com/2013/0805-costa-rica-deforestation-intensification.html"&gt;https://news.mongabay.com/2013/0805-costa-rica-deforestation-intensification.html&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Script&lt;/strong&gt;&lt;/p&gt;
&lt;blockquote&gt;&lt;p&gt;&lt;i&gt;Deforestation ban working in Costa Rica&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;&lt;i&gt;Costa Rica’s ban on clearing of “mature” forests appears to be effective in encouraging agricultural expansion on non-forest lands, finds a study published today in the journal Environmental Research Letters. The research, which was led by Matthew Fagan of Columbia University, is based on analysis of satellite data calibrated with visits to field sites in the lowlands of northern Costa Rica.&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;&lt;i&gt;The study found that since Costa Rica implemented its ban on conversion of mature forests in 1996, the annual rate of old-growth forest loss dropped 40 percent despite an agricultural boom in the region. The results suggest that Costa Rica is intensifying agricultural production while simultaneously sparing forests.&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;&lt;i&gt;“We observed that following the ban, mature forest loss decreased from 2.2 percent to 1.2 percent per year, and the proportion of pineapple and other export-oriented cropland derived from mature forest declined from 16.4% to 1.9%,” the researchers write. “The post-ban expansion of pineapples and other crops largely replaced pasture, exotic and native tree plantations, and secondary forests.”&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;&lt;i&gt;Fagan and colleagues observed that the ban seemed to be particularly effective at discouraging large-scale or industrial agriculture in mature forest areas. It was less successful in stopping conversion for cattle pasture. “We conclude that forest protection efforts in northern Costa Rica have likely slowed mature forest loss and succeeded in re-directing expansion of cropland to areas outside mature forest,” they write. “Our results suggest that deforestation bans may protect mature forests better than older forest regrowth and may restrict clearing for large-scale crops more effectively than clearing for pasture.”&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;&lt;i&gt;Downsides to intensification&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;&lt;i&gt;However the researchers suggest that intensification may not be an ecological panacea. They note that intensive agriculture has expanded into important non-protected forests, including wetlands and secondary forests. Additionally, industrial monocultures offer less habitat connectivity than less intensively managed landscapes — a typical cattle pasture includes scattered tree cover which is utilized by many species, whereas a pineapple farm is usually devoid of trees and functions as a biological desert. Finally the use of agricultural chemicals is a risk to animals and aquatic habitats.&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;&lt;i&gt;“Pineapple and banana production in Costa Rica depend on extremely high applications of fertilizer and toxic pesticides,” the authors write. “In Costa Rica these agro-chemicals have degraded water quality and disrupted downstream ecosystems, and contaminated montane forests with pesticides.”&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;&lt;i&gt;Nonetheless, from a land use policy perspective, the researchers conclude that Costa Rica’s approach may hold lessons for other areas where forests are being rapidly converted for agriculture.&lt;/i&gt;&lt;/p&gt;
&lt;p&gt;&lt;i&gt;“Comprehensive forest protection policies may be a potential tool to promote land-sparing in regions undergoing deforestation for intensive agriculture,” they write.&lt;/i&gt;&lt;/p&gt;&lt;/blockquote&gt;
&lt;h2 class="summary-item" id="audio"&gt;&lt;a href="#audio"&gt;Audio&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Narration is a very important part of the animation, as it allows the user to follow the story not only visually, but also through the story, allowing input of information through many different channels.&lt;/p&gt;
&lt;p&gt;An audio recording is a task that should be taken seriously, as a bad narration can kill our animation, making it monotonic. Making the voiceover narration is like being an actor, we have to put emotion in the story and, like a theater actor, emphasize the right parts of the narrative, raising one’s voice, reading faster or slower and with the correct volume to keep the listener interested in the story.&lt;/p&gt;
&lt;p&gt;There are several ways to record audio, including a recording studio. As this tutorial is dedicated to people who want to do everything themselves from the beginning, and not to be dependent on recording studios, there is affordable and even free software that provides great recording quality.&lt;/p&gt;
&lt;p&gt;My favorite is &lt;a href="https://itunes.apple.com/pt/app/pcmrecorder/id481055155?mt=8"&gt;PCM Recorder&lt;/a&gt; that can be downloaded free.&lt;/p&gt;
&lt;p&gt;It records using your phone. You then have to upload your audio file to soundcloud, so you can produce several audio versions to have online. It is also very effective to share with friends.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;How it works&lt;/strong&gt;&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;img alt="Como criar uma animação" class="aligncenter" decoding="async" height="307" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-11.46.23-1024x731.png" width="430"/&gt;&lt;/p&gt;
&lt;p&gt;Start preparing to capture sound by clicking on the red button with a circle inside. At that moment the phone is ready to capture sound. To record click the green play button and start talking. When finished, click the button with the square.&lt;/p&gt;
&lt;p&gt;Once the file is recorded it is accessed by selecting Files, where you can find all the files you have recorded.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-11.46.38.png"&gt;&lt;img alt="Screen Shot 2013-08-09 at 11.46.38" class="aligncenter" decoding="async" height="312" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-11.46.38-1024x743.png" width="430"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;The files will be named with the date they were recorded with the addition of _001, _002 etc chronologically. To upload a file to Soundcloud, you must first have an active account, which you can create at &lt;a href="https://soundcloud.com/connect?client_id=b45b1aa10f1ac2941910a7f0d10f8e28&amp;amp;response_type=token&amp;amp;scope=non-expiring%20fast-connect%20purchase%20upload&amp;amp;display=next&amp;amp;redirect_uri=https://soundcloud.com/soundcloud-callback.html&amp;amp;highlight=signup"&gt;Soundcloud SignIn&lt;/a&gt;.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-12.07.42.png"&gt;&lt;img alt="Screen Shot 2013-08-09 at 12.07.42" class="aligncenter" decoding="async" height="391" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-12.07.42-1024x652.png" width="614"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Log in, click the button above the files, select the audio you want to upload and click Upload. Please wait a few minutes and it’s ready. From your SoundCloud page you can download to your computer the file you want. This process is especially useful when you record interviews or audio on the road and want to send them to someone. Using this method is fast, effective and safe.&lt;/p&gt;
&lt;p&gt;Be careful to record your story in a quiet place. Don’t forget to tell the story like a theater actor, in a serious but interesting way. Narrations in a single tone become boring and contribute to making users uninterested. Put feeling into your narration.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Example:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://soundcloud.com/marysaints/130809_0011-wav"&gt;https://soundcloud.com/marysaints/130809_0011-wav&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Using background music can be very effective as well. Be careful not to use a song with voice or one that is too loud, as this will make communication hard.&lt;/p&gt;
&lt;p&gt;There are free music websites, and some that cost money.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Free:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://www.jamendo.com/en/"&gt;https://www.jamendo.com/en/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://freeplaymusic.com/"&gt;https://freeplaymusic.com/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Paid:&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://audiojungle.net/"&gt;https://audiojungle.net/&lt;/a&gt;&lt;/p&gt;
&lt;h2 class="summary-item" id="visual-representation"&gt;&lt;a href="#visual-representation"&gt;Visual Representation&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;To illustrate your story, you can use photographs, drawings, illustrations, clips, and any and all visual elements you want.&lt;/p&gt;
&lt;p&gt;Typically, iconographic representations are very effective when you are working with data and want to tell a story in a rational way with minimalist aesthetic.&lt;/p&gt;
&lt;p&gt;I recommend &lt;a href="https://thenounproject.com/"&gt;“The Noun Project”&lt;/a&gt; which is a website with icons for almost everything, it’s free and the only thing you have to do at the end of the project is mention that one of the sources in the work was The Noun Project.&lt;/p&gt;
&lt;p&gt;It’s possible to type in the search bar what kind of icons we need, then download them and use them in our history.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-13.08.01.png"&gt;&lt;img alt="Screen Shot 2013-08-09 at 13.08.01" class="aligncenter" decoding="async" height="356" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-13.08.01-1024x594.png" width="614"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-13.08.43.png"&gt;&lt;img alt="Screen Shot 2013-08-09 at 13.08.43" class="aligncenter" decoding="async" height="325" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-13.08.43-1024x542.png" width="614"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;To make root illustrations, the best program is Adobe Illustrator, since the graphics are exported as vectors, which allows us to make them bigger without sacrificing quality.&lt;/p&gt;
&lt;p&gt;If we have a lot of data to display and want to make bar graphs, pie graphs or any other type of diagrams, the best is to use Adobe Illustrator.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Storyboard&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;The first thing we must do to view the story is to make the storyboard. Meaning that we must go paragraph by paragraph and draw how we want to represent each part of the story. This process must be done by hand, because by hand is the fastest way between the brain and expression.&lt;/p&gt;
&lt;p&gt;Don’t worry if you think you have no talent for drawing, as there is no problem here. What matters is to represent how you want the story to be viewed. The final illustration will be done later through photographs, vectors or icons.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Adobe Illustrator &lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;This software is great for creating vector images. You can also edit some icons (that you downloaded from The Noun Project) and match different items to make it have your own meaning.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Starting an Ai project&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;You can start with the format you want, because this file will be exported as an &lt;em&gt;.ai&lt;/em&gt; (Adobe Illustrator file), meaning that it will have all the features of a file in Illustrator.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-13.40.03.png"&gt;&lt;img alt="Screen Shot 2013-08-09 at 13.40.03" class="aligncenter" decoding="async" height="304" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-13.40.03-1024x507.png" width="614"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;It means that if you decide to change a certain element afterwards you can do it. The update will be done with After Effects.&lt;/p&gt;
&lt;p&gt;To make shapes, simply select the shape you want, you can make squares, circles, stars etc. These options are behind the square, so click and hold it and all the options will show up.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-14.41.20.png"&gt;&lt;img alt="Screen Shot 2013-08-09 at 14.41.20" class="aligncenter" decoding="async" height="374" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-14.41.20-1024x624.png" width="614"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Importing icons for Ai (Adobe Illustrator)&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&amp;gt; File &amp;gt; Place and choose the icon you want to import.&lt;/p&gt;
&lt;p&gt;If you have downloaded some icons from The Noun Project, they are saved as svg (Scalable Vector Graphics) in illustrator. Afterwards, you can convert them to the format you want, as .ai, for example.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-14.54.03.png"&gt;&lt;img alt="Screen Shot 2013-08-09 at 14.54.03" class="aligncenter" decoding="async" height="461" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-14.54.03-1024x769.png" width="614"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Editing&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;To edit icons inside Ai, use the white arrow called ‘Direct Selection Tool’ (by clicking “A” this option is automatically selected).&lt;/p&gt;
&lt;p&gt;You can select the small points that make the icon and modify it as you want.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-14.59.12.png"&gt;&lt;img alt="Screen Shot 2013-08-09 at 14.59.12" class="aligncenter" decoding="async" height="259" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/08/Screen-Shot-2013-08-09-at-14.59.12.png" width="225"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;To save your image &amp;gt;File &amp;gt; Save and save it with the name you choose.&lt;/p&gt;
&lt;h2 class="summary-item" id="more-information"&gt;&lt;a href="#more-information"&gt;More Information&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;strong&gt;Information and courses for Adobe Illustrator&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://www.smashingapps.com/2011/02/08/50-fresh-and-useful-adobe-illustrator-tutorials.html"&gt;https://www.smashingapps.com/2011/02/08/50-fresh-and-useful-adobe-illustrator-tutorials.html&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://layersmagazine.com/category/tutorials/illustrator"&gt;https://layersmagazine.com/category/tutorials/illustrator&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://mashable.com/2010/08/19/adobe-illustrator-tutorials/"&gt;https://mashable.com/2010/08/19/adobe-illustrator-tutorials/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Adobe After Effects&lt;/strong&gt;&lt;/p&gt;
&lt;p&gt;This software is awesome! It’s powerful, not difficult to learn, anyone can learn it, it’s just a matter of dedication and time.&lt;/p&gt;
&lt;p&gt;You can download a trial here:&lt;/p&gt;
&lt;p&gt;&lt;a href="https://creative.adobe.com/products/aftereffects"&gt;https://creative.adobe.com/products/aftereffects&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;There are many tutorials:&lt;/p&gt;
&lt;p&gt;&lt;a href="https://www.videocopilot.net/basic/"&gt;https://www.videocopilot.net/basic/&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://helpx.adobe.com/after-effects/after-effects-cs5-cs55-tutorials.html"&gt;https://helpx.adobe.com/after-effects/after-effects-cs5-cs55-tutorials.html&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://greyscalegorilla.com/blog/tutorials/software/after-effects/"&gt;https://greyscalegorilla.com/blog/tutorials/software/after-effects/&lt;/a&gt;&lt;/p&gt;

		&lt;div class="author-shortcodes"&gt;
			&lt;div class="author-inner"&gt;
				&lt;div class="author-image"&gt;
			&lt;img alt="" src="https://b.vimeocdn.com/ps/828/82817_300.jpg"/&gt;
			&lt;div class="author-overlay"&gt;&lt;/div&gt;
		&lt;/div&gt; &lt;!-- .author-image --&gt; 
		&lt;div class="author-info"&gt;
			Knight International Journalism Fellow &lt;strong&gt;Mariana Santos&lt;/strong&gt; is a visual storyteller, who did groundbreaking work as a member of the interactive team at &lt;a href="https://www.guardiannews.com/" target="_blank"&gt;The Guardian&lt;/a&gt; in London. A trained animator, she pioneered the newsroom’s use of motion graphics to make data stories more compelling. She taught a course in interactive journalism at the &lt;a href="https://knightcenter.utexas.edu/" target="_blank"&gt;Knight Center for Journalism in the Americas&lt;/a&gt; and has held workshops in Argentina, Denmark and the United Kingdom. She began her career as a motion animator and post-production editor at Universal Music Berlin. Santos has a bachelor’s degree in communication design and industrial design from the Faculty of Fine Arts at the &lt;a href="https://www.ul.pt/portal/page_pageid=173,1&amp;amp;_dad=portal&amp;amp;_schema=PORTAL" target="_blank"&gt;University of Lisbon&lt;/a&gt;. She completed a master’s degree in digital media at &lt;a href="https://www.hyperisland.com/" target="_blank"&gt;Hyper Island&lt;/a&gt;, an educational company in Stockholm.
		&lt;/div&gt; &lt;!-- .author-info --&gt;
			&lt;/div&gt; &lt;!-- .author-inner --&gt;
		&lt;/div&gt;  .author-shortcodes 
&lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type"/&gt;
&lt;p&gt;The post &lt;a href="https://geojournalism.org/2013/08/portugues-principios-basicos-para-criar-uma-animacao/"&gt;Basic steps for creating animation&lt;/a&gt; appeared first on &lt;a href="https://geojournalism.org"&gt;geojournalism.org&lt;/a&gt;.&lt;/p&gt;
</ns4:encoded>
					
		
		
		<ns2:post-id>328</ns2:post-id>	</item>
		<item>
		<title>Choosing the right kind of map for your story</title>
		<link>https://geojournalism.org/2013/08/map-styles/</link>
		
		<dc:creator>Gustavo Faleiros</dc:creator>
		<pubDate>Fri, 09 Aug 2013 15:25:53 +0000</pubDate>
				<category>Design</category>
		<category>Maps</category>
		<category>Visualization</category>
		<category>map design</category>
		<category>maps</category>
		<guid isPermaLink="false">https://dev.cardume.art.br/toolkit/?p=179</guid>

					<description>&lt;p&gt;Most available databases have some element of location to them. According to officers working at the open data portal of the US government, around 90% of their datasets contain geographical information, ranging from streets names to precise coordinates. In this tutorial, we will show the different kind of maps you can use to convey information [&amp;#8230;]&lt;/p&gt;
&lt;p&gt;The post &lt;a href="https://geojournalism.org/2013/08/map-styles/"&gt;Choosing the right kind of map for your story&lt;/a&gt; appeared first on &lt;a href="https://geojournalism.org"&gt;geojournalism.org&lt;/a&gt;.&lt;/p&gt;
</description>
										<ns4:encoded>&lt;p&gt;Most available databases have some element of location to them. According to officers working at the open data portal of the US government, around 90% of their datasets contain geographical information, ranging from streets names to precise coordinates. In this tutorial, we will show the different kind of maps you can use to convey information and enable users to interact with and explore the environmental data you’ve gathered to support your story.&lt;/p&gt;
&lt;h2 class="summary-item" id="points-of-interest"&gt;&lt;a href="#points-of-interest"&gt;Points of interest&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Points are the simplest symbol used to make maps. You can simply pin your map with a specific location you would like to highlight or you can include many points, or icons on several locations to represent your data.&lt;/p&gt;
&lt;p&gt;On the example below, done on &lt;a href="https://geojournalism.org/tools/fusion-tables/" title="Fusion Tables"&gt;Google Fusion Tables&lt;/a&gt;, the species of Butterflies are mapped in Costa Rica.&lt;/p&gt;
&lt;p&gt;&lt;iframe frameborder="no" height="350" loading="lazy" scrolling="no" src="https://www.google.com/fusiontables/embedviz?q=select+col12+from+1yooILLPC5cFA9y2TEedmBkHA8aO-JbpbcXsBeq4&amp;amp;viz=MAP&amp;amp;h=false&amp;amp;lat=10.901887452028856&amp;amp;lng=-85.40865571411138&amp;amp;t=1&amp;amp;z=10&amp;amp;l=col12&amp;amp;y=2&amp;amp;tmplt=2" width="820"&gt;&lt;/iframe&gt;&lt;/p&gt;
&lt;h2 class="summary-item" id="polygon-maps"&gt;&lt;a href="#polygon-maps"&gt;Polygon Maps&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;These maps are useful when area, boundaries, shapes or limits need to be represented. A classical example is world boundaries map or a map representing the different natural physiology within a protected area&lt;/p&gt;
&lt;div class="wp-caption aligncenter" style="width: 692px"&gt;&lt;img alt="" decoding="async" height="477" loading="lazy" src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Last_glacial_vegetation_map.png" width="682"/&gt;&lt;p class="wp-caption-text"&gt;World Vegetation Map with data of the National Geophysical Data Center. Courtesy of Wikimedia Commons&lt;/p&gt;&lt;/div&gt;
&lt;h2 class="summary-item" id="heat-maps"&gt;&lt;a href="#heat-maps"&gt;Heat Maps&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;When a concentration of occurrences or points of interest happen in a same location, it is possible to group certain areas together using an average value over an area. Also known as isoline maps, and used often for visualizing weather data, “heat” maps can used to visualize particularly intense concentrations evident in your data.&lt;/p&gt;
&lt;p&gt;The example bellow shows the biodiversity hotspots around the globe by measuring biomass density.&lt;/p&gt;
&lt;div class="wp-caption aligncenter" style="width: 810px"&gt;&lt;img alt="" class="" decoding="async" height="473" loading="lazy" src="https://e360.yale.edu/images/slideshows/gallery_ncsu_biodiversity_hotspots_global.jpg" width="800"/&gt;&lt;p class="wp-caption-text"&gt;The red areas represent those with highest species density and the blue territories , the lowest. Courtesy of Saving Species 2012&lt;/p&gt;&lt;/div&gt;
&lt;h2 class="summary-item" id="bubble-map"&gt;&lt;a href="#bubble-map"&gt;Bubble Map&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;This kind of map is similar to a point map with the difference that you scale the size of the points according to numerical values, creating the a bubble look to highlight events on specific location. This map style is also referred to as a “graduated symbols” map since a designer is not limited to circles for their symbols.&lt;/p&gt;
&lt;p&gt;On the following example, the locations of forest fires are scaled according to the number of events. This map was done on &lt;a href="https://geojournalism.org/tools/tableau-public-software/" target="_blank" title="Tableau"&gt;Tableau Public Software&lt;/a&gt;.&lt;/p&gt;
&lt;div class="wp-caption aligncenter" style="width: 692px"&gt;&lt;img alt="" decoding="async" src="https://www.tableausoftware.com/public/sites/default/files/Bubble%20Map%20Forest%20Fires.png" width="682"/&gt;&lt;p class="wp-caption-text"&gt;The size of the bubbles over the map represent the amount acres burned, showing that the West Coast of US is more affected over a period of 10 years. Image: Courtesy Tableau Public&lt;/p&gt;&lt;/div&gt;
&lt;h2 class="summary-item" id="cloropleth-map"&gt;&lt;a href="#cloropleth-map"&gt;Cloropleth map&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Coloring polygons like country boundaries according to the values represented on the map is the &lt;a href="https://en.wikipedia.org/wiki/Choropleth_map" target="_blank"&gt;cloropleth map&lt;/a&gt;. This classic form of cartography maybe the most well recognized map style. Political maps like the ones that show divisions between Republicans and Democrats in the US are on every TV newsshow and newspaper. But there are many more ways to use this style map. One of them is applying a gradient respecting a numerical range. To choose colors, we recommend the tool &lt;a href="https://geojournalism.org/tools/color-brewer/" target="_blank" title="Color Brewer"&gt;Color Brewer&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Here is an example of a cloropleth done in the project InfoAmazonia showing the quantity of heads of cattle per municipality in the north of Brazil&lt;/p&gt;
&lt;p&gt;&lt;iframe frameborder="0" height="480" loading="lazy" src="https://infoamazonia.org/en/embed/?no_stories=1&amp;amp;map_id=2530&amp;amp;width=820&amp;amp;height=480&amp;amp;lat=-7.710991655433229&amp;amp;lon=-59.23828124999999&amp;amp;zoom=5" width="820"&gt;&lt;/iframe&gt;&lt;/p&gt;
&lt;h2 class="summary-item" id="cartogram"&gt;&lt;a href="#cartogram"&gt;Cartogram&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;A cartogram distorts the size of shapes on the map according to the the values they represent. The example bellow reshape the size of the countries according to their carbon emissions. As you can see immediately, US and China get really swollen while the whole African continent almost disappear&lt;/p&gt;
&lt;div class="wp-caption aligncenter" style="width: 690px"&gt;&lt;img alt="" decoding="async" src="https://www.viewsoftheworld.net/wp-content/uploads/2010/11/CarbonEmissionMap_2009.jpg" width="680"/&gt;&lt;p class="wp-caption-text"&gt;Map originally published at &lt;a href="http://www.viewoftheworld.net" rel="nofollow"&gt;http://www.viewoftheworld.net&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;

		&lt;div class="author-shortcodes"&gt;
			&lt;div class="author-inner"&gt;
				&lt;div class="author-image"&gt;
			&lt;img alt="" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAlOAAAAJGJmNmMxZTFiLWY5ODUtNGFlNy05MTE0LTZjNDk3ZWJmNWRkMA.jpg"/&gt;
			&lt;div class="author-overlay"&gt;&lt;/div&gt;
		&lt;/div&gt; &lt;!-- .author-image --&gt; 
		&lt;div class="author-info"&gt;
			&lt;strong&gt;Gustavo Faleiros&lt;/strong&gt; is an environmental journalist and media trainer who specializes in data-driven journalism. In 2012, he launched &lt;a href="https://infoamazonia.org/" target="_blank"&gt;InfoAmazonia&lt;/a&gt;, a digital map that uses satellite and other publicly available data to monitor the Amazon rainforest.
		&lt;/div&gt; &lt;!-- .author-info --&gt;
			&lt;/div&gt; &lt;!-- .author-inner --&gt;
		&lt;/div&gt;  .author-shortcodes 
&lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type"/&gt;
&lt;p&gt;The post &lt;a href="https://geojournalism.org/2013/08/map-styles/"&gt;Choosing the right kind of map for your story&lt;/a&gt; appeared first on &lt;a href="https://geojournalism.org"&gt;geojournalism.org&lt;/a&gt;.&lt;/p&gt;
</ns4:encoded>
					
		
		
		<ns2:post-id>179</ns2:post-id>	</item>
		<item>
		<title>Deforestation diagram with Adobe Illustrator</title>
		<link>https://geojournalism.org/2013/07/grafico-sobre-desmatamento-com-adobe-illustrator/</link>
		
		<dc:creator>Gabriel Gianordoli</dc:creator>
		<pubDate>Wed, 31 Jul 2013 19:39:07 +0000</pubDate>
				<category>Design</category>
		<category>Visualization</category>
		<category>deforestation data</category>
		<guid isPermaLink="false">https://dev.cardume.art.br/toolkit/?p=131</guid>

					<description>&lt;p&gt;In this tutorial we will learn how to make a column chart using data in a table and how to customize it with some icons. Introdu&amp;#231;&amp;#227;o Adobe Illustrator&amp;#160;is a drawing tool that can also be used to construct simple static graphics. Although your options are limited (bar, line, area, scatterplot, pie and radar), the possibilities [&amp;#8230;]&lt;/p&gt;
&lt;p&gt;The post &lt;a href="https://geojournalism.org/2013/07/grafico-sobre-desmatamento-com-adobe-illustrator/"&gt;Deforestation diagram with Adobe Illustrator&lt;/a&gt; appeared first on &lt;a href="https://geojournalism.org"&gt;geojournalism.org&lt;/a&gt;.&lt;/p&gt;
</description>
										<ns4:encoded>&lt;p&gt;In this tutorial we will learn how to make a column chart using data in a table and how to customize it with some icons.&lt;span id="more-131"&gt;&lt;/span&gt;&lt;/p&gt;
&lt;h2 class="summary-item" id="introducao"&gt;&lt;a href="#introducao"&gt;Introdução&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;&lt;a href="https://geojournalism.org/tools/adobe-illustrator/" title="Adobe Illustrator"&gt;Adobe Illustrator&lt;/a&gt; is a drawing tool that can also be used to construct simple static graphics. Although your options are limited (bar, line, area, scatterplot, pie and radar), the possibilities for customization of color, type and other visual elements make it a very popular software.&lt;/p&gt;
&lt;p&gt;In this tutorial we will learn how to make a column chart using data in a table and how to customize it with some icons.&lt;/p&gt;
&lt;h2 class="summary-item" id="starting-a-new-document"&gt;&lt;a href="#starting-a-new-document"&gt;Starting a new document&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;In the top menu, select File&amp;gt; New. Name the file and keep the default size (A4), only changing the page format to “landscape”.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter" decoding="async" height="578" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator01-1024x826.png" width="717"/&gt;&lt;/p&gt;
&lt;h2 class="summary-item" id="tools"&gt;&lt;a href="#tools"&gt;Tools&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;If you have never used Illustrator before, do not be alarmed: there are few tools that we need.&lt;br/&gt;
The first tool is a column chart. Select it and then click to drag and define an area on the document, this will be the size of your graphic.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator02.png"&gt;&lt;img alt="" class="aligncenter" decoding="async" height="614" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator02-144x1024.png" width="86"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2 class="summary-item" id="adding-data"&gt;&lt;a href="#adding-data"&gt;Adding data&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Once you define the area of your chart, a window with a blank table will be displayed. We will use the data of total deforestation in the Legal Amazon from 2004 to 2012, measured by &lt;a href="https://www.obt.inpe.br/prodes/index.php" target="_blank"&gt;PRODES&lt;/a&gt;. You can select the row with the corresponding numbers (totals only, without variation rates or numbers per state) and paste it into the Illustrator window.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator03.png"&gt;&lt;img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-242" decoding="async" height="231" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator03-1024x385.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator03-1024x385.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator03-300x112.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator03.png 1758w" width="614"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Paste the data in the second row. Let’s use the first line to enter the years.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator04.png"&gt;&lt;img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-243" decoding="async" height="160" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator04-1024x267.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator04-1024x267.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator04-300x78.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator04.png 1380w" width="614"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;To make it possible for the software to interpret the numbers of years as titles, and not values​​, they must have quotation marks.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator05.png"&gt;&lt;img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-244" decoding="async" height="160" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator05-1024x267.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator05-1024x267.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator05-300x78.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator05.png 1380w" width="614"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Finally, invert the values ​​of row and column selecting &lt;i&gt;‘transpose row/column’&lt;/i&gt;.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator06.png"&gt;&lt;img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-245" decoding="async" height="301" loading="lazy" sizes="auto, (max-width: 540px) 100vw, 540px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator06.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator06.png 900w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator06-300x167.png 300w" width="540"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;The column chart will be drawn when you click the &lt;i&gt;‘apply&lt;/i&gt;button or by saving the changes and closing the window.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator07.png"&gt;&lt;img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-246" decoding="async" height="329" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator07-1024x549.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator07-1024x549.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator07-300x160.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator07.png 1596w" width="614"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2 class="summary-item" id="formatting-the-diagram"&gt;&lt;a href="#formatting-the-diagram"&gt;Formatting the diagram&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;You can change captions and colors of your chart using the &lt;i&gt;direct selection&lt;/i&gt; tool. Use the &lt;em&gt;selection&lt;/em&gt; tool only if you want to move the entire diagram.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator08.png"&gt;&lt;img alt="illustrator08" class="aligncenter wp-image-247" decoding="async" height="111" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator08.png" width="101"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;When you select an element, the top bar will show which features can be changed (color, font, font size, contour etc).&lt;/p&gt;
&lt;p style="text-align: center;"&gt; &lt;a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator09.png"&gt;&lt;img alt="illustrator09" class="aligncenter wp-image-248" decoding="async" height="34" loading="lazy" sizes="auto, (max-width: 717px) 100vw, 717px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator09-1024x49.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator09-1024x49.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator09-300x14.png 300w" width="717"/&gt;&lt;/a&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator09.png"&gt;&lt;br/&gt;
&lt;/a&gt;&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator10.png"&gt;&lt;img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-249" decoding="async" height="364" loading="lazy" sizes="auto, (max-width: 645px) 100vw, 645px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator10-1024x577.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator10-1024x577.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator10-300x169.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator10.png 1312w" width="645"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;A warning at this point: do not ungroup the graph (&lt;i&gt;Object&lt;/i&gt; &amp;gt; &lt;i&gt;Ungroup&lt;/i&gt;).While this allows you to change elements more easily, you will lose the ability to edit the data and other formatting options.&lt;/p&gt;
&lt;h2 class="summary-item" id="inserting-images"&gt;&lt;a href="#inserting-images"&gt;Inserting Images&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;You can customize your diagram so that it displays images instead of columns. Any image drawn in Illustrator will work for this. In our case, we use an icon available for download at &lt;a href="https://thenounproject.com/noun/tree/#icon-No2429" target="_blank"&gt;NounProject&lt;/a&gt;. This one is free to use, modify and reproduce. Some other drawings from the site may impose restrictions on use, from mandatory author citation to prohibition of commercial use, be aware when doing new research.&lt;/p&gt;
&lt;p&gt;When you unzip the &lt;i&gt;.zip&lt;/i&gt; of the site, you will find a file &lt;i&gt;.svg&lt;/i&gt;. This is a vector file, therefore it is scalable, which is fairly common. Open it in Illustrator, click the tree with the &lt;i&gt;selection&lt;/i&gt; tool and paste it in the file that contains the graph.&lt;/p&gt;
&lt;p&gt;VYou can change the colors of the design in the same way we did previously with the columns. I will leave the tree green with no outline:&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator11.png"&gt;&lt;img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-250" decoding="async" height="94" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator11.png" width="104"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator12.png"&gt;&lt;img alt="illustrator12" class="aligncenter size-full wp-image-251" decoding="async" height="188" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator12.png" width="168"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Now, select the tree and use the command &lt;i&gt;Object&lt;/i&gt; &amp;gt; &lt;i&gt;Graph&lt;/i&gt; &amp;gt; &lt;i&gt;Design&lt;/i&gt; from the top menu.On the &lt;i&gt;Design&lt;/i&gt; dialog box, select &lt;i&gt;New design&lt;/i&gt;.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator13.png"&gt;&lt;img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-252" decoding="async" height="611" loading="lazy" sizes="auto, (max-width: 546px) 100vw, 546px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator13.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator13.png 910w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator13-268x300.png 268w" width="546"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2 class="summary-item" id="applying-images-to-the-diagram"&gt;&lt;a href="#applying-images-to-the-diagram"&gt;Applying images to the diagram&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Click on the chart with the &lt;i&gt;selection&lt;/i&gt;, tool, click again with the right mouse button and select &lt;i&gt;Column&lt;/i&gt;. Select your diagram from the left list. There are four options to apply the icon to the columns: the first two will resize the drawing (distorted or not). In the last one, just a piece of the icon is resized, making it “stretch” to the height of the bar. Let’s use the 3rd option where the symbols are repeated according to the column value. In the second box, select the value that each icon will represent. Watching the numbers on our list, ranging from approximately 4,500 – 27,000, let’s use 5,000 as a unit. The last fractional value ​​of the unit (5,000) will be represented by a cut or a scaled drawing. Let’s choose the first option.&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator14.png"&gt;&lt;img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-253" decoding="async" height="346" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator14-1024x577.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator14-1024x577.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator14-300x169.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator14.png 1322w" width="614"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2 class="summary-item" id="finish-formatting"&gt;&lt;a href="#finish-formatting"&gt;Finish formatting&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;You can access other diagrams options – you can even change the entire graph to another shape, such as pie chart – clicking on it with the right button and selecting &lt;i&gt;‘Type’.&lt;/i&gt; In this case, let’s change a few details of the x and y axis to improve readability.&lt;/p&gt;
&lt;p&gt;In the menu of &lt;i&gt;values&lt;/i&gt;, change the &lt;i&gt;scale marks&lt;/i&gt;so that they will be on the whole width of the graphic. Since we are not writing the values ​​on the columns, these mark will help improve the readability.&lt;/p&gt;
&lt;p&gt;In the &lt;i&gt;category axis&lt;/i&gt; menu, remove the tick marks, since the columns are good enough to split the years.&lt;/p&gt;
&lt;p&gt;At last, use a little lighter color for the horizontal marks, so they will interfere less with the drawing. And add the title with the &lt;i&gt;text &lt;/i&gt; tool (it is a separate element of the chart):&lt;/p&gt;
&lt;p&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator15.png"&gt;&lt;img alt="illustrator15" class="aligncenter size-full wp-image-254" decoding="async" height="50" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator15.png" width="60"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;p style="text-align: center;"&gt;&lt;a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator16.png"&gt;&lt;img alt="illustrator16" class="aligncenter wp-image-255" decoding="async" height="406" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator16-1024x677.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator16-1024x677.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator16-300x198.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator16.png 1294w" width="614"/&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2 class="summary-item" id="conclusion"&gt;&lt;a href="#conclusion"&gt;Conclusion&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Although the effort to do a graph in Illustrator may look great at first, the design and customization options make it worth it. This tutorial presents only an introduction to the graphics tool. If you are not confident enough to start everything from scratch, download the .ai file of this example and change what you think is needed. Try to explore other options by clicking with the right button on the chart. You can even go back to the original table to change the numbers to select the &lt;i&gt;data&lt;/i&gt; — which is quite useful when you are not sure whether you will be working with the final information.&lt;/p&gt;

		&lt;div class="author-shortcodes"&gt;
			&lt;div class="author-inner"&gt;
				&lt;div class="author-image"&gt;
			&lt;img alt="" src="https://lh4.googleusercontent.com/-DK3qONGlzXk/AAAAAAAAAAI/AAAAAAAAAFQ/dgEWkgWJHaQ/s120-c/photo.jpg"/&gt;
			&lt;div class="author-overlay"&gt;&lt;/div&gt;
		&lt;/div&gt; &lt;!-- .author-image --&gt; 
		&lt;div class="author-info"&gt;
			I’m a graphic designer in love with numbers.
&lt;p&gt;I am currently enrolled in the Master of Fine Arts – Design &amp;amp; Technology program, at Parsons The New School for Design. My last job was as a senior designer for the Innovation in Technology and User Experience team at Itaú, the largest private bank in Brazil. For the past 6 years, I have been working with information and graphic design, mainly in magazines, and have won some awards.&lt;/p&gt;
&lt;p&gt;I have been invited as a speaker for some major events, including Campus Party, World Information Architecture Day and Pixel Show, the Brazilian largest conference on art and creativity. I also ran workshops on data visualization using the Processing programming language.
		&lt;/p&gt;&lt;/div&gt; &lt;!-- .author-info --&gt;
			&lt;/div&gt; &lt;!-- .author-inner --&gt;
		&lt;/div&gt;  .author-shortcodes 
&lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type"/&gt;&lt;p&gt;&lt;/p&gt;
&lt;p&gt;The post &lt;a href="https://geojournalism.org/2013/07/grafico-sobre-desmatamento-com-adobe-illustrator/"&gt;Deforestation diagram with Adobe Illustrator&lt;/a&gt; appeared first on &lt;a href="https://geojournalism.org"&gt;geojournalism.org&lt;/a&gt;.&lt;/p&gt;
</ns4:encoded>
					
		
		
		<ns2:post-id>131</ns2:post-id>	</item>
	</channel>
</rss>