Books: 15

Canvas & SVG

Vector Graphics for Web Design
Unlike other image formats, SVG can be an interactive part of your web site, integrated in HTML5 markup or created dynamically using JavaScript. It can be styled by CSS to instantly adapt to changes in your site's design. Flexible metadata options can make the graphics accessible to screen readers and more » search engines. And it is always displayed at the highest resolution possible, without requiring larger file sizes, making it ideal for both widescreen desktop displays and Retina mobile devices. Using SVG with CSS3 and HTML5 starts with the basics, explaining how simple shapes and icons are defined in SVG, and then builds upon that foundation to create complex graphics and interactive, animated applications. It covers all the features you're likely to come across in web design, while avoiding areas with poor browser support. « less
Create attractive web-based data visualizations using the amazing JavaScript library D3.js
KEY FEATURES * Learn to use the facilities provided by D3.js to create data-driven visualizations * Explore the concepts of D3.js through examples that enable you to quickly create visualizations including charts, network diagrams, and maps * Get practical examples of visualizations using real-world more » data sets that show you how to use D3.js to visualize and interact with information to glean its underlying meaning BOOK DESCRIPTION This book will take you through all the concepts of D3.js starting with the most basic ones and progressively building on them in each chapter to expand your knowledge of D3.js. Starting with obtaining D3.js and creating simple data bindings to non-graphical HTML elements, you will then master the creation of graphical elements from data. You'll discover how to combine those elements into simple visualizations such as bar, line, and scatter charts, as well as more elaborate visualizations such as network diagrams, Sankey diagrams, maps, and choreopleths. Using practical examples provided, you will quickly get to grips with the features of D3.js and use this learning to create your own spectacular data visualizations with D3.js. WHAT YOU WILL LEARN * Install and use D3.js to create HTML elements within the document * Use development tools such as JSBIN and Chrome Developer Tools to create D3.js applications * Retrieve JSON data and use D3.js selections and data binding to create visual elements from data * Create and style graphical elements such as circles, ellipses, rectangles, lines, paths, and text using SVG * Turn your data into bar and scatter charts, and add margins, axes, labels, and legends * Use D3.js generators to perform the magic of creating complex visualizations from data * Add interactivity to your visualizations, including tool-tips, sorting, hover-to-highlight, and grouping and dragging of visuals ABOUT THE AUTHOR Michael Heydt is an independent consultant, programmer, educator, and trainer. He has a passion for learning and sharing his knowledge of new technologies. Michael has worked in multiple industry verticals, including media, finance, energy, and healthcare. Over the last decade, he worked extensively with web, cloud, and mobile technologies and managed user experience, interface design, and data visualization for major consulting firms and their clients. Michael's current company, Seamless Thingies (, focuses on IoT development and connecting everything with everything. He is the author of numerous articles, papers, and books, such as Instant Lucene. NET, Learning Pandas, and Mastering Pandas for Finance, all by Packt Publishing, on technology. Michael is also a common speaker at .NET user groups and various mobile, cloud, and IoT conferences and delivers webinars on advanced technologies. He can be reached through his website e-mails, and and on Twitter at @mikeheydt. TABLE OF CONTENTS 1. Getting Started with D3.js 2. Selections and Data Binding 3. Creating Visuals with SVG 4. Creating a Bar Graph 5. Using Data and Scales 6. Creating Scatter and Bubble Plots 7. Creating Animated Visuals 8. Adding User Interactivity 9. Complex Shapes Using Paths 10. Using Layouts to Visualize Series and Hierarchical Data 11. Visualizing Information Networks 12. Creating Maps with GeoJSON and TopoJSON 13. Combining D3.js and AngularJS « less
Build stunning maps and visualizations using D3.js
D3.js is a visualization library used for the creation and control of dynamic and interactive graphical forms. It is a library used to manipulate HTML and SVG documents based on data. A consolidated resource on obtaining geographic data, modifying it to your convenience, and visualizing it with augmented more » data using D3.js, this book will meet your mapping needs. Starting with a working map, you will explore the tools required to start the construction process, further moving on to cover the fundamentals of SVG and understanding its relation to creating maps using D3. Equipped with this overview, you will learn to make optimum use of D3's mapping, covering the main enter, update, and exit methods that allow D3.js to do its magic. Dealing with data joining and pairing with HTML and SVG, you will be introduced to different aspects of GEO data, along with the common file formats and converting data into GeoJSON and TopoJSON. You will learn to apply interactivity to your maps and create stunning visualizations before finally ensuring problem-free development with a chapter on troubleshooting. « less
Now part of the HTML5 standard tool, Canvas gives programmers the ability to add images, animation, and sound to mobile and regular websites on the fly, in JavaScript, without needing any third-party tool or player. This practical For Dummies book clearly shows you how to get the most out of Canvas. more » It presents information in a friendly, non-intimidating way and helps you get started with the Canvas tag, create 2D drawings and images, add video and audio, build a basic game framework, weave spellbinding animation, and more. « less
Native Interactivity and Animation for the Web
Flash is fading fast as Canvas continues to climb. The 2nd edition of this popular book gets you started with HTML5 Canvas by showing you how to build interactive multimedia applications. You'll learn how to draw, render text, manipulate images, and create animation - all in the course of building an more » interactive web game throughout the book. Updated for the latest implementations of Canvas and related HTML5 technologies, this edition includes clear and reusable code examples to help you quickly pick up the basics - whether you currently use Flash, Silverlight, or just HTML and JavaScript. Discover why HTML5 is the future of innovative web development. « less
Over 70 code examples to create vector graphics and data visualizations!
Raphael is an exceptional library that makes drawing vector graphics in the browser straightforward. It boasts a large number of methods that facilitate drawing and animating graphics, allowing developers to create flexible, interactive web applications and data visualizations. Learning Raphael JS more » Vector Graphics takes you from being a complete vector graphics novice to an accomplished vector graphics developer. Packed with illustrations and code demos, this book covers a wide array of concepts and takes you through them by example. The Raphael library is covered in detail and in the context of its real-world applicability. « less
Graphics and Visualization on the Web
Create beautiful, interactive images on the Web with RaphaelJS, the JavaScript library that lets you draw Scalable Vector Graphics (SVG) right in the browser. With this concise guide, you'll quickly learn how to paint the screen with shapes and colors that you can turn into lively, animated graphics more » and visualizations. Author Chris Wilson shows you how to create Raphaël objects and manipulate them with animation, transformations, and other techniques, using just a few lines of code. Packed with working examples, sample code, and cool hands-on projects, RaphaëlJS is ideal for new and experienced JavaScript programmers alike. « less
Get to grips with RaphaelJS - a powerful cross-browser compatible vector graphics library, to create interactive 2D graphics and animations with ease
Learn something new in an Instant! A short, fast, focused guide delivering immediate results. Create cross-browser imageless drawings and animations, with DOM access. Create your own shape, almost any shape, with simple and illustrated techniques. Write once and run in almost any browsers including more »IE6. « less
Add Interactivity and Motion to Your Web Applications
Dive into SVG - and build striking, interactive visuals for your web applications. Led by three SVG experts, you'll learn step-by-step how to use SVG techniques for animation, overlays, and dynamic charts and graphs. Then you'll put it all together by building two graphic-rich applications. Get started more » creating dynamic visual content using web technologies you're familiar with - such as JavaScript, CSS, DOM, and AJAX. « less
Creating Data-Driven Documents
Learn how to create beautiful, interactive, browser-based data visualizations with the D3 JavaScript library. This hands-on book shows you how to use a combination of JavaScript and SVG to build everything from simple bar charts to complex infographics. You'll learn how to use basic D3 tools by building more » visualizations based on real data from the New York Metropolitan Transit Authority. Using historical tables, geographical information, and other data, you'll graph bus breakdowns and accidents and the percentage of subway trains running on time, among other examples. By the end of the book, you'll be prepared to build your own web-based data visualizations with D3. « less