Old school D3 from simpler times

All examples By author By category About

ColinEberhardt

Full window Github gist

Close

A simple close price rendering example, based on this TechanJS example

Built with blockbuilder.org

<!DOCTYPE html>

<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.41"></script>

<div id='chart-element' style='height: 500px'></div>

<script>
const lineSeries = fc.seriesSvgLine()
	.mainValue(d => d.close)
	.crossValue(d => d.date);

const chart = fc.chartCartesian(
    d3.scaleTime(),
    d3.scaleLinear()
  )
	.yOrient('left')
	.svgPlotArea(lineSeries);

const xExtent = fc.extentDate()
	.accessors([d => d.date]);

const yExtent = fc.extentLinear()
	.accessors([d => d.high, d => d.low]);

const parseDate = d3.timeParse("%d-%b-%y");

d3.csv('data.csv',
  row => ({
  	open: row.Open,
  	close: row.Close,
  	high: row.High,
  	low: row.Low,
  	date: parseDate(row.Date)
	})).then(data => {
    
    chart.xDomain(xExtent(data))
      .yDomain(yExtent(data));
    
    d3.select('#chart-element')
      .datum(data)
      .call(chart);
  });
</script>

xxxxxxxxxx
 
<!DOCTYPE html>
<!-- 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.41"></script>
​
<div id='chart-element' style='height: 500px'></div>
​
<script>
const lineSeries = fc.seriesSvgLine()
    .mainValue(d => d.close)
    .crossValue(d => d.date);
​
const chart = fc.chartCartesian(
    d3.scaleTime(),
    d3.scaleLinear()
  )
    .yOrient('left')
    .svgPlotArea(lineSeries);
​
const xExtent = fc.extentDate()
    .accessors([d => d.date]);
​
const yExtent = fc.extentLinear()
    .accessors([d => d.high, d => d.low]);
​
const parseDate = d3.timeParse("%d-%b-%y");
​
d3.csv('data.csv',
  row => ({
    open: row.Open,
    close: row.Close,
    high: row.High,
    low: row.Low,
    date: parseDate(row.Date)
    })).then(data => {
    
    chart.xDomain(xExtent(data))
      .yDomain(yExtent(data));
    
    d3.select('#chart-element')
      .datum(data)
      .call(chart);
  });
</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://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.41