Brief: Design and develop an interactive typography timeline, showcasing its innovations across ten centuries and three categories, typeface, classification, and technology.
Concept: With the three categories in mind I separated the design into three columns to differentiate each category and gave them different contrasting colors from the tic marks. The centuries in which they were developed are broken down into blocks and contain each innovation if there was one. I intentionally made the century blocks animate left and right allowing the viewer to see each marker for an innovation. With this treatment the viewer is able to see spatial relationships between all the innovations through time.
Programs and Language Used:
Illustrator, SVG, and D3.js.
Illustrator, SVG, and D3.js.
Behavior snippet showing the data pool I will be pulling from.
Behavior snippet showing how the initial timeline box is drawn.
HTML snippet showing placement of SVG element.
CSS