Created
October 29, 2015 22:03
-
-
Save octaviomtz/492db509039d8a534b44 to your computer and use it in GitHub Desktop.
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 lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Howework 1 | Octavio</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="script.js"></script> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; | |
| background-color: #bbbbbb; | |
| font-family: Helvetica, Arial, sans-serif; | |
| } | |
| #container { | |
| width: 800px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| margin-top: 50px; | |
| padding: 50px; | |
| background-color: #ffffff; | |
| box-shadow: 3px 3px 5px 6px #000; | |
| } | |
| #title{ | |
| width: 800px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| #someText{ | |
| width: 800px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| font-family: Helvetica, Arial, sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1 id="title">Sales of (in USD millions) <p></p> </h1> | |
| <div id="container"></div> | |
| <p></p> | |
| <div id="someText"> | |
| <p>The data was obtained from <a href="http://vgsales.wikia.com/wiki/Mario">here</a> | |
| and the logo from <a href="https://commons.wikimedia.org/wiki/File:Super_Mario_Bros._Logo.svg">here</a><br> | |
| I tried to make the rectangles look like pipes. But it only worked with the one at the top. I used the gradient effect mentioned in the response of this <a href="http://stackoverflow.com/questions/12826604/how-to-use-svg-gradients-to-display-varying-colors-relative-to-the-size-of-the-c">question</a> <br> | |
| Does anyone know how to apply the gradient to each element? <br> I tried putting the whole gradient part inside a function and call that function from the fill parameter of the rect element. But that didn't work either<br> | |
| </p> | |
| Thanks for any suggestion! | |
| </div> | |
| <script src="script.js"></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 w = 700; | |
| var h = 600; | |
| var padding = [ 20, 10, 30, 280 ]; //Top, right, bottom, left | |
| var widthScale = d3.scale.linear() | |
| .range([ 0, w - padding[1] - padding[3] ]); | |
| var heightScale = d3.scale.ordinal() | |
| .rangeRoundBands([ padding[0], h - padding[2] ], 0.1); | |
| var xAxis = d3.svg.axis() | |
| .scale(widthScale) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(heightScale) | |
| .orient("left"); | |
| //Now SVG goes into #container instead of body | |
| var svg = d3.select("#container") | |
| .append("svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| d3.csv("superMario.csv", function(data) { | |
| data.sort(function(a, b) { | |
| return d3.descending(+a.Sales, +b.Sales); | |
| }); | |
| widthScale.domain([ 0, d3.max(data, function(d) { | |
| return +d.Sales; | |
| }) ]); | |
| heightScale.domain(data.map(function(d) { return d.Title; } )); | |
| var gradient = svg | |
| .append("linearGradient") | |
| .attr("y1", function(d,i) { | |
| return heightScale.rangeBand()+10; | |
| }) | |
| .attr("y2", function(d,i) { | |
| return heightScale.rangeBand(); | |
| }) | |
| .attr("x1", "0") | |
| .attr("x2", "0") | |
| .attr("id", "gradient") | |
| .attr("gradientUnits", "userSpaceOnUse") | |
| gradient | |
| .append("stop") | |
| .attr("offset", "0") | |
| .attr("stop-color", "#090") | |
| gradient | |
| .append("stop") | |
| .attr("offset", "0.5") | |
| .attr("stop-color", "#AFA") | |
| //Bind data to groups (not bars directly) | |
| var groups = svg.selectAll("g") | |
| .data(data) | |
| .enter() | |
| .append("g") | |
| .attr("class", "bar"); | |
| //Add a rect to each group | |
| var rects = groups.append("rect") | |
| .attr("x", padding[3]) | |
| .attr("y", function(d) { | |
| return heightScale(d.Title); | |
| }) | |
| .attr("width", 0) | |
| .attr("height", heightScale.rangeBand()) | |
| .attr("fill", "url(#gradient)"); | |
| //Add a text element to each group | |
| groups.append("text") | |
| .attr("x", function(d) { | |
| return padding[3] + widthScale(d.Sales) - 40; | |
| }) | |
| .attr("y", function(d) { | |
| return heightScale(d.Title) + 15; | |
| }) | |
| .text(function(d,i) { | |
| if(i<18){ | |
| return d3.round(d.Sales,2);} | |
| }); | |
| rects.transition() | |
| .delay(function(d, i) { | |
| return i * 50; | |
| }) | |
| .duration(1000) | |
| .attr("width", function(d) { | |
| return widthScale(d.Sales); | |
| }); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(" + padding[3] + "," + (h - padding[2]) + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + padding[3] + ",0)") | |
| .call(yAxis); | |
| var rects2=svg.selectAll("#rects2") | |
| .data(data) | |
| .enter() | |
| .append("rect") | |
| .attr("x", padding[3]) | |
| .attr("class","#rects2") | |
| .attr("fill", "url(#gradient)") | |
| .attr("stroke","#040"); | |
| rects2.transition() | |
| .delay(function(d, i) { | |
| return i * 50; | |
| }) | |
| .duration(1000) | |
| .attr("x", function(d) { | |
| return padding[3]+widthScale(d.Sales); | |
| }) | |
| .attr("y", function(d) { | |
| return heightScale(d.Title)-2; | |
| }) | |
| .attr("width",26) | |
| .attr("height",28); | |
| }); | |
| theTitle= d3.select("#title") | |
| .append("svg") | |
| .attr("width", 275) | |
| .attr("height", 120); | |
| theTitle | |
| .append("rect") | |
| .attr("x",0) | |
| .attr("y",0) | |
| .attr("width",886) | |
| .attr("height",352) | |
| .attr("fill","#be2801") | |
| theTitle | |
| .append("path") | |
| .attr("d", "M 80.107887,173.35444 C 77.55755,173.37303 74.986255,173.71829 72.440014,174.39952 C 59.847938,177.76847 50.189832,189.1975 48.24425,203.03534 C 47.837558,205.92785 47.832158,207.06173 47.832158,273.25846 L 47.832158,339.07282 L 75.736756,339.07282 L 75.736756,208.52018 L 89.747934,208.52018 L 89.747934,339.07282 L 117.65256,339.07282 L 117.65256,208.52018 L 131.66371,208.52018 L 131.66371,339.07282 L 159.57201,339.07282 L 159.50576,204.99006 L 159.23715,203.25596 C 157.67874,193.23724 153.03514,185.21247 145.49824,179.51278 C 138.97791,174.58189 130.52465,172.45856 122.43573,173.71826 C 115.71684,174.7646 109.09931,178.30054 104.42873,183.34097 L 103.74069,184.08027 L 102.78036,183.09325 C 96.542954,176.69597 88.439012,173.29352 80.107887,173.35444 L 80.107887,173.35444 z M 406.75812,173.3621 C 398.79957,173.4461 390.82659,176.24731 384.33582,181.89711 C 377.60842,187.75291 373.40819,195.87184 372.42191,204.92807 C 372.19494,207.01217 372.19142,307.87612 372.41811,309.90282 C 373.48997,319.47772 378.10364,327.93892 385.45425,333.81242 C 392.39681,339.35982 401.38347,342.08732 410.12099,341.30232 C 425.88578,339.88602 438.61582,328.27432 441.49159,312.68972 C 442.05487,309.63712 442.04582,310.98422 442.00671,256.39355 L 441.96992,204.74229 L 441.705,203.22495 C 440.5273,196.45254 438.17906,191.14003 434.19166,186.23623 C 427.19938,177.63681 416.99045,173.25419 406.75802,173.3621 L 406.75812,173.3621 z M 206.08706,173.36595 C 201.15766,173.33635 196.15338,174.3385 191.65275,176.34255 C 181.36587,180.92316 173.67532,190.51318 171.57055,201.37856 C 170.8821,204.93263 170.94142,198.7657 170.90458,272.09327 L 170.86779,339.07272 L 198.77606,339.07272 L 198.77606,306.37262 L 212.78724,306.37262 L 212.78724,339.07272 L 240.69552,339.07272 L 240.65874,272.21715 C 240.62623,210.77646 240.60931,205.25623 240.43061,204.061 C 239.95363,200.87153 239.20838,198.0104 238.22296,195.56857 C 237.48865,193.74891 236.18351,191.10863 236.03372,191.14042 C 234.21028,187.59901 230.27191,184.05757 226.1294,180.51615 L 216.90082,175.20455 L 215.91474,174.89103 C 212.79914,173.89128 209.45978,173.3862 206.08705,173.36595 L 206.08706,173.36595 z M 252.11381,175.62591 L 252.11381,339.01022 L 280.01841,339.01022 L 280.01841,208.45759 L 294.02959,208.45759 L 294.02959,240.90997 L 286.96513,240.90997 L 286.96513,273.7339 L 294.02959,273.7339 L 294.02959,339.01022 L 321.93419,339.01022 L 321.46323,270.76891 C 320.52422,265.93434 317.66806,260.98539 314.08234,257.98384 L 313.30968,257.33742 L 313.76593,256.96968 C 314.77501,256.15823 317.3118,253.31985 318.10027,252.11964 C 319.70543,249.67624 320.91652,246.7191 321.45218,243.94076 C 321.92535,241.48689 321.9497,240.41921 321.90477,222.76389 C 321.85827,204.49567 321.87482,205.09358 321.23511,202.0244 C 318.56557,189.21753 307.77873,178.98197 294.13997,176.31877 C 290.91441,175.68892 291.78587,175.71467 271.27615,175.66848 L 252.11381,175.62587 L 252.11381,175.62591 z M 333.11852,175.69607 L 333.11852,339.07262 L 361.02312,339.07262 L 361.02312,175.69607 L 333.11852,175.69607 z M 198.77607,208.52003 L 212.78725,208.52003 L 212.78725,273.67249 L 198.77607,273.67249 L 198.77607,208.52003 L 198.77607,208.52003 z M 400.11312,208.52003 L 414.12429,208.52003 L 414.12429,306.24872 L 400.11312,306.24872 L 400.11312,208.52003 L 400.11312,208.52003 z M 690.9623,173.35827 C 688.92946,173.36032 686.86415,173.5382 684.7814,173.90791 C 670.93441,176.36589 659.76775,187.19279 656.84417,200.99541 C 656.06916,204.65443 656.13084,199.76748 656.13084,257.38449 C 656.13084,315.14202 656.06823,310.26552 656.85152,313.86652 C 660.12477,328.91422 672.86306,340.08102 688.19359,341.34102 C 689.40664,341.44072 692.7002,341.41502 693.959,341.29842 C 702.59359,340.49882 710.28652,336.75882 716.25951,330.45652 C 721.81653,324.59302 725.13055,317.00562 725.72024,308.78802 C 725.89268,306.38522 725.8962,208.36715 725.72403,206.03511 C 724.33339,187.21448 708.94528,173.3425 690.96241,173.35825 L 690.9623,173.35827 z M 771.62291,173.35827 C 763.72928,173.43767 755.91083,176.21955 749.4952,181.59136 C 748.11418,182.74768 745.12984,185.92013 744.08645,187.33942 C 741.20774,191.25532 739.18164,195.57512 738.08204,200.1516 C 737.15858,203.9951 737.21551,202.72469 737.17017,221.77361 C 737.12714,239.82856 737.13,240.05517 737.68493,242.69113 C 739.09162,249.37245 742.95454,254.69242 749.96585,259.61019 C 752.54654,261.42026 754.93472,262.84691 760.14357,265.68339 C 763.65072,267.59318 764.87714,268.27719 766.43844,269.19029 C 774.05196,273.6429 777.60565,277.54061 778.71201,282.65275 L 779.04293,306.24882 L 765.02651,306.24882 L 765.02651,273.6726 L 737.14075,273.6726 L 737.14075,291.16839 C 737.14075,310.14262 737.1388,310.04242 737.79524,313.31682 C 738.66002,317.62852 740.23827,321.54002 742.61567,325.26192 C 748.46326,334.41632 757.88521,340.20032 768.74388,341.30232 C 770.24701,341.45492 775.21027,341.34642 776.67499,341.12812 C 783.03039,340.18122 788.77556,337.72762 793.52264,333.93632 C 800.53003,328.33972 805.06024,320.54462 806.44334,311.69882 C 806.87206,308.95702 806.93161,305.97892 806.8809,290.26652 C 806.83788,276.93218 806.81166,275.19997 806.63087,273.98227 C 805.26749,264.79896 800.30879,258.55051 789.26477,252.09705 C 787.56025,251.10103 786.03303,250.25327 782.49923,248.34242 C 775.05251,244.31571 772.14822,242.3729 769.45719,239.61776 C 767.57245,237.68809 766.54694,236.11324 765.75086,233.93938 C 765.02365,231.95346 765.02651,232.02509 765.02651,219.71437 L 765.02651,208.52016 L 779.02823,208.52016 L 779.02823,241.09637 L 806.9287,241.09637 L 806.26685,201.95537 C 804.45245,192.07455 798.19953,183.1639 789.55526,178.13477 C 783.94695,174.87193 777.7624,173.29648 771.62291,173.35827 L 771.62291,173.35827 z M 575.00328,175.69607 L 575.00328,339.07262 L 602.88905,339.07262 L 602.88905,208.52003 L 616.89075,208.52003 L 616.89075,240.97239 L 609.83106,240.97239 L 609.83106,273.79634 L 616.89075,273.79634 L 616.89075,306.43452 L 616.89075,339.07262 L 644.77652,339.07262 L 644.77652,306.61642 C 644.77652,273.03552 644.77652,272.97754 644.28749,270.58363 C 643.3029,265.76076 640.47085,260.95468 636.85642,257.96498 L 636.1762,257.39986 L 636.56227,257.08245 C 637.81089,256.08398 638.89485,254.91254 639.90827,253.66458 C 642.12667,250.93662 643.75835,247.20986 644.51544,243.14001 C 644.75128,241.87235 644.8824,208.84537 644.66251,206.1047 C 644.06436,198.64831 641.16597,192.22366 635.89309,186.6619 C 629.972,180.41648 621.86568,176.58303 612.97115,175.82382 L 575.00328,175.69607 L 575.00328,175.69607 z M 493.93453,175.73092 L 493.93453,339.07262 L 521.8203,339.07262 L 521.8203,208.52003 L 535.82202,208.52003 L 535.82202,240.97239 L 528.76233,240.97239 L 528.76233,273.79634 L 535.82202,273.79634 L 535.82202,306.37262 L 528.76233,306.37262 L 528.76233,339.07262 C 534.90216,339.07262 543.41462,336.76222 548.73169,333.24722 C 557.23564,327.62542 562.45436,319.28602 563.53497,309.59302 C 563.79441,307.26582 563.7912,274.47856 563.53117,272.39125 C 563.0356,268.41148 561.51801,264.67269 559.07475,261.41382 C 558.25635,260.32224 556.62025,258.59379 555.78389,257.9379 L 555.09631,257.39986 L 555.4309,257.14439 C 559.07877,254.37178 562.22257,249.18837 563.21863,244.3051 C 563.71132,241.88974 563.72343,241.40198 563.68191,223.01212 C 563.63831,203.67916 563.66918,204.65835 562.93183,201.52171 C 559.96365,188.89423 549.73923,176.86508 536.23371,176.447 L 513.14265,175.73092 L 493.93442,175.73092 L 493.93453,175.73092 z M 683.95777,208.52003 L 697.95948,208.52003 L 697.95948,306.24872 L 683.95777,306.24872 L 683.95777,208.52003 z M 817.61666,306.31062 L 817.55476,339.07262 L 846.91052,339.07262 L 846.91052,306.31062 L 817.61669,306.31062 L 817.61666,306.31062 z M 84.71093,45.202959 C 83.030215,45.202959 81.328703,45.255869 80.462416,45.357789 C 68.697937,46.741769 58.970344,52.886349 53.353558,62.485849 C 52.01614,64.771609 50.847463,67.800499 50.181089,70.703459 C 49.209459,74.936139 49.233253,79.991329 50.244162,84.676859 C 52.52447,95.246069 59.784763,103.27368 69.865251,106.36854 C 73.692249,107.54348 75.147482,107.6984 83.044923,107.76589 L 89.723808,107.82394 L 89.723808,117.4621 L 49.472377,117.4621 L 49.472377,118.42205 C 49.473554,119.65099 49.647317,121.2662 49.954743,122.91212 C 52.510291,136.59364 64.616852,147.30578 79.690631,149.2216 C 82.317136,149.55542 85.422077,149.63046 87.868563,149.41902 C 97.097581,148.62137 105.41371,144.67095 111.39309,138.2519 C 113.48545,136.0057 114.06793,135.24772 115.54884,132.82124 C 119.47042,126.39575 120.77424,118.33945 119.15545,110.54507 C 116.46958,97.612829 107.19156,88.989679 93.998301,87.165749 C 92.831615,87.004459 91.123406,86.946619 86.013319,86.898669 L 79.51253,86.840609 L 79.51253,77.330169 L 119.82335,77.330169 C 119.92522,77.158159 119.67897,73.856589 119.46342,72.545929 C 117.40545,60.033059 107.60316,49.842189 94.280292,46.368049 C 92.775067,45.975529 90.84525,45.619739 88.833296,45.357789 C 88.051609,45.255999 86.391666,45.202819 84.71093,45.202959 L 84.71093,45.202959 z M 341.65148,47.347349 C 317.2966,47.393569 318.50924,47.401649 315.25131,48.098279 C 302.9475,50.729099 295.06788,60.249219 293.82693,73.985849 C 293.73818,74.968909 293.71335,82.491589 293.74161,98.263189 C 293.77853,118.88566 293.80038,121.2406 293.97909,122.37408 C 294.63311,126.52249 295.44734,129.28005 296.92522,132.35288 C 301.08666,141.00538 308.81403,146.19041 319.00266,147.17012 C 319.62306,147.22972 330.02849,147.28858 342.12646,147.29784 L 364.0629,147.29784 L 364.0629,119.382 L 322.68348,119.382 L 322.68348,75.348359 L 364.0629,75.348359 L 364.0629,47.347349 L 341.65151,47.347349 L 341.65148,47.347349 z M 130.09027,47.355029 L 130.12366,83.801999 C 130.16228,124.05461 130.09988,120.78838 130.8806,124.13522 C 133.7918,136.61496 144.60093,146.38297 158.29374,148.90801 C 161.66465,149.56118 165.09142,149.60958 168.50502,149.41509 C 175.08186,148.83979 181.15555,146.72566 186.31539,143.21801 C 187.91092,142.16643 189.37484,140.94814 190.77168,139.63369 C 195.49798,135.18898 198.92432,128.96961 200.01823,122.84239 C 200.50484,120.11681 200.50432,120.02049 200.50432,83.136239 L 200.50432,47.355029 L 170.28606,47.416969 L 170.22672,117.46204 L 160.37164,117.46204 L 160.37164,47.355029 L 130.0903,47.355029 L 130.09027,47.355029 z M 372.64505,47.385999 L 372.64505,147.31327 L 401.61659,147.31327 L 401.61659,77.330119 L 411.59039,77.330119 L 411.59039,147.31327 L 443.07022,147.31327 L 443.02574,133.96692 C 442.98663,122.04204 442.95864,120.49525 442.77714,119.44387 C 442.08236,115.4198 440.38768,111.85606 437.61956,108.60191 C 436.65947,107.47326 434.49589,105.39989 433.73837,104.88211 L 433.43412,104.67309 L 434.24672,103.78282 C 438.9835,98.580849 441.94787,91.852829 442.77343,84.432949 C 443.13643,81.170299 442.91053,76.777469 442.20944,73.389689 C 440.70392,66.114759 436.6188,59.197859 431.10394,54.593329 C 426.64748,50.872529 421.88831,48.689119 416.07643,47.695659 C 414.50471,47.426989 414.4185,47.424409 393.57229,47.385999 L 372.6451,47.385999 L 372.64505,47.385999 z M 211.90295,47.389839 L 211.90295,147.31324 L 240.87448,147.31324 L 240.87448,77.330089 L 250.8483,77.330089 L 250.8483,95.661959 L 250.8483,113.99383 C 252.92085,114.0583 254.97883,113.82848 257.02255,113.48676 C 270.45682,111.02415 281.11789,100.64044 283.83828,87.363079 C 284.76531,82.838549 284.65544,77.303479 283.55258,72.824539 C 280.52712,60.537619 270.63366,50.900789 258.2433,48.171719 C 254.71912,47.395509 256.00064,47.436419 232.94886,47.389839 L 211.90295,47.389839 z M 331.94484,85.009659 L 331.94484,109.78245 L 364.12223,109.78245 L 364.12223,85.009659 L 331.94484,85.009659 z") | |
| .attr('transform', 'scale(.3)'); |
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
| Year | Platform | Title | Sales | |
|---|---|---|---|---|
| 1985 | NES | Super Mario Bros. | 40.24 | |
| 1986 | NES | Super Mario Bros.: The Lost Levels | 2.65 | |
| 1988 | NES | Super Mario Bros. 2 | 7.46 | |
| 1988 | NES | Super Mario Bros. 3 | 17.28 | |
| 1989 | GB | Super Mario Land | 18.14 | |
| 1991 | SNES | Super Mario World | 20.61 | |
| 1992 | GB | Super Mario Land 2 | 11.18 | |
| 1994 | GB | Super Mario Land 3: Wario Land | 5.19 | |
| 1995 | SNES | Super Mario World 2: Yoshi's Island | 4.12 | |
| 1996 | N64 | Super Mario 64 | 11.91 | |
| 2002 | NGC | Super Mario Sunshine | 5.91 | |
| 2006 | NDS | New Super Mario Bros. | 30.79 | |
| 2007 | Wii | Super Mario Galaxy | 12.5 | |
| 2009 | Wii | New Super Mario Bros. Wii | 29.32 | |
| 2010 | Wii | Super Mario Galaxy 2 | 7.41 | |
| 2011 | 3DS | Super Mario 3D Land | 10 | |
| 2012 | 3DS | New Super Mario Bros. 2 | 9.16 | |
| 2012 | Wii U | New Super Mario Bros. U | 4.81 | |
| 2013 | Wii U | New Super Luigi U | 2.25 | |
| 2013 | Wii U | Super Mario 3D World | 4.1 | |
| 2015 | Wii U | Super Mario Maker | 1 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment