Created
January 23, 2014 10:28
-
-
Save ramnathv/8576282 to your computer and use it in GitHub Desktop.
Hair Color vs. Eye Color
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> | |
| <meta charset = 'utf-8'> | |
| <html> | |
| <head> | |
| <link rel='stylesheet' href='http://nvd3.org/src/nv.d3.css'> | |
| <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script> | |
| <script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script> | |
| <script src='http://timelyportfolio.github.io/rCharts_nvd3_tests/libraries/widgets/nvd3/js/nv.d3.min-new.js' type='text/javascript'></script> | |
| <script src='http://nvd3.org/lib/fisheye.js' type='text/javascript'></script> | |
| <style> | |
| .rChart { | |
| display: block; | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 800px; | |
| height: 400px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='chart4cdd58a578c2' class='rChart nvd3'></div> | |
| <script type='text/javascript'> | |
| $(document).ready(function(){ | |
| drawchart4cdd58a578c2() | |
| }); | |
| function drawchart4cdd58a578c2(){ | |
| var opts = { | |
| "dom": "chart4cdd58a578c2", | |
| "width": 800, | |
| "height": 400, | |
| "process_data": true, | |
| "x": "Hair", | |
| "y": "Freq", | |
| "group": "Eye", | |
| "type": "multiBarChart", | |
| "id": "chart4cdd58a578c2", | |
| "stacked": true | |
| }, | |
| data = [ | |
| { | |
| "Hair": "Black", | |
| "Eye": "Brown", | |
| "Sex": "Male", | |
| "Freq": 32 | |
| }, | |
| { | |
| "Hair": "Brown", | |
| "Eye": "Brown", | |
| "Sex": "Male", | |
| "Freq": 53 | |
| }, | |
| { | |
| "Hair": "Red", | |
| "Eye": "Brown", | |
| "Sex": "Male", | |
| "Freq": 10 | |
| }, | |
| { | |
| "Hair": "Blond", | |
| "Eye": "Brown", | |
| "Sex": "Male", | |
| "Freq": 3 | |
| }, | |
| { | |
| "Hair": "Black", | |
| "Eye": "Blue", | |
| "Sex": "Male", | |
| "Freq": 11 | |
| }, | |
| { | |
| "Hair": "Brown", | |
| "Eye": "Blue", | |
| "Sex": "Male", | |
| "Freq": 50 | |
| }, | |
| { | |
| "Hair": "Red", | |
| "Eye": "Blue", | |
| "Sex": "Male", | |
| "Freq": 10 | |
| }, | |
| { | |
| "Hair": "Blond", | |
| "Eye": "Blue", | |
| "Sex": "Male", | |
| "Freq": 30 | |
| }, | |
| { | |
| "Hair": "Black", | |
| "Eye": "Hazel", | |
| "Sex": "Male", | |
| "Freq": 10 | |
| }, | |
| { | |
| "Hair": "Brown", | |
| "Eye": "Hazel", | |
| "Sex": "Male", | |
| "Freq": 25 | |
| }, | |
| { | |
| "Hair": "Red", | |
| "Eye": "Hazel", | |
| "Sex": "Male", | |
| "Freq": 7 | |
| }, | |
| { | |
| "Hair": "Blond", | |
| "Eye": "Hazel", | |
| "Sex": "Male", | |
| "Freq": 5 | |
| }, | |
| { | |
| "Hair": "Black", | |
| "Eye": "Green", | |
| "Sex": "Male", | |
| "Freq": 3 | |
| }, | |
| { | |
| "Hair": "Brown", | |
| "Eye": "Green", | |
| "Sex": "Male", | |
| "Freq": 15 | |
| }, | |
| { | |
| "Hair": "Red", | |
| "Eye": "Green", | |
| "Sex": "Male", | |
| "Freq": 7 | |
| }, | |
| { | |
| "Hair": "Blond", | |
| "Eye": "Green", | |
| "Sex": "Male", | |
| "Freq": 8 | |
| } | |
| ] | |
| if(!(opts.type==="pieChart" || opts.type==="sparklinePlus" || opts.type==="bulletChart")) { | |
| var data = d3.nest() | |
| .key(function(d){ | |
| //return opts.group === undefined ? 'main' : d[opts.group] | |
| //instead of main would think a better default is opts.x | |
| return opts.group === undefined ? opts.y : d[opts.group]; | |
| }) | |
| .entries(data); | |
| } | |
| if (opts.disabled != undefined){ | |
| data.map(function(d, i){ | |
| d.disabled = opts.disabled[i] | |
| }) | |
| } | |
| nv.addGraph(function() { | |
| var chart = nv.models[opts.type]() | |
| .width(opts.width) | |
| .height(opts.height) | |
| if (opts.type != "bulletChart"){ | |
| chart | |
| .x(function(d) { return d[opts.x] }) | |
| .y(function(d) { return d[opts.y] }) | |
| } | |
| chart | |
| .stacked(true) | |
| d3.select("#" + opts.id) | |
| .append('svg') | |
| .datum(data) | |
| .transition().duration(500) | |
| .call(chart); | |
| nv.utils.windowResize(chart.update); | |
| return chart; | |
| }); | |
| }; | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
A taper fade haircut offers several benefits that make it a popular choice for men seeking a stylish, low-maintenance, and versatile look. The main appeal of a taper fade lies in its clean, sharp lines and gradual fade from short to longer hair, creating a sleek and polished appearance. This haircut works well for a variety of face shapes and hair types, allowing for easy customization taper fade haircut. Whether you have straight, wavy, or curly hair, a taper fade can be adjusted to suit your unique texture, providing both style and practicality.