All posts by Amanda Hickman

Making a Simple Legend

We used a couple of helpful HTML tags to make a simple key or legend in class. We created a table using table, tr, and td. We used div to create an arbitrary box and then added a style="" attribute to give the box a height, width and background color. If you don’t already know the colors on your gradient, take a screenshot using cmd-shift-4. When you see the crosshairs, draw a box around the area you want a snapshot of. When you release the mouse, OSX will save an image to your desktop. Open that in Photoshop, and use the eyedropper to pick out colors. The color slider menu in Photoshop includes a “web color” mode that will give you hexadecimal color codes and an option to copy the color code directly to your clipboard.

Then, make your table. Nesting matters. The table is the outermost tag, followed by the rows tr and then the headings and cells th or td. The code below produces the table below that.


<table>
<tr>
<th colspan="2">Youth Unemployment</th>
</tr>
<tr>
<td><div style="background-color:#cfe2f3; width:10px; height:10px"> </div></td>
<td>Less than 2%</td>
</tr>
<tr>
<td><div style="background-color:#9fc5e8; width:10px; height:10px"> </div></td>
<td>2-18%</td>
</tr>
<tr>
<td><div style="background-color:#6fa8dc; width:10px; height:10px"> </div></td>
<td>19-35%</td>
</tr>
<tr>
<td><div style="background-color:#3d85c6; width:10px; height:10px"> </div></td>
<td>36-51%</td>
</tr>
<tr>
<td><div style="background-color:#0b5394; width:10px; height:10px"> </div></td>
<td>More than 51%</td>
</tr>
</table>

Youth Unemployment
 
Less than 2%
 
2-18%
 
19-35%
 
36-51%
 
More than 51%

Anchoring Links

Check out the full specs of the anchor tag or just view the source of a few simple pages to see how to use <a href=”http://…”> to anchor a link.

Quick hints:
+ there are no spaces around the ” or =
+ “curly quotes”  are not the same as “straight quotes”
+ close your anchor with </a>

Just to keep you on your toes, some browsers are more forgiving of stray spaces and curly quotes than others.

Mapping

If you’re just getting started making maps online, start with Google Maps, but they’re not your only option. Many Eyes does well with state and country level maps. John Keefe blogs relentlessly about his Google mapping projects, how they work, and what he’s learned. CartoDB is new and more powerful and flexible than Google Maps. It is also more complex. MapBox is even more powerful, flexible, and complex.

Great places to start thinking about maps:
+ Dave Cole, John Keefe and Matt Stiles on Mapping Best Practices (NICAR 2013)
+ John Keefe, Albert Sun and Jeff Larson talk about making maps (Hacks/Hackers 2011)
+ Take Care of your Chloropleth Maps
+ When Maps Shouldn’t be Maps
+ Amanda’s maps and mapping tags on Tumblr
Continue reading Mapping