Commits

Chris Leonello  committed a1f34c0

Added features and resizing to pyramid example.

  • Participants
  • Parent commits 021c2d1

Comments (0)

Files changed (2)

File examples/ages.json

-[[[27777522,13657657,14119865,22.9618524272778,22.9234010487667,22.9984003916577,95.1543545247194],[0.0635441,0.1066868,0.0889602,0.0816883,0.10164580000000001,0.0916705,0.079569,0.0970443,0.1046451,0.13356859999999998,0.09269619999999999,0.0936646,0.09194050000000001,0.0722027,0.0896342,0.0993397,0.061379399999999994,0.0916921,0.0828748,0.043487,0.0391652,0.05173029999999999,0.0507104,0.0336168,0.0554176,0.06918260000000001,0.066553,0.0686232,0.07097,0.0356915,0.0756028,0.0430155,0.0420597,0.06085890000000001,0.0609348,0.083607,0.079871,0.063388,0.0866719,0.07110419999999999,0.11604289999999999,0.0439268,0.0659694,0.046840599999999996,0.0340002,0.09966620000000001,0.037104700000000004,0.0638918,0.0462334,0.0467053,0.054563799999999996,0.0463275,0.048099199999999995,0.051574699999999994,0.0499415,0.0287639,0.0520332,0.0443779,0.0334986,0.043161,0.047440500000000003,0.0179186,0.0620127,0.0219074,0.0411669,0.0495684,0.0315231,0.0275056,0.0157341,0.0113926,0.024991,0.012811300000000001,0.017529700000000002,0.0103093,0.025329200000000003,0.0988836],[0.0767078,0.0679554,0.1064493,0.0915063,0.0860792,0.0785728,0.0892471,0.0687886,0.1055313,0.0921839,0.0659624,0.11451599999999999,0.0910735,0.1279864,0.0714669,0.0873929,0.09284529999999999,0.059575199999999995,0.1093534,0.0501142,0.052829,0.041160600000000006,0.0633309,0.0616121,0.0621781,0.0621598,0.0638378,0.0703724,0.0742589,0.048523,0.0735727,0.08988159999999999,0.0740614,0.0991105,0.148909,0.12269959999999999,0.1020624,0.0737742,0.09468170000000001,0.069129,0.0933744,0.0957472,0.0793112,0.0581121,0.0767528,0.1031739,0.1202133,0.0626926,0.0959522,0.059430300000000005,0.1202145,0.0611707,0.0480779,0.0383338,0.053287600000000004,0.0849878,0.05245300000000001,0.0660183,0.025419000000000004,0.0137567,0.0762322,0.0490294,0.0463194,0.0566921,0.0353006,0.0730591,0.034669,0.0271638,0.0309785,0.0152756,0.0478111,0.0177234,0.026930199999999998,0.0396318,0.0194934,0.1683044],[0.08012745758,0.15185614577,0.08083484276,0.08634844480000001,0.11421861070999999,0.11285038043,0.08623735826,0.13645806801,0.09591427898,0.14015059741,0.13592869247,0.07911429639999999,0.09764735666999999,0.05456765264,0.121314988,0.10994927001000002,0.06394526214,0.14887167252,0.07330538177,0.08393523364,0.07170899168,0.12156511277,0.07745100072,0.05277594468,0.08620965831,0.10765468343,0.10084059099,0.09432227357,0.0924425572,0.07114801921,0.09939552755,0.04629134908,0.05493130422,0.059395027600000004,0.0395813042,0.06590906497,0.07569531533,0.08310902697,0.08854375327,0.09949027633,0.12020884008999999,0.04437610101,0.08045511693,0.07796533275,0.04284823143,0.09343803786,0.02985534283,0.09857675082,0.04660650676,0.07601580528,0.04390292048,0.07325564077999999,0.0967693938,0.13013691132,0.09065276996,0.03273684636,0.09595240406,0.06502016503,0.12747172211,0.30347497827000003,0.0601944515,0.03535030403,0.12949809292,0.037377818480000005,0.11280068435999999,0.0656260462,0.08794947713,0.09794364354,0.049127784359999996,0.07213901846000001,0.0505592422,0.06991845436,0.06296229678000001,0.025161181890000002,0.12568386739999998,0.0568295813]],[[27749565,13838477,13911088,24.5976082172601,24.9314069236505,24.2580664163534,77.8912115153135],[0.0635441,0.1066868,0.0889602,0.0816883,0.10164580000000001,0.0916705,0.079569,0.0970443,0.1046451,0.13356859999999998,0.09269619999999999,0.0936646,0.09194050000000001,0.0722027,0.0896342,0.0993397,0.061379399999999994,0.0916921,0.0828748,0.043487,0.0391652,0.05173029999999999,0.0507104,0.0336168,0.0554176,0.06918260000000001,0.066553,0.0686232,0.07097,0.0356915,0.0756028,0.0430155,0.0420597,0.06085890000000001,0.0609348,0.083607,0.079871,0.063388,0.0866719,0.07110419999999999,0.11604289999999999,0.0439268,0.0659694,0.046840599999999996,0.0340002,0.09966620000000001,0.037104700000000004,0.0638918,0.0462334,0.0467053,0.054563799999999996,0.0463275,0.048099199999999995,0.051574699999999994,0.0499415,0.0287639,0.0520332,0.0443779,0.0334986,0.043161,0.047440500000000003,0.0179186,0.0620127,0.0219074,0.0411669,0.0495684,0.0315231,0.0275056,0.0157341,0.0113926,0.024991,0.012811300000000001,0.017529700000000002,0.0103093,0.025329200000000003,0.0988836],[0.0767078,0.0679554,0.1064493,0.0915063,0.0860792,0.0785728,0.0892471,0.0687886,0.1055313,0.0921839,0.0659624,0.11451599999999999,0.0910735,0.1279864,0.0714669,0.0873929,0.09284529999999999,0.059575199999999995,0.1093534,0.0501142,0.052829,0.041160600000000006,0.0633309,0.0616121,0.0621781,0.0621598,0.0638378,0.0703724,0.0742589,0.048523,0.0735727,0.08988159999999999,0.0740614,0.0991105,0.148909,0.12269959999999999,0.1020624,0.0737742,0.09468170000000001,0.069129,0.0933744,0.0957472,0.0793112,0.0581121,0.0767528,0.1031739,0.1202133,0.0626926,0.0959522,0.059430300000000005,0.1202145,0.0611707,0.0480779,0.0383338,0.053287600000000004,0.0849878,0.05245300000000001,0.0660183,0.025419000000000004,0.0137567,0.0762322,0.0490294,0.0463194,0.0566921,0.0353006,0.0730591,0.034669,0.0271638,0.0309785,0.0152756,0.0478111,0.0177234,0.026930199999999998,0.0396318,0.0194934,0.1683044],[0.08240677231,0.15617586288000002,0.08313427985,0.08880472244,0.11746768624,0.11606053513,0.08869047591,0.14033976966,0.09864266742,0.14413733717,0.13979533545,0.08136479062999999,0.10042504443,0.056119890260000006,0.12476592788,0.11307689939000001,0.06576425631,0.15310649297,0.07539063496000001,0.0863228648,0.07374883377,0.12502316773,0.07965418065999999,0.054277215180000005,0.08866198801,0.11071704075,0.10370911384999999,0.09700537564,0.09507218864,0.07317190382,0.10222294398000001,0.04760815804,0.05649388631,0.061084585270000005,0.04070723846,0.0677839217,0.07784855284,0.08547315576,0.0910624789,0.10232038799000001,0.12362831435999999,0.045638428599999996,0.0827437523,0.08018314344000001,0.04406709707,0.09609598687000001,0.03070461129,0.10138087623,0.04793228073,0.07817815948,0.04515178793,0.07533947903,0.09952210692999999,0.13383880063,0.09323148892000001,0.0336680824,0.09868187701,0.06686973601,0.13109779715,0.31210766186,0.06190674968,0.03635588278,0.13318181034,0.03844107214,0.1160094254,0.06749285214,0.09045129791999999,0.10072975952,0.05052527888,0.07419109314,0.051997456129999994,0.07190736263,0.0647533294,0.025876919720000002,0.12925908492,0.058446162010000004]],[[27773083,14068521,13704562,26.031249743982,26.4622397434507,25.5923334000026,66.9928635958906],[0.0635441,0.1066868,0.0889602,0.0816883,0.10164580000000001,0.0916705,0.079569,0.0970443,0.1046451,0.13356859999999998,0.09269619999999999,0.0936646,0.09194050000000001,0.0722027,0.0896342,0.0993397,0.061379399999999994,0.0916921,0.0828748,0.043487,0.0391652,0.05173029999999999,0.0507104,0.0336168,0.0554176,0.06918260000000001,0.066553,0.0686232,0.07097,0.0356915,0.0756028,0.0430155,0.0420597,0.06085890000000001,0.0609348,0.083607,0.079871,0.063388,0.0866719,0.07110419999999999,0.11604289999999999,0.0439268,0.0659694,0.046840599999999996,0.0340002,0.09966620000000001,0.037104700000000004,0.0638918,0.0462334,0.0467053,0.054563799999999996,0.0463275,0.048099199999999995,0.051574699999999994,0.0499415,0.0287639,0.0520332,0.0443779,0.0334986,0.043161,0.047440500000000003,0.0179186,0.0620127,0.0219074,0.0411669,0.0495684,0.0315231,0.0275056,0.0157341,0.0113926,0.024991,0.012811300000000001,0.017529700000000002,0.0103093,0.025329200000000003,0.0988836],[0.0767078,0.0679554,0.1064493,0.0915063,0.0860792,0.0785728,0.0892471,0.0687886,0.1055313,0.0921839,0.0659624,0.11451599999999999,0.0910735,0.1279864,0.0714669,0.0873929,0.09284529999999999,0.059575199999999995,0.1093534,0.0501142,0.052829,0.041160600000000006,0.0633309,0.0616121,0.0621781,0.0621598,0.0638378,0.0703724,0.0742589,0.048523,0.0735727,0.08988159999999999,0.0740614,0.0991105,0.148909,0.12269959999999999,0.1020624,0.0737742,0.09468170000000001,0.069129,0.0933744,0.0957472,0.0793112,0.0581121,0.0767528,0.1031739,0.1202133,0.0626926,0.0959522,0.059430300000000005,0.1202145,0.0611707,0.0480779,0.0383338,0.053287600000000004,0.0849878,0.05245300000000001,0.0660183,0.025419000000000004,0.0137567,0.0762322,0.0490294,0.0463194,0.0566921,0.0353006,0.0730591,0.034669,0.0271638,0.0309785,0.0152756,0.0478111,0.0177234,0.026930199999999998,0.0396318,0.0194934,0.1683044],[0.08503916535,0.16116472779,0.08578991231000001,0.0916414909,0.12122006133,0.11976796032999999,0.0915235949,0.14482276812,0.10179369814000001,0.14874164471,0.14426094256,0.08396389872,0.10363301120999999,0.057912577980000005,0.12875143722,0.11668901566,0.06786502261,0.15799731026,0.07779890527,0.08908035308,0.07610465856000001,0.12901689431000002,0.08219864521,0.05601104069,0.09149419698,0.11425377395,0.10702198658999999,0.10010410488999999,0.09810916438,0.07550929921,0.10548834266,0.0491289479,0.05829852092,0.06303586467,0.04200758609,0.06994920397,0.08033533861,0.08820350101999999,0.09397136889999999,0.10558889942000001,0.12757748389,0.04709629764,0.08538690978999999,0.08274450512,0.04547477166,0.0991656667,0.031685436080000004,0.104619376,0.04946342433,0.08067547417000001,0.04659411177,0.07774611522,0.10270123037000001,0.13811413283,0.09620966553,0.03474357199,0.10183416024,0.06900581564,0.13528557103,0.32207759532,0.06388429221,0.03751723118,0.13743615571,0.03966902959,0.11971521796,0.06964883652000001,0.09334066442,0.10394746008,0.052139252930000005,0.07656104541,0.05365845725,0.07420436366,0.06682180277000001,0.026703529250000003,0.13338812317999998,0.0603131599]],[[27763227,14197178,13566049,27.1801825364803,27.2072646746751,27.152230557176,58.6206806491801],[0.0635441,0.1066868,0.0889602,0.0816883,0.10164580000000001,0.0916705,0.079569,0.0970443,0.1046451,0.13356859999999998,0.09269619999999999,0.0936646,0.09194050000000001,0.0722027,0.0896342,0.0993397,0.061379399999999994,0.0916921,0.0828748,0.043487,0.0391652,0.05173029999999999,0.0507104,0.0336168,0.0554176,0.06918260000000001,0.066553,0.0686232,0.07097,0.0356915,0.0756028,0.0430155,0.0420597,0.06085890000000001,0.0609348,0.083607,0.079871,0.063388,0.0866719,0.07110419999999999,0.11604289999999999,0.0439268,0.0659694,0.046840599999999996,0.0340002,0.09966620000000001,0.037104700000000004,0.0638918,0.0462334,0.0467053,0.054563799999999996,0.0463275,0.048099199999999995,0.051574699999999994,0.0499415,0.0287639,0.0520332,0.0443779,0.0334986,0.043161,0.047440500000000003,0.0179186,0.0620127,0.0219074,0.0411669,0.0495684,0.0315231,0.0275056,0.0157341,0.0113926,0.024991,0.012811300000000001,0.017529700000000002,0.0103093,0.025329200000000003,0.0988836],[0.0767078,0.0679554,0.1064493,0.0915063,0.0860792,0.0785728,0.0892471,0.0687886,0.1055313,0.0921839,0.0659624,0.11451599999999999,0.0910735,0.1279864,0.0714669,0.0873929,0.09284529999999999,0.059575199999999995,0.1093534,0.0501142,0.052829,0.041160600000000006,0.0633309,0.0616121,0.0621781,0.0621598,0.0638378,0.0703724,0.0742589,0.048523,0.0735727,0.08988159999999999,0.0740614,0.0991105,0.148909,0.12269959999999999,0.1020624,0.0737742,0.09468170000000001,0.069129,0.0933744,0.0957472,0.0793112,0.0581121,0.0767528,0.1031739,0.1202133,0.0626926,0.0959522,0.059430300000000005,0.1202145,0.0611707,0.0480779,0.0383338,0.053287600000000004,0.0849878,0.05245300000000001,0.0660183,0.025419000000000004,0.0137567,0.0762322,0.0490294,0.0463194,0.0566921,0.0353006,0.0730591,0.034669,0.0271638,0.0309785,0.0152756,0.0478111,0.0177234,0.026930199999999998,0.0396318,0.0194934,0.1683044],[0.08669306385,0.1642991671,0.08745841185,0.09342379585,0.12357763008,0.12209728765000001,0.09330360693,0.14763937807,0.10377345,0.15163447160000001,0.14706662576,0.08559688473,0.10564853525,0.059038900490000004,0.1312554812,0.11895846161000001,0.06918490692,0.16107014750999998,0.07931199036,0.09081284731,0.07758479281,0.13152610108,0.08379729938,0.05710038083,0.09327363726,0.11647585767999999,0.10910342170000001,0.10205099641,0.10001725696,0.07697785452,0.10753995044,0.050084440509999995,0.05943234951,0.06426182829,0.04282457769,0.07130962283,0.08189775395,0.08991894164,0.09579898687,0.10764246288999998,0.13005869604,0.0480122579,0.08704757146,0.08435377554,0.04635919541,0.10109430684000001,0.032301675610000004,0.10665408353000001,0.05042542206,0.0822445047,0.047500305189999995,0.07925817361000001,0.10469863252,0.14080026877000001,0.09808081538999999,0.035419288189999995,0.10381469903,0.07034788685,0.13791669521,0.3283415756,0.06512675661,0.03824689136,0.1401091059,0.04044053939,0.12204351951,0.07100341363,0.09515601602,0.10596909973999999,0.05315329196,0.07805005578,0.05470204278,0.0756475397,0.06812139784,0.02722287733,0.13598234452,0.061486170529999995]],[[27754352,14075999,13678353,29.1168227998273,29.25251358929,28.974780426636,50.90167162031],[0.0635441,0.1066868,0.0889602,0.0816883,0.10164580000000001,0.0916705,0.079569,0.0970443,0.1046451,0.13356859999999998,0.09269619999999999,0.0936646,0.09194050000000001,0.0722027,0.0896342,0.0993397,0.061379399999999994,0.0916921,0.0828748,0.043487,0.0391652,0.05173029999999999,0.0507104,0.0336168,0.0554176,0.06918260000000001,0.066553,0.0686232,0.07097,0.0356915,0.0756028,0.0430155,0.0420597,0.06085890000000001,0.0609348,0.083607,0.079871,0.063388,0.0866719,0.07110419999999999,0.11604289999999999,0.0439268,0.0659694,0.046840599999999996,0.0340002,0.09966620000000001,0.037104700000000004,0.0638918,0.0462334,0.0467053,0.054563799999999996,0.0463275,0.048099199999999995,0.051574699999999994,0.0499415,0.0287639,0.0520332,0.0443779,0.0334986,0.043161,0.047440500000000003,0.0179186,0.0620127,0.0219074,0.0411669,0.0495684,0.0315231,0.0275056,0.0157341,0.0113926,0.024991,0.012811300000000001,0.017529700000000002,0.0103093,0.025329200000000003,0.0988836],[0.0767078,0.0679554,0.1064493,0.0915063,0.0860792,0.0785728,0.0892471,0.0687886,0.1055313,0.0921839,0.0659624,0.11451599999999999,0.0910735,0.1279864,0.0714669,0.0873929,0.09284529999999999,0.059575199999999995,0.1093534,0.0501142,0.052829,0.041160600000000006,0.0633309,0.0616121,0.0621781,0.0621598,0.0638378,0.0703724,0.0742589,0.048523,0.0735727,0.08988159999999999,0.0740614,0.0991105,0.148909,0.12269959999999999,0.1020624,0.0737742,0.09468170000000001,0.069129,0.0933744,0.0957472,0.0793112,0.0581121,0.0767528,0.1031739,0.1202133,0.0626926,0.0959522,0.059430300000000005,0.1202145,0.0611707,0.0480779,0.0383338,0.053287600000000004,0.0849878,0.05245300000000001,0.0660183,0.025419000000000004,0.0137567,0.0762322,0.0490294,0.0463194,0.0566921,0.0353006,0.0730591,0.034669,0.0271638,0.0309785,0.0152756,0.0478111,0.0177234,0.026930199999999998,0.0396318,0.0194934,0.1683044],[0.08524739676000001,0.16155936429,0.08599998204,0.09186588912,0.12151688721000001,0.12006123050999999,0.09174770443,0.14517738883,0.10204295559000001,0.14910586138999998,0.14461418755,0.08416949718,0.1038867725,0.058054385789999996,0.12906670482,0.11697474658,0.06803120051,0.15838419085,0.07798940778999999,0.08929847996,0.07629101246,0.12933281191999998,0.08239992117,0.056148192289999996,0.09171823453,0.1145335418,0.10728404630999999,0.10034922511,0.09834939968,0.07569419529,0.10574664702,0.04924924765,0.05844127377,0.06319021764,0.04211044809,0.07012048531000001,0.08053205197999999,0.08841948079,0.09420147217,0.10584745,0.12788987689,0.04721162013,0.08559599271,0.08294711769999999,0.0455861236,0.09940848901,0.03176302272,0.10487555256,0.04958454309,0.08087302042,0.04670820459,0.07793648848,0.10295271005,0.13845232642,0.09644524963,0.03482864694,0.10208351676,0.06917478694,0.13561683846,0.32286625161,0.06404072268,0.03760909786,0.13777268917000002,0.03976616528,0.12000835899,0.06981938236,0.09356922331999999,0.10420199135,0.05226692387,0.07674851685,0.053789848200000004,0.0743860644,0.06698542618,0.026768916929999997,0.13371474441,0.060460845900000004]]]
+[[1043353182,539695335,503657847,28.24,27.51,29.01,51.78], 
+[0.0085318435343400800,0.0088774027062416400,0.0094714560875224100,0.0101640893891056000,0.0108249758696292000,0.0113773174183149000,0.0117954271696904000,0.0120868766491156000,0.0122726357410028000,0.0123620512208843000,0.0124092312631522000,0.0123929933989534000,0.0123170841477326000,0.0121788940682660000,0.0119848553256476000,0.0117367932349178000,0.0114334768233470000,0.0110840887113746000,0.0107005336950161000,0.0102889073661635000,0.0098746874267631800,0.0094727992165526500,0.0091066817836288100,0.0087853078056091400,0.0085176451289595700,0.0082955898249666400,0.0081021034227657000,0.0079410857437656400,0.0078129432771183200,0.0077041517746791700,0.0076076629996558600,0.0075063773837400400,0.0074212932416191700,0.0073577960797626100,0.0073199937766648000,0.0072872222696609900,0.0072249036551971000,0.0071436496521446000,0.0070535868312601700,0.0069442503777637000,0.0068032069975035000,0.0066093294501292200,0.0063936409488174700,0.0061768176372133200,0.0059737878831400300,0.0057724507581444500,0.0055456647375558400,0.0053139201135624000,0.0050952395722700100,0.0048873227886988200,0.0046839194356973000,0.0044709211871979300,0.0042683374557587400,0.0040886232834079100,0.0039394433696905200,0.0038097165950705600,0.0036797119436340500,0.0035595490798891500,0.0034559622921317600,0.0033586853733251200,0.0032515219944251700,0.0031141174480235800,0.0029601056879342400,0.0027997057390388600,0.0026388958299152400,0.0024706340765107900,0.0022829305753990900,0.0020900571013307600,0.0019037152224417700,0.0017251049256371200,0.0015499961243315000,0.0013709889555399900,0.0011982773790103000,0.0010401790931594200,0.0009015220565900700,0.0007812832602556460,0.0006749752626942340,0.0005833580512023270,0.0005061657847658260,0.0004399544894590220,0.0003808034210932470,0.0003273788998735520,0.0002794993115460400,0.0002369793671257210,0.0001995479850687680,0.0001668101805315270,0.0001383186716039340,0.0001138075253115040,0.0000929924552954457,0.0000755223736670678,0.0000610047525059652,0.0000490638302928227,0.0000396489252832302,0.0000330891826825378,0.0000281195284929135,0.0001070412478036410],
+[0.0071192629623232800,0.0072839317935624000,0.0075693293189514500,0.0079091875498352200,0.0082360857829773300,0.0084979038169712600,0.0086893986451354100,0.0088353986277422900,0.0089633895658643000,0.0090878796761182500,0.0092337667384807200,0.0093792123312149900,0.0095192745279032600,0.0096463104169553400,0.0097588790000607600,0.0098544841215461300,0.0099282199747865200,0.0099763812248601700,0.0099957597226035700,0.0099801585489242500,0.0099375446097938400,0.0098709094654945100,0.0097926096630396900,0.0097014318757340600,0.0095968423362564000,0.0094699215837397400,0.0093120985109391200,0.0091337644254482100,0.0089445678055607600,0.0087423328014590000,0.0085321350430430500,0.0083104164267343500,0.0081040369311665900,0.0079207770770160300,0.0077675098774536000,0.0076284130950824500,0.0074765938644635800,0.0073237591351693500,0.0071772210497332700,0.0070244435483804400,0.0068550745015274400,0.0066526057090785200,0.0064404461001358000,0.0062305720357510500,0.0060342707683446500,0.0058408705961082800,0.0056264339860478000,0.0054065565344313600,0.0051920462742280000,0.0049765895152515200,0.0047558832991186200,0.0045207003388048400,0.0042899070487080500,0.0040745089551306800,0.0038817655555785800,0.0037053224400247200,0.0035332134254902200,0.0033727187145046400,0.0032284905944481100,0.0030937679725170100,0.0029582187048090100,0.0028081834596732200,0.0026513461722362800,0.0024926069125082600,0.0023353006048059200,0.0021744630786167700,0.0020021420693961100,0.0018298895084829500,0.0016671380010344600,0.0015153637133401800,0.0013712248188900700,0.0012284616818527500,0.0010934572254154500,0.0009707133813897040,0.0008622603131043950,0.0007661899219731710,0.0006786114871838230,0.0006005435486257860,0.0005322956370150040,0.0004715229254612440,0.0004158721219136000,0.0003645948643149670,0.0003176904909297340,0.0002751152300590630,0.0002367021156783720,0.0002021700726755280,0.0001712214234345020,0.0001437557719387760,0.0001197138111336940,0.0000989925882290494,0.0000814263200020563,0.0000667991474109870,0.0000549164545704749,0.0000455518367647343,0.0000384480445034309,0.0001437755914949950],
+[1.284165231,1.3059697282,1.3408259576,1.3770498469,1.4083776842,1.4346340126,1.4545779876,1.4658887137,1.4671638972,1.457608962,1.4400548643,1.4158684686,1.3864911961,1.3528812542,1.3159697978,1.27622903,1.2340137083,1.1905291022,1.1471037258,1.1047013276,1.0647737249,1.0283340659,0.9964942039,0.9703629438,0.9510519527,0.9386721807,0.932316307,0.9316292996,0.9359838821,0.9443012277,0.9554470086,0.9678781103,0.9812761433,0.9953894103,1.0098153246,1.0236249732,1.035479081,1.0451994053,1.0530930686,1.0593183708,1.0634438538,1.0645809137,1.0637641578,1.0623066923,1.0608111193,1.0589993944,1.0561690641,1.0531914677,1.0515722425,1.052330754,1.0553372965,1.0597522653,1.0661637808,1.0752634417,1.0874733411,1.1017415355,1.1159815378,1.1309096828,1.1470504754,1.1633078085,1.1777943775,1.1882903501,1.1963378464,1.2035708256,1.2108560457,1.2175013424,1.2218302494,1.2239011525,1.223611334,1.2198647763,1.2112533925,1.1958739376,1.1742717733,1.1482333683,1.1203430352,1.0926602484,1.0658097999,1.040887396,1.0189501507,0.9998112064,0.9811922123,0.9621730704,0.9427349027,0.9230154312,0.903354613,0.8841353287,0.8656369091,0.8483181293,0.8323701879,0.8174967062,0.8028084248,0.7870522949,0.7736454722,0.7783827557,0.7836945697,0.7977724963],
+[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,"95+"]]

