PatMartin/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Radar Chart

This is a reusable dex.js radar chart composed of treemaps based
upon Nadieh Bremer's example.
The radar chart is sometims called the spider chart.  Interestingly, it is
a variant of parallel coordinates mapped on to polar coordinates.
FAQ

No Legend?

In dex.js, legends are a separate component and populated via intra-chart
communication.  It frees individual chart implementations of the burden
of drawing a legend.  It also enables us to provide a single, robust and
full featured implementation instead of re-implementing the same old thing
over and over again for each individual chart.  More on this in a later
block.
References


dex.js The main site


## index.html
<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
    <link rel="stylesheet" href="https://dexjs.net/js/dex-jquery.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
    <link rel="stylesheet" href="https://dexjs.net/js/dex-bootstrap.css">
    <link rel="stylesheet" href="https://dexjs.net/js/dex.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://dexjs.net/js/dex-jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://dexjs.net/js/dex-bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://dexjs.net/js/dex-libs.js"></script>
    <script src="https://dexjs.net/js/dex.js"></script>

    <style>
        html, body, #RadarChart {
            height: 100%;
            min-height: 100%;
            width: 100%;
            min-width: 100%;
        }
    </style>
</head>
<body>
<div id="RadarChart"></div>
<script>
  csv = new dex.csv(["Salesman", "Q1 Sales", "Q2 Sales", "Q3 Sales", "Q4 Sales"],
    [["Bob Sleezy", 1000, 2000, 3000, 4000],
      ["Honest Jim", 4100, 500, 2500, 3000]]);

  var radarChart = dex.charts.d3.RadarChart({
    'parent': '#RadarChart',
    'csv': csv
  }).render();
</script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
	<link rel="stylesheet" href="https://dexjs.net/js/dex-jquery.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
	<link rel="stylesheet" href="https://dexjs.net/js/dex-bootstrap.css">
	<link rel="stylesheet" href="https://dexjs.net/js/dex.css">

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	<script src="https://dexjs.net/js/dex-jquery.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script src="https://dexjs.net/js/dex-bootstrap.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="https://dexjs.net/js/dex-libs.js"></script>
	<script src="https://dexjs.net/js/dex.js"></script>

	<style>
	html, body, #RadarChart {
	height: 100%;
	min-height: 100%;
	width: 100%;
	min-width: 100%;
	}
	</style>
	</head>
	<body>
	<div id="RadarChart"></div>
	<script>
	csv = new dex.csv(["Salesman", "Q1 Sales", "Q2 Sales", "Q3 Sales", "Q4 Sales"],
	[["Bob Sleezy", 1000, 2000, 3000, 4000],
	["Honest Jim", 4100, 500, 2500, 3000]]);

	var radarChart = dex.charts.d3.RadarChart({
	'parent': '#RadarChart',
	'csv': csv
	}).render();
	</script>
	</body>