background preloader

Sample interactive documents

Sample interactive documents
Bret Victor / March 10, 2011 What does it mean to be an active reader? An active reader asks questions, considers alternatives, questions assumptions, and even questions the trustworthiness of the author. Do our reading environments encourage active reading? Explorable Explanations is my umbrella project for ideas that enable and encourage truly active reading. This essay presents examples of few initial ideas: A reactive document allows the reader to play with the author's assumptions and analyses, and see the consquences. An explorable example makes the abstract concrete, and allows the reader to develop an intuition for how a system works. Contextual information allows the reader to learn related material just-in-time, and cross-check the author's claims. As always, if any of this inspires you to play around with these concepts, I'd love to see what you come up with. 1. Ten Brighter Ideas was my early prototype of a reactive document. Here is a more simplistic example of the same concept. Related:  Providing informationdataviz

Description of an interactive job aid Several years ago, a Fortune 50 consumer goods company that is known for recruiting the most talented marketing executives to promote their products throughout the world asked my company to create a unique workflow tool for those top-level marketers. They required a tool that would not only do away with the need for a separate training program―for which this elite group had little time or attention―but also a tool that would improve itself iteratively through their collaborative input provided via social polling. The result was an online template that guides the marketers through a new task with all of the required training hidden in the margin, training that unfolded itself with a single click on demand. each user decides when and how much is needed. In context with the task that is being performed, a wealth of potential supportive information and collaboration is available, revealing itself in the margin as the user moves the mouse from point to point on the screen. Up and Down the Ladder of Abstraction In real life, you would never use a ladder that only let you go up. Likewise, when creating abstractions, stepping down is as important as stepping up. Here, we take the abstraction from the previous section, and overlay a concrete representation on top of it. That is, we draw the trajectory that represents all time, but we also draw the car at some particular time. How do we select which particular time to show? We could use the slider, which has reappeared. This is a general and powerful technique. Try cranking up the turning rate to 8° or so, and then inspecting the car's behavior as it makes its first two turns. In this case, it's fairly easy to look at the trajectory and imagine the car moving along.

Product & Process Specs for a Damn Good Job Aid Here are the all time most popular from the 2433 Posts and 120 Pages of this site… and the number of views of each since 2007. Click on the red image above to link to the post... 1. What Guidance for Approaching Learning Is There From Maslow’s Hierarchy of Needs? 27,919 2. The Big 5 in Human Personality Assessments: CANOE 18,693 3. 5. 7. 9. 11. 13. 15. 17. 19. 21. 23. 25. 27. 29. Thanks to my viewers/ readers! I started my Blog at another host back in 2004, and I moved twice before landing here at WordPress in 2007. Parallel Sets Parallel Sets (ParSets) is a visualization application for categorical data, like census and survey data, inventory, and many other kinds of data that can be summed up in a cross-tabulation. ParSets provide a simple, interactive way to explore and analyze such data. Even though the screenshots here show the Mac version, the program also runs on Windows and Linux. Basic Operation To open an existing dataset, select it in the list and either double-click it or click the Open button. The horizontal bars in the visualization show the absolute frequency of how often each category occurred: in this example, the top line shows the distribution between the passenger classes on the Titanic and the crew. The middle dimension shows a male to female ratio of almost 4 to 1. Between the dimension bars are ribbons that connect categories and split up. Interaction Move your mouse over the display to see the tooltip telling you more about the data. Downloading Online Data Sets Importing Your Own Data

Magic Ink: Information Software and the Graphical Interface This draft was released March 15, 2006. Please email comments to bret You can also download the PDF. Information Software and the Graphical Interface by Bret Victor Abstract #The ubiquity of frustrating, unhelpful software interfaces has motivated decades of research into “Human-Computer Interaction.” #Information software design can be seen as the design of context-sensitive information graphics. #Although this paper presents a number of concrete design and engineering ideas, the larger intent is to introduce a “unified theory” of information software design, and provide inspiration and direction for progressive designers who suspect that the world of software isn’t as flat as they’ve been told. Scope and terminology #“Software,” as used here, refers to user-facing personal desktop software, whether on a native or web platform. Of software and sorcery #A computational process is indeed much like a sorcerer’s idea of a spirit. #This is a software crisis, and it isn’t news.

The Fall and Rise of Performance Support by Marc J. Rosenberg “Performance support is all around us, from the apps on our phone to the GPS in our car; from a demo on YouTube to that little card we all carry in our wallet that tells us how to retrieve messages from our answering machine. Performance support is a growing part of life and work. It’s time to make it a central part of our workplace learning strategy. No, better yet, it’s time to make it a central part of our business strategy.” “We are confronted with insurmountable opportunities.” – Pogo Then In 1989, I was working with consultant Gloria Gery and a great team of learning technologists at AT&T to figure out our next step in electronic training. We already had a project on the table: create a CBT course on test design and development for instructional designers and SMEs. The project was both a success and a disappointment. But enthusiasm didn’t fully translate to real traction – a disappointment. Now Fast forward to today. This turns everything around. Work is learning; learning is work

chroma.js chroma.js is a tiny JavaScript library (12kB) for dealing with colors! Quick-start Here are a couple of things chroma.js can do for you: read colors from a wide range of formatsanalyze and manipulate colorsconvert colors into wide range of formatslinear and bezier interpolation in different color spaces Here's an example for a simple read / manipulate / output chain: Aside from that, chroma.js can also help you generate nice colors using various methods, for instance to be used in color palette for maps or data visualizations. chroma.js has a lot more to offer, but that's the basic gist of it. chroma The first step is to get your color into chroma.js. If there's no matching named color chroma.js checks for a hexadecimal string. In addition to hex strings, hexadecimal numbers (in fact, just any number between 0 and 16777215), will be recognized, too. If you pass the RGB channels individually, too. chroma.hsl chroma.hsv chroma.lab chroma.lch L: Lightness, c: chroma (0-1), h: hue (0-1). chroma.hcl color