Tech Radar

https://github.com/zalando/tech-radar
Admin
Visualizing our technology choices
Tokens:952
Snippets:6
Trust Score:8.3
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Dependencies

Source: https://github.com/zalando/tech-radar/blob/master/README.md

Install project dependencies using Yarn or npm before starting local development.

```shell
yarn
```

--------------------------------

### Start Local Development Server

Source: https://github.com/zalando/tech-radar/blob/master/README.md

Start the local development server to preview the Tech Radar visualization. The server typically runs on http://localhost:3000/.

```shell
yarn start
```

--------------------------------

### Load and Visualize Tech Radar Configuration

Source: https://github.com/zalando/tech-radar/blob/master/docs/index.html

Fetches radar configuration from './config.json' and uses it to render a radar visualization. It defines quadrants and rings, and processes entries from the JSON data. Includes basic error handling for the fetch operation.

```javascript
fetch('./config.json').then(function(response) { return response.json(); }).then(function(data) { radar_visualization({
  repo_url: "https://github.com/zalando/tech-radar",
  title: "Zalando Tech Radar",
  date: data.date,
  quadrants: [
    { name: "Languages" },
    { name: "Infrastructure" },
    { name: "Datastores" },
    { name: "Data Management" },
  ],
  rings: [
    { name: "ADOPT", color: "#5ba300" },
    { name: "TRIAL", color: "#009eb0" },
    { name: "ASSESS", color: "#c7ba00" },
    { name: "HOLD", color: "#e09b96" }
  ],
  entries: data.entries
}); }).catch(function(err) { console.log('Error loading config.json', err); });
```

--------------------------------

### Include D3.js and Radar.js Libraries

Source: https://github.com/zalando/tech-radar/blob/master/README.md

Include the necessary JavaScript libraries for the Tech Radar visualization, including d3.js v7 and the radar-0.12.js script, in your HTML file.

```html
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://zalando.github.io/tech-radar/release/radar-0.12.js"></script>
```

--------------------------------

### Configure Radar Visualization

Source: https://github.com/zalando/tech-radar/blob/master/README.md

Configure the radar visualization by calling the radar_visualization function with various options such as dimensions, colors, fonts, quadrants, rings, and data entries.

```javascript
radar_visualization({
  repo_url: "https://github.com/zalando/tech-radar",
  svg_id: "radar",
  width: 1450,
  height: 1000,
  scale: 1.0,
  colors: {
    background: "#fff",
    grid: "#bbb",
    inactive: "#ddd"
  },
  // Some font families might lead to font size issues
  // Arial, Helvetica, or Source Sans Pro seem to work well though
  font_family: "Arial, Helvetica",
  title: "My Radar",
  quadrants: [
    { name: "Bottom Right" },
    { name: "Bottom Left" },
    { name: "Top Left" },
    { name: "Top Right" }
  ],
  rings: [
    { name: "INNER",  color: "#5ba300" },
    { name: "SECOND", color: "#009eb0" },
    { name: "THIRD",  color: "#c7ba00" },
    { name: "OUTER",  color: "#e09b96" }
  ],
  print_layout: true,
  links_in_new_tabs: true,
  entries: [
   {
      label: "Some Entry",
      quadrant: 3,          // 0,1,2,3 (counting clockwise, starting from bottom right)
      ring: 2,              // 0,1,2,3 (starting from inside)
      moved: -1             // -1 = moved out (triangle pointing down)
                            //  0 = not moved (circle)
                            //  1 = moved in  (triangle pointing up)
                            //  2 = new       (star)
   },
    // ...
  ]
});
```

--------------------------------

### Insert SVG Container

Source: https://github.com/zalando/tech-radar/blob/master/README.md

Add an empty SVG tag to your HTML document where the radar visualization will be rendered.

```html
<svg id="radar"></svg>
```
Tokens:
Raw