vdavez/index.html

## index.html
<!-- Load d3.js -->
<head>
<script src="https://d3js.org/d3.v4.js"></script>
</head>
<body>
<!-- Create a div where the graph will take place -->
<div id="sparkline"></div>


<script src="./sparklines.js"></script>
<script>
const data = [...Array(45)].map((d, idx) => {
  return [idx, Math.floor(Math.random() * 100)];
});
const dims = {"width":360, "height": 120, "margin": {"left": 30, "top":10,"right":30, "bottom":10}}

new Sparkline("#sparkline", data, dims ,"#3705FF").draw()
</script>

</body>

## sparklines.js
/**
 * Creates a d3 Sparkline
 *
 * @param {str} elem the element's id
 * @param {Object} data an array of pairs (e.g., [[0,1],[1,6]...)
 * @param {Object} dims a dictionary with width, height, and a
 *                 margin dictionary with margin.left, margin.right,
 *                 margin.top, and margin.bottom
 * @param {str} color the hexcode for colors
 * @param {Object} opts a dictionary with options
 *
 * @example
 * new Sparkline(elem, data, dims, color).draw()
 */

class Sparkline {
  constructor(elem, data, dims, color, opts = {}) {
    this.elem = elem;
    this.data = data;
    this.width = dims["width"];
    this.height = dims["height"];
    this.margin = dims["margin"];
    this.color = color;
    this.opts = opts;
  }

  draw() {
    // Draw canvas
    const svg = d3
      .select(this.elem)
      .append("svg")
      .attr("width", this.width)
      .attr("height", this.height);

    // Draw the SVG
    const bounds = svg
      .append("g")
      .style(
        "transform",
        `translate(${this.margin.left}px, ${this.margin.top}px)`
      );

    // Create scales
    const yExtent = [0, 1.25 * d3.max(data.map((d) => d[1]))];
    const xScale = d3
      .scaleLinear()
      .domain([0, this.data.length])
      .range([0, this.width - (this.margin.right + this.margin.left)]);
    const yScale = d3
      .scaleLinear()
      .domain(yExtent)
      .range([this.height - (this.margin.bottom + this.margin.top), 0]);

    // Draw data
    const lineGenerator = d3
      .line()
      .curve(d3.curveBundle.beta(0.75))
      .x((d) => xScale(d[0]))
      .y((d) => yScale(d[1]));

    const cases = bounds
      .append("path")
      .attr("d", lineGenerator(this.data))
      .attr("fill", "none")
      .attr("stroke", this.color)
      .attr("stroke-width", 2);

    if (!this.opts.clean) {
      const minPoint = bounds
        .append("circle")
        .attr("cx", xScale(this.data[0][0]))
        .attr("cy", yScale(this.data[0][1]))
        .attr("r", 5)
        .attr("fill", this.color);

      const firstText = svg
        .append("text")
        .attr("x", this.margin.left / 2)
        .attr("y", yScale(this.data[0][1]) + this.margin.top)
        .attr("fill", this.color)
        .text(data[0][1])
        .style("text-anchor", "middle");

      const maxPoint = bounds
        .append("circle")
        .attr("cx", xScale(this.data[this.data.length - 1][0]))
        .attr("cy", yScale(this.data[this.data.length - 1][1]))
        .attr("r", 5)
        .attr("fill", this.color);

      const finalText = svg
        .append("text")
        .attr("x", this.width - this.margin.right / 2)
        .attr("y", this.margin.top + yScale(this.data[this.data.length - 1][1]))
        .attr("fill", this.color)
        .text(this.data[this.data.length - 1][1])
        .style("text-anchor", "middle");
    }
  }
}

module.exports = Sparkline;
	<!-- Load d3.js -->
	<head>
	<script src="https://d3js.org/d3.v4.js"></script>
	</head>
	<body>
	<!-- Create a div where the graph will take place -->
	<div id="sparkline"></div>


	<script src="./sparklines.js"></script>
	<script>
	const data = [...Array(45)].map((d, idx) => {
	return [idx, Math.floor(Math.random() * 100)];
	});
	const dims = {"width":360, "height": 120, "margin": {"left": 30, "top":10,"right":30, "bottom":10}}

	new Sparkline("#sparkline", data, dims ,"#3705FF").draw()
	</script>

	</body>
	/**
	* Creates a d3 Sparkline
	*
	* @param {str} elem the element's id
	* @param {Object} data an array of pairs (e.g., [[0,1],[1,6]...)
	* @param {Object} dims a dictionary with width, height, and a
	* margin dictionary with margin.left, margin.right,
	* margin.top, and margin.bottom
	* @param {str} color the hexcode for colors
	* @param {Object} opts a dictionary with options
	*
	* @example
	* new Sparkline(elem, data, dims, color).draw()
	*/

	class Sparkline {
	constructor(elem, data, dims, color, opts = {}) {
	this.elem = elem;
	this.data = data;
	this.width = dims["width"];
	this.height = dims["height"];
	this.margin = dims["margin"];
	this.color = color;
	this.opts = opts;
	}

	draw() {
	// Draw canvas
	const svg = d3
	.select(this.elem)
	.append("svg")
	.attr("width", this.width)
	.attr("height", this.height);

	// Draw the SVG
	const bounds = svg
	.append("g")
	.style(
	"transform",
	`translate(${this.margin.left}px, ${this.margin.top}px)`
	);

	// Create scales
	const yExtent = [0, 1.25 * d3.max(data.map((d) => d[1]))];
	const xScale = d3
	.scaleLinear()
	.domain([0, this.data.length])
	.range([0, this.width - (this.margin.right + this.margin.left)]);
	const yScale = d3
	.scaleLinear()
	.domain(yExtent)
	.range([this.height - (this.margin.bottom + this.margin.top), 0]);

	// Draw data
	const lineGenerator = d3
	.line()
	.curve(d3.curveBundle.beta(0.75))
	.x((d) => xScale(d[0]))
	.y((d) => yScale(d[1]));

	const cases = bounds
	.append("path")
	.attr("d", lineGenerator(this.data))
	.attr("fill", "none")
	.attr("stroke", this.color)
	.attr("stroke-width", 2);

	if (!this.opts.clean) {
	const minPoint = bounds
	.append("circle")
	.attr("cx", xScale(this.data[0][0]))
	.attr("cy", yScale(this.data[0][1]))
	.attr("r", 5)
	.attr("fill", this.color);

	const firstText = svg
	.append("text")
	.attr("x", this.margin.left / 2)
	.attr("y", yScale(this.data[0][1]) + this.margin.top)
	.attr("fill", this.color)
	.text(data[0][1])
	.style("text-anchor", "middle");

	const maxPoint = bounds
	.append("circle")
	.attr("cx", xScale(this.data[this.data.length - 1][0]))
	.attr("cy", yScale(this.data[this.data.length - 1][1]))
	.attr("r", 5)
	.attr("fill", this.color);

	const finalText = svg
	.append("text")
	.attr("x", this.width - this.margin.right / 2)
	.attr("y", this.margin.top + yScale(this.data[this.data.length - 1][1]))
	.attr("fill", this.color)
	.text(this.data[this.data.length - 1][1])
	.style("text-anchor", "middle");
	}
	}
	}

	module.exports = Sparkline;