Created
May 29, 2015 15:28
-
-
Save davbre/0be7a74102239b768d3d to your computer and use it in GitHub Desktop.
d3 - scatter plot // source http://jsbin.com/voruvi
This file contains 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>d3 - scatter plot</title> | |
| </head> | |
| <body> | |
| <script id="jsbin-javascript"> | |
| var h = 350; | |
| var w = 400; | |
| var padding=8; | |
| monthlySales = [ | |
| {"month":10, "sales": 100}, | |
| {"month":20, "sales": 130}, | |
| {"month":30, "sales": 250}, | |
| {"month":40, "sales": 300}, | |
| {"month":50, "sales": 20}, | |
| {"month":60, "sales": 20}, | |
| {"month":70, "sales": 20}, | |
| {"month":80, "sales": 130} | |
| ]; | |
| // KPI | |
| function salesKPI(d) { | |
| if (d>150) { return "#33CC66"; } | |
| else if (d<250) { return "#666666"; } | |
| } | |
| function showMinMax(ds, col, val, type) { | |
| var max = d3.max(ds, function(d) { return d[col]; }); | |
| var min = d3.min(ds, function(d) { return d[col]; }); | |
| if (type=="minmax" && (val == max || val == min)) { | |
| return val; | |
| } else { | |
| if (type=="all") { | |
| return val; | |
| } | |
| } | |
| } | |
| // create svg | |
| var svg1 = d3.select("body").append("svg") | |
| .attr({height: h, width: w}); | |
| // add dots | |
| var dots = svg1.selectAll("circle") | |
| .data(monthlySales) | |
| .enter() | |
| .append("circle") | |
| .attr({ | |
| cx: function(d) { return d.month*3; }, | |
| cy: function(d) { return h-d.sales; }, | |
| r: 5, | |
| "fill": function(d) { return salesKPI(d.sales); } | |
| }); | |
| // add labels | |
| var labels = svg1.selectAll("text") | |
| .data(monthlySales) | |
| .enter() | |
| .append("text") | |
| .text(function(d) { return showMinMax(monthlySales, 'sales', d.sales, 'all'); }) | |
| .attr({ | |
| x: function(d) { return d.month*3;}, | |
| y: function(d) { return h-d.sales-padding; }, | |
| "font-size": "12px", | |
| "font-family": "sans-serif", | |
| "fill": "#666666", | |
| "text-anchor": "start" | |
| }); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">var h = 350; | |
| var w = 400; | |
| var padding=8; | |
| monthlySales = [ | |
| {"month":10, "sales": 100}, | |
| {"month":20, "sales": 130}, | |
| {"month":30, "sales": 250}, | |
| {"month":40, "sales": 300}, | |
| {"month":50, "sales": 20}, | |
| {"month":60, "sales": 20}, | |
| {"month":70, "sales": 20}, | |
| {"month":80, "sales": 130} | |
| ]; | |
| // KPI | |
| function salesKPI(d) { | |
| if (d>150) { return "#33CC66"; } | |
| else if (d<250) { return "#666666"; } | |
| } | |
| function showMinMax(ds, col, val, type) { | |
| var max = d3.max(ds, function(d) { return d[col]; }); | |
| var min = d3.min(ds, function(d) { return d[col]; }); | |
| if (type=="minmax" && (val == max || val == min)) { | |
| return val; | |
| } else { | |
| if (type=="all") { | |
| return val; | |
| } | |
| } | |
| } | |
| // create svg | |
| var svg1 = d3.select("body").append("svg") | |
| .attr({height: h, width: w}); | |
| // add dots | |
| var dots = svg1.selectAll("circle") | |
| .data(monthlySales) | |
| .enter() | |
| .append("circle") | |
| .attr({ | |
| cx: function(d) { return d.month*3; }, | |
| cy: function(d) { return h-d.sales; }, | |
| r: 5, | |
| "fill": function(d) { return salesKPI(d.sales); } | |
| }); | |
| // add labels | |
| var labels = svg1.selectAll("text") | |
| .data(monthlySales) | |
| .enter() | |
| .append("text") | |
| .text(function(d) { return showMinMax(monthlySales, 'sales', d.sales, 'all'); }) | |
| .attr({ | |
| x: function(d) { return d.month*3;}, | |
| y: function(d) { return h-d.sales-padding; }, | |
| "font-size": "12px", | |
| "font-family": "sans-serif", | |
| "fill": "#666666", | |
| "text-anchor": "start" | |
| }); | |
| </script></body> | |
| </html> |
This file contains 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
| var h = 350; | |
| var w = 400; | |
| var padding=8; | |
| monthlySales = [ | |
| {"month":10, "sales": 100}, | |
| {"month":20, "sales": 130}, | |
| {"month":30, "sales": 250}, | |
| {"month":40, "sales": 300}, | |
| {"month":50, "sales": 20}, | |
| {"month":60, "sales": 20}, | |
| {"month":70, "sales": 20}, | |
| {"month":80, "sales": 130} | |
| ]; | |
| // KPI | |
| function salesKPI(d) { | |
| if (d>150) { return "#33CC66"; } | |
| else if (d<250) { return "#666666"; } | |
| } | |
| function showMinMax(ds, col, val, type) { | |
| var max = d3.max(ds, function(d) { return d[col]; }); | |
| var min = d3.min(ds, function(d) { return d[col]; }); | |
| if (type=="minmax" && (val == max || val == min)) { | |
| return val; | |
| } else { | |
| if (type=="all") { | |
| return val; | |
| } | |
| } | |
| } | |
| // create svg | |
| var svg1 = d3.select("body").append("svg") | |
| .attr({height: h, width: w}); | |
| // add dots | |
| var dots = svg1.selectAll("circle") | |
| .data(monthlySales) | |
| .enter() | |
| .append("circle") | |
| .attr({ | |
| cx: function(d) { return d.month*3; }, | |
| cy: function(d) { return h-d.sales; }, | |
| r: 5, | |
| "fill": function(d) { return salesKPI(d.sales); } | |
| }); | |
| // add labels | |
| var labels = svg1.selectAll("text") | |
| .data(monthlySales) | |
| .enter() | |
| .append("text") | |
| .text(function(d) { return showMinMax(monthlySales, 'sales', d.sales, 'all'); }) | |
| .attr({ | |
| x: function(d) { return d.month*3;}, | |
| y: function(d) { return h-d.sales-padding; }, | |
| "font-size": "12px", | |
| "font-family": "sans-serif", | |
| "fill": "#666666", | |
| "text-anchor": "start" | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment