index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="description" content="Tech Radar: a tool to visualize technology choices">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Tech Radar</title>
<link rel="shortcut icon" href="https://assets-global.website-files.com/62835f42aef969049eba0806/62d0550ecf756b5bde4a4e15_62ad7c27450de1398a077422_a-32.png">

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="radar.js"></script>

<link rel="stylesheet" href="radar.css">
</head>

<body>
<svg id="radar"></svg>

<!--A table with 2 columns for items that fall outside the radar -->
<table>
  <tr>
    <td>
      <h2>Incoming Items</h2>
      <ul id="out-of-radar">
        <li><span class="ring" style="background-color: #5ba300"></span> place holder item</li>
      </ul>
    </td>
    <td>
      <h2>Adopted</h2>
      <ul id="legend">
        <li><span class="ring" style="background-color: #5ba300"></span> place holder item </li>
    </td>
  </tr>

<script>
fetch('./config.json').then(function(response) {
  return response.json();
}).then(function(data) {
  radar_visualization({
    svg_id: "radar",
    width: 1850,
    height: 1000,
    colors: {
      background: "#fff",
      grid: '#dddde0',
      inactive: "#ddd"
    },
    title: "Algorand Technology Radar",
    date: data.date,
    quadrants: [
      { name: "Projects" },
      { name: "Infrastructure" },
      { name: "ARCs" },
      { name: "Protocol & Node" },
    ],
    rings: [
      { name: "ADOPT", color: "#5ba300" },
      { name: "TRIAL", color: "#009eb0" },
      { name: "ASSESS", color: "#c7ba00" },
      { name: "HOLD", color: "#e09b96" }
    ],
    print_layout: true,
    links_in_new_tabs: true,
    zoomed_quadrant: null,
    zoomed_quadrant_set: false,
    entries: data.entries
  });
}).catch(function(err) {
  console.log('Error loading config.json', err);
});
</script>


</body>
</html>