Old school D3 from simpler times

All examples By author By category About

ColinEberhardt

Full window Github gist

Chart Layout - CSS Grid

A prototype of the d3fc cartesian chart, using CSS grid layout - as per this issue:

https://github.com/d3fc/d3fc-chart/issues/32

<!DOCTYPE html>

<script src="https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>

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

<script src="https://d3js.org/d3.v4.min.js"></script>	
<script src="https://unpkg.com/d3fc@13.0.1"></script>

<style>
d3fc-svg {
  display: block;
}
</style>

<d3fc-group id="chart" auto-resize style="height: 500px; width: 100%; overflow: hidden;
  display: grid; grid-template-columns: 3em 1fr; grid-template-rows: 1fr 3em;
  display: -ms-grid; -ms-grid-columns: 3em 1fr; -ms-grid-rows: 1fr 3em;">
  <d3fc-svg id="plot-area"
            style="grid-column: 2; grid-row: 1;
                   -ms-grid-column: 2; -ms-grid-row: 1;"/>
  <d3fc-svg id='y-axis' style='grid-column: 1; grid-row: 1;
                               -ms-grid-column: 1; -ms-grid-row: 1;'/>
  <div style='grid-column: 1; grid-row: 1;
              -ms-grid-column: 1; -ms-grid-row: 1;
              display: flex; align-items: center; justify-content: center;'>
    <div style='transform: rotate(-90deg); margin-left: -2em'>Price</div>
  </div>
	<d3fc-svg id="x-axis" style="grid-column: 2; grid-row: 2;
                               -ms-grid-column: 2; -ms-grid-row: 2;"/>
  <div style="grid-column: 2; grid-row: 2;
              -ms-grid-column: 2; -ms-grid-row: 2;
              text-align: center; margin-top: 1.5em">Time</div>
</d3fc-group>

<script src='chart.js' type='text/babel'></script>

xxxxxxxxxx
 
<!DOCTYPE html>
<!-- include polyfills for custom event and Symbol (for IE) -->
<script src="https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>
​
<!-- use babel so that we can use arrow functions and other goodness in this block! -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
​
<script src="https://d3js.org/d3.v4.min.js"></script>   
<script src="https://unpkg.com/d3fc@13.0.1"></script>
​
<style>
d3fc-svg {
  display: block;
}
</style>
​
<d3fc-group id="chart" auto-resize style="height: 500px; width: 100%; overflow: hidden;
  display: grid; grid-template-columns: 3em 1fr; grid-template-rows: 1fr 3em;
  display: -ms-grid; -ms-grid-columns: 3em 1fr; -ms-grid-rows: 1fr 3em;">
  <d3fc-svg id="plot-area"
            style="grid-column: 2; grid-row: 1;
                   -ms-grid-column: 2; -ms-grid-row: 1;"/>
  <d3fc-svg id='y-axis' style='grid-column: 1; grid-row: 1;
                               -ms-grid-column: 1; -ms-grid-row: 1;'/>
  <div style='grid-column: 1; grid-row: 1;
              -ms-grid-column: 1; -ms-grid-row: 1;
              display: flex; align-items: center; justify-content: center;'>
    <div style='transform: rotate(-90deg); margin-left: -2em'>Price</div>
  </div>
    <d3fc-svg id="x-axis" style="grid-column: 2; grid-row: 2;
                               -ms-grid-column: 2; -ms-grid-row: 2;"/>
  <div style="grid-column: 2; grid-row: 2;
              -ms-grid-column: 2; -ms-grid-row: 2;
              text-align: center; margin-top: 1.5em">Time</div>
</d3fc-group>
​
​
<script src='chart.js' type='text/babel'></script>
    

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://unpkg.com/babel-standalone@6/babel.min.js

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

https://unpkg.com/d3fc@13.0.1