2011-D3 InfoVis.pdf 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?
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
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 the Power of Projections : MapBrief™ "Web Mercator?" If your loxodromes aren't straight, keep my name out of your mouth. So what mapping industry titan would rise up and liberate us from the tyranny of web mercator in the browser? A guy in California who works for the…The New York Times? D3.js: Data Driven Documents D3 is a javascript library that not only does choropleths, proportional symbols, etc. in the browser (no IE 6-8; we can’t wait up forever), but a stunning array of other types of visualizations. May I Interest You In Some Peirce Quincuncial? BREAKING: Projections are back in the browser. And how! Those of us of a certain age remember when the education crisis wasn’t basic reading and ‘rithmitic but America’s school children staring at Mercator maps and getting distorted impressions of the relative sizes of continents. Or heck, just go all in on a spheroid, and spin it, inside your browser. Cro$$over Skill$ Small Steps, Incremental Absorption But that $15K isn’t free money. The Tyndale Revolution in Online Mapping
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.