Old school D3 from simpler times

All examples By author By category About

ColinEberhardt

Full window Github gist

Cryptocurrency average order price versus size

Live streaming Crytocurrency price vs order size, using Perspective and d3fc. The size of each bubble indicates the total number of orders.

Read more about this in the blog post - realtime crypto charting with JPM Perspective and d3fc

Built with blockbuilder.org

<html>
  <head>
    
    <script src="//unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
    <script src="//unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js"></script>

<script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>

<script src="//unpkg.com/d3@5.5.0"></script>
    <script src="//unpkg.com/d3fc@14.0.22"></script>

<script src="//unpkg.com/@jpmorganchase/perspective-examples@0.2.0-beta.3/build/perspective.js"></script>

<style>
      body {
        font-family: sans-serif;
      }

#chart {
        width: 100%;
        height: 500px;
      }

.label rect {
        fill: none;
      }

.point path {
        opacity: 0.5;
      }

.y-label {
        transform: rotate(-90deg);
      }

.point text,
      g.label text {
        font-size: 10px;
        stroke: none;
        fill: black;
      }

.plot-area {
        overflow: visible !important;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script src="index.js" type="text/babel"></script>
  </body>
</html>

xxxxxxxxxx
 
<html>
  <head>
    <!-- include polyfills for custom event, Symbol and Custom Elements -->
    <script src="//unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
    <script src="//unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js"></script>
​
    <!--
      use babel so that we can use arrow functions and other goodness in this block!
    -->
    <script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>
​
    <script src="//unpkg.com/d3@5.5.0"></script>
    <script src="//unpkg.com/d3fc@14.0.22"></script>
​
    <!-- perspective! -->
    <script src="//unpkg.com/@jpmorganchase/perspective-examples@0.2.0-beta.3/build/perspective.js"></script>
​
    <style>
      body {
        font-family: sans-serif;
      }
​
      #chart {
        width: 100%;
        height: 500px;
      }
​
      .label rect {
        fill: none;
      }
​
      .point path {
        opacity: 0.5;
      }
​
      .y-label {
        transform: rotate(-90deg);
      }
​
      .point text,
      g.label text {
        font-size: 10px;
        stroke: none;
        fill: black;
      }
​
      .plot-area {
        overflow: visible !important;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script src="index.js" type="text/babel"></script>
  </body>
</html>
​
    

https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js

https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js

https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js

https://unpkg.com/babel-standalone@6/babel.min.js

https://unpkg.com/d3@5.5.0

https://unpkg.com/d3fc@14.0.22

https://unpkg.com/@jpmorganchase/perspective-examples@0.2.0-beta.3/build/perspective.js