File examples/kcp_pyramid_by_age.php

     <link href="colorpicker/jquery.colorpicker.css" rel="stylesheet" type="text/css"/>
 
     <style type="text/css">
+
+        html {
+            width: 100%;
+            height: 100%;
+        }
         
         body {
             width: 98%;
-            height: 98%;
-            padding: 12px;
+            height: 97%;
+            margin: 6px;
         }
 
         .quintile-outer-container {
-            width: 96%;
-            height: 96%;
+            width: 97%;
+            height: 97%;
             margin: auto;
         }
 
         .jqplot-chart {
-            width: 800px;
-            height: 800px;
+/*            width: 400px;
+            height: 400px;*/
         }
 
         .quintile-toolbar .ui-icon {
             margin-top: 15px;
         }
 
-        td.stats-cell {
-            padding-left: 20px;
-            padding-top: 40px;
-            vertical-align: top;
-
-        }
-
-        td.stats-cell div.input {
+        div.stats-cell div.input {
             font-size: 0.7em;
             margin-top: 1.5em;
         }
 
-        td.controls, td.controls select {
+        div.content-container {
+            padding-left: 230px;   /* LC width */
+            padding-right: 300px;  /* RC width */
+            height: 100%;
+        }
+
+        div.content-container .column {
+            position: relative;
+            float: left;
+        }
+
+        div.controls {
+            width: 170px;          /* LC width */
+            right: 230px;          /* LC width */
+            padding-left: 30px;
+            padding-right: 30px;
+            margin-left: -100%;
+            margin-top: 30px;
+        }
+
+        div.chart-cell {
+            width: 100%;
+            height: 100%;
+        }
+
+        div.stats-cell {
+            width: 270px;          /* RC width */
+            margin-right: -300px;  /* RC width */
+            padding-right: 30px;
+            margin-top: 30px;
+        }
+
+        div.controls, div.controls select {
             font-size: 0.8em;
         }
 
-        td.controls li {
+        div.controls li {
             list-style-type: none;
         }
 
-        td.controls ul {
+        div.controls ul {
             margin-top: 0.5em;
             padding-left: 0.2em;
         }
             padding: 3px;
         }
 
+        div.quintile-content {
+            width: 100%;
+            height: 100%;
+        }
+
+
         @media print {
-            td.stats-cell {
+            div.stats-cell {
                 vertical-align: top;
                 padding-top: 35px;
             }
             <span class="quintile-title">Income Level:</span>
         </div>
         <div class="quintile-content ui-widget-content ui-corner-bottom">
-            <table class="quintile-display">
-                <tr>
 
-                    <td class="controls">
-                        <table>
-                            <tr>
-                                <td>
-                                    Axes:
-                                </td>
-                                <td>
-                                    <select name="axisPosition">
-                                        <option value="both">Left &amp; Right</option>
-                                        <option value = "left">Left</option>
-                                        <option value = "right">Right</option>
-                                        <option value = "mid">Mid</option>
-                                    </select>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    Colors:
-                                </td>
-                                <td>
-                                    <ul>
-                                        <li><input class="color" type="color" id="colorMale" /> Male</li>
-                                        <li><input class="color" type="color" id="colorFemale" /> Female</li>
-                                        <li><input class="color" type="color" id="colorBackground"  /> Background</li>
-                                        <li><input class="color" type="color" id="colorPlotBands" /> Plot Bands</li>
-                                    </ul>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    Grids:
-                                </td>
-                                <td>
-                                    <ul>
-                                        <li><input name="gridsVertical" value="vertical" type="checkbox" />Vertical</li>
-                                        <li><input name="gridsHorizontal" value="horizontal" type="checkbox" />Horizontal</li>
-                                        <li><input name="showMinorTicks" value="true" type="checkbox" />Only major</li>
-                                        <li><input name="plotBands" value="true" type="checkbox" checked />Plot Bands</li>
-                                    </ul>
-                                </td>
-                            </tr>
-                            <tr>
-                                <td colspan="2">
-                                    <ul>
-                                        <li><input name="barPadding" value="2" type="checkbox" checked />Gap between bars</li>
-                                        <!-- value for showContour is speed at which to fade lines in/out -->
-                                        <li><input name="showContour" value="500" type="checkbox" />Comparison Line</li>
-                                    </ul>
-                                </td>
-                            </tr>
-                        </table>
-                    </td>
+            <div class="content-container">
 
 
-                    <td class="chart-cell">
-                        <div id="agesChart" class="jqplot-chart"></div>
-                    </td>
-                    <td class="stats-cell">
-                        <table class="stats-table">
-                        <colgroup>
-                            <col class="label">
-                            <col class="value">
-                        </colgroup>
-                        <tbody>
-                            <tr>
-                                <td class="ui-corner-tl">Mean Age:</td>
-                                <td class="quintile-value summary-meanAge ui-corner-tr"></td>
-                            </tr>
-                            <tr>
-                                <td>Sex Ratio:</td>
-                                <td class="quintile-value summary-sexRatio"></td>
-                            </tr>
-                            <tr>
-                                <td>Age Dependency Ratio:</td>
-                                <td class="quintile-value summary-ageDependencyRatio"></td>
-                            </tr>
-                            <tr>
-                                <td>Population, Total:</td>
-                                <td class="quintile-value summary-populationTotal"></td>
-                            </tr>
-                            <tr>
-                                <td>Population, Male:</td>
-                                <td class="quintile-value summary-populationMale"></td>
-                            </tr>
-                            <tr>
-                                <td class="ui-corner-bl">Population, Female:</td>
-                                <td class="quintile-value summary-populationFemale ui-corner-br"></td>
-                            </tr>
-                        </tbody>
-                        </table>
-                        <table class="highlighted-stats-table">
-                        <colgroup>
-                            <col class="label">
-                            <col class="value">
-                        </colgroup>
-                        <tbody>
-                            <tr class="tooltip-header">
-                                <td class="tooltip-header ui-corner-top" colspan="2">Highlighted Age: <span class="tooltip-item tooltipAge">&nbsp;</span></td>
-                            </tr>
-                            <tr>
-                                <td>Population, Male: </td>
-                                <td class="quintile-value"><span class="tooltip-item tooltipMale">&nbsp;</span></td>
-                            </tr>
-                            <tr>
-                                <td>Population, Female: </td>
-                                <td class="quintile-value"><span class="tooltip-item tooltipFemale">&nbsp;</span></td>
-                            </tr>
-                            <tr>
-                                <td class="ui-corner-bl">Sex Ratio: </td>
-                                <td class="quintile-value ui-corner-br"><span class="tooltip-item tooltipRatio">&nbsp;</span></td>
-                            </tr>
-                        <tbody>
-                        </table>
-                    </td>
-                </tr>
-            </table>
+            <div class="chart-cell column">
+                <div id="agesChart" class="jqplot-chart"></div>
+            </div>
+
+            <div class="controls column">
+                <table>
+                    <tr>
+                        <td>
+                            Axes:
+                        </td>
+                        <td>
+                            <select name="axisPosition">
+                                <option value="both">Left &amp; Right</option>
+                                <option value = "left">Left</option>
+                                <option value = "right">Right</option>
+                                <option value = "mid">Mid</option>
+                            </select>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            Colors:
+                        </td>
+                        <td>
+                            <ul>
+                                <li><input class="color" type="color" id="colorMale" /> Male</li>
+                                <li><input class="color" type="color" id="colorFemale" /> Female</li>
+                                <li><input class="color" type="color" id="colorBackground"  /> Background</li>
+                                <li><input class="color" type="color" id="colorPlotBands" /> Plot Bands</li>
+                            </ul>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            Grids:
+                        </td>
+                        <td>
+                            <ul>
+                                <li><input name="gridsVertical" value="vertical" type="checkbox" />Vertical</li>
+                                <li><input name="gridsHorizontal" value="horizontal" type="checkbox" />Horizontal</li>
+                                <li><input name="showMinorTicks" value="true" type="checkbox" />Only major</li>
+                                <li><input name="plotBands" value="true" type="checkbox" checked />Plot Bands</li>
+                            </ul>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="2">
+                            <ul>
+                                <li><input name="barPadding" value="2" type="checkbox" checked />Gap between bars</li>
+                                <!-- value for showContour is speed at which to fade lines in/out -->
+                                <li><input name="showContour" value="500" type="checkbox" />Comparison Line</li>
+                            </ul>
+                        </td>
+                    </tr>
+                </table>
+            </div>
+
+            <div class="stats-cell column">
+                <table class="stats-table">
+                <colgroup>
+                    <col class="label">
+                    <col class="value">
+                </colgroup>
+                <tbody>
+                    <tr>
+                        <td class="ui-corner-tl">Mean Age:</td>
+                        <td class="quintile-value summary-meanAge ui-corner-tr"></td>
+                    </tr>
+                    <tr>
+                        <td>Sex Ratio:</td>
+                        <td class="quintile-value summary-sexRatio"></td>
+                    </tr>
+                    <tr>
+                        <td>Age Dependency Ratio:</td>
+                        <td class="quintile-value summary-ageDependencyRatio"></td>
+                    </tr>
+                    <tr>
+                        <td>Population, Total:</td>
+                        <td class="quintile-value summary-populationTotal"></td>
+                    </tr>
+                    <tr>
+                        <td>Population, Male:</td>
+                        <td class="quintile-value summary-populationMale"></td>
+                    </tr>
+                    <tr>
+                        <td class="ui-corner-bl">Population, Female:</td>
+                        <td class="quintile-value summary-populationFemale ui-corner-br"></td>
+                    </tr>
+                </tbody>
+                </table>
+                <table class="highlighted-stats-table">
+                <colgroup>
+                    <col class="label">
+                    <col class="value">
+                </colgroup>
+                <tbody>
+                    <tr class="tooltip-header">
+                        <td class="tooltip-header ui-corner-top" colspan="2">Highlighted Age: <span class="tooltip-item tooltipAge">&nbsp;</span></td>
+                    </tr>
+                    <tr>
+                        <td>Population, Male: </td>
+                        <td class="quintile-value"><span class="tooltip-item tooltipMale">&nbsp;</span></td>
+                    </tr>
+                    <tr>
+                        <td>Population, Female: </td>
+                        <td class="quintile-value"><span class="tooltip-item tooltipFemale">&nbsp;</span></td>
+                    </tr>
+                    <tr>
+                        <td class="ui-corner-bl">Sex Ratio: </td>
+                        <td class="quintile-value ui-corner-br"><span class="tooltip-item tooltipRatio">&nbsp;</span></td>
+                    </tr>
+                <tbody>
+                </table>
+            </div>
+
+            </div>
+
         </div>
     </div> 
   
             $('div.quintile-toolbar').append('<div class="ui-icon ui-icon-image"></div><div class="ui-icon ui-icon-print"></div>');
         }
 
-        var quintileIndex = parseInt(<?php echo $_GET["qidx"]; ?>);
+        // for this demo, all data is same for each quintile.
+        // could do something like this to get the index of the quintile.
+        // <!-- var quintileIndex = parseInt(<?php echo $_GET["qidx"]; ?>); -->
 
         var male;
         var female;
         var summaryTable;
         var sexRatios;
-        quintiles = [];
-
-
-        // the "x" values from the data will go into the ticks array.  
-        // ticks should be strings for this case where we have values like "75+"
-        var ticks = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59", "60", "61", "62", "63", "64", "65", "66", "67", "68", "69", "70", "71", "72", "73", "74", "75+", ""];
-
+        jsondata = [];
 
         $.ajax({
             type: "GET",
                 //  1: male data
                 //  2: female data
                 //  3: ratios
-                quintiles = retdata;
+                jsondata = retdata;
             },
             error: function (xhr) { console.log("ERROR: ", xhr.statusText) }
         });
 
+
+        // the "x" values from the data will go into the ticks array.  
+        // ticks should be strings for this case where we have values like "75+"
+        var ticks = jsondata[4];
+
         $('td.summary-meanAge').each(function(index) {
-            $(this).html($.jqplot.sprintf('%5.2f', quintiles[quintileIndex][0][3]));
+            $(this).html($.jqplot.sprintf('%5.2f', jsondata[0][3]));
         });
 
         $('td.summary-sexRatio').each(function(index) {
-            $(this).html($.jqplot.sprintf('%5.2f', quintiles[quintileIndex][3][0]));
+            $(this).html($.jqplot.sprintf('%5.2f', jsondata[3][0]));
         });
 
         $('td.summary-ageDependencyRatio').each(function(index) {
-            $(this).html($.jqplot.sprintf('%5.2f', quintiles[quintileIndex][0][6]));
+            $(this).html($.jqplot.sprintf('%5.2f', jsondata[0][6]));
         });
 
         $('td.summary-populationTotal').each(function(index) {
-            $(this).html($.jqplot.sprintf("%'d", quintiles[quintileIndex][0][0]));
+            $(this).html($.jqplot.sprintf("%'d", jsondata[0][0]));
         });
 
         $('td.summary-populationMale').each(function(index) {
-            $(this).html($.jqplot.sprintf("%'d", quintiles[quintileIndex][0][1]));
+            $(this).html($.jqplot.sprintf("%'d", jsondata[0][1]));
         });
 
         $('td.summary-populationFemale').each(function(index) {
-            $(this).html($.jqplot.sprintf("%'d", quintiles[quintileIndex][0][2]));
+            $(this).html($.jqplot.sprintf("%'d", jsondata[0][2]));
         });
         
         // These two variables should be removed outside of the jqplot.com example environment.
         var plotOptions = {
             // We set up a customized title which acts as labels for the left and right sides of the pyramid.
             title: {
-                text: '<span style="position:relative;left:25%;">Male</span><span style="position:relative;left:50%;">Female</span>',
+                text: '<span style="margin-left:25%;">Male</span><span style="margin-left:33%;">Female</span>',
                 textAlign: 'left'
             },
             // by default, the series will use the green color scheme.
             seriesDefaults: {
                 renderer: $.jqplot.PyramidRenderer,
                 rendererOptions: {
-                    barPadding: 2,
-                    offsetBars: true
+                    barPadding: 2
                 },
                 yaxis: "yaxis",
                 shadow: false
                 xaxis: {
                     tickOptions: {
                         formatter: $.jqplot.PercentTickFormatter,
-                        formatString: '%d%%'
+                        formatString: '%.1f%%'
                     }
                 },
                 yaxis: {
                     showMinorTicks: true,
                     ticks: ticks,
                     rendererOptions: {
-                        tickSpacingFactor: 15
+                        tickSpacingFactor: 12,
+                        category: true
+                    }
+                },
+                yMidAxis: {
+                    label: "Age",
+                    // include empty tick options, they will be used
+                    // as users set options with plot controls.
+                    tickOptions: {},
+                    showMinorTicks: true,
+                    ticks: ticks,
+                    rendererOptions: {
+                        tickSpacingFactor: 12,
+                        category: true
                     }
                 },
                 y2axis: {
                     showMinorTicks: true,
                     ticks: ticks,
                     rendererOptions: {
-                        tickSpacingFactor: 15
+                        tickSpacingFactor: 12,
+                        category: true
                     }
                 }
             }
         };
 
-        // $('#agesChart').jqplot([quintiles[quintileIndex][1], quintiles[quintileIndex][2]], plotOptions);
+        // resize the chart container to fill the space
+        $('#agesChart').height($('div.chart-cell').height()*0.96);
+        $('#agesChart').width($('div.chart-cell').width()*0.97);
+
+        // $('#agesChart').jqplot([jsondata[1], jsondata[2]], plotOptions);
         $.jqplot.config.addDomReference = true;
-        var plot1 = $.jqplot('agesChart', [quintiles[quintileIndex][1], quintiles[quintileIndex][2]], plotOptions);
+        var plot1 = $.jqplot('agesChart', [jsondata[1], jsondata[2]], plotOptions);
+
+        $(window).resize (function(event, ui) {
+            // pass in resetAxes: true option to get rid of old ticks and axis properties
+            // which should be recomputed based on new plot size.
+            $('#agesChart').height($('div.chart-cell').height()*0.96);
+            $('#agesChart').width($('div.chart-cell').width()*0.97);
+            plot1.replot( { resetAxes: true } );
+        });
 
         // initialize form elements
         // set these before attaching event handlers.
         // it clear exactly which elements they are binging to/operating on
         //////
 
+        $("select[name=axisPosition]").change(function(){ 
+            // this refers to the html element we are binding to.
+            // $(this) is jQuery object on that element.
+
+            var opts = {series:[{}, {}, {}, {}]};
+
+            switch ($(this).val()) {
+                case "both":
+                    opts.series[0].yaxis = "yaxis";
+                    opts.series[1].yaxis = "y2axis";
+                    opts.series[2].yaxis = "yaxis";
+                    opts.series[3].yaxis = "y2axis";
+                    break;
+                case "left":
+                    opts.series[0].yaxis = "yaxis";
+                    opts.series[1].yaxis = "yaxis";
+                    opts.series[2].yaxis = "yaxis";
+                    opts.series[3].yaxis = "yaxis";
+                    break;
+                case "right":
+                    opts.series[0].yaxis = "y2axis";
+                    opts.series[1].yaxis = "y2axis";
+                    opts.series[2].yaxis = "y2axis";
+                    opts.series[3].yaxis = "y2axis";
+                    break;
+                case "mid":
+                    opts.series[0].yaxis = "yMidAxis";
+                    opts.series[1].yaxis = "yMidAxis";
+                    opts.series[2].yaxis = "yMidAxis";
+                    opts.series[3].yaxis = "yMidAxis";
+                    break;
+                default:
+                    break;
+                    
+            }
+
+            plot1.replot(opts); 
+        });
+
         // bind to the data highlighting event to make custom tooltip:
         $(".jqplot-target").each(function(index){
             $(this).bind("jqplotDataHighlight", function(evt, seriesIndex, pointIndex, data) {
                 // Here, assume first series is male poulation and second series is female population.
                 // Adjust series indices as appropriate.
                 var plot = $(this).data('jqplot');
-                var malePopulation = Math.abs(plot.series[0].data[pointIndex][1]) * quintiles[quintileIndex][0][1];
-                var femalePopulation = Math.abs(plot.series[1].data[pointIndex][1]) * quintiles[quintileIndex][0][2];
-                var malePopulation = quintiles[quintileIndex][1][pointIndex] * quintiles[quintileIndex][0][1];
-                var femalePopulation = quintiles[quintileIndex][2][pointIndex] * quintiles[quintileIndex][0][2];
+                var malePopulation = Math.abs(plot.series[0].data[pointIndex][1]) * jsondata[0][1];
+                var femalePopulation = Math.abs(plot.series[1].data[pointIndex][1]) * jsondata[0][2];
+                var malePopulation = jsondata[1][pointIndex] * jsondata[0][1];
+                var femalePopulation = jsondata[2][pointIndex] * jsondata[0][2];
                 // var ratio = femalePopulation / malePopulation * 100;
-                var ratio = quintiles[quintileIndex][3][pointIndex+1];
+                var ratio = jsondata[3][pointIndex];
 
-                $(this).closest('table').find('.tooltipMale').stop(true, true).fadeIn(350).html($.jqplot.sprintf("%'d", malePopulation));
-                $(this).closest('table').find('.tooltipFemale').stop(true, true).fadeIn(350).html($.jqplot.sprintf("%'d", femalePopulation));
-                $(this).closest('table').find('.tooltipRatio').stop(true, true).fadeIn(350).html($.jqplot.sprintf('%5.2f', ratio));
+                $('.tooltipMale').stop(true, true).fadeIn(350).html($.jqplot.sprintf("%'d", malePopulation));
+                $('.tooltipFemale').stop(true, true).fadeIn(350).html($.jqplot.sprintf("%'d", femalePopulation));
+                $('.tooltipRatio').stop(true, true).fadeIn(350).html($.jqplot.sprintf('%5.2f', ratio));
 
                 // Since we don't know which axis is rendererd and acive with out a little extra work,
                 // just use the supplied ticks array to get the age label.
-                $(this).closest('table').find('.tooltipAge').stop(true, true).fadeIn(350).html(ticks[pointIndex]);
+                $('.tooltipAge').stop(true, true).fadeIn(350).html(ticks[pointIndex]);
             });
         });
 
         $(".jqplot-target").each(function() {
             $(this).bind("jqplotDataUnhighlight", function(evt, seriesIndex, pointIndex, data) {
                 // clear out all the tooltips.
-                $(this).closest('table').find(".tooltip-item").fadeOut(250);
+                $(".tooltip-item").fadeOut(250);
             });
         });