Typography to represent data at the time is written
Overview
esdata is a experimental typography that consists of visualizing data in maps at the same time the data is written. Imagine writing the election data and using a typography that automatically transforms the data into a map.
Purpose
The goal is to experiment with new ways of visualizing data and discover all the possibilities of variable fonts, CSS and JavaScript. You can play with the USA Election Map.
USA Elections
Winner Barack obama
Alabama
60.55% Republicans
Alaska
54.80% Republicans
Arizona
53.65% Republicans
Arkansas
60.57% Republicans
California
60.24% Democrats
Colorado
51.49% Democrats
Connecticut
58.06% Democrats
Delaware
58.61% Democrats
Florida
50.01% Democrats
Georgia
53.30% Republicans
Hawaii
70.55% Democrats
Idaho
64.53% Republicans
Illinois
57.60% Democrats
Indiana
54.13% Republicans
Iowa
51.99% Democrats
Kansas
59.71% Republicans
Kentucky
60.49% Republicans
Louisiana
57.78% Republicans
Maine
56.27% Democrats
Maryland
61.97% Democrats
Massachusetts
60.65% Democrats
Michigan
54.21% Democrats
Minnesota
52.65% Democrats
Mississippi
55.29% Republicans
Missouri
53.76% Republicans
Montana
55.35% Republicans
Nebraska
59.80% Republicans
Nevada
52.36% Democrats
NewHampshire
51.98% Democrats
NewJersey
58.38% Democrats
NewMexico
52.99% Democrats
NewYork
63.35% Democrats
NorthCarolina
50.39% Republicans
NorthDakota
58.32% Republicans
Ohio
50.67% Democrats
Oklahoma
66.77% Republicans
Oregon
54.24% Democrats
Pennsylvania
51.97% Democrats
RhodeIsland
62.70% Democrats
SouthCarolina
54.56% Republicans
SouthDakota
57.89% Republicans
Tennessee
59.48% Republicans
Texas
57.17% Republicans
Utah
72.79% Republicans
Vermont
66.57% Democrats
Virginia
51.16% Democrats
Washington
56.16% Democrats
WestVirginia
62.30% Republicans
Wisconsin
52.83% Democrats
Wyoming
68.64% Republicans
Republican
Democrat
2016 Elections Data
State
Republicans
Democrats
Alabama
60.55%
38.36%
Alaska
54.80%
40.81%
Arizona
53.65%
44.59%
Arkansas
60.57%
36.88%
California
37.12%
60.24%
Colorado
46.13%
51.49%
Connecticut
40.73%
58.06%
Delaware
39.98%
58.61%
Florida
49.13%
50.01%
Georgia
53.30%
45.48%
Hawaii
27.84%
70.55%
Idaho
64.53%
32.62%
Illinois
40.73%
57.60%
Indiana
54.13%
43.93%
Iowa
46.18%
51.99%
Kansas
59.71%
37.99%
Kentucky
60.49%
37.80%
Louisiana
57.78%
40.58%
Maine
40.98%
56.27%
Maryland
35.90%
61.97%
Massachusetts
37.51%
60.65%
Michigan
44.71%
54.21%
Minnesota
44.96%
52.65%
Mississippi
55.29%
43.79%
Missouri
53.76%
44.38%
Montana
55.35%
41.70%
Nebraska
59.80%
38.03%
Nevada
45.68%
52.36%
New Hampshire
46.40%
51.98%
New Jersey
40.59%
58.38%
New Mexico
42.84%
52.99%
New York
35.17%
63.35%
North Carolina
50.39%
48.35%
North Dakota
58.32%
38.69%
Ohio
47.69%
50.67%
Oklahoma
66.77%
33.23%
Oregon
42.15%
54.24%
Pennsylvania
46.59%
51.97%
Rhode Island
35.24%
62.70%
South Carolina
54.56%
44.09%
South Dakota
57.89%
39.87%
Tennessee
59.48%
39.08%
Texas
57.17%
41.38%
Utah
72.79%
24.75%
Vermont
30.97%
66.57%
Virginia
47.28%
51.16%
Washington
41.29%
56.16%
West Virginia
62.30%
35.54%
Wisconsin
45.89%
52.83%
Wyoming
68.64%
27.82%
Ligatures
Typographic ligatures recognize a sequence in the text and transform it into a new glyph or drawing. esdata recognizes geographic zones such as states or counties as text and creates a visual map using only typography.
Kerning
When the typography detects ligatures, the next step is to overlap the glyphs. This is done with negative kerning, which sets a negative space between glyphs to fit in the same space and create the map. It uses kerning instead of tracking because kerning can be set natively in the font.
System
The system consists in a 45º grid which creates small squares for draw the map. The squares are filled with differents sizes for have diferents weights. esdata use the new typographic technology, Variable Font, for have a transition between weights.