fernandezpablo85/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="./sparklines.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <style>
    * {
      font-family: 'Open Sans', sans-serif;
    }

    svg {
      border: 1px solid;
    }

    #default .sparklines-background {
      fill: white;
    }

    #default .sparklines-band {
      fill: #C2DCD1;
      opacity: 0.6;
    }

    #default .sparklines-path {
      stroke: #687271;
      stroke-width: 2;
    }

    #default .sparklines-last {
      r: 3;
      fill: #FE0000;
    }

    #dark .sparklines-background {
      fill: #263238;
    }

    #dark .sparklines-path {
      stroke: #F9BE20;
      stroke-width: 2;
    }

    #dark .sparklines-band {
      fill: #A63238;
      opacity: 0.6;
    }

    #dark .sparklines-last {
      r: 3;
      fill: #F44;
    }

    #pulse .sparklines-background {
      fill: white;
    }

    #pulse .sparklines-band {
      fill: #A2BCF1;
      opacity: 0.6;
    }

    #pulse .sparklines-path {
      stroke: steelblue;
      stroke-width: 2;
    }

    #pulse .sparklines-last {
      r: 3;
      fill: #FE0000;
      animation: 2s pulse-effect infinite;
    }

    @keyframes pulse-effect {
      0% {}
      5% {
        r: 15;
        opacity: 0.7;
      }
      100% {}
    }

  </style>
  </head>
<body>

  <h1>
    Sparklines.
  </h1>

  <p>
    This project tries to make it easy to create sparklines like <a href="http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR">the ones in Edward Tufte website</a>
  </p>

  <h2> Sample Sparklines (Image) </h2>
  <img src="https://i.imgur.com/sPZOeZx.png"></img>
  <p>
    This is a sample extracted directly from the link above
  </p>

  <h2> Sparkline (Tufte) </h2>
  <div id="default"></div>
  <p>
    This sparkline is made with d3.js, the style is similar to Tuftes (but configurable).
  </p>
  <h2> Sparkline (Dark) </h2>
  <div id="dark"></div>
  <p>
    This is another SVG Sparkline but this time, tweaking the css, you can get a 'darker' feel.
  </p>
  <h2> Animated Sparkline </h2>
  <div id="pulse"></div>
  <p>
    You can tweak the css rules to your will and even create animations like this one.
  </p>
  <script type="text/javascript">
    var data = [5,0,10,40,5,60,40,40,40,40,30,-10,80,60,100,10,0,40,40];
    Sparklines.draw({
      selector: '#default',
      series: data,
      margin: 25,
      interpolate: 'monotone',
      bands: [{from: 25, to: 70}],
      circleLastValue: true
    });
    Sparklines.draw({
      selector: '#dark',
      series: data,
      margin: 25,
      interpolate: 'step-after',
      bands: [{from: 25, to: 70}],
      circleLastValue: true
    });
    Sparklines.draw({
      selector: '#pulse',
      series: data,
      margin: 25,
      interpolate: 'monotone',
      bands: [{from: 25, to: 70}],
      circleLastValue: true
    });
  </script>
</body>
</html>

