d3 sparklines

.block

license: mit

README.md

forked from davinov's block: d3 sparklines

d3 sparklines.markdown

d3 sparklines

An example for d3's plugin for sparklines toucantoco.com/sparklines

A Pen by David Nowinsky on CodePen.

License.

index.html

<link href="https://cdn.rawgit.com/ToucanToco/sparklines/master/dist/tc-sparklines.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />

<button onClick="createOrUpdateSparklines()">Update</button>
<div id="example"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdn.rawgit.com/ToucanToco/sparklines/master/dist/tc-sparklines.js"></script>
<script src="script.js"></script>

script.js

function generateRandomData(seriesCount, datesCount) {
  return d3.range(seriesCount).map(function (d) {
    return {
      name: '#' + d,
      values: d3.range(datesCount).map(function (d) {
        return {
          label: d,
          value: Math.random(d)
        };
      })
    };
  });
}

var sparklinesConfig = {
  height: 20,
  width: 180
};

// Sparklines configuration
var sparklines = d3.toucan.sparklines()
  .height(sparklinesConfig.height)
  .width(sparklinesConfig.width)
  .dateSelector('label')
  .forceLexicalOrder(false)
  .valueSelector('value')
  .valueFormat('.2p')
  .unit('');

function createOrUpdateSparklines() {
  var exampleElement = d3.selectAll('#example')

  // Adding some sample parents elements
  var categoriesSelection = exampleElement.selectAll('.category')
    .data(generateRandomData(10, 30), function(cat) {
      return cat.name;
    });

  var newCategories = categoriesSelection
    .enter()
    .append('div')
    .classed('category', true);

  newCategories
    .append('span')
    .classed('category__label', true)

  categoriesSelection.select('.category__label')
    .text(function (d) {
      return d.name;
    });

  // Creating blocks that will contain sparklines
  var newSparklinesSelection = newCategories
    .append('svg')
    .classed('sparkline', true)
    .attr('height', sparklinesConfig.height)
    .attr('width', sparklinesConfig.width)

  // Binding data to them
  var sparklinesSelection = categoriesSelection.select('.sparkline')
    .datum(function (d) {
      return d.values;
    });

  newCategories
    .append('span')
    .classed('category__value', true)

  var valueFormatter = d3.format('.2p');
  categoriesSelection.select('.category__value')
    .text(function (d) {
      return valueFormatter(d.values[d.values.length - 1].value);
    });

  // Do the magic!
  sparklinesSelection
    .call(sparklines);
}

createOrUpdateSparklines();

style.css

@import url(https://fonts.googleapis.com/css?family=Montserrat|Roboto+Slab);

* {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
}

.category__label {
  font-family: 'Roboto Slab';
  text-transform: none;
}

.category {
    display: block;
    padding: 5px;
  }

  .category__label,
  .category__value {
    font-style: normal;
    text-transform: none;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 30px;
    padding: 0 5px;
  }

  .category__value {
    width: 50px;
    opacity: 0.6;
  }

  .category__label {
    text-align: right;
  }

  .sparkline__tooltip {
    font-size: 0.7em;
  }