D3 Examples - Money Money Money

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    #abacus-debug_console {
      font-family : monospace;
      background  : black;
      color       : lightgreen;
      height      : 24%;
      overflow    : scroll;
    }
  </style>
</head>
​
<body>
  <section id="abacus-debug">
    <div id="abacus-debug_console"></div>
  </section>
  <figure></figure>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
  <script>    
    const query = s => document.querySelector(s)
    const queryP = (e, s) => e.querySelector(s)
    let currencies = null
    
    const abacusDebugEl = query('#abacus-debug')
    const abacusDebugConsoleEl = queryP(abacusDebugEl, '#abacus-debug_console')
    
    function appendText (e, t) {
      console.info(e, t)
      const textNode = document.createTextNode(t)
      e.appendChild(textNode)
      
      const brNodes = [0,0].map(() => document.createElement('br'))
      brNodes.forEach(brNode => e.appendChild(brNode))
    }
    
    const keys = o => Object.keys(o)
    
    function log (...messages) {      
      console.info(messages)
      return messages.forEach(m => appendText(abacusDebugConsoleEl, m))
    }
    
    const mapCurrenciesCache = { }
    function mapCurrencies ({ date, rates }) {      
      if (mapCurrenciesCache[date])
        return mapCurrenciesCache[date]
        
      const results = keys(rates).map(countryCode => {
        const meta = currencies[countryCode]
        if (!meta)
          return
        
        return {
          countryCode,
          value : rates[countryCode],
          date,
          entity : meta.ENTITY,
          currency : meta.Currency,
          numericCode : meta['Numeric Code'],
          minorUnit : meta['Minor unit']
        }
      })
            
      return (mapCurrenciesCache[date] = results)
    }
    
    const todayS = moment().format('YYYY-MM-DD')
    log(todayS)
​
    
    d3.csv('currency.csv', function (rr) {
      currencies = rr.reduce((o, r) => {
        const code = r['Alphabetic Code']
        code !== '' && (o[code] = r)
        return o
      }, { })
      
      // https://fixer.io/
      fetch('https://api.fixer.io/2000-01-03')
        .then(r => r.json())
        .then(j => log(JSON.stringify(mapCurrencies(j), null, '  ')))
        .catch(r => log(r))
    })
  </script>
</body>
​
    