## sparklines.js
/// <reference path="typings/index.d.ts" />
var Sparklines;
(function (Sparklines) {
    if (typeof d3 === 'undefined') {
        console.warn('sparklines requires d3.js');
    }
    var defaults = {
        selector: '',
        margin: 0,
        padding: 0,
        series: [],
        width: 500,
        height: 200,
        interpolate: 'monotone',
        circleLastValue: true
    };
    function _extend(primary, secondary) {
        var result = {};
        for (var prop in secondary) {
            result[prop] = secondary[prop];
        }
        for (var prop in primary) {
            result[prop] = primary[prop];
        }
        return result;
    }
    function draw(options) {
        var opts = _extend(options, defaults);
        if (document.querySelector(opts.selector) === null) {
            console.warn("element '" + opts.selector + "' not found.");
            return;
        }
        if (opts.series.length <= 0) {
            console.warn("can't draw a sparkline with an empty series");
            return;
        }
        doDraw(opts);
    }
    Sparklines.draw = draw;
    function doDraw(options) {
        var cssPrefix = 'sparklines';
        var fullMargin = options.margin * 2;
        var width = options.width - fullMargin;
        var height = options.height - fullMargin;
        // const xAxis = d3.svg.axis().scale(x).orient("bottom");
        var svg = d3.select(options.selector).append("svg").attr({
            'width': width + fullMargin,
            'height': height + fullMargin
        });
        svg.append('rect').attr({
            'width': width + fullMargin,
            'height': height + fullMargin,
            'class': cssPrefix + "-background"
        });
        svg = svg.append('g').attr({
            'transform': "translate(" + options.margin + "," + options.margin + ")",
            'class': cssPrefix + "-canvas"
        });
        var maxX = options.series.length - 1;
        var xScale = d3.scale.linear().domain([0, maxX]).range([0, width]);
        var maxY = d3.max(options.series);
        var minY = d3.min(options.series);
        var yScale = d3.scale.linear().domain([minY, maxY]).range([0, height]);
        var _x = function (point, i) { return xScale(i); };
        var _y = function (point) { return yScale(point); };
        if ('bands' in options) {
            options.bands.forEach(function (band, index) {
                if (band.from < minY || band.to > maxY) {
                    console.warn("band is out of range, min value is " + minY + " and max is " + maxY);
                    return;
                }
                svg.append('g').attr('class', 'band').attr('transform', "translate(0, " + _y(band.from) + ")")
                    .append('rect').attr({
                    'width': width,
                    'height': _y(band.to) - _y(band.from),
                    'class': cssPrefix + "-band-" + index + " " + cssPrefix + "-band"
                });
            });
        }
        var line = d3.svg.line().x(_x).y(_y).interpolate(options.interpolate);
        svg.append('path').attr({
            'd': line(options.series),
            'fill': 'none',
            'class': cssPrefix + "-path"
        });
        if (options.circleLastValue) {
            var last = options.series[options.series.length - 1];
            svg.append('circle').attr({
                'cx': _x(null, options.series.length - 1),
                'cy': _y(last),
                'class': cssPrefix + "-last"
            });
        }
    }
})(Sparklines || (Sparklines = {}));
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="./sparklines.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<style>
	* {
	font-family: 'Open Sans', sans-serif;
	}

	svg {
	border: 1px solid;
	}

	#default .sparklines-background {
	fill: white;
	}

	#default .sparklines-band {
	fill: #C2DCD1;
	opacity: 0.6;
	}

	#default .sparklines-path {
	stroke: #687271;
	stroke-width: 2;
	}

	#default .sparklines-last {
	r: 3;
	fill: #FE0000;
	}

	#dark .sparklines-background {
	fill: #263238;
	}

	#dark .sparklines-path {
	stroke: #F9BE20;
	stroke-width: 2;
	}

	#dark .sparklines-band {
	fill: #A63238;
	opacity: 0.6;
	}

	#dark .sparklines-last {
	r: 3;
	fill: #F44;
	}

	#pulse .sparklines-background {
	fill: white;
	}

	#pulse .sparklines-band {
	fill: #A2BCF1;
	opacity: 0.6;
	}

	#pulse .sparklines-path {
	stroke: steelblue;
	stroke-width: 2;
	}

	#pulse .sparklines-last {
	r: 3;
	fill: #FE0000;
	animation: 2s pulse-effect infinite;
	}

	@keyframes pulse-effect {
	0% {}
	5% {
	r: 15;
	opacity: 0.7;
	}
	100% {}
	}

	</style>
	</head>
	<body>

	<h1>
	Sparklines.
	</h1>

	<p>
	This project tries to make it easy to create sparklines like <a href="http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR">the ones in Edward Tufte website</a>
	</p>

	<h2> Sample Sparklines (Image) </h2>
	<img src="https://i.imgur.com/sPZOeZx.png"></img>
	<p>
	This is a sample extracted directly from the link above
	</p>

	<h2> Sparkline (Tufte) </h2>
	<div id="default"></div>
	<p>
	This sparkline is made with d3.js, the style is similar to Tuftes (but configurable).
	</p>
	<h2> Sparkline (Dark) </h2>
	<div id="dark"></div>
	<p>
	This is another SVG Sparkline but this time, tweaking the css, you can get a 'darker' feel.
	</p>
	<h2> Animated Sparkline </h2>
	<div id="pulse"></div>
	<p>
	You can tweak the css rules to your will and even create animations like this one.
	</p>
	<script type="text/javascript">
	var data = [5,0,10,40,5,60,40,40,40,40,30,-10,80,60,100,10,0,40,40];
	Sparklines.draw({
	selector: '#default',
	series: data,
	margin: 25,
	interpolate: 'monotone',
	bands: [{from: 25, to: 70}],
	circleLastValue: true
	});
	Sparklines.draw({
	selector: '#dark',
	series: data,
	margin: 25,
	interpolate: 'step-after',
	bands: [{from: 25, to: 70}],
	circleLastValue: true
	});
	Sparklines.draw({
	selector: '#pulse',
	series: data,
	margin: 25,
	interpolate: 'monotone',
	bands: [{from: 25, to: 70}],
	circleLastValue: true
	});
	</script>
	</body>
	</html>
	/// <reference path="typings/index.d.ts" />
	var Sparklines;
	(function (Sparklines) {
	if (typeof d3 === 'undefined') {
	console.warn('sparklines requires d3.js');
	}
	var defaults = {
	selector: '',
	margin: 0,
	padding: 0,
	series: [],
	width: 500,
	height: 200,
	interpolate: 'monotone',
	circleLastValue: true
	};
	function _extend(primary, secondary) {
	var result = {};
	for (var prop in secondary) {
	result[prop] = secondary[prop];
	}
	for (var prop in primary) {
	result[prop] = primary[prop];
	}
	return result;
	}
	function draw(options) {
	var opts = _extend(options, defaults);
	if (document.querySelector(opts.selector) === null) {
	console.warn("element '" + opts.selector + "' not found.");
	return;
	}
	if (opts.series.length <= 0) {
	console.warn("can't draw a sparkline with an empty series");
	return;
	}
	doDraw(opts);
	}
	Sparklines.draw = draw;
	function doDraw(options) {
	var cssPrefix = 'sparklines';
	var fullMargin = options.margin * 2;
	var width = options.width - fullMargin;
	var height = options.height - fullMargin;
	// const xAxis = d3.svg.axis().scale(x).orient("bottom");
	var svg = d3.select(options.selector).append("svg").attr({
	'width': width + fullMargin,
	'height': height + fullMargin
	});
	svg.append('rect').attr({
	'width': width + fullMargin,
	'height': height + fullMargin,
	'class': cssPrefix + "-background"
	});
	svg = svg.append('g').attr({
	'transform': "translate(" + options.margin + "," + options.margin + ")",
	'class': cssPrefix + "-canvas"
	});
	var maxX = options.series.length - 1;
	var xScale = d3.scale.linear().domain([0, maxX]).range([0, width]);
	var maxY = d3.max(options.series);
	var minY = d3.min(options.series);
	var yScale = d3.scale.linear().domain([minY, maxY]).range([0, height]);
	var _x = function (point, i) { return xScale(i); };
	var _y = function (point) { return yScale(point); };
	if ('bands' in options) {
	options.bands.forEach(function (band, index) {
	if (band.from < minY \|\| band.to > maxY) {
	console.warn("band is out of range, min value is " + minY + " and max is " + maxY);
	return;
	}
	svg.append('g').attr('class', 'band').attr('transform', "translate(0, " + _y(band.from) + ")")
	.append('rect').attr({
	'width': width,
	'height': _y(band.to) - _y(band.from),
	'class': cssPrefix + "-band-" + index + " " + cssPrefix + "-band"
	});
	});
	}
	var line = d3.svg.line().x(_x).y(_y).interpolate(options.interpolate);
	svg.append('path').attr({
	'd': line(options.series),
	'fill': 'none',
	'class': cssPrefix + "-path"
	});
	if (options.circleLastValue) {
	var last = options.series[options.series.length - 1];
	svg.append('circle').attr({
	'cx': _x(null, options.series.length - 1),
	'cy': _y(last),
	'class': cssPrefix + "-last"
	});
	}
	}
	})(Sparklines \|\| (Sparklines = {}));