Skip to content

A radar chart to visualise items mapped to rings and slices

License

Notifications You must be signed in to change notification settings

szerintedmi/roadmap-radar-chart

Repository files navigation

RadarChart

A radar chart to generate an overview of your roadmap or tech radar.

Live demo

Now/Next/Later example

  • Arranges your items (e.g. initiatives) on a Pie view:
    • high level grouping (e.g. goals) => slices
    • optional sub grouping (eg. outcomes) => subSlices
    • your timescale/ring classification (eg. Now/Next/Later, Q1/Q2/Q3/Q4, adopt/trial/asses/hold etc.) => rings
  • Generates tooltips for each item
  • Reads data from CSV, Google sheet (via CSV publish) or JSON. Get in touch if you need a different source for your use case (eg. Trello, Jira etc.)
  • Customizable:
    • colors, fonts etc. via style.css
    • layout and item markers via RadarConfig. See examples below and in index.ts

Examples

Tech radar

ThoughtWorks Technology Radar vol 23 - notice that sub-slices are optional.

Live view

ThoughtWorks Technology Radar vol 23

ThoughtWorks' original tech radar layout is better for this use case but less generic (e.g fixed 4 slices and 4 rings, no sub-slices etc.).

Using it with your data

The simplest way to add data is via a google spreadsheet:

  1. Save a copy of this spreadsheet

    Note: sheet columns (watch out for the capitalization):

    slice, [subSlice], ring, group, label, [description]

  2. Add your items one per row

    Tips:

    • rings will be displayed in the order of appearance in the sheet. I.e. the ring of the first item in the spreadsheet will be the innermost ring.
    • subSlice is optional , you can have single level grouping
    • The order of slices and sub slices are conserved.
    • Item colours are based on their group. Colors are assigned to d3.schemeSet1 color scheme in the order of their appearance. I.e. first group appearing will be red by default. You can customize the colorscheme. See an example in Example.ts
  3. Publish the sheet as CSV and copy the link

    Google sheet publish 1 Google sheet publish 2 Google sheet publish 3
  4. Add the link as csv url parameter

    https://radarchart.netlify.app/?csv=<your link>

    It should look something like this:

    https://radarchart.netlify.app/?csv=https://docs.google.com/spreadsheets/d/e/2PACX-1vSMgk767I1gWr1F1bmI2XMttvPa1TyXcdd910BSfQZjqIvOHA_aE_ESnAhftTmjnJ-KL5uwPr-LIRYJ/pub?output=csv

    Note: Radar Chart will reflect changes in your google sheet after reload. Published google sheets take sometime to reflect the changes just be patient and keep reloading.

Customizing

  • colors, fonts etc. via style.css
  • layout and item markers via RadarConfig. See examples in index.ts

Tooltips

Tooltip example

Tooltip layout is configurable in style.css

Sub-slice sizing: equal vs. proportional

Sub-slices are sized equally by default so it's apparent when some sub-slices have much less items than others.

If you have too many items in some sub slices compered to other sub-slices then you might want to allow proportional sub slice sizing with radarConfig.pie.minSubSliceAngle minSubSliceAngle example

Ring sizing: equal vs. proportional

Rings are sized proportional to the number of items in each ring by default. You can adjust the minimum ring radius with radarConfig.pie.minRingRadius

If you want the rings to have equal sizes then set minRingRadius to a number which is higher than the total radius.

minRingRadius example

Usage in your code

For more details (eg. RadarConfig tips, error handling etc.) see index.ts

yarn add roadmap-radar-chart
import "roadmap-radar-chart/style.css";
import { SingleDsvDataSource, RadarContainer } from "roadmap-radar-chart";

const CSV_URI =
  "https://docs.google.com/spreadsheets/d/e/2PACX-1vSMgk767I1gWr1F1bmI2XMttvPa1TyXcdd910BSfQZjqIvOHA_aE_ESnAhftTmjnJ-KL5uwPr-LIRYJ/pub?output=csv";
const svgDiv = document.getElementById("myRadar-div");

//////////////////////////////////////////////////////////////////////////
// Setup data source.
const radarDs = new SingleDsvDataSource(CSV_URI);

//////////////////////////////////////////////////////////////////////////
// Creating the chart with default configs. Customize it by passing a RadarConfig object
const radarContainer = new RadarContainer();

//////////////////////////////////////////////////////////////////////////
// Fetch data and append it to svg
radarContainer.fetchData(radarDs).then(() => {
  radarContainer.appendTo(svgDiv);
});
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Roadmap Radar</title>
  </head>

  <body>
    <div class="error-div"></div>
    <div id="myRadar-div" class="radar-div"></div>
    <div id="myRadar-tooltip" class="radar-tooltip"></div>
  </body>
</html>

License

This project is licensed under the MIT license. See the LICENSE file for details.

About

A radar chart to visualise items mapped to rings and slices

Resources

License

Stars

Watchers

Forks

Packages

No packages published