JavaScript and jQuery for Data Analysis and Visualization

Chapter 5Acquiring Data Interactively

What's in This Chapter

• Techniques to improve the usability of forms for a better user experience and improved conversion rate
• HTML5 form controls—interactive widgets that reduce data segmentation
• Mobile form best practices—contextual keyboards, mobile styling, and mobile form widgets.

Most data visualizations leverage existing data on the server or from some external application programming interface (API). However, there are times you want to incorporate data directly from the user into your charts. This chapter explores some best practices for harvesting data from web forms, which can then be used for data visualization. With these techniques, you can create a sustainable data ecosystem, which crowd-sources and displays data autonomously.

Using HTML5 Form Controls

The widespread adoption of HTML5 forms has revolutionized the way we build forms on the web. Instead of having to rely on plug-ins or user interface (UI) libraries, you can now create rich interactive forms using native HTML5 elements. Skipping the third-party plug-ins does more than improve performance; these native elements are also more reliable. You can count on them to be supported by browsers both today and into the distant future.

Introducing HTML5 Input Types

Back in the days of HTML4, developers had only a handful of input types, such as

<input type="text">
<input type="password">
<input type="checkbox">
<input type="radio">

HTML5 adds a variety of new types ...