Download SVG Button

an example that uses SVG Crowbar to extract an SVG from the page and download it as an .svg file

an alternate method that works with Firefox is demonstrated in @currankelleher's nice Download SVG from Data URL example

A d3js ROC Chart. Might be useful for evaluating models.

the data shown are from models that predict various tennis stats. curious about the source data? browse through the R script that @ilanthedataman uses to generate the data.

check out the animated version

inspired by the Interactive ROC Curve bl.ock from ilanman

<!DOCTYPE html>
<meta charset='utf-8'>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300,100,900|Open+Sans:400,300,700,600,800' rel='stylesheet' type='text/css'>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.22.1/babel.min.js'></script>
  <script src='https://d3js.org/d3.v4.min.js' charset='utf-8'></script>
  <script src='rocChart.js'></script>
</head>
<style>
body { 
  font-size: 12px; 
  font-family: 'Open Sans';
}

path { 
    stroke-width: 3;
    fill: none;
    opacity: .7;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 2;
    shape-rendering: crispEdges;
    opacity: 1;
}

.d3-tip {
    font-family: Verdana;
    background: rgba(0, 0, 0, 0.8);
    padding: 8px;
    color: #fff; 
    z-index: 5070;
  }

.download { 
  background: darkgray; 
  color: #FFF; 
  font-weight: 600; 
  border: 2px solid #FFF; 
  border-radius: 8px;
  padding: 6px; 
  margin:4px;
  position: fixed;
  left: 187px;
}
</style>
<body>
  <div id='roc'> </div>
  <button class="download" onClick="(function () { var e = document.createElement('script'); e.setAttribute('src', 'svg-crowbar.js'); e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();">
    <big>⇩</big> Download SVG
  </button>
<script>
const margin = {top: 30, right: 61, bottom: 70, left: 61}; 
const width = 470 - margin.left - margin.right;
const height = 450 - margin.top - margin.bottom;

// fpr for 'false positive rate'
// tpr for 'true positive rate'

const rocChartOptions = {
  'margin': margin,
  'width': width,
  'height': height,
  'interpolationMode': 'basis',
  'fpr': 'X',
  'tprVariables': [
    {
      'name': 'BPC',
      'label': 'Break Points'
    },
    {
      'name': 'WNR',
      'label': 'Winners'
    },
    {
      'name': 'FSP',
      'label': 'First Serve %',
    },
    {
      'name': 'NPW',
      'label': 'Net Points Won'
    }
  ], 
  'animate': false,
  'smooth': true
}

d3.json('data.json', (error, data) => rocChart('#roc', data, rocChartOptions))
</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.22.1/babel.min.js

https://d3js.org/d3.v4.min.js