<> BOWMAN IDIOMATIC MODEL FOR STAR GRAPHICS SIGGRAPH '87 TUTORIAL COURSE NOTES DOCUMENTATION GRAPHICS An Idiomatic Model for Star Graphics An Idiomatic Model for Star Graphics Long-Range Concepts and Facilities Outline William Bowman Nov. 20, 1980 Introduction: Idiomatic Illustrators An idiomatic illustrator is a special-purpose graphics tool that enables the construction of a particular class of real-world illustrations. The illustrators for Star are curve graph, bar chart, pie chart, diagram, map, plan, and perspective. While each illustrator is conceived of as a self-contained illustration machine, they will all operate within the general graphics environment. In particular, all illustrators are composed of transfer symbols, making them graphic constructions. In terms of graphic language, an `idiom' is an expression whose form structure and meaning are peculiar to a specific class of images. It is a constrained form/space environment which operates by certain conventional rules to produce certain visually communicative effects. Thus in Star the bar chart illustrator is a machine for constructing illustrations in the graphic idiom of bar charts. The purpose of the idiomatic illustrator is to enable Star users without professional graphic skills to create quality illustrations. Many of the graphical operations in conventional illustration are rational, measurable, and repetitive, and can be successfully represented in a machine system which does most of the actual graphic construction. Idiomatic illustrators are designed to provide the user with more specific drawing supports than are provided by the general graphics tools. The office graphics user does not need the whole world of graphic language at his command to create, say, a bar chart; all he needs are a scale and some bars and labels. On the other hand, if he would rather make a pie chart, he doesn't need bars and scales; he needs only a circle and some dividing lines and labels. Thus in Star, the bar chart illustrator only draws bars, and the pie chart illustrator only draws pies. Too constrained? Not for the unskilled user who simply wants a bar chart now without first having to master the professional illustrator's bag of tricks, both technical and esthetic. For the unskilled user, constraint means support. The user enters the graphics world at the application level, where he can represent his ideas and information using recognizable illustration elements (bars, scales, pie slices, etc.) rather than the more general form elements (lines, shapes, etc.) which are the conventional resources of the skilled graphics specialist. While most graphic design decisions are reserved for the user, the actual drawing of the image is intended to be as automated as possible. This (1) enables the user to produce illustrations which might otherwise exceed his manual skills, (2) relieves the user from the burden of `mindless' repetitive graphic operations, (3) maximizes the technical quality and consistency of the resulting illustrations, and (4) minimizes the time it takes to draw them. The three basic levels of design and execution in the idiomatic illustration process are called spatial grammar, form vocabulary, and visual editing. A. Spatial grammar includes the global features which control the overall spatial structure, size, and scaling of the illustration. Included are the specific graphic objects which represent these global characteristics, such as grid scales, guidelines, perspective planes, etc. The purpose of spatial grammar is to provide a compositional framework for the construction, placement, and in some cases the measurement of form elements in the illustration. B. Form vocabulary includes the intermediate-level graphic objects which represent the subject matter elements of the illustration, such as bars, curves, pie slices, blocks, symbols, location points, routes, areas, shapes, volumes, etc. Their purpose is to provide the user with an appropriate range of prefabricated form elements and property options to satisfy both the technical and the esthetic requirements of the idiomatic illustration. These elements are transfer symbols. Spatial placement of form elements is automated wherever appropriate, and is otherwise manual. C. Visual editing includes special modifications, additions, and/or deletions of form details on the lowest level of form selection. General graphics tools are used on this level to enable a higher degree of individualization in the illustration: to improve its appearance or esthetic impact, to enable stylistic details, to visually relate or differentiate parts, to emphasize or subordinate particular elements, to make technical corrections, to add supplementary notes or labels, and to generally polish the illustration to make it a more articulate visual statement. 1. Curve Graph Illustrator User Overview The curve graph illustrator represents a progressive sequence of data points in relation to a scaled (grid) frame of reference, and generalizes those points in the form of a linear trend curve. Data point graphs show only the specific locations of recorded information, without visualization of apparent trends. Close data sampling favors this type of presentation. For accurate data measurement, a full scale can be used. Straight line-pieced graphs connect more spread-out data points into trend `curves.' Point-to-point connection retains visual evidence of data point locations while at the same time shows their interrelated trend. Areas of interest between curves can be color-filled for emphasis. Spline-curve graphs create continuous trend curves which pass through all the points in a data sequence. Specific data locations are less important than their projected continuity. Tick scales offer a clearer visual field for curve display. In the accompanying example, a scale segment is shaded to identify an area of special meaning. Least-squares-best-fit graphs maximize the generalization of data point sequences into simple trend lines which do not necessarily pass through the points. A log scale is used in the accompanying example. Scenario The curve graph illustration process is as follows: A. Spatial grammar First priority in creating a curve graph is setting the ordinate and abscissa (vertical and horizontal) scales. They can be cartesian, logarithmic, or double logarithmic in terms of measurement and can be edge-based or based on an internal axis. B. Form vocabulary In the curve graph, coordinate data points are automatically plotted by the system from numbers typed into a table. These points can be interpreted into one of several curve interpretations: least-squares-best-fit, line-pieced, spline, etc. Ordinate and abscissa labels, as well as curve names, are also typed into the table and placed appropriately in the figure by the system. A choice will be made between representing the coordinate data as points only, points plus curve, and curve only. One of three point/line sizes can be chosen for representing curves. One of five pre-designed point structures can be chosen for representing and differentiating sequences of coordinate data points. One of five pre-designed curve structures can be chosen to represent different curve lines. C. Visual editing After the curve graph is executed, it can be edited for detail-level additions and/or changes. Grids and ticks, points, curves, and labels can be individually selected for property changes. Curve labels, if not produced automatically, can be created and placed. Lines can be added, such as manually-constructed curve segments, scale-oriented index lines, arrowheads, callout lines, etc. Other visual edits might include outlined rectangular areas and shaded backgrounds, additional text labels, identifications, notes, etc. 2. Bar Chart Illustrator User Overview The bar chart illustrator represents subject matter data as comparative bar quantities, measured against an ordinate scale. Divided-bar charts compare subdivided quantities, the parts of which are represented as additive amounts. Visual differentiation (by color and/or texture) is important. Split or mirrored bar charts are constructed on a compound scale to show positive/negative values or to compare pairs of related subject elements, e.g., men and women, etc. Grouped-bar charts show sets of related subject elements in a comparative rather than additive way (as in divided bars). Horizontal bar orientation provides better space for long labels. Floating-bar charts show quantitative range rather than fixed amount. This type of chart is commonly used to represent phased scheduling and performance. Scenario The bar chart illustration process is as follows: A. Spatial grammar The first step in making a bar chart is setting the ordinate scale. The linear scale structure can be varied in size and is able to grow tick and/or grid lines at selected major and minor subdivision locations. The scale can be oriented vertically or horizontally and can be edge-based or based on an internal axis. Bars can show quantities whole or subdivided, based or floating. In addition, bars can be organized singly or in groups; and if single, can be spaced or joined. The grouped option requires the user to type in the number of bars per group-unit. The system automatically rearranges the bars and spaces to show the new organization. The bar widths expand to occupy any new space made available by the closing up into groups. One of five options can be chosen for representing the ratio of bar width to its accompanying space. B. Form vocabulary Measured bar heights are automatically plotted by the system from numbers typed into a table. Bar names are also typed into the table and placed appropriately in the figure by the system. The table format itself will vary depending on the type of bar represented. One of five colors and/or three textures can be chosen to fill bar pieces. C. Visual editing After the bar chart is executed, it can be edited for detail-level additions and/or changes. Scales, bars, and labels can be individually selected for property changes. Special modifications might include: scale-oriented index lines, arrowheads, callout lines, individual bar shading changes (for `projected' quantities, etc.), grid line emphasis, area outlines, shaded backgrounds, `interrupted' bar breaks, special key constructions, additional text labels, identifications, notes, etc. 3. Pie Chart Illustrator User Overview The pie chart illustrator represents divided whole amounts in terms of percentage values of the whole. These component values are represented by slices which comprise the pie. Sliced segments can be differentiated with color shading and/or textures. Labels can be placed internally or externally depending on available space inside the slices, size of labels, and style preference. Individual pie slices (or groups of slices) can be separated from the whole pie for the purpose of emphasizing segment differences at the expense of the overall pie unity. Scenario The pie chart illustration process is as follows: A. Spatial grammar The first design action in making a pie chart is to expand (or shrink) the figure model to the desired gross working size on the screen. This can be done by pinning the center and stretching the circumference manually. One of five line weights can be chosen with which to represent the pie chart. B. Form vocabulary Contained or separated slice sizes are automatically calculated by the system from numbers typed into a table. The numbers are translated into percentages, which are then converted into degree equivalents that enable appropriate placement of the slice lines. Labels are also typed into the table and can be placed automatically or manually. One of five alternative colors (white, light gray, medium gray, dark gray, black) can be chosen for filling individual slice areas. One of three alternative textures can be chosen for filling individual slice areas. Textures can be combined (overlayed) with each other and with colors. C. Visual editing After the pie chart is executed, it can be edited for detail-level additions and/or changes. Pie slices and labels can be individually selected for property changes. If pie slice callout labels and lines were not automatically produced, they can be constructed in this editing phase. Other modifications might include: changes in quality of slice shading or texture, a constructed key for remote identification of slices, arrowheads, additional callout lines, text labels, identifications, notes, etc. 4. Diagram Illustrator User Overview The diagram illustrator shows organization, flow, process, system, and functional arrangement. Block diagrams show organization and/or flow of abstract subject elements in terms of mutual interrelationships. Elements utilize primary-form shapes which are text-identified. Business organizations and industrial and computer systems are common subject matter for this kind of figure. Schematic diagrams show process and/or flow between conventionalized symbol elements as an expression of system interrelationships. Electronic systems are a major user of this idiom, which also includes industrial and architectural wiring diagrams. Associative diagrams show the formalized identity and functional arrangement of subject elements that comprise a system configuration. This type of illustration emphasizes graphic abbreviations of recognizable forms to communicate through isomorphic cues. Scenario The diagram illustration process is as follows: A. Spatial grammar Diagram composition is facilitated by a grid-coordinated spatial guideline system which provides a framework of efficient and esthetic placement of symbol elements. Symbol elements can be easily placed into aligned row/column positions by mouse. Guidelines are visible as a layout tool but are not visible in the finished illustration. B. Form vocabulary Basic diagram elements are transfer symbols, in the form of symbol `templates.' These symbol elements can include text labels and can be automatically sized to fit the label size. The symbol can be constructed with any one of a variety of line weights, structures, or colors. Grid-coordinated line segments can be constructed between symbols along selected gridline paths. Link arrowheads are optional. Both links and arrowheads can vary in size and structure. C. Visual editing The diagram can be visually edited for a variety of detail-level modifications. Special symbol element shapes can be constructed. Symbol-independent labels and notes can be added, as well as callouts. Shaded area backgrounds and area color reversals may also be used. Curve segments may replace straight link lines if desired. 5. Map Illustrator User Overview The map illustrator shows geography, location, position, area, direction, and survey. Topographic maps show geographical surface structure in terms of spatial elevation. This information is usually shown in the form of linear contour lines, or as chiaroscuro (light and dark) shading of physical surface characteristics. Area maps show geographical location in terms of political and physical features. Population distribution, economic data, climatic patterns, etc., as well as general geographical information are the content of this kind of map. Route maps show geographical direction in terms of measured linear extensions. Roads, networks, trade routes, and directional weather data are subject matter for this kind of figure. Physical geography is represented only as a frame of reference. Subdivision maps show geographical content in terms of surveyed planar dimensions. This includes tract maps, city/county parcel drawings, real estate development plans, and other measured land illustrations. Scenario The map illustration is as follows: A. Spatial grammar A geographic coordinate scale is set as the basic frame of reference for the measured location of all map elements. This scale can display longitude and latitude marks and can vary in its type of form structure, projection method, and data/label content. B. Form vocabulary Subject elements are placed within the scaled map area. Primary categories of map elements include landmass boundaries (coastlines, rivers, islands, etc.), location points (cities, airports, etc.), routes (roads, weather patterns, etc.), and areas (states, regions, etc.). These can be organized within the geographic scale area by class, type, locale, etc., for communication purposes, and graphically represented by one of a variety of line weights and structures, colors, textures, etc. C. Visual editing Detail-level modifications are enabled by the general graphics functions and include special-purpose location forms, one-of-a-kind line or color properties, and unique graphic changes to transfer symbol elements. 6. Plan Illustrator User Overview The plan illustrator shows layout, structure, external shape, and correlated views. Floor plans show surface structure layout in terms of measured dimensions. This is basically an architectural application used to present a ground or floor level representation of structural forms, utility locations, and finishing details. Section plans show internal structure in terms of a straight cut through a given plane. This can apply equally to architectural, engineering, or even biological subject matter. Internal material constitution is often indicated through coded conventional texture patterns. Side plans show the external shape of a subject as a measured parallel view. This has a general application to many fields. In architecture, this kind of view is called an ``elevation.'' Parallel visual features are emphasized. Composite plans show two or more correlated and measured views of a subject. Two- and three-view plans are common both in architectural and engineering drawings. Interactive guidelines and dimension lines are usually included in this kind of figure. Scenario The plan illustration process is as follows: A. Spatial grammar A vertical/horizontal measurement scale is set to provide a basic frame of reference for the measured layout of all plan element views. This scale can vary in its units of measure and its method of display. It is visible as a temporary layout tool, but is not a permanent part of the illustration. B. Form vocabulary Subject elements are created/placed within the scaled layout area. Major plan elements include object shapes (as planar views, elevations, sections, etc.), conventional field symbols (architectural, engineering, etc.), and descriptive paths (system links, center lines, etc.). Object shapes in particular are scale-measured in their construction and often accompanied by secondary dimension-line elements. C. Visual editing Special editing modifications to plans could include color emphasis of certain areas of interest, enlarged representation of details, differentiated line vocabulary, and special changes to symbol elements. 7. Perspective Illustrator User Overview The perspective illustrator shows appearance, internal constitution, and external composition. Objective pictorials show the natural appearance of an object under normal circumstances. Linear perspective is a major tool in this idiom, often reinforced by chiaroscuro (graduated light and dark shading). Environmental features may be included or omitted depending on the communicative purpose. Structural pictorials show the internal constitution of an object through an imaginary ``cutaway,'' or separation from the total form of the subject. ``Phantom'' views which superimpose internal and external views are also used to show physical structure. Assembly pictorials show the composition of a physical system in terms of its component parts. A primary purpose of this is to show the functional relationships between object elements. Perspective alignment and guidelines are important features. This kind of figure is often called an ``exploded'' view. Scenario The perspective illustration process is as follows: A. Spatial grammar A perspective layout scale is set to provide the basic framework for organizing and constructing volumetric form elements. This framework can vary in its layout method (one-point or two-point) and in its picture plane data (location of horizon line, vanishing points, focal point, view points, etc.). The volumetric figure can be created through direct construction or projection from plan views. B. Form vocabulary Subject elements are created/placed within the perspective framework. Perspective form elements include plane shapes (2-D object sides, components or viewpoints), and spatial paths (receding center lines, linear forms, etc.). All volumetric objects decrease in size in direct proportion to their scaled recession into perspective depth from the picture plane. C. Visual editing Detail-level editing for special features is enabled by the general graphics facilities, and includes alteration of line weights and shape colors and textures for local form description. Special notes can also be added through visual editing.