A library that generates an interactive radar, inspired by thoughtworks.com/radar.
Demo
You can see this in action at https://radar.thoughtworks.com. If you plug in this data you'll see this visualization.
How To Use
The easiest way to use the app out of the box is to provide a public Google Sheet ID from which all the data will be fetched. You can enter that ID into the input field on the first page of the application, and your radar will be generated. The data must conform to the format below for the radar to be generated correctly.
Setting up your data
You need to make your data public in a form we can digest.
Create a Google Sheet. Give it at least the below column headers, and put in the content that you want:
name ring quadrant isNew description
Composer adopt tools TRUE Although the idea of dependency management ...
Canary builds trial techniques FALSE Many projects have external code dependencies ...
Apache Kylin assess platforms TRUE Apache Kylin is an open source analytics solution ...
JSF hold languages & frameworks FALSE We continue to see teams run into trouble using JSF ...
In Google Docs, go up to the File menu and pick Publish to the web, then click Start publishing. A URL will appear, something like https://docs.google.com/spreadsheets/d/1YXkrgV7Y6zShiPeyw4Y5_19QOfu5I6CyH5sGnbkEyiI/pubhtml.
Copy that! In theory you're interested only in the part between /d/ and /pubhtml but you can use the whole URL if you want.
Paste the URL in the input field on the main page.
That's it!
Note: the quadrants of the radar, and the order of the rings inside the radar will be drawn in the order they appear in your Google Sheet.
More complex usage
To create the data representation, you can use the Google Sheet factory, or you can also insert all your data straight into the code.
The app uses Tabletop.js to fetch the data from a Google Sheet, so refer to their documentation for more advanced interaction. The input from the Google Sheet is sanitized by whitelisting HTML tags with sanitize-html.
The application uses webpack to package dependencies and minify all .js and .scss files.
Contribute
All tasks are defined in package.json.
Pull requests are welcome; please write tests whenever possible.
git clone git@github.com:thoughtworks/build-your-own-radar.gitnpm installnpm test- to run your testsnpm run dev- to run application in localhost:8080. This will watch the .js and .css files and rebuild on file changes