Scatterplot Maps
SIT DOLOR AMET
Introduction to Scatterplot Maps
Central Question: How do zip codes in the U.S. relate to
their actual geography?
Key Components: Involves plotting points based on
coordinate data (like latitude and longitude) onto a 2D plot.
Step 1 - Acquiring the Data
Find a Source: Data can be found on government websites, like the U.S. Census
Bureau, which provides public data files.
Data Format: The raw data often comes in formats like DBF (dBASE file), which
can be opened in spreadsheet programs like Excel or OpenOffice.
Initial Data Contents: For a zip code map, the initial dataset typically includes
columns for ZIP code, latitude, longitude, city name, and state codes.
Deployment Considerations: When building a web-based visualization,
consider how the data will be downloaded; large files may need to be loaded
asynchronously to avoid long waits
Federal Information Processing Standards(FIPS) site
[Link]
Step 2 & 3 - Parsing and Filtering the Data
Parsing: This step provides structure to the raw data by breaking each line into its
component parts (e.g., zip code, coordinates, city) and converting them into useful
formats like strings or floats.
Filtering for Relevance: Data is often "dirty" and needs cleaning .
For a map of the contiguous U.S., records for Alaska, Hawaii, and other territories are
removed.
Data Standardization: Clean up inconsistencies in the data. For example, convert
all-caps city names to proper case and change state FIPS codes to two-letter
abbreviations
Creating a Usable File: Save the cleaned data into a simple, easy-to-parse format
like a tab-separated value (TSV) file for the main application
Step 4 & 5 - Mining and Representing the Data
Mining: This step involves applying mathematical methods to discern patterns.
For a scatterplot map, this includes finding the minimum and maximum latitude
and longitude values to properly scale the map to the screen.
Coordinate Projection: Convert latitude and longitude points to a 2D map
projection, like the Albers Equal-Area Conic projection, for a more accurate
representation of the United States.
Basic Representation: The fundamental visual model is a two-dimensional plot
where each zip code is represented as a single point at its corresponding projected
x and y coordinate.
Initial Drawing: Plotting all points creates a visual that often resembles a
population density map, as more populated areas have more zip codes.
Step 6 - Refining the Visual Display
Purpose of Refinement: Use graphic design methods to make the
representation clearer and more engaging, establishing a visual
hierarchy.
Color Palette: Choose a set of distinct colors for different states of the
data points: a background color, a color for dormant points, a color for
highlighted points, and a color for unhighlighted points.
Font and Text: Select a font and define a screen location for displaying
user input and other feedback messages.
Progressive Dimming: To make transitions less jarring, use
integrators to smoothly fade points from one color to another as the
user interacts with the map.
Step 7 - Adding Basic Interaction
User Input: Allow users to type digits (e.g., of a zip code) to interact
with the map.
Highlighting Points: As the user types, highlight the points that
match the entered digits and dim the ones that do not.
Provide Feedback: Display the digits the user has typed on the screen
to provide context.
Handling Full Input: When a complete zip code is entered, the
corresponding point can be drawn differently (e.g., as a rectangle) and
its name can be displayed.
Advanced Interaction - Zooming In
Why Zoom?:
As a user types and hones in on a smaller geographic area, a zoom feature
provides more detail and a better user experience.
Implementation: Use integrators to animate the transition of the map's
boundaries. The ranges for the map() function are changed from the full map to
the boundaries of the selected area.
Maintaining Aspect Ratio: When zooming, calculate the aspect ratio of the
selected points and adjust the zoom window to match the screen's aspect ratio,
preventing distortion.
User Control: Add an on-screen toggle to enable or disable the zoom feature,
giving the user control over the view
Refining the Zoomed View
Maintaining Information Density: As the view zooms in, single
pixels can become spread out and hard to see. Change how points are
drawn to maintain visual density.
Changing Point Representation: At deeper zoom levels, points can
be drawn as larger rectangles instead of single pixels to improve
visibility.
Revealing More Detail: At certain zoom levels, you can reveal more
information. For instance, after four digits are typed, the map could
display the possible final digits for nearby zip codes.
Contextual Labels: When a single point is selected in zoom mode, its
text label can be centered on the screen for better readability.
Deployment and Performance
Asynchronous Loading: For online deployment, a large data file can cause
slow startup. Use a Thread to load the data asynchronously in the
background, so the application remains responsive.
Data as a Progress Bar: When loading asynchronously, the points
appearing on the map can serve as a visual progress indicator for the data
download.
Data Compression: Compress the data file (e.g., using GZIP) to reduce
download time for web-based applications. Processing can automatically
decompress files ending in .gz
CPU Optimization: In interactive visualizations with animation, you can use
noLoop() to pause the drawing loop when no changes are occurring, saving
CPU cycles.
Next Steps and Further Applications
Keyboard Focus: For web applets, ensure the application has keyboard
focus when it loads, or display a message prompting the user to click inside
it.
Adapt to Other Datasets: Apply the same techniques to other geographic
datasets, such as postal codes from other countries, area codes, or even
street names within a state.
Answer New Questions: Modify the interface to answer different questions,
such as finding all locations within a certain radius of a given zip code.
Layer Additional Data: Enhance the visualization by adding more data
layers that appear at different zoom levels, such as state outlines, highways,
or satellite imagery.
Takeaways of scatter plots
Visualization is a structured, multi-stage process. Creating an effective
visualization like a scatterplot map isn't a single action but a sequence of seven
distinct stages.
Data requires significant preprocessing before visualization. Raw data is
rarely ready for immediate use.
For the zip code map, this involved acquiring data from the U.S. Census Bureau.
parsing it to give it structure
and filtering out irrelevant entries like those for Alaska and Hawaii to focus on
the contiguous U.S.
This cleaning and structuring is a critical prerequisite for meaningful
representation
Representation and refinement are key to clarity and engagement. The
initial step is to choose a basic visual model, such as plotting zip codes as points on
a 2D map based on their latitude and longitude.
However, the visualization is made truly effective through refinement—using
graphic design principles like color and hierarchy to make the data clearer and more
engaging.
Interaction transforms a static image into an exploratory tool. A static map
of dots can be interesting, but adding interaction allows users to actively explore the
data and answer questions.
Deployment and performance must be considered for real-world use. For a
visualization to be effective, especially on the web, it must be responsive.
This involves technical considerations such as loading large data files
asynchronously in a separate thread so the application doesn't freeze.
Thank You