Shooting Signatures were designed to give an at-a-glance view of an NBA player's shooting performance. They were developed by Peter Beshai (@pbesh) as part of Buckets, an interactive NBA shot visualization tool.
-
-
Save jmoe/1802fd333181bb6421ee to your computer and use it in GitHub Desktop.
Run Signatures
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> | |
| <title>Shooting Signature Example</title> | |
| </head> | |
| <body> | |
| <div id="signature"></div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script> | |
| <script> | |
| // get your data | |
| var data = [{"x":1,"y":206.8,"widthValue":11,"colorValue":73},{"x":8,"y":206.8,"widthValue":19,"colorValue":73},{"x":10,"y":206.4,"widthValue":25,"colorValue":84},{"x":12,"y":206.2,"widthValue":21,"colorValue":110},{"x":14,"y":206.1,"widthValue":25,"colorValue":128},{"x":16,"y":206.0,"widthValue":27,"colorValue":137},{"x":18,"y":206.0,"widthValue":26,"colorValue":146},{"x":20,"y":205.9,"widthValue":25,"colorValue":154},{"x":22,"y":205.8,"widthValue":28,"colorValue":159},{"x":24,"y":205.7,"widthValue":27,"colorValue":162},{"x":29,"y":205.6,"widthValue":28,"colorValue":165},{"x":34,"y":205.7,"widthValue":27,"colorValue":169},{"x":54,"y":205.7,"widthValue":25,"colorValue":172},{"x":73,"y":205.3,"widthValue":24,"colorValue":175},{"x":88,"y":204.5,"widthValue":26,"colorValue":170},{"x":104,"y":203.9,"widthValue":27,"colorValue":173},{"x":126,"y":203.1,"widthValue":24,"colorValue":170},{"x":146,"y":201.8,"widthValue":25,"colorValue":171},{"x":166,"y":200.5,"widthValue":25,"colorValue":169},{"x":186,"y":198.5,"widthValue":28,"colorValue":170},{"x":197,"y":195.5,"widthValue":27,"colorValue":171},{"x":199,"y":194.1,"widthValue":29,"colorValue":178},{"x":204,"y":193.8,"widthValue":26,"colorValue":178},{"x":213,"y":193.4,"widthValue":24,"colorValue":176},{"x":234,"y":193.8,"widthValue":23,"colorValue":174},{"x":255,"y":194.5,"widthValue":24,"colorValue":173},{"x":276,"y":195.0,"widthValue":23,"colorValue":173},{"x":297,"y":195.7,"widthValue":23,"colorValue":172},{"x":302,"y":196.4,"widthValue":26,"colorValue":173},{"x":304,"y":196.5,"widthValue":24,"colorValue":162},{"x":306,"y":196.6,"widthValue":21,"colorValue":159},{"x":309,"y":196.7,"widthValue":19,"colorValue":159},{"x":331,"y":196.8,"widthValue":24,"colorValue":155},{"x":336,"y":197.4,"widthValue":27,"colorValue":155},{"x":338,"y":197.6,"widthValue":27,"colorValue":144},{"x":359,"y":197.8,"widthValue":26,"colorValue":144},{"x":363,"y":198.1,"widthValue":24,"colorValue":143},{"x":368,"y":198.3,"widthValue":26,"colorValue":140},{"x":389,"y":198.5,"widthValue":26,"colorValue":136},{"x":398,"y":198.6,"widthValue":22,"colorValue":135},{"x":400,"y":198.5,"widthValue":24,"colorValue":141},{"x":408,"y":198.5,"widthValue":17,"colorValue":141},{"x":428,"y":198.7,"widthValue":16,"colorValue":140},{"x":448,"y":200.7,"widthValue":20,"colorValue":140},{"x":455,"y":205.0,"widthValue":23,"colorValue":141},{"x":476,"y":205.1,"widthValue":19,"colorValue":138},{"x":498,"y":205.7,"widthValue":24,"colorValue":139},{"x":513,"y":206.7,"widthValue":26,"colorValue":139},{"x":530,"y":207.4,"widthValue":28,"colorValue":143},{"x":551,"y":206.4,"widthValue":26,"colorValue":148},{"x":565,"y":206.8,"widthValue":20,"colorValue":148},{"x":582,"y":206.9,"widthValue":21,"colorValue":145},{"x":604,"y":207.8,"widthValue":28,"colorValue":142},{"x":624,"y":208.0,"widthValue":22,"colorValue":142},{"x":644,"y":208.9,"widthValue":25,"colorValue":140},{"x":664,"y":209.6,"widthValue":22,"colorValue":140},{"x":684,"y":209.6,"widthValue":23,"colorValue":139},{"x":705,"y":209.6,"widthValue":27,"colorValue":138},{"x":725,"y":210.4,"widthValue":29,"colorValue":139},{"x":746,"y":211.1,"widthValue":24,"colorValue":138},{"x":767,"y":212.3,"widthValue":21,"colorValue":139},{"x":790,"y":213.3,"widthValue":25,"colorValue":140},{"x":811,"y":213.5,"widthValue":24,"colorValue":141},{"x":832,"y":212.9,"widthValue":26,"colorValue":141},{"x":836,"y":212.9,"widthValue":20,"colorValue":141},{"x":856,"y":213.2,"widthValue":18,"colorValue":141},{"x":858,"y":211.3,"widthValue":20,"colorValue":142},{"x":879,"y":211.1,"widthValue":26,"colorValue":139},{"x":899,"y":216.3,"widthValue":25,"colorValue":142},{"x":906,"y":216.4,"widthValue":24,"colorValue":143},{"x":929,"y":215.7,"widthValue":25,"colorValue":143},{"x":949,"y":213.9,"widthValue":25,"colorValue":143},{"x":969,"y":216.9,"widthValue":23,"colorValue":143},{"x":989,"y":218.3,"widthValue":20,"colorValue":142},{"x":1009,"y":219.1,"widthValue":26,"colorValue":144},{"x":1030,"y":219.5,"widthValue":30,"colorValue":144},{"x":1050,"y":219.4,"widthValue":28,"colorValue":143},{"x":1071,"y":219.9,"widthValue":21,"colorValue":143},{"x":1074,"y":221.1,"widthValue":30,"colorValue":141},{"x":1076,"y":221.4,"widthValue":26,"colorValue":153},{"x":1079,"y":221.4,"widthValue":30,"colorValue":159},{"x":1081,"y":221.4,"widthValue":26,"colorValue":166},{"x":1093,"y":221.4,"widthValue":32,"colorValue":166},{"x":1096,"y":221.9,"widthValue":33,"colorValue":172},{"x":1106,"y":222.0,"widthValue":33,"colorValue":175},{"x":1126,"y":222.8,"widthValue":29,"colorValue":178},{"x":1141,"y":226.4,"widthValue":30,"colorValue":178},{"x":1156,"y":231.2,"widthValue":26,"colorValue":172},{"x":1158,"y":229.6,"widthValue":24,"colorValue":175},{"x":1178,"y":229.6,"widthValue":25,"colorValue":174},{"x":1199,"y":230.3,"widthValue":27,"colorValue":176},{"x":1208,"y":230.7,"widthValue":22,"colorValue":177},{"x":1224,"y":231.0,"widthValue":26,"colorValue":174},{"x":1226,"y":232.4,"widthValue":24,"colorValue":167},{"x":1233,"y":232.5,"widthValue":25,"colorValue":167},{"x":1235,"y":232.5,"widthValue":24,"colorValue":158},{"x":1237,"y":232.5,"widthValue":23,"colorValue":154},{"x":1249,"y":232.0,"widthValue":25,"colorValue":151},{"x":1259,"y":228.3,"widthValue":21,"colorValue":146},{"x":1279,"y":226.3,"widthValue":18,"colorValue":143},{"x":1283,"y":227.2,"widthValue":23,"colorValue":142},{"x":1295,"y":227.4,"widthValue":20,"colorValue":142},{"x":1308,"y":226.2,"widthValue":21,"colorValue":143},{"x":1328,"y":225.6,"widthValue":25,"colorValue":146},{"x":1348,"y":221.6,"widthValue":25,"colorValue":147},{"x":1369,"y":218.9,"widthValue":30,"colorValue":149},{"x":1390,"y":217.0,"widthValue":30,"colorValue":150},{"x":1410,"y":215.1,"widthValue":25,"colorValue":149},{"x":1430,"y":214.3,"widthValue":29,"colorValue":148},{"x":1442,"y":212.9,"widthValue":25,"colorValue":146},{"x":1455,"y":209.6,"widthValue":26,"colorValue":147},{"x":1476,"y":205.9,"widthValue":35,"colorValue":149},{"x":1496,"y":203.5,"widthValue":34,"colorValue":150},{"x":1497,"y":202.3,"widthValue":18,"colorValue":150},{"x":1505,"y":202.2,"widthValue":22,"colorValue":149},{"x":1515,"y":202.1,"widthValue":26,"colorValue":146},{"x":1535,"y":202.4,"widthValue":23,"colorValue":147},{"x":1548,"y":203.4,"widthValue":22,"colorValue":149},{"x":1570,"y":204.0,"widthValue":27,"colorValue":149},{"x":1577,"y":204.3,"widthValue":26,"colorValue":151},{"x":1593,"y":204.5,"widthValue":28,"colorValue":152},{"x":1613,"y":204.5,"widthValue":26,"colorValue":153},{"x":1634,"y":204.8,"widthValue":27,"colorValue":153},{"x":1655,"y":205.1,"widthValue":27,"colorValue":154},{"x":1674,"y":205.4,"widthValue":21,"colorValue":154},{"x":1694,"y":205.6,"widthValue":23,"colorValue":154},{"x":1714,"y":205.3,"widthValue":33,"colorValue":155},{"x":1731,"y":204.8,"widthValue":35,"colorValue":154},{"x":1743,"y":204.3,"widthValue":31,"colorValue":153},{"x":1751,"y":204.1,"widthValue":29,"colorValue":152},{"x":1761,"y":204.2,"widthValue":25,"colorValue":152},{"x":1781,"y":204.3,"widthValue":23,"colorValue":152},{"x":1793,"y":204.6,"widthValue":25,"colorValue":151},{"x":1806,"y":205.0,"widthValue":23,"colorValue":152},{"x":1827,"y":205.2,"widthValue":21,"colorValue":152},{"x":1846,"y":207.5,"widthValue":22,"colorValue":154},{"x":1847,"y":210.4,"widthValue":14,"colorValue":155},{"x":1857,"y":211.2,"widthValue":20,"colorValue":156},{"x":1864,"y":213.8,"widthValue":23,"colorValue":155},{"x":1881,"y":214.3,"widthValue":25,"colorValue":156},{"x":1901,"y":215.5,"widthValue":20,"colorValue":159},{"x":1912,"y":215.6,"widthValue":16,"colorValue":160},{"x":1932,"y":218.2,"widthValue":17,"colorValue":160},{"x":1953,"y":219.2,"widthValue":17,"colorValue":162},{"x":1973,"y":222.8,"widthValue":23,"colorValue":163},{"x":1991,"y":224.2,"widthValue":20,"colorValue":165},{"x":2005,"y":225.7,"widthValue":24,"colorValue":165},{"x":2027,"y":228.0,"widthValue":24,"colorValue":166},{"x":2047,"y":228.3,"widthValue":22,"colorValue":165},{"x":2053,"y":225.7,"widthValue":17,"colorValue":164},{"x":2064,"y":226.6,"widthValue":22,"colorValue":163},{"x":2067,"y":228.8,"widthValue":11,"colorValue":163},{"x":2074,"y":229.6,"widthValue":19,"colorValue":163},{"x":2094,"y":230.2,"widthValue":20,"colorValue":164},{"x":2115,"y":231.2,"widthValue":23,"colorValue":164},{"x":2136,"y":234.2,"widthValue":24,"colorValue":162},{"x":2147,"y":234.7,"widthValue":23,"colorValue":162},{"x":2168,"y":236.0,"widthValue":27,"colorValue":161},{"x":2182,"y":237.9,"widthValue":13,"colorValue":162},{"x":2184,"y":240.3,"widthValue":11,"colorValue":160},{"x":2189,"y":240.8,"widthValue":17,"colorValue":157},{"x":2198,"y":241.3,"widthValue":19,"colorValue":155},{"x":2203,"y":243.4,"widthValue":14,"colorValue":158},{"x":2220,"y":242.5,"widthValue":24,"colorValue":161},{"x":2225,"y":242.2,"widthValue":25,"colorValue":164},{"x":2236,"y":242.1,"widthValue":22,"colorValue":164},{"x":2242,"y":242.6,"widthValue":15,"colorValue":164},{"x":2261,"y":243.8,"widthValue":19,"colorValue":163},{"x":2278,"y":244.8,"widthValue":17,"colorValue":166},{"x":2282,"y":246.6,"widthValue":7,"colorValue":166},{"x":2289,"y":247.2,"widthValue":5,"colorValue":165},{"x":2305,"y":246.4,"widthValue":23,"colorValue":165},{"x":2324,"y":245.7,"widthValue":23,"colorValue":162},{"x":2332,"y":246.6,"widthValue":20,"colorValue":159},{"x":2353,"y":245.4,"widthValue":30,"colorValue":156},{"x":2364,"y":245.1,"widthValue":23,"colorValue":157},{"x":2374,"y":242.5,"widthValue":25,"colorValue":159},{"x":2383,"y":241.0,"widthValue":24,"colorValue":160},{"x":2402,"y":237.9,"widthValue":22,"colorValue":159},{"x":2413,"y":239.1,"widthValue":28,"colorValue":157},{"x":2422,"y":237.9,"widthValue":22,"colorValue":156},{"x":2430,"y":235.5,"widthValue":12,"colorValue":157},{"x":2452,"y":229.5,"widthValue":25,"colorValue":158},{"x":2473,"y":228.3,"widthValue":35,"colorValue":156},{"x":2486,"y":227.3,"widthValue":26,"colorValue":155},{"x":2508,"y":228.0,"widthValue":24,"colorValue":154},{"x":2512,"y":228.9,"widthValue":15,"colorValue":154},{"x":2524,"y":228.5,"widthValue":15,"colorValue":153},{"x":2533,"y":223.1,"widthValue":47,"colorValue":155},{"x":2552,"y":221.5,"widthValue":39,"colorValue":155},{"x":2572,"y":223.9,"widthValue":29,"colorValue":157},{"x":2593,"y":224.9,"widthValue":19,"colorValue":159},{"x":2610,"y":226.6,"widthValue":24,"colorValue":160},{"x":2631,"y":227.5,"widthValue":23,"colorValue":163},{"x":2641,"y":229.3,"widthValue":16,"colorValue":165},{"x":2655,"y":229.5,"widthValue":21,"colorValue":166},{"x":2675,"y":228.7,"widthValue":28,"colorValue":164},{"x":2697,"y":227.7,"widthValue":27,"colorValue":164},{"x":2717,"y":226.6,"widthValue":25,"colorValue":165},{"x":2719,"y":229.0,"widthValue":21,"colorValue":164},{"x":2728,"y":228.4,"widthValue":24,"colorValue":164},{"x":2746,"y":226.1,"widthValue":20,"colorValue":165},{"x":2767,"y":226.1,"widthValue":26,"colorValue":163},{"x":2784,"y":226.8,"widthValue":22,"colorValue":161},{"x":2803,"y":227.5,"widthValue":24,"colorValue":160},{"x":2825,"y":226.5,"widthValue":27,"colorValue":161},{"x":2844,"y":224.2,"widthValue":24,"colorValue":162},{"x":2863,"y":219.8,"widthValue":24,"colorValue":162},{"x":2885,"y":217.9,"widthValue":32,"colorValue":159},{"x":2907,"y":217.3,"widthValue":27,"colorValue":158},{"x":2928,"y":216.8,"widthValue":31,"colorValue":159},{"x":2949,"y":216.0,"widthValue":36,"colorValue":159},{"x":2970,"y":214.9,"widthValue":35,"colorValue":158},{"x":2992,"y":214.3,"widthValue":32,"colorValue":158},{"x":3012,"y":213.7,"widthValue":29,"colorValue":157},{"x":3034,"y":211.4,"widthValue":31,"colorValue":156},{"x":3050,"y":207.6,"widthValue":32,"colorValue":156},{"x":3072,"y":205.8,"widthValue":31,"colorValue":157},{"x":3084,"y":205.6,"widthValue":31,"colorValue":156},{"x":3104,"y":205.1,"widthValue":25,"colorValue":155},{"x":3106,"y":205.1,"widthValue":29,"colorValue":155},{"x":3113,"y":205.0,"widthValue":15,"colorValue":155},{"x":3134,"y":205.2,"widthValue":26,"colorValue":155},{"x":3155,"y":205.2,"widthValue":26,"colorValue":156},{"x":3177,"y":205.8,"widthValue":28,"colorValue":158},{"x":3197,"y":205.8,"widthValue":29,"colorValue":160},{"x":3217,"y":205.2,"widthValue":29,"colorValue":161},{"x":3237,"y":204.6,"widthValue":28,"colorValue":162},{"x":3258,"y":204.2,"widthValue":30,"colorValue":160},{"x":3279,"y":204.0,"widthValue":26,"colorValue":157},{"x":3298,"y":203.9,"widthValue":21,"colorValue":156},{"x":3303,"y":204.1,"widthValue":25,"colorValue":156},{"x":3323,"y":204.2,"widthValue":29,"colorValue":156},{"x":3329,"y":204.1,"widthValue":33,"colorValue":157},{"x":3350,"y":204.2,"widthValue":26,"colorValue":158},{"x":3371,"y":203.8,"widthValue":26,"colorValue":159},{"x":3391,"y":202.7,"widthValue":29,"colorValue":160},{"x":3396,"y":202.1,"widthValue":25,"colorValue":160},{"x":3408,"y":202.0,"widthValue":31,"colorValue":159},{"x":3430,"y":202.6,"widthValue":27,"colorValue":159},{"x":3434,"y":204.1,"widthValue":21,"colorValue":160},{"x":3454,"y":204.5,"widthValue":13,"colorValue":160},{"x":3466,"y":209.7,"widthValue":16,"colorValue":162},{"x":3483,"y":212.5,"widthValue":21,"colorValue":165},{"x":3504,"y":214.2,"widthValue":23,"colorValue":168},{"x":3525,"y":215.0,"widthValue":23,"colorValue":169},{"x":3536,"y":216.8,"widthValue":18,"colorValue":170},{"x":3554,"y":217.8,"widthValue":18,"colorValue":170},{"x":3574,"y":220.2,"widthValue":20,"colorValue":169},{"x":3586,"y":222.7,"widthValue":20,"colorValue":171},{"x":3608,"y":224.5,"widthValue":32,"colorValue":173},{"x":3622,"y":226.0,"widthValue":29,"colorValue":175},{"x":3632,"y":226.5,"widthValue":20,"colorValue":175},{"x":3654,"y":226.4,"widthValue":24,"colorValue":173},{"x":3673,"y":226.2,"widthValue":28,"colorValue":172},{"x":3693,"y":225.6,"widthValue":29,"colorValue":170},{"x":3713,"y":225.0,"widthValue":28,"colorValue":168},{"x":3733,"y":224.5,"widthValue":29,"colorValue":166},{"x":3755,"y":224.1,"widthValue":27,"colorValue":164},{"x":3776,"y":224.1,"widthValue":31,"colorValue":162},{"x":3782,"y":223.1,"widthValue":30,"colorValue":160},{"x":3794,"y":223.1,"widthValue":30,"colorValue":160},{"x":3814,"y":222.6,"widthValue":29,"colorValue":160},{"x":3834,"y":222.1,"widthValue":28,"colorValue":160},{"x":3856,"y":221.5,"widthValue":27,"colorValue":159},{"x":3878,"y":220.5,"widthValue":28,"colorValue":158},{"x":3899,"y":219.9,"widthValue":27,"colorValue":158},{"x":3920,"y":217.9,"widthValue":30,"colorValue":155},{"x":3928,"y":219.2,"widthValue":26,"colorValue":155},{"x":3944,"y":219.3,"widthValue":27,"colorValue":154},{"x":3966,"y":218.9,"widthValue":32,"colorValue":155},{"x":3988,"y":217.9,"widthValue":28,"colorValue":157},{"x":4008,"y":215.7,"widthValue":34,"colorValue":156},{"x":4029,"y":216.3,"widthValue":36,"colorValue":155},{"x":4052,"y":216.7,"widthValue":33,"colorValue":154},{"x":4070,"y":216.6,"widthValue":30,"colorValue":155},{"x":4090,"y":211.7,"widthValue":33,"colorValue":158},{"x":4110,"y":215.2,"widthValue":33,"colorValue":159},{"x":4131,"y":214.4,"widthValue":30,"colorValue":161},{"x":4153,"y":213.8,"widthValue":28,"colorValue":162},{"x":4174,"y":213.6,"widthValue":30,"colorValue":163},{"x":4194,"y":213.0,"widthValue":29,"colorValue":163},{"x":4215,"y":212.4,"widthValue":30,"colorValue":162},{"x":4237,"y":211.6,"widthValue":27,"colorValue":162},{"x":4259,"y":211.0,"widthValue":28,"colorValue":163},{"x":4281,"y":210.4,"widthValue":31,"colorValue":163},{"x":4301,"y":209.9,"widthValue":33,"colorValue":163},{"x":4322,"y":209.0,"widthValue":30,"colorValue":162},{"x":4343,"y":208.6,"widthValue":35,"colorValue":161},{"x":4363,"y":208.1,"widthValue":29,"colorValue":160},{"x":4383,"y":207.6,"widthValue":29,"colorValue":160},{"x":4403,"y":207.3,"widthValue":33,"colorValue":160},{"x":4424,"y":207.6,"widthValue":27,"colorValue":160},{"x":4445,"y":207.3,"widthValue":30,"colorValue":162},{"x":4466,"y":206.5,"widthValue":30,"colorValue":164},{"x":4489,"y":206.5,"widthValue":33,"colorValue":163},{"x":4511,"y":204.9,"widthValue":28,"colorValue":166},{"x":4517,"y":201.8,"widthValue":20,"colorValue":166},{"x":4533,"y":200.5,"widthValue":14,"colorValue":166},{"x":4540,"y":198.5,"widthValue":25,"colorValue":163},{"x":4560,"y":198.5,"widthValue":25,"colorValue":161},{"x":4582,"y":198.2,"widthValue":28,"colorValue":159},{"x":4602,"y":197.9,"widthValue":29,"colorValue":157},{"x":4623,"y":197.9,"widthValue":30,"colorValue":156},{"x":4640,"y":197.0,"widthValue":29,"colorValue":157},{"x":4662,"y":196.6,"widthValue":28,"colorValue":157},{"x":4683,"y":195.8,"widthValue":31,"colorValue":157},{"x":4705,"y":194.9,"widthValue":28,"colorValue":158},{"x":4725,"y":194.2,"widthValue":28,"colorValue":160},{"x":4744,"y":193.4,"widthValue":24,"colorValue":160},{"x":4764,"y":195.4,"widthValue":23,"colorValue":161},{"x":4784,"y":198.3,"widthValue":20,"colorValue":163},{"x":4804,"y":200.6,"widthValue":22,"colorValue":164},{"x":4826,"y":201.6,"widthValue":24,"colorValue":165},{"x":4847,"y":202.9,"widthValue":27,"colorValue":166},{"x":4868,"y":204.0,"widthValue":26,"colorValue":167},{"x":4889,"y":204.8,"widthValue":26,"colorValue":167},{"x":4909,"y":205.6,"widthValue":25,"colorValue":166},{"x":4930,"y":205.7,"widthValue":21,"colorValue":166},{"x":4935,"y":206.4,"widthValue":17,"colorValue":163},{"x":4951,"y":206.5,"widthValue":12,"colorValue":163},{"x":4952,"y":206.9,"widthValue":11,"colorValue":158}]; | |
| // initialize SVG | |
| var width = 800, height = 400; | |
| var svg = d3.select("#signature").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // x = distance in shooting signatures | |
| var x = d3.scale.linear() | |
| .domain([0, 5000]) | |
| .range([0, width]); | |
| // for gradient offset (needs % - so map x domain to 0-100%) | |
| var offset = d3.scale.linear() | |
| .domain(x.domain()) | |
| .range([0, 100]); | |
| // y = Field Goal % in shooting signatures | |
| var y = d3.scale.linear() | |
| .domain([100, 800]) | |
| .range([height, 0]); | |
| // scale for the width of the signature | |
| var minWidth = 1; | |
| var maxWidth = height / 4; | |
| var w = d3.scale.linear() | |
| .domain([10, 100]) | |
| .range([minWidth, maxWidth]); | |
| // NOTE: if you want maxWidth to truly be the maximum width of the signature, | |
| // you'll need to add .clamp(true) to w. | |
| // need two area plots to make the signature extend in width in both directions around the line | |
| var areaAbove = d3.svg.area() | |
| .x(function(d) { return x(d.x); }) | |
| .y0(function (d) { return y(d.y) - w(d.widthValue); }) | |
| .y1(function(d) { return Math.ceil(y(d.y)); }) // ceil and floor prevent line between areas | |
| .interpolate("basis"); | |
| var areaBelow = d3.svg.area() | |
| .x(function(d) { return x(d.x); }) | |
| .y0(function (d) { return y(d.y) + w(d.widthValue); }) | |
| .y1(function(d) { return Math.floor(y(d.y)); }) // ceil and floor prevent line between areas | |
| .interpolate("basis"); | |
| // add the areas to the svg | |
| var gArea = svg.append("g").attr("class", "area-group"); | |
| gArea.append("path") | |
| .datum(data) | |
| .attr("class", "area area-above") | |
| .attr("d", areaAbove) | |
| .style("fill", "url(#area-gradient)"); // specify the linear gradient #area-gradient as the colouring | |
| // NOTE: the colouring won't work if you have multiple signatures on the same page. | |
| // In this case, you'll need to generate unique IDs for each gradient. | |
| gArea.append("path") | |
| .datum(data) | |
| .attr("class", "area area-below") | |
| .attr("d", areaBelow) | |
| .style("fill", "url(#area-gradient)"); | |
| /* | |
| // you can draw the line the signature is based around using the following code: | |
| var line = d3.svg.line() | |
| .x(function(d) { return x(d.x); }) | |
| .y(function(d) { return y(d.y); }) | |
| .interpolate("basis"); | |
| gArea.append("path") | |
| .datum(data) | |
| .attr("d", line) | |
| .style("stroke", "#fff") | |
| .style("fill", "none") | |
| */ | |
| // set-up colours | |
| var colorSchemes = { | |
| buckets: { | |
| domain: [80, 180], | |
| range: ["#405A7C", "#7092C0", "#BDD9FF", "#FFA39E", "#F02C21", "#B80E05"] | |
| }, | |
| goldsberry: { | |
| domain: [80, 180], | |
| range: ["#5357A1", "#6389BA", "#F9DC96", "#F0825F", "#AE2A47"] | |
| } | |
| }; | |
| var activeColorScheme = colorSchemes.goldsberry; | |
| // Note that the quantize scale does not interpolate between colours | |
| var colorScale = d3.scale.quantize() | |
| .domain(activeColorScheme.domain) | |
| .range(activeColorScheme.range); | |
| // generate colour data | |
| var colorData = []; | |
| var stripe = false; // set stripe to true to prevent linear gradient fading | |
| for (var i = 0; i < data.length; i++) { | |
| var prevData = data[i - 1]; | |
| var currData = data[i]; | |
| if (stripe && prevData) { | |
| colorData.push({ | |
| offset: offset(currData.x) + "%", | |
| stopColor: colorScale(prevData.colorValue) | |
| }); | |
| } | |
| colorData.push({ | |
| offset: offset(currData.x) + "%", | |
| stopColor: colorScale(currData.colorValue) | |
| }); | |
| } | |
| // generate the linear gradient used by the signature | |
| gArea.append("linearGradient") | |
| .attr("id", "area-gradient") | |
| .attr("gradientUnits", "userSpaceOnUse") | |
| .attr("y1", 0) | |
| .attr("y2", 0) | |
| .selectAll("stop") | |
| .data(colorData) | |
| .enter().append("stop") | |
| .attr("offset", function(d) { return d.offset }) | |
| .attr("stop-color", function (d) { return d.stopColor; }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment