Last active
August 12, 2020 01:34
-
-
Save vdavez/ae45136f8e072c99c07d513fc33390c5 to your computer and use it in GitHub Desktop.
Sparklines!!!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment