From 1e22f0582066b31689bede8cc2f0605f2611198c Mon Sep 17 00:00:00 2001 From: Roy Keyes Date: Sun, 2 Mar 2014 20:51:04 -0700 Subject: [PATCH 1/4] gh-pages branch created --- sparkmeters.html | 43 +++++++++++++++++++++ sparkmeters.js | 97 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 140 insertions(+) create mode 100644 sparkmeters.html create mode 100644 sparkmeters.js diff --git a/sparkmeters.html b/sparkmeters.html new file mode 100644 index 0000000..2d46115 --- /dev/null +++ b/sparkmeters.html @@ -0,0 +1,43 @@ + + + + + Sparkmeters with D3 demo + + + + + + +

+ +

Sparkmeters

+ +

Sparkmeters are lightweight, inline graphics that give the relative value of an item. They are inspired by Edward Tufte's sparklines. They are designed to be unobtrusive and low information. Unlike sparklines, sparkmeters can't usually stand on their own, but are best used to give the relative value of a group of items (e.g. a list of skills on a resume).

+ +

This version of sparkmeters is implemented with the D3.js library. The source code is found here and licensed under a BSD-style open source license.

+ +

Examples:

+ +

Technical experience

+ +

Python , D3 , Linux , C++ , R , Inkscape , matplotlib , pandas , +bash , HTML , CSS , LaTeX , JSON , Numpy , Scipy , SQL

+ + + + + diff --git a/sparkmeters.js b/sparkmeters.js new file mode 100644 index 0000000..da9b881 --- /dev/null +++ b/sparkmeters.js @@ -0,0 +1,97 @@ + + //---------------- + // Todo: + // * Allow group data to be placed in html document + // * Parameter passing from html tags (or sandwiched between tags) + //----------------------- + + //Width and height, meter fill and background + var w = 7; + var h = w*5; + var mfill = "yellowgreen"; //"silver"; + var mback = "whitesmoke"; + var most = 1.0 + var mid = 0.5 + var low = 0.25 + + //Data +// var dataset = [1,2,3,2,1]; + var dataset = [ + {key: "Python", level : most}, + {key: "D3" , level : low}, + {key: "Linux" , level : most}, + {key: "C++" , level : mid}, + {key: "R" , level : low}, + {key: "Inkscape" , level : mid}, + {key: "matplotlib" , level : most}, + {key: "pandas" , level : low}, + {key: "bash" , level : mid}, + {key: "HTML" , level : mid}, + {key: "CSS" , level : mid}, + {key: "LaTeX" , level : most}, + {key: "JSON" , level : low}, + {key: "numpy" , level : most}, + {key: "scipy" , level : mid}, + {key: "SQL" , level : low} + ]; + + // Functions to handle grouped item data + function keyf(d) { return d.key; } + function levelf(d) { return d.level; } + + // Group of items with sparkmeters + var sparkgroup = d3.select(".sparkmetergroup") + .selectAll("span") + .data(dataset) + .enter() + .append("span") + .attr("class","sparkgroup"); + + // Enter item text and create SVG containers + var sparkspans = d3.selectAll(".sparkgroup") + .data(dataset) + .text(function(d,i) {if (i==0) {return d.key+" ";} else {return ", "+d.key+" ";} }) + .append("svg") + .attr("width", w) + .attr("height", h); + + // Draw meters filled to fill parameter + sparkspans.append("rect") + .attr("x", 0) + .attr("y", 0) + .attr("height", h) + .attr("width", w) + .attr("fill", mback); + + sparkspans.append("rect") + .attr("x", 0) + .attr("y", function(d) { return h - h*d.level; }) + .attr("height", function(d) { return h*d.level; }) + .attr("width", w) + .attr("fill", mfill); + +// sparkspans.append("text") +// .text(","); + + //----------------------------------------- + // Single sparkmeters + var sparksingle = d3.selectAll(".sparkmeter") + .append("svg") + .attr("width", w) + .attr("height", h); + + // Draw quarter filled + sparksingle.append("rect") + .attr("x", 0) + .attr("y", 0) + .attr("height", h) + .attr("width", w) + .attr("fill", mback); + + sparksingle.append("rect") + .attr("x", 0) + .attr("y", h-h/4) + .attr("height", h/4) + .attr("width", w) + .attr("fill", mfill); + From e14a8a52e32517b5992cecf2522495186fd22095 Mon Sep 17 00:00:00 2001 From: Roy Keyes Date: Sun, 2 Mar 2014 23:46:38 -0700 Subject: [PATCH 2/4] Set demo page as gh-pages index.html --- index.html | 68 ++++++++++++++++++++++++++++++++++++++++++++++++ sparkmeters.html | 43 ------------------------------ sparkmeters.js | 51 ++++++++++++++---------------------- 3 files changed, 88 insertions(+), 74 deletions(-) create mode 100644 index.html delete mode 100644 sparkmeters.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..5f53eca --- /dev/null +++ b/index.html @@ -0,0 +1,68 @@ + + + + + Sparkmeters with D3 demo + + + + + + + +

+ +

Sparkmeters

+ +

This version of sparkmeters is implemented with the D3.js library. The source code is found here and licensed under a BSD-style open source license.

+ +

Examples:

+ +

Technical experience

+ + + +

+ + + + + diff --git a/sparkmeters.html b/sparkmeters.html deleted file mode 100644 index 2d46115..0000000 --- a/sparkmeters.html +++ /dev/null @@ -1,43 +0,0 @@ - - - - - Sparkmeters with D3 demo - - - - - - -

- -

Sparkmeters

- -

This version of sparkmeters is implemented with the D3.js library. The source code is found here and licensed under a BSD-style open source license.

- -

Examples:

- -

Technical experience

- -

Python , D3 , Linux , C++ , R , Inkscape , matplotlib , pandas , -bash , HTML , CSS , LaTeX , JSON , Numpy , Scipy , SQL

- - - - - diff --git a/sparkmeters.js b/sparkmeters.js index da9b881..3777b55 100644 --- a/sparkmeters.js +++ b/sparkmeters.js @@ -1,39 +1,25 @@ - - //---------------- + //---------------- // Todo: - // * Allow group data to be placed in html document - // * Parameter passing from html tags (or sandwiched between tags) + // * //----------------------- //Width and height, meter fill and background var w = 7; var h = w*5; - var mfill = "yellowgreen"; //"silver"; + var mfill = "silver";//"yellowgreen"; var mback = "whitesmoke"; - var most = 1.0 - var mid = 0.5 - var low = 0.25 + var most = 1.0; + var mid = 0.5; + var low = 0.25; //Data -// var dataset = [1,2,3,2,1]; - var dataset = [ - {key: "Python", level : most}, - {key: "D3" , level : low}, - {key: "Linux" , level : most}, - {key: "C++" , level : mid}, - {key: "R" , level : low}, - {key: "Inkscape" , level : mid}, - {key: "matplotlib" , level : most}, - {key: "pandas" , level : low}, - {key: "bash" , level : mid}, - {key: "HTML" , level : mid}, - {key: "CSS" , level : mid}, - {key: "LaTeX" , level : most}, - {key: "JSON" , level : low}, - {key: "numpy" , level : most}, - {key: "scipy" , level : mid}, - {key: "SQL" , level : low} - ]; + var dataset = JSON.parse(document.getElementById('meterdata').value); + // Convert quoted JSON values to numeric values. + for (var i = 0; i < dataset.length; i++) { + if(dataset[i].level == "low"){dataset[i].level = low;} + if(dataset[i].level == "mid"){dataset[i].level = mid;} + if(dataset[i].level == "most"){dataset[i].level = most;} + } // Functions to handle grouped item data function keyf(d) { return d.key; } @@ -50,7 +36,7 @@ // Enter item text and create SVG containers var sparkspans = d3.selectAll(".sparkgroup") .data(dataset) - .text(function(d,i) {if (i==0) {return d.key+" ";} else {return ", "+d.key+" ";} }) + .text(function(d,i) {if (i==0) {return d.key+"\u00A0";} else {return ", "+d.key+"\u00A0";} }) .append("svg") .attr("width", w) .attr("height", h); @@ -75,12 +61,15 @@ //----------------------------------------- // Single sparkmeters + var sfills = document.getElementsByClassName('sparkmeter'); + var sparksingle = d3.selectAll(".sparkmeter") + .data(sfills) .append("svg") .attr("width", w) .attr("height", h); - // Draw quarter filled + // Draw single meter up to specified fraction sparksingle.append("rect") .attr("x", 0) .attr("y", 0) @@ -90,8 +79,8 @@ sparksingle.append("rect") .attr("x", 0) - .attr("y", h-h/4) - .attr("height", h/4) + .attr("y", function(d) { return h - h*parseFloat(d.attributes[0].value); }) + .attr("height", function(d) { return h*parseFloat(d.attributes[0].value); }) .attr("width", w) .attr("fill", mfill); From 442506d3cc95ec63d6b875406f46370c8d13694a Mon Sep 17 00:00:00 2001 From: Roy Keyes Date: Mon, 3 Mar 2014 14:38:35 -0700 Subject: [PATCH 3/4] Fixed single sparkmeters to work in Chrome. --- sparkmeters.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/sparkmeters.js b/sparkmeters.js index 3777b55..f57f2a0 100644 --- a/sparkmeters.js +++ b/sparkmeters.js @@ -79,8 +79,8 @@ sparksingle.append("rect") .attr("x", 0) - .attr("y", function(d) { return h - h*parseFloat(d.attributes[0].value); }) - .attr("height", function(d) { return h*parseFloat(d.attributes[0].value); }) + .attr("y", function(d) { return h - h*parseFloat(d.attributes.getNamedItem("value").value); }) + .attr("height", function(d) { return h*parseFloat(d.attributes.getNamedItem("value").value); }) .attr("width", w) .attr("fill", mfill); From 4c9f96f256c1596a153960deb43d743540f84229 Mon Sep 17 00:00:00 2001 From: Roy Keyes Date: Wed, 11 Nov 2015 11:28:40 -0800 Subject: [PATCH 4/4] Updated http D3 import to https --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 5f53eca..5a7c85c 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Sparkmeters with D3 demo - +