Old school D3 from simpler times

All examples By author By category About

ColinEberhardt

Full window Github gist

Perspective + d3fc

An example chart which combines JPMorgan's Perspective, which D3 and Scott Logic's d3fc.

Built with blockbuilder.org

<!DOCTYPE html>
<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.1"></script>

<script src="https://unpkg.com/@jpmorganchase/perspective/build/perspective.js"></script>

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

.tick {
        font-size: 1.2em;
      }

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

.x-axis .domain {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <script src="index.js" type="text/babel"></script>
  </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<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.1"></script>
​
    <!-- perspective! -->
    <script src="https://unpkg.com/@jpmorganchase/perspective/build/perspective.js"></script>
​
    <style>
      body {
        font-family: sans-serif;
        font-size: 1.2em;
      }
​
      .tick {
        font-size: 1.2em;
      }
​
      #chart {
        width: 100%;
        height: 500px;
        position: relative;
      }
​
      .x-axis .domain {
        display: none;
      }
    </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.1

https://unpkg.com/@jpmorganchase/perspective/build/perspective.js