d3.js A Brief History of Human Computer Interaction Technology Brad A. Myers Carnegie Mellon University School of Computer Science Technical Report CMU-CS-96-163and Human Computer Interaction Institute Technical Report CMU-HCII-96-103 December, 1996 Please cite this work as: Brad A. Myers. Human Computer Interaction Institute School of Computer Science Carnegie Mellon University Pittsburgh, PA 15213-3891 bam@a.gp.cs.cmu.edu Abstract This article summarizes the historical development of major advances in human-computer interaction technology, emphasizing the pivotal role of university research in the advancement of the field. Copyright (c) 1996 -- Carnegie Mellon University A short excerpt from this article appeared as part of "Strategic Directions in Human Computer Interaction," edited by Brad Myers, Jim Hollan, Isabel Cruz, ACM Computing Surveys, 28(4), December 1996 This research was partially sponsored by NCCOSC under Contract No. Keywords: Human Computer Interaction, History, User Interfaces, Interaction Techniques. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.
Authoring Data-Driven Documents Over the last few months I’ve been learning D3 (Data-Driven Documents), which is a really powerful data visualization library built for javascript. The InfoVis paper gets to the gritty details of how it supports data transformations, immediate evaluation of attributes, and a native SVG representation. These features can be more or less helpful depending on what kind of visualization you’re working on. For instance, transformations don’t really matter if you’re just building static graphs. But being able to inspect the SVG representation of your visualization (and edit it in the console) is really quite helpful and powerful. But for all the power that D3 affords, is programming really how we should be (want to be?) Here’s something that I recently made with D3. Now, of course, the exploratory data analysis, storyboarding, and research needed to tell this story were time-consuming. But, really, where’s the flash-like authoring tool of data visualization?
How the Human/Computer Interface Works (Infographics) The long history of user interfaces spans the decades from the primitive punched-card days of the 1950s, through the typed command lines of the 1960s, to the familiar windows and icons of today and beyond. Three factors work to both limit and enable human/computer interface development: Computing Power: Increasingly powerful computer hardware enables more sophisticated software interactions. The Imagination of Inventors: Software designers envision new interactions that take advantage of increasing computer power. The Market: Driven by both large corporate customers and also super-popular consumer gadgets like iPad. A timeline of computer interface milestones: 1822: The Babbage Analytical Engine was a Victorian-era concept envisioned more than a century before its time, this mechanical computer would have been programmed by physically manipulating cams, clutches, cranks and gears. 1950s: Punched cards were first used in the 18th century to control automatic textile looms.
D3 And JavaScript: Working With JSON | D3.js Screencasts | DashingD3js.com This example covers the basics of how to use JSON when working with D3 and JavaScript. Why Working With JSON Is Important: JSON is a human readable data interchange format. JSON makes moving data around your JavaScript Application/Data Visualization easier. This helps you get the benefit of organizing your data as well as the benefits of interoperability and openness. The Concept Behind JSON The concept behind JSON is that it is a lightweight data exchange format. It consists of a collection of name / value pairs. Each value can be a string, number, array or another JSON object. Because you can nest JSON objects within JSON objects, you can highly complex data objects. Here is an example of a JSON object representing the 1972 movie "The Godfather": In the above example the keys are in blue font color. The values are in red font color (except for the number 1972 which is in green). Notice that the blue writing is always double quoted. Next, lets assign this JSON object to a JavaScript Variable
Interactive Data Visualization for the Web Our information age more often feels like an era of information overload. Excess amounts of information are overwhelming; raw data becomes useful only when we apply methods of deriving insight from it. Fortunately, we humans are intensely visual creatures. Few of us can detect patterns among rows of numbers, but even young children can interpret bar charts, extracting meaning from those numbers’ visual representations. Of course, visualizations, like words, can be used to lie, mislead, or distort the truth. More literally, visualization is a process of mapping information to visuals. Figure 1-1. More complex visualizations are generated from datasets more complex than the sequence of numbers shown in Figure 1-1 and more complex sets of mapping rules. Mapping data by hand can be satisfying, yet is slow and tedious. Sets of mapping rules function as design systems. Unfortunately, software (and computation generally) is extremely bad at understanding what, exactly, people want.