This repository contains the source code of a modified PDF Viewer that allows the creation of Charagraphs. Charagraphs are visualizations created from in-text numbers (see the accompanying paper).
Damien Masson, Sylvain Malacria, Géry Casiez, and Daniel Vogel. 2023. Charagraph: Interactive Generation of Charts for Realtime Annotation of Data-Rich Paragraphs. In Proceedings of the 2023 CHI Conference on Human Factors in Computing Systems (CHI '23). Association for Computing Machinery, New York, NY, USA, Article 146, 1–18.
The tool was created using TypeScript and React. To run it, you can npm. In the project directory, first install all dependencies:
npm install .
Then run the project:
npm start
Once the server is running, you can access the PDF viewer by browsing to http://localhost:3000/Charagraph (replacing 3000 by the port React is using).
After selecting a paragraph that contains numbers, a popup will let you select different "group of values". Once one is selected, a charagraph is created. Charagraphs will appear in the margin, so make sure your web browser is in fullscreen/you are zoomed out enough to see the margins.
Note that the tool was tested and developped for recent versions of Google Chrome or Mozilla Firefox.
By default, it should load a PDF with pages extracted from various documents. Feel free to try the tool on different PDFs (CTRL/CMD+O)