title: Error: <path> attribute d: Expected number, "….43564672524005LNaN,NaNZ"
body: <p>I tried to get running <a href="https://github.com/nicgirault/circosJS" rel="nofollow noreferrer">circosJS</a> but I got the following errors with my data:</p>
  
  <pre><code>1 "datum" "unknown parent id" {line: 1, value: undefined, header: "sourceId", layoutSummary: {…}}
  circos.js:19573 1 "datum" "unknown parent id" {line: 2, value: undefined, header: "sourceId", layoutSummary: {…}}
  circos.js:19573 1 "datum" "unknown parent id" {line: 3, value: undefined, header: "sourceId", layoutSummary: {…}}
  circos.js:19573 1 "datum" "unknown parent id" {line: 4, value: undefined, header: "sourceId", layoutSummary: {…}}
  circos.js:19573 1 "datum" "unknown parent id" {line: 5, value: undefined, header: "sourceId", layoutSummary: {…}}
  circos.js:19573 1 "datum" "unknown parent id" {line: 6, value: undefined, header: "sourceId", layoutSummary: {…}}
  circos.js:19573 1 "datum" "unknown parent id" {line: 7, value: undefined, header: "sourceId", layoutSummary: {…}}
  circos.js:19573 1 "datum" "unknown parent id" {line: 8, value: undefined, header: "sourceId", layoutSummary: {…}}
  circos.js:19573 1 "datum" "unknown parent id" {line: 9, value: undefined, header: "sourceId", layoutSummary: {…}}
  circos.js:19573 1 "datum" "unknown parent id" {line: 10, value: undefined, header: "sourceId", layoutSummary: {…}}
  circos.js:3998 Error: &lt;path&gt; attribute d: Expected number, "….43564672524005LNaN,NaNZ".
  (anonymous) @ circos.js:3998
  selection_each @ circos.js:3963
  selection_attr @ circos.js:4020
  renderLayout @ circos.js:7440
  render @ circos.js:7017
  render @ circos.js:205
  drawCircos @ chords.js:83
  _call @ d3-queue.js:42
  maybeNotify @ d3-queue.js:118
  (anonymous) @ d3-queue.js:89
  (anonymous) @ d3.js:10999
  call @ d3.js:668
  respond @ d3.js:10924
  XMLHttpRequest.send (async)
  send @ d3.js:11001
  get @ d3.js:10981
  (anonymous) @ d3.js:11042
  start @ d3-queue.js:72
  poke @ d3-queue.js:56
  defer @ d3-queue.js:33
  (anonymous) @ chords.js:88
  1365circos.js:3998 Error: &lt;path&gt; attribute d: Expected number, "MNaN,NaNLNaN,NaNZ".
  (anonymous) @ circos.js:3998
  selection_each @ circos.js:3963
  selection_attr @ circos.js:4020
  renderLayout @ circos.js:7440
  render @ circos.js:7017
  render @ circos.js:205
  drawCircos @ chords.js:83
  _call @ d3-queue.js:42
  maybeNotify @ d3-queue.js:118
  (anonymous) @ d3-queue.js:89
  (anonymous) @ d3.js:10999
  call @ d3.js:668
  respond @ d3.js:10924
  XMLHttpRequest.send (async)
  send @ d3.js:11001
  get @ d3.js:10981
  (anonymous) @ d3.js:11042
  start @ d3-queue.js:72
  poke @ d3-queue.js:56
  defer @ d3-queue.js:33
  (anonymous) @ chords.js:88
  circos.js:3998 Error: &lt;path&gt; attribute d: Expected number, "….72942341610366LNaN,NaNZ".
  (anonymous) @ circos.js:3998
  selection_each @ circos.js:3963
  selection_attr @ circos.js:4020
  renderLayoutLabels @ circos.js:7365
  renderLayout @ circos.js:7447
  render @ circos.js:7017
  render @ circos.js:205
  drawCircos @ chords.js:83
  _call @ d3-queue.js:42
  maybeNotify @ d3-queue.js:118
  (anonymous) @ d3-queue.js:89
  (anonymous) @ d3.js:10999
  call @ d3.js:668
  respond @ d3.js:10924
  XMLHttpRequest.send (async)
  send @ d3.js:11001
  get @ d3.js:10981
  (anonymous) @ d3.js:11042
  start @ d3-queue.js:72
  poke @ d3-queue.js:56
  defer @ d3-queue.js:33
  (anonymous) @ chords.js:88
  1365circos.js:3998 Error: &lt;path&gt; attribute d: Expected number, "MNaN,NaNLNaN,NaNZ".
  (anonymous) @ circos.js:3998
  selection_each @ circos.js:3963
  selection_attr @ circos.js:4020
  renderLayoutLabels @ circos.js:7365
  renderLayout @ circos.js:7447
  render @ circos.js:7017
  render @ circos.js:205
  drawCircos @ chords.js:83
  _call @ d3-queue.js:42
  maybeNotify @ d3-queue.js:118
  (anonymous) @ d3-queue.js:89
  (anonymous) @ d3.js:10999
  call @ d3.js:668
  respond @ d3.js:10924
  XMLHttpRequest.send (async)
  send @ d3.js:11001
  get @ d3.js:10981
  (anonymous) @ d3.js:11042
  start @ d3-queue.js:72
  poke @ d3-queue.js:56
  defer @ d3-queue.js:33
  (anonymous) @ chords.js:88
  1366circos.js:3998 Error: &lt;g&gt; attribute transform: Expected number, "rotate(NaN)translate(14…".
  </code></pre>
  
  <p>This is <code>chord.js</code> code:</p>
  
  <pre><code>var gieStainColor = {
    gpos100: 'rgb(0,0,0)',
    gpos: 'rgb(0,0,0)',
    gpos75: 'rgb(130,130,130)',
    gpos66: 'rgb(160,160,160)',
    gpos50: 'rgb(200,200,200)',
    gpos33: 'rgb(210,210,210)',
    gpos25: 'rgb(200,200,200)',
    gvar: 'rgb(220,220,220)',
    gneg: 'rgb(255,255,255)',
    acen: 'rgb(217,47,39)',
    stalk: 'rgb(100,127,164)',
    select: 'rgb(135,177,255)'
  }
  
  var drawCircos = function (error, GRCh37, data) {
    var width = document.getElementsByClassName('mdl-card__supporting-text')[0].offsetWidth
    var circos = new Circos({
      container: '#chordsChart',
      width: width,
      height: width
    })
  
    data = data.map(function (d) {
      return {
        source: {
          id: d.source_id,
          start: parseInt(d.source_breakpoint) - 2000000,
          end: parseInt(d.source_breakpoint) + 2000000
        },
        target: {
          id: d.target_id,
          start: parseInt(d.target_breakpoint) - 2000000,
          end: parseInt(d.target_breakpoint) + 2000000
        }
      }
    })
  
    circos
      .layout(
        GRCh37,
      {
        innerRadius: width/2 - 80,
        outerRadius: width/2 - 40,
        labels: {
          radialOffset: 70
        },
        ticks: {
          display: true,
          labelDenominator: 1000000
        },
        events: {
          'click.demo': function (d, i, nodes, event) {
            console.log('clicked on layout block', d, event)
          }
        }
      }
      )
      .chords(
        'l1',
        data,
      {
        radius: function (d) {
          if (d.source.id === 'chr1') {
            return 0.5
          } else {
            return null
          }
        },
        logScale: false,
        opacity: 0.7,
        color: '#ff5722',
        tooltipContent: function (d) {
          return '&lt;h3&gt;' + d.source.id + ' ➤ ' + d.target.id + ': ' + d.value + '&lt;/h3&gt;&lt;i&gt;(CTRL+C to copy to clipboard)&lt;/i&gt;'
        },
        events: {
          'mouseover.demo': function (d, i, nodes, event) {
            console.log(d, i, nodes, event.pageX)
          }
        }
      }
      )
      .render()
  }
  
  d3.queue()
    .defer(d3.json, './data/circle.json')
    .defer(d3.json, './data/data.json')
    .await(drawCircos)
  </code></pre>
  
  <p>This is <code>circle.json</code>:</p>
  
  <pre><code>[
    {
      "color": "#996600", 
      "id": "chr03", 
      "len": "35020413", 
      "label": "chr03"
    }, 
    {
      "color": "#666600", 
      "id": "tig00007144", 
      "len": 40868, 
      "label": "tig00007144"
    }
  ]
  </code></pre>
  
  <p>This is <code>data.json</code></p>
  
  <pre><code>[
    {
      "source": {
        "start": 30824, 
        "end": 23113, 
        "id": "tig00007144"
      }, 
      "target": {
        "start": 33203431, 
        "end": 33211142, 
        "id": "chr03"
      }
    }, 
    {
      "source": {
        "start": 5564, 
        "end": 1, 
        "id": "tig00007144"
      }, 
      "target": {
        "start": 33172892, 
        "end": 33178421, 
        "id": "chr03"
      }
    }, 
    {
      "source": {
        "start": 36357, 
        "end": 30947, 
        "id": "tig00007144"
      }, 
      "target": {
        "start": 33211132, 
        "end": 33216579, 
        "id": "chr03"
      }
    }
    ]
  </code></pre>
  
  <p>This is the <code>index.html</code>:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="description" content="A front-end template that helps you build fast, modern mobile web apps."&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"&gt;
      &lt;title&gt;Circos&lt;/title&gt;
  
      &lt;!-- Add to homescreen for Chrome on Android --&gt;
      &lt;meta name="mobile-web-app-capable" content="yes"&gt;
      &lt;link rel="icon" sizes="192x192" href="images/android-desktop.png"&gt;
  
      &lt;!-- Add to homescreen for Safari on iOS --&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
      &lt;meta name="apple-mobile-web-app-status-bar-style" content="black"&gt;
      &lt;meta name="apple-mobile-web-app-title" content="Material Design Lite"&gt;
      &lt;link rel="apple-touch-icon-precomposed" href="images/ios-desktop.png"&gt;
  
      &lt;!-- Tile icon for Win8 (144x144 + tile color) --&gt;
      &lt;meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png"&gt;
      &lt;meta name="msapplication-TileColor" content="#3372DF"&gt;
  
      &lt;link rel="shortcut icon" href="images/favicon.png"&gt;
  
      &lt;!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones --&gt;
      &lt;!--
      &lt;link rel="canonical" href="http://www.example.com/"&gt;
      --&gt;
  
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;amp;lang=en"&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
      &lt;link rel="stylesheet" href="//code.getmdl.io/1.3.0/material.deep_purple-pink.min.css"&gt;
      &lt;link rel="stylesheet" href="styles.css"&gt;
  
      &lt;script src='https://cdn.rawgit.com/nicgirault/circosJS/v2/dist/circos.js'&gt;&lt;/script&gt;
      &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.js'&gt;&lt;/script&gt;
      &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.3/d3-queue.js'&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base"&gt;
      &lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"&gt;
        &lt;header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary"&gt;
          &lt;div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark"&gt;
            &lt;a href="#chords" class="mdl-layout__tab is-active"&gt;Chords&lt;/a&gt;
            &lt;a href="#heatmap" class="mdl-layout__tab"&gt;Heatmap&lt;/a&gt;
            &lt;a href="#highlight" class="mdl-layout__tab"&gt;Highlight&lt;/a&gt;
            &lt;a href="#histogram" class="mdl-layout__tab"&gt;Histogram&lt;/a&gt;
            &lt;a href="#line" class="mdl-layout__tab"&gt;Line&lt;/a&gt;
            &lt;a href="#scatter" class="mdl-layout__tab"&gt;Scatter&lt;/a&gt;
            &lt;a href="#stack" class="mdl-layout__tab"&gt;Stack&lt;/a&gt;
            &lt;a href="#text" class="mdl-layout__tab"&gt;Text&lt;/a&gt;
          &lt;/div&gt;
        &lt;/header&gt;
        &lt;main class="mdl-layout__content"&gt;
          &lt;div class="mdl-layout__tab-panel is-active" id="chords"&gt;
            &lt;section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp"&gt;
              &lt;div class="mdl-card mdl-cell mdl-cell--12-col"&gt;
                &lt;div class="mdl-card__supporting-text"&gt;
                  &lt;h4&gt;Chords&lt;/h4&gt;
                  &lt;div id='chordsChart'&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="mdl-card__actions"&gt;
                  &lt;a href="#" class="mdl-button"&gt;Read the documentation&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/section&gt;
          &lt;/div&gt;
          &lt;div class="mdl-layout__tab-panel" id="line"&gt;
            &lt;section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp"&gt;
              &lt;div class="mdl-card mdl-cell mdl-cell--12-col"&gt;
                &lt;div class="mdl-card__supporting-text"&gt;
                  &lt;h4&gt;Line&lt;/h4&gt;
                  &lt;div id='lineChart'&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="mdl-card__actions"&gt;
                  &lt;a href="#" class="mdl-button"&gt;Read the documentation&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/section&gt;
          &lt;/div&gt;
          &lt;div class="mdl-layout__tab-panel" id="scatter"&gt;
            &lt;section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp"&gt;
              &lt;div class="mdl-card mdl-cell mdl-cell--12-col"&gt;
                &lt;div class="mdl-card__supporting-text"&gt;
                  &lt;h4&gt;Scatter&lt;/h4&gt;
                  &lt;div id='scatterChart'&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="mdl-card__actions"&gt;
                  &lt;a href="#" class="mdl-button"&gt;Read the documentation&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/section&gt;
          &lt;/div&gt;
          &lt;div class="mdl-layout__tab-panel" id="stack"&gt;
            &lt;section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp"&gt;
              &lt;div class="mdl-card mdl-cell mdl-cell--12-col"&gt;
                &lt;div class="mdl-card__supporting-text"&gt;
                  &lt;h4&gt;Stack&lt;/h4&gt;
                  &lt;div id='stackChart'&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="mdl-card__actions"&gt;
                  &lt;a href="#" class="mdl-button"&gt;Read the documentation&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/section&gt;
          &lt;/div&gt;
          &lt;div class="mdl-layout__tab-panel" id="text"&gt;
            &lt;section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp"&gt;
              &lt;div class="mdl-card mdl-cell mdl-cell--12-col"&gt;
                &lt;div class="mdl-card__supporting-text"&gt;
                  &lt;h4&gt;Text&lt;/h4&gt;
                  &lt;div id='textChart'&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="mdl-card__actions"&gt;
                  &lt;a href="#" class="mdl-button"&gt;Read the documentation&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/section&gt;
          &lt;/div&gt;
          &lt;div class="mdl-layout__tab-panel" id="highlight"&gt;
            &lt;section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp"&gt;
              &lt;div class="mdl-card mdl-cell mdl-cell--12-col"&gt;
                &lt;div class="mdl-card__supporting-text"&gt;
                  &lt;h4&gt;Highlight&lt;/h4&gt;
                  &lt;div id='highlightChart'&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="mdl-card__actions"&gt;
                  &lt;a href="#" class="mdl-button"&gt;Read the documentation&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/section&gt;
          &lt;/div&gt;
          &lt;div class="mdl-layout__tab-panel" id="heatmap"&gt;
            &lt;section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp"&gt;
              &lt;div class="mdl-card mdl-cell mdl-cell--12-col"&gt;
                &lt;div class="mdl-card__supporting-text"&gt;
                  &lt;h4&gt;Heatmap&lt;/h4&gt;
                  &lt;div id='heatmapChart'&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="mdl-card__actions"&gt;
                  &lt;a href="#" class="mdl-button"&gt;Read the documentation&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/section&gt;
          &lt;/div&gt;
          &lt;div class="mdl-layout__tab-panel" id="histogram"&gt;
            &lt;section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp"&gt;
              &lt;div class="mdl-card mdl-cell mdl-cell--12-col"&gt;
                &lt;div class="mdl-card__supporting-text"&gt;
                  &lt;h4&gt;Histogram&lt;/h4&gt;
                  &lt;div id='histogramChart'&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="mdl-card__actions"&gt;
                  &lt;a href="#" class="mdl-button"&gt;Read the documentation&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/section&gt;
          &lt;/div&gt;
        &lt;/main&gt;
      &lt;/div&gt;
      &lt;script src="//code.getmdl.io/1.3.0/material.min.js"&gt;&lt;/script&gt;
      &lt;script src='./chords.js'&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What did I miss?</p>