search

sehilyi / comparative-layout-explorer

📊 x 📊 =❓An online gallery to explore the design space of comparative layouts
https://sehilyi.github.io/comparative-layout-explorer/
18 stars 2 forks source link
chart comparative-layouts d3 data-visualization grammar typescript

readme

Comparative Layout Explorer

An online gallery to explore the design space of comparative layouts based on a declaratie grammar.

citation:

Sehi L'Yi, Jaemin Jo, and Jinwook Seo, Comparative Layouts Revisited: Design Space, Guidelines, and Future Directions, IEEE Transactions on Visualization and Computer Graphics (TVCG), 2021, (Proc. IEEE InfoVis 2020). [arXiv]

screenshot

Conceptual Framework

Layouts

Layout := Unit, Type, Arrangement, Mirrored
Type := Juxtaposition | Superposition | Explicit-Encoding
Unit := Chart | Item
Arrangement := Adjacent | Stacked | Diagonal | Animated
Mirrored := True | False

Development

Install Yarn from https://yarnpkg.com/lang/en/.

Clone the repo:

git clone git@github.com:sehilyi/comparative-layout-explorer.git
cd comparative-layout-explorer

Install the dependencies:

yarn install

Start the test server:

yarn start