ColinEberhardt/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <!-- 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://unpkg.com/d3@5.5.0"></script>
  <script src="https://unpkg.com/d3fc@14.0.41"></script>

  <meta charset="utf-8" />
</head>

<body>

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

  <script type="text/babel">

  const data = fc.randomFinancial()(100);

  const annotations = data.filter((_, i) => i % 10 === 0)
    .map(d => d.close);

  data.annotations = annotations;

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

  const lineAnnotation = fc.annotationSvgLine()

  // merge the annotation and line into a single series that is associated with the chart
  const mergedSeries = fc.seriesSvgMulti()
    .series([lineSeries, lineAnnotation])
    .mapping((data, index, series) => {
      switch(series[index]) {
        case lineSeries:
          return data;
        case lineAnnotation:
          return data.annotations;
      }
    })

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

  const yExtent = fc.extentLinear()
    .pad([0.1, 0.1])
    .accessors([d => d.close]);

  const chart = fc.chartCartesian(
      d3.scaleTime(),
      d3.scaleLinear()
    )
    .xDomain(xExtent(data))
    .yDomain(yExtent(data))
    .yTickValues(annotations)
    .svgPlotArea(mergedSeries);


  d3.select('#chart-element')
      .datum(data)
      .call(chart);

  </script>
</body>
</html>
	<!DOCTYPE html>
	<head>
	<!-- 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://unpkg.com/d3@5.5.0"></script>
	<script src="https://unpkg.com/d3fc@14.0.41"></script>

	<meta charset="utf-8" />
	</head>

	<body>

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

	<script type="text/babel">

	const data = fc.randomFinancial()(100);

	const annotations = data.filter((_, i) => i % 10 === 0)
	.map(d => d.close);

	data.annotations = annotations;

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

	const lineAnnotation = fc.annotationSvgLine()

	// merge the annotation and line into a single series that is associated with the chart
	const mergedSeries = fc.seriesSvgMulti()
	.series([lineSeries, lineAnnotation])
	.mapping((data, index, series) => {
	switch(series[index]) {
	case lineSeries:
	return data;
	case lineAnnotation:
	return data.annotations;
	}
	})

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

	const yExtent = fc.extentLinear()
	.pad([0.1, 0.1])
	.accessors([d => d.close]);

	const chart = fc.chartCartesian(
	d3.scaleTime(),
	d3.scaleLinear()
	)
	.xDomain(xExtent(data))
	.yDomain(yExtent(data))
	.yTickValues(annotations)
	.svgPlotArea(mergedSeries);


	d3.select('#chart-element')
	.datum(data)
	.call(chart);

	</script>
	</body>
	</html>