Installation and Deployment
See Getting Started for a minimal working example.
See Deploying the client for instructions on how to deploy the client on a production system.
See Installing and configuring the server for instructions on how to install and configure the server.
At the moment, Headstart supports three different modes. The examples contain a complete setup for each of the three modes.
Show static maps from a headstart server
Set the mode to
serve_static_files, adjust the
server_urland you are ready to go.
Show local maps from client-side
In order to show local, pre-calculated maps adjust the
data-config.filesarray to mirror your local file structure.
Perform queries against third-party APIs and create new maps
data-config.jsallows you to choose (currently) one of three possible repositories to query against. ("plos", "pubmed", "doaj"). Follow the instructions in HOWTO: Get the search repos example to work.
In order to change the look and behaviour of Headstart, adapt the options in
data-config.js provided with each example. For an overview of all options, see
Basic settings include:
- title - Title of the map
- width - in px
- height - in px
Tweak these values to optimize bubble and paper sizes.
To change the look of Headstart beyond these options, modify the actual SASS files in
Setting up a vanilla
Our suggestion would be to build from the examples provided, but in case you want to start from scratch, here's a guideline
Three lines will set up the basics of Headstart.
Now, the only thing needed to run Headstart, is to call
Deploying the client
To deploy Headstart, you need to make a few changes to your configuration.
First, add the stylesheets to your
<link rel="stylesheet" href="path/to/dist/headstart.css">
Second, run the following command to create a production build of Headstart:
npm run prod
Now, you only need to copy the
dist folder to the desired location on your web server.
Input Data Format
Each input dataset consists of 12 entries per document.
- id - Document ID
- title - Title of the document
- readers - Readers
- x - Horizontal position on the map
- y - Vertical postition on the map
- paper_abstract - Abstract optional
- published_in - Name of Journal optional
- year - Year optional
- url - URL (common prefix can be defined in the options)
- file_hash -
- authors - Name of authors
Important note: The proposed architecture does not reflect the current status of Headstart. Main differences: Mediator
app.js located within
header.js located in
util.js not implemented
Headstart uses the mediator pattern (see Addy Osmani's article). The current version has implemented the mediator and the channels for basic functionality, but logic has not been moved yet.
The mediator. Has subscribed to all channels and receives events from the sub-modules which publish according to user interaction.
Manages the actual map visualization.
Topic bubbles in the map.
Paper elements within the bubbles.
The collapsable list of papers.
Map <-- Interaction --> List
Manages the pop-up window that is used for the intro text and pdf previews.
Content of the header above the map. Updated according to currently selected layer of the visualization.
Contains following functionality: