Exhibit/Coders

From SIMILE Widgets
Revision as of 02:05, 3 November 2015 by Tullyhansen (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

A coder translates a piece of information to some visual feature; for example

  1. from the political-party property value Republican to the color red, and from Democrat to the color blue
  2. from the service property value Restaurant to an icon showing a fork and a knife, and from Hotel to an icon showing a bed
  3. from the magnitude property value 5 (assumed to be the magnitude of an earthquake) to the number 40, indicating how large the corresponding map marker should be
  4. from the temperature property value -30 (assumed to be in celcius) to the color code #0000aa, a particular shade of blue indicating how cold it is.
  5. from the kind property value of 1 to to the text "First kind"? [question]

Specifying Coders

A coder can be specified in HTML much like how collections, lens templates, views, and facets are specified. As a coder's job is to translate, to specify a coder you need to specify its inputs and its outputs, i.e., translate what to what. For the political party coder, we can write

 <div ex:role="coder" ex:coderClass="Color" id="political-party-colors">
   <span ex:color="red">Republican</span>
   <span ex:color="blue">Democrat</span>
   <span ex:color="gray"  ex:case="others">Any other party</span>
   <span ex:color="white" ex:case="mixed">Multiple parties</span>
   <span ex:color="black" ex:case="missing">No party</span>
 </div>

The first two spans specify the colors (outputs) for particular parties (inputs). The last three spans specify special cases. If a politician is associated with any party beside Republican and Democrat, gray is used. If he is associated with several parties, white is used. If he has no party at all, black is used. Note that if these colors are used to color markers on a map, then the "mixed" case is also applicable when several politicians of different parties are plotted with the same marker (as they are located at the same point).

The customizable text "Any other party", "Multiple parties", and "No party" can be used in legends.

Similarly, the restaurant/hotel coder can be specified as follows:

 <div ex:role="coder" ex:coderClass="Icon" id="service-icons">
   <span ex:icon="fork-knife.png">Restaurant</span>
   <span ex:icon="bed.png">Hotel</span>
   <span ex:icon="question-mark.png"  ex:case="others">Other service</span>
   <span ex:icon="many-question-marks.png" ex:case="mixed">Multiple services</span>
   <span ex:icon="x.png" ex:case="missing">No service</span>
 </div>

The earthquake coder can be specified as follows:

 <div ex:role="coder" ex:coderClass="SizeGradient" id="earthquake-magnitudes"
   ex:gradientPoints="1, 20; 10, 60"
   ></div>

If this coder is used to size map markers of earthquakes, then an earthquake of 1 would be plotted with a marker measuring 20 pixels wide, and the marker of an earthquake of 10 would measure 60 pixels wide. Earthquakes of magnitudes between 1 and 10 would be plotted with markers of sizes in between, linearly interpolated.

The temperature coder can be specified as follows:

 <div ex:role="coder" ex:coderClass="ColorGradient" id="temperature-colors"
   ex:gradientPoints="-40, #000088; 0, #ffffff; 50, #ff0000"
   ></div>

This means that -40 celcius will yield a deep blue color, #000088; zero degree will yield white; and 50 celcius will yield a bright red color.

Connecting to Coders

To connect a view or a facet to a coder, you need to specify on the view or facet which coder to use and what data to feed it. Say we want to have a map view plotting politicians colored by political parties, then we can specify that map view as follows:

 <div ex:role="view" ex:viewClass="Map"
   ex:latlng=".latlng"
   ex:colorCoder="political-party-colors"
   ex:colorKey=".party"
   ></div>

Note that "political-party-colors" is the ID of the appropriate coder specified earlier.

If you want a map view of buildings and the services available in them, then write:

 <div ex:role="view" ex:viewClass="Map"
   ex:latlng=".latlng"
   ex:iconCoder="service-icons"
   ex:iconKey=".service"
   ></div>

You could potentially use several coders in the same view. For example, say you are plotting natural disasters, then you might want to use an icon coder to show whether a disaster is an earthquake, a volcano eruption, a tsunami, etc. You might want the size of the map markers to show the magnitudes of those disasters, and the colors to show the casualties (e.g., more red means more casualties).

Troubleshooting

If you have specified a coder on your page and are not seeing the expected results, ensure that your coder div is not contained within the view panel element. It is easy to forget and include the coder div next to your view declarations as the views reference the coders. However, if your coder is within your view panel element, exhibit will not parse the coder.

For icon coders, try using an absolute (http :// www.example.com / path / images / image.png) instead of a relative path to the icon image in the Coder section.

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox