Documents with Databases inside them

1. Documents with Databases inside them David Karger MIT

2. The Web Page as a WYSIWYG End User Customizable Database Backed Information ManagementApplication (UIST 2009) David Karger MIT

3. Small Data David Karger MIT

4. Databases for Plain Folks • Database community: • Defined key primitives for data management • Knows building apps over databases offers simplicity, power, and flexibility • Plain Folks: • Have data to manage • Think databases are black magic • Manage their data by editing documents Hide databases in plain sight inside documents plain folks can edit

5. Conclusion • People should be able to create or customize applications (data, visualization, interaction) for their own information management tasks • The web has evolved a standard metaphor of AJAX-y “active documents” as interfaces to (web) databases • People know how to edit documents • So we can turn them into database engineers by helping them edit web documents like the ones they already use

6. Conclusion • DIDO is a Data Interactive DOcument • A standalone html document that contains • Some structured data in a database • An AJAX-y WYSIWYG interface to view/edit the data • A WYSIWYG “metaeditor” to edit the interface • Persistence simply by saving the document • A broad class of Create/Read/Update/Delete content management applications can be authored (not programmed) using DIDO

7. Thank You • http://bit.ly/didodido • Google “dido exhibit”

8. Customizable Applications • Applications bring together the data, specialized views, and interactions necessary to perform tasks • User wants to “stretch” the app to their task • hide irrelevant data • incorporate new kinds of data • change how data is presented or manipulated • Can’t, because apps are rigid • Developer hard-wires “right” data model • And “right” visualizations and interactions with data

9. Migration to the Web • Many applications are now web sites • Amazon, Youtube, CNET, Epicurious, LinkedIn, Flickr • Still just as rigid/uncustomizable as applications • Common Architecture • Database backed • Entity-Relation Model • Common interface paradigms • Templates • Sortable lists • Faceted browsing, text search • maps, timelines, thumbnails, tables

10. Migration to the Web

11. Migration to the Web Sorting by Properties Text search Templated Items Faceted Browsing

12. Text search Sorting by Properties Templated Items Faceted Browsing

13. Text search Sorting by Properties Templated Items Faceted Browsing

14. Text search Sorting by Properties Templated Items Faceted Browsing

15. Sorting by Properties Text search Templated Items Faceted Browsing

16. Sorting by Properties Text search Templated Items Faceted Browsing

17. Sorting by Properties Text search Templated Items Faceted Browsing

18. Nothing New • Tremendous similarity in many web sites • Much more uniform than applications • Helps users know what to expect • Boring? • Perhaps • But it creates an opportunity to standardize/package • Define authorable standard vocabulary of widgets

19. Exhibit

20. Exhibit • HTML vocabulary extension (new tags) for making interactive pages “like these” • ER data model (items + properties) • Lenses (templates) for rendering individual items • Views of an object collection: • list, thumbnails, tabular, scatter plot, map, timeline • Facets to filter the collection based on properties • enumerated list, tag cloud, slider/numeric range • Exhibit Javascript library interprets the new tags

21. Exhibit Interaction

22. Simple Architecture • Each facet, view is independently tied to data • Specify which properties should • fill in which places in the template • hold latitude/longitude for map • hold start/end for timeline • be sortable in the list • be columns in the tabular view • provide filtering values for a facet • Then interact through the data • Clicking value in facet filters data, which changes view

23. Deployment • Deployed 2007 • Open source Javascript library • http://simile-widgets.org/exhibit • Browser independent • Scales to ~ 1000 items, tens of properties • >1500 exhibits on the web • Hobbyists, scientists, newspapers, merchants

42. Discussion • Variety of exhibits (> 1500)suggests we’ve approximated “right” interaction vocabulary • Each is just an HTML document (with new tags) • All authored by editing data files and HTML source • How do we make them WYSIWYG?

43. Dido

44. Editing the Data • Data objects are rendered through lenses • Which “fill in the blanks” using object properties • Changes to the rendered object can map back to changes in the underlying object • No additional “editing form” required

45. Change the rendered data,Change the underlying data

46. Editing the Interface • Views (of collection) and facets (for filtering) are elements on the page • Add them like other elements---images, media • Must tie to data model • By specifying which properties are used in view/facet • Like a chart in a spreadsheet---you specify columns

49. Editing Lens Templates • Templates say which properties go where • Just HTML, so any WYSIWYG editor will do • Adding template field spawns new data field • Changing the template changes the schema