smartdown/docs/lib/gallery/D3.md

## D3

### Streaming Financial Chart

Meanwhile, a cool graphic where the *stream* is an infinitely generated series of random numbers...

Adapted from [Streaming Financial Chart](https://bl.ocks.org/ColinEberhardt/ab7805a9a7af9717e86adc1656fa98d9).


```d3/playable
smartdown.importCssCode(
`
.bollinger .area {
  fill: #9cf;
  fill-opacity: 0.5;
}

.bollinger .line {
  stroke: #06c;
}
.chart {
  height: 200px !important;
}

`);

// window.d3 = window.d3v4;
var target = this.div;
target.classList.add('chart');

// create some test data
const stream = fc.randomFinancial().stream();
const data = stream.take(110);

function renderChart() {
  if (target.style.display === 'none' && window.intervalId) {
    window.clearInterval(window.intervalId);
    return;
  }

  // add a new datapoint and remove an old one
  data.push(stream.next());
  data.shift();

  const container = d3.select(target);

  // Create and apply the bollinger algorithm
  const bollingerAlgorithm = fc.indicatorBollingerBands()
    .value(function(d) {
      return d.close;
    });
  const bollingerData = bollingerAlgorithm(data);
  const mergedData = data.map(function(d, i) {
    return Object.assign({}, d, {
      bollinger: bollingerData[i]
    });
  });

  // Offset the range to include the full bar for the latest value
  const DAY_MS = 1000 * 60 * 60 * 24;
  const xTicks = 10;// $('#streaming-chart').width() >= 700 ? 10 : 5;
  const xExtent = fc.extentDate()
    .accessors([function(d) {
      return d.date;
    }])
    .padUnit('domain')
    .pad([DAY_MS * -bollingerAlgorithm.period()(mergedData), DAY_MS]);

  // ensure y extent includes the bollinger bands
  const yExtent = fc.extentLinear()
    .accessors([
      function(d) {
        return Math.max(d.bollinger.upper, d.high);
      },
      function(d) {
        return Math.min(d.bollinger.lower, d.low);
      }
    ]);

  // create a chart
  const chart = fc.chartSvgCartesian(
      d3.scaleTime(),
      d3.scaleLinear()
    )
    .xDomain(xExtent(mergedData))
    .xTicks(xTicks)
    .yDomain(yExtent(mergedData))
    .chartLabel('Streaming Candlestick');

  // Create the gridlines and series
  const gridlines = fc.annotationSvgGridline().xTicks(xTicks);
  const candlestick = fc.seriesSvgCandlestick();

  const bollingerBands = function() {
    const area = fc.seriesSvgArea()
      .mainValue(function(d) {
        return d.bollinger.upper;
      })
      .baseValue(function(d) {
        return d.bollinger.lower;
      });

    const upperLine = fc.seriesSvgLine()
      .mainValue(function(d) {
        return d.bollinger.upper;
      });

    const averageLine = fc.seriesSvgLine()
      .mainValue(function(d) {
        return d.bollinger.average;
      });

    const lowerLine = fc.seriesSvgLine()
      .mainValue(function(d) {
        return d.bollinger.lower;
      });

    const crossValue = function(d) {
      return d.date;
    };
    area.crossValue(crossValue);
    upperLine.crossValue(crossValue);
    averageLine.crossValue(crossValue);
    lowerLine.crossValue(crossValue);

    const bollingerMulti = fc.seriesSvgMulti()
      .series([area, upperLine, lowerLine, averageLine])
      .decorate(function(g, datum, index) {
        g.enter()
          .attr('class', function(_, i) {
            return 'multi bollinger ' + ['area', 'upper', 'lower', 'average'][i];
          });
      });

    return bollingerMulti;
  };

  // add them to the chart via a multi-series
  const multi = fc.seriesSvgMulti()
    .series([gridlines, bollingerBands(), candlestick]);

  chart.plotArea(multi);

  container
    .style('margin-left', '20px')
    .datum(mergedData)
    .call(chart);
}

// re-render the chart every 200ms
renderChart();

if (window.intervalId) {
  window.clearInterval(window.intervalId);
}

window.intervalId = setInterval(renderChart, 200);

```


### Smelly London Line Graph

One of the visualizations available via Smelly London is a [Line Chart](https://github.com/Smelly-London/Smelly-London/tree/master/charts). I made some slight changes so that it can be rendered in Smartdown:



```d3/playable
var renderDiv = this.div;
renderDiv.classList.add('foo');

smartdown.importCssCode(
`
body .foo svg {
  font: 10px sans-serif;
  background: lightyellow;
}

.foo .axis path,
.foo .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.foo .x.axis path {
  display: none;
}

.foo .line {
  fill: none;
  stroke: #2091c1;
  stroke-width: 1.5px;
}
`);


var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// var formatDate = d3.time.format("%d-%b-%y");
var formatDateCarto = d3.timeParse("%Y/%m/%d");


var x = d3.scaleTime()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([height, 0]);

var xAxis = d3.axisBottom()
    .scale(x);

var yAxis = d3.axisLeft()
    .scale(y);

var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.number_of_smells); });

var svg = d3.select(renderDiv).append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// d3.tsv("data/all_records.tsv", type, function(error, data) {
// d3.tsv("data/output/Barnet.tsv", type, function(error, data) {
// d3.tsv("data/output/Barnet.tsv", type, function(error, data) {
// d3.tsv("data/output/Croydon.tsv", type, function(error, data) {
d3.tsv("https://rawcdn.githack.com/Smelly-London/Smelly-London/master/charts/data/output/Tower Hamlets.tsv", type, function(error, data) {

  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.number_of_smells; }));

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Number of smells");

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
});

function type(d) {
  d.date = formatDateCarto(d.date);
  d.number_of_smells = +d.number_of_smells;
  return d;
}

```

---

[Back to Home](:@Home)