Preface
Welcome to the craft of data visualization—a multidisciplinary recipe of art, science, math, technology, and many other interesting ingredients. Not too long ago we might have associated charting or graphing data as a specialist or fringe activity—it was something that scientists, engineers, and statisticians did.
Nowadays, the analysis and presentation of data is a mainstream pursuit. Yet, very few of us have been taught how to do these types of tasks well. Taste and instinct normally prove to be reliable guiding principles, but they aren’t sufficient alone to effectively and efficiently navigate through all the different challenges we face and the choices we have to make.
This course offers a handy strategy guide to help you approach your data visualization work with greater know-how and increased confidence. It is a practical course structured around a proven methodology that will equip you with the knowledge, skills, and resources required to make sense of data, to find stories, and to tell stories from your data.
This course will help you understand about moulding data into a form which is more understandable. It is about taking some of the richest data sources of our time—social networks—and turning their vast array of data into an understandable format. To that effect, we make use of the latest in HTML, JavaScript and D3.js.
It will provide you with a comprehensive framework of concerns, presenting step-by-step all the things you have to think about, advising you when to think about them and guiding you through how to decide what to do about them.
Once you have worked through this course, you will be able to tackle any project—big, small, simple, complex, individual, collaborative, one-off, or regular—with an assurance that you have all the tactics and guidance needed to deliver the best results possible.
What this learning path covers
Module 1, Data Visualization: a successful design process, explores the unique fusion of art and science that is data visualization; a discipline for which instinct alone is insufficient for you to succeed in enabling audiences to discover key trends, insights and discoveries from your data. This module will equip you with the key techniques required to overcome contemporary data visualization challenges.
Module 2, Social Data Visualization with HTML5 and JavaScript, provides you with an introduction to creating an accessible view into the massive amounts of data available in social networks. Developers with some JavaScript experience and a desire to move past creating boring charts and tables will find this module a perfect fit. You will learn how to make use of powerful JavaScript libraries to become not just a programmer, but a data artist.
Module 3, Learning d3.js Data Visualization, covers various features of D3.js to build a wide range of visualizations. This module also focus on the entire process of representing data through visualizations so that developers and those interested in data visualization will get the entire process right and will provide a strong foundation in designing compelling web visualizations with D3.js.
What you need for this learning path
As with most skills in life that are worth pursuing, to become a capable data visualization practitioner takes time, patience, and practice.
You don’t need to be a gifted polymath to get the most out of this course, but ideally you should have reasonable computer skills (software and programming), have a good basis in mathematics, and statistics in particular, and have a good design instinct.
There are many other facets that will, of course, be advantageous but the most important trait is just having a natural creativity and curiosity to use data as a means of unlocking insights and communicating stories. These will be key to getting the maximum benefit from this text.
There are very few tools needed to make use of the examples and code in this course. You’ll need to install node.js (http://nodejs.org/) which is covered in Module 3, Learning d3.js Data Visualization,, Chapter 1: Getting Started with D3, ES2016, and Node.js and Module 2, Social Data Visualization with HTML5 and JavaScript, Chapter 5: Twitter.
You can run it on pretty much anything, but having a few extra gigabytes of RAM available will probably help while developing. Some of the mapping examples later in the course are kind of CPU-intensive, though most machines produced since 2014 should be able to handle them.
You’ll want to download d3.js (http://d3js.org), jQuery (http://jquery.com), and Raphael.js (http://raphaeljs.com/). All the demos can be viewed in any modern web browser. The code has been tested against Chrome but should work on FireFox, Opera, and even Internet Explorer.
You will also need the latest version of your favorite web browser; the code is tested on Chrome, and has been used in the examples, but Firefox also works well. You can try to work in Safari, Internet Explorer/Edge, Opera, or any other browser.
Who this learning path is for
Regardless of whether you are an experienced visualizer or a rookie just starting out, this course should prove useful for anyone who is serious about wanting to optimize his or her design approach.
The intention of this course is to be something for everyone—you might be coming into data visualization as a designer and want to bolster your data skills, you might be strong analytically but want inspiration for the design side of things, you might have a great nose for a story but don’t quite possess the means for handling or executing a data-driven design.
Some of you may never actually fulfill the role of a designer and might have other interests in learning about data visualization. You may be commissioning work or coordinating a project team and want to know how to successfully handle and evaluate a design process.
Hopefully, it will inform and inspire all who wish to get involved in data visualization design work regardless of role or background.
Readers should have a working knowledge of both JavaScript and HTML. jQuery is used numerous times throughout the course, so readers would do well to be familiar with the basics of that library but no prior experience with data visualization or D3 is required to follow this course. Some exposure to node.js would be helpful but not necessary.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this course—what you liked or disliked. Reader feedback is important for us as it helps us develop titles that you will really get the most out of.
To send us general feedback, simply e-mail <feedback@packtpub.com>, and mention the title of the course in the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to any of our product, see our author guide at www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt course, we have a number of things to help you to get the most from your purchase.
Downloading the example code
You can download the example code files for this course from your account at http://www.packtpub.com. If you purchased this course elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
You can download the code files by following these steps:
- Log in or register to our website using your e-mail address and password.
- Hover the mouse pointer on the SUPPORT tab at the top.
- Click on Code Downloads & Errata.
- Enter the name of the course in the Search box.
- Select the course for which you’re looking to download the code files.
- Choose from the drop-down menu where you purchased this book from.
- Click on Code Download.
You can also download the code files by clicking on the Code Files button on the course’s webpage at the Packt Publishing website. This page can be accessed by entering the course’s name in the Search box. Please note that you need to be logged into your Packt account.
Once the file is downloaded, please make sure that you unzip or extract the folder using the latest version of:
- WinRAR / 7-Zip for Windows
- Zipeg / iZip / UnRarX for Mac
- 7-Zip / PeaZip for Linux
The code bundle for the course is also hosted on GitHub at https://github.com/PacktPublishing/Data-Visualization--Representing-Information-on-Modern-Web. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing/. Check them out!
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books/courses—maybe a mistake in the text or the code—we would be grateful if you could report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this course. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your course, clicking on the Errata Submission Form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded to our website or added to any list of existing errata under the Errata section of that title.
To view the previously submitted errata, go to https://www.packtpub.com/books/content/support and enter the name of the book/course in the search field. The required information will appear under the Errata section.
Piracy
Piracy of copyrighted material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <copyright@packtpub.com> with a link to the suspected pirated material.
We appreciate your help in protecting our authors and our ability to bring you valuable content.
Questions
If you have a problem with any aspect of this course, you can contact us at <questions@packtpub.com>, and we will do our best to address the problem.