This scatterplot is constructed from adjusting block size, block rows in Locutus.
Locutus was given a 1000x1000 DOM element to parse whose content changed by 25%. 190 tests were performed and each test utilizes 4 web workers to process the diff.
Block Size is represented by Color and Y axis.
Block Rows (or how many rows of blocks a worker is assigned) is shown by Radius.
Duration represents the time each test took to complete and is displayed in seconds.
| [{"id":1367525477983,"percentDifferent":0.25,"options":{"blockSize":10,"blockRows":1,"workers":4},"diffImages":2500,"duration":5101},{"id":1367525483084,"percentDifferent":0.25,"options":{"blockSize":10,"blockRows":3,"workers":4},"diffImages":2500,"duration":4168},{"id":1367525487253,"percentDifferent":0.25,"options":{"blockSize":10,"blockRows":5,"workers":4},"diffImages":2500,"duration":4145},{"id":1367525491398,"percentDifferent":0.25,"options":{"blockSize":10,"blockRows":7,"workers":4},"diffImages":2500,"duration":4352},{"id":1367525495751,"percentDifferent":0.25,"options":{"blockSize":10,"blockRows":9,"workers":4},"diffImages":2500,"duration":4237},{"id":1367525499989,"percentDifferent":0.25,"options":{"blockSize":10,"blockRows":11,"workers":4},"diffImages":2500,"duration":4269},{"id":1367525504258,"percentDifferent":0.25,"options":{"blockSize":10,"blockRows":13,"workers":4},"diffImages":2500,"duration":3602},{"id":1367525507860,"percentDifferent":0.25,"options":{"blockSize":10,"blockRows":15,"workers":4},"diffImages":2500,"duration":3984},{"id":1367525511844,"percentDifferent":0.25,"options":{"blockSize":10,"blockRows":17,"workers":4},"diffImages":2500,"duration":3975},{"id":1367525515820,"percentDifferent":0.25,"options":{"blockSize":10,"blockRows":19,"workers":4},"diffImages":2500,"duration":4084},{"id":1367525519904,"percentDifferent":0.25,"options":{"blockSize":15,"blockRows":1,"workers":4},"diffImages":1156,"duration":2493},{"id":1367525522397,"percentDifferent":0.25,"options":{"blockSize":15,"blockRows":3,"workers":4},"diffImages":1156,"duration":2024},{"id":1367525524422,"percentDifferent":0.25,"options":{"blockSize":15,"blockRows":5,"workers":4},"diffImages":1156,"duration":2240},{"id":1367525526662,"percentDifferent":0.25,"options":{"blockSize":15,"blockRows":7,"workers":4},"diffImages":1156,"duration":1950},{"id":1367525528612,"percentDifferent":0.25,"options":{"blockSize":15,"blockRows":9,"workers":4},"diffImages":1156,"duration":2086},{"id":1367525530698,"percentDifferent":0.25,"options":{"blockSize":15,"blockRows":11,"workers":4},"diffImages":1156,"duration":1989},{"id":1367525532687,"percentDifferent":0.25,"options":{"blockSize":15,"blockRows":13,"workers":4},"diffImages":1156,"duration":2030},{"id":1367525534717,"percentDifferent":0.25,"options":{"blockSize":15,"blockRows":15,"workers":4},"diffImages":1156,"duration":2053},{"id":1367525536771,"percentDifferent":0.25,"options":{"blockSize":15,"blockRows":17,"workers":4},"diffImages":1156,"duration":2000},{"id":1367525538772,"percentDifferent":0.25,"options":{"blockSize":15,"blockRows":19,"workers":4},"diffImages":1156,"duration":2035},{"id":1367525540807,"percentDifferent":0.25,"options":{"blockSize":20,"blockRows":1,"workers":4},"diffImages":676,"duration":1591},{"id":1367525542398,"percentDifferent":0.25,"options":{"blockSize":20,"blockRows":3,"workers":4},"diffImages":676,"duration":1149},{"id":1367525543547,"percentDifferent":0.25,"options":{"blockSize":20,"blockRows":5,"workers":4},"diffImages":676,"duration":1355},{"id":1367525544903,"percentDifferent":0.25,"options":{"blockSize":20,"blockRows":7,"workers":4},"diffImages":676,"duration":1294},{"id":1367525546197,"percentDifferent":0.25,"options":{"blockSize":20,"blockRows":9,"workers":4},"diffImages":676,"duration":1247},{"id":1367525547444,"percentDifferent":0.25,"options":{"blockSize":20,"blockRows":11,"workers":4},"diffImages":676,"duration":1185},{"id":1367525548629,"percentDifferent":0.25,"options":{"blockSize":20,"blockRows":13,"workers":4},"diffImages":676,"duration":1219},{"id":1367525549848,"percentDifferent":0.25,"options":{"blockSize":20,"blockRows":15,"workers":4},"diffImages":676,"duration":1236},{"id":1367525551084,"percentDifferent":0.25,"options":{"blockSize":20,"blockRows":17,"workers":4},"diffImages":572,"duration":1080},{"id":1367525552164,"percentDifferent":0.25,"options":{"blockSize":20,"blockRows":19,"workers":4},"diffImages":676,"duration":1272},{"id":1367525553436,"percentDifferent":0.25,"options":{"blockSize":25,"blockRows":1,"workers":4},"diffImages":400,"duration":1199},{"id":1367525554635,"percentDifferent":0.25,"options":{"blockSize":25,"blockRows":3,"workers":4},"diffImages":400,"duration":954},{"id":1367525555589,"percentDifferent":0.25,"options":{"blockSize":25,"blockRows":5,"workers":4},"diffImages":400,"duration":783},{"id":1367525556372,"percentDifferent":0.25,"options":{"blockSize":25,"blockRows":7,"workers":4},"diffImages":400,"duration":732},{"id":1367525557104,"percentDifferent":0.25,"options":{"blockSize":25,"blockRows":9,"workers":4},"diffImages":400,"duration":784},{"id":1367525557888,"percentDifferent":0.25,"options":{"blockSize":25,"blockRows":11,"workers":4},"diffImages":400,"duration":803},{"id":1367525558691,"percentDifferent":0.25,"options":{"blockSize":25,"blockRows":13,"workers":4},"diffImages":400,"duration":930},{"id":1367525559621,"percentDifferent":0.25,"options":{"blockSize":25,"blockRows":15,"workers":4},"diffImages":400,"duration":888},{"id":1367525560509,"percentDifferent":0.25,"options":{"blockSize":25,"blockRows":17,"workers":4},"diffImages":400,"duration":880},{"id":1367525561389,"percentDifferent":0.25,"options":{"blockSize":25,"blockRows":19,"workers":4},"diffImages":400,"duration":870},{"id":1367525562259,"percentDifferent":0.25,"options":{"blockSize":30,"blockRows":1,"workers":4},"diffImages":289,"duration":900},{"id":1367525563160,"percentDifferent":0.25,"options":{"blockSize":30,"blockRows":3,"workers":4},"diffImages":289,"duration":637},{"id":1367525563797,"percentDifferent":0.25,"options":{"blockSize":30,"blockRows":5,"workers":4},"diffImages":289,"duration":683},{"id":1367525564480,"percentDifferent":0.25,"options":{"blockSize":30,"blockRows":7,"workers":4},"diffImages":289,"duration":493},{"id":1367525564973,"percentDifferent":0.25,"options":{"blockSize":30,"blockRows":9,"workers":4},"diffImages":289,"duration":541},{"id":1367525565514,"percentDifferent":0.25,"options":{"blockSize":30,"blockRows":11,"workers":4},"diffImages":289,"duration":566},{"id":1367525566081,"percentDifferent":0.25,"options":{"blockSize":30,"blockRows":13,"workers":4},"diffImages":289,"duration":602},{"id":1367525566684,"percentDifferent":0.25,"options":{"blockSize":30,"blockRows":15,"workers":4},"diffImages":289,"duration":540},{"id":1367525567224,"percentDifferent":0.25,"options":{"blockSize":30,"blockRows":17,"workers":4},"diffImages":153,"duration":456},{"id":1367525567680,"percentDifferent":0.25,"options":{"blockSize":30,"blockRows":19,"workers":4},"diffImages":187,"duration":416},{"id":1367525568096,"percentDifferent":0.25,"options":{"blockSize":35,"blockRows":1,"workers":4},"diffImages":225,"duration":726},{"id":1367525568823,"percentDifferent":0.25,"options":{"blockSize":35,"blockRows":3,"workers":4},"diffImages":225,"duration":459},{"id":1367525569282,"percentDifferent":0.25,"options":{"blockSize":35,"blockRows":5,"workers":4},"diffImages":225,"duration":489},{"id":1367525569771,"percentDifferent":0.25,"options":{"blockSize":35,"blockRows":7,"workers":4},"diffImages":225,"duration":476},{"id":1367525570248,"percentDifferent":0.25,"options":{"blockSize":35,"blockRows":9,"workers":4},"diffImages":225,"duration":502},{"id":1367525570751,"percentDifferent":0.25,"options":{"blockSize":35,"blockRows":11,"workers":4},"diffImages":225,"duration":550},{"id":1367525571302,"percentDifferent":0.25,"options":{"blockSize":35,"blockRows":13,"workers":4},"diffImages":225,"duration":515},{"id":1367525571817,"percentDifferent":0.25,"options":{"blockSize":35,"blockRows":15,"workers":4},"diffImages":120,"duration":384},{"id":1367525572201,"percentDifferent":0.25,"options":{"blockSize":35,"blockRows":17,"workers":4},"diffImages":150,"duration":496},{"id":1367525572698,"percentDifferent":0.25,"options":{"blockSize":35,"blockRows":19,"workers":4},"diffImages":180,"duration":521},{"id":1367525573219,"percentDifferent":0.25,"options":{"blockSize":40,"blockRows":1,"workers":4},"diffImages":169,"duration":580},{"id":1367525573799,"percentDifferent":0.25,"options":{"blockSize":40,"blockRows":3,"workers":4},"diffImages":169,"duration":499},{"id":1367525574299,"percentDifferent":0.25,"options":{"blockSize":40,"blockRows":5,"workers":4},"diffImages":169,"duration":431},{"id":1367525574730,"percentDifferent":0.25,"options":{"blockSize":40,"blockRows":7,"workers":4},"diffImages":169,"duration":357},{"id":1367525575087,"percentDifferent":0.25,"options":{"blockSize":40,"blockRows":9,"workers":4},"diffImages":156,"duration":466},{"id":1367525575554,"percentDifferent":0.25,"options":{"blockSize":40,"blockRows":11,"workers":4},"diffImages":169,"duration":402},{"id":1367525575956,"percentDifferent":0.25,"options":{"blockSize":40,"blockRows":13,"workers":4},"diffImages":91,"duration":331},{"id":1367525576287,"percentDifferent":0.25,"options":{"blockSize":40,"blockRows":15,"workers":4},"diffImages":117,"duration":403},{"id":1367525576690,"percentDifferent":0.25,"options":{"blockSize":40,"blockRows":17,"workers":4},"diffImages":143,"duration":513},{"id":1367525577204,"percentDifferent":0.25,"options":{"blockSize":40,"blockRows":19,"workers":4},"diffImages":169,"duration":466},{"id":1367525577670,"percentDifferent":0.25,"options":{"blockSize":45,"blockRows":1,"workers":4},"diffImages":144,"duration":509},{"id":1367525578179,"percentDifferent":0.25,"options":{"blockSize":45,"blockRows":3,"workers":4},"diffImages":144,"duration":390},{"id":1367525578569,"percentDifferent":0.25,"options":{"blockSize":45,"blockRows":5,"workers":4},"diffImages":144,"duration":370},{"id":1367525578940,"percentDifferent":0.25,"options":{"blockSize":45,"blockRows":7,"workers":4},"diffImages":144,"duration":364},{"id":1367525579304,"percentDifferent":0.25,"options":{"blockSize":45,"blockRows":9,"workers":4},"diffImages":144,"duration":387},{"id":1367525579691,"percentDifferent":0.25,"options":{"blockSize":45,"blockRows":11,"workers":4},"diffImages":144,"duration":387},{"id":1367525580078,"percentDifferent":0.25,"options":{"blockSize":45,"blockRows":13,"workers":4},"diffImages":96,"duration":399},{"id":1367525580478,"percentDifferent":0.25,"options":{"blockSize":45,"blockRows":15,"workers":4},"diffImages":120,"duration":381},{"id":1367525580860,"percentDifferent":0.25,"options":{"blockSize":45,"blockRows":17,"workers":4},"diffImages":144,"duration":411},{"id":1367525581271,"percentDifferent":0.25,"options":{"blockSize":45,"blockRows":19,"workers":4},"diffImages":144,"duration":522},{"id":1367525581793,"percentDifferent":0.25,"options":{"blockSize":50,"blockRows":1,"workers":4},"diffImages":100,"duration":469},{"id":1367525582263,"percentDifferent":0.25,"options":{"blockSize":50,"blockRows":3,"workers":4},"diffImages":100,"duration":299},{"id":1367525582562,"percentDifferent":0.25,"options":{"blockSize":50,"blockRows":5,"workers":4},"diffImages":100,"duration":345},{"id":1367525582907,"percentDifferent":0.25,"options":{"blockSize":50,"blockRows":7,"workers":4},"diffImages":90,"duration":301},{"id":1367525583208,"percentDifferent":0.25,"options":{"blockSize":50,"blockRows":9,"workers":4},"diffImages":100,"duration":355},{"id":1367525583563,"percentDifferent":0.25,"options":{"blockSize":50,"blockRows":11,"workers":4},"diffImages":60,"duration":298},{"id":1367525583861,"percentDifferent":0.25,"options":{"blockSize":50,"blockRows":13,"workers":4},"diffImages":80,"duration":315},{"id":1367525584177,"percentDifferent":0.25,"options":{"blockSize":50,"blockRows":15,"workers":4},"diffImages":100,"duration":344},{"id":1367525584522,"percentDifferent":0.25,"options":{"blockSize":50,"blockRows":17,"workers":4},"diffImages":100,"duration":421},{"id":1367525584943,"percentDifferent":0.25,"options":{"blockSize":50,"blockRows":19,"workers":4},"diffImages":100,"duration":486},{"id":1367525585429,"percentDifferent":0.25,"options":{"blockSize":55,"blockRows":1,"workers":4},"diffImages":100,"duration":447},{"id":1367525585877,"percentDifferent":0.25,"options":{"blockSize":55,"blockRows":3,"workers":4},"diffImages":100,"duration":345},{"id":1367525586222,"percentDifferent":0.25,"options":{"blockSize":55,"blockRows":5,"workers":4},"diffImages":100,"duration":326},{"id":1367525586549,"percentDifferent":0.25,"options":{"blockSize":55,"blockRows":7,"workers":4},"diffImages":100,"duration":328},{"id":1367525586877,"percentDifferent":0.25,"options":{"blockSize":55,"blockRows":9,"workers":4},"diffImages":100,"duration":334},{"id":1367525587211,"percentDifferent":0.25,"options":{"blockSize":55,"blockRows":11,"workers":4},"diffImages":70,"duration":335},{"id":1367525587546,"percentDifferent":0.25,"options":{"blockSize":55,"blockRows":13,"workers":4},"diffImages":90,"duration":376},{"id":1367525587922,"percentDifferent":0.25,"options":{"blockSize":55,"blockRows":15,"workers":4},"diffImages":100,"duration":407},{"id":1367525588330,"percentDifferent":0.25,"options":{"blockSize":55,"blockRows":17,"workers":4},"diffImages":100,"duration":426},{"id":1367525588756,"percentDifferent":0.25,"options":{"blockSize":55,"blockRows":19,"workers":4},"diffImages":198,"duration":574},{"id":1367525589330,"percentDifferent":0.25,"options":{"blockSize":60,"blockRows":1,"workers":4},"diffImages":81,"duration":406},{"id":1367525589736,"percentDifferent":0.25,"options":{"blockSize":60,"blockRows":3,"workers":4},"diffImages":81,"duration":294},{"id":1367525590031,"percentDifferent":0.25,"options":{"blockSize":60,"blockRows":5,"workers":4},"diffImages":81,"duration":266},{"id":1367525590297,"percentDifferent":0.25,"options":{"blockSize":60,"blockRows":7,"workers":4},"diffImages":81,"duration":287},{"id":1367525590584,"percentDifferent":0.25,"options":{"blockSize":60,"blockRows":9,"workers":4},"diffImages":45,"duration":294},{"id":1367525590878,"percentDifferent":0.25,"options":{"blockSize":60,"blockRows":11,"workers":4},"diffImages":63,"duration":323},{"id":1367525591202,"percentDifferent":0.25,"options":{"blockSize":60,"blockRows":13,"workers":4},"diffImages":81,"duration":384},{"id":1367525591586,"percentDifferent":0.25,"options":{"blockSize":60,"blockRows":15,"workers":4},"diffImages":81,"duration":388},{"id":1367525591974,"percentDifferent":0.25,"options":{"blockSize":60,"blockRows":17,"workers":4},"diffImages":153,"duration":486},{"id":1367525592460,"percentDifferent":0.25,"options":{"blockSize":60,"blockRows":19,"workers":4},"diffImages":165,"duration":523},{"id":1367525592983,"percentDifferent":0.25,"options":{"blockSize":65,"blockRows":1,"workers":4},"diffImages":81,"duration":387},{"id":1367525593370,"percentDifferent":0.25,"options":{"blockSize":65,"blockRows":3,"workers":4},"diffImages":81,"duration":298},{"id":1367525593668,"percentDifferent":0.25,"options":{"blockSize":65,"blockRows":5,"workers":4},"diffImages":81,"duration":253},{"id":1367525593921,"percentDifferent":0.25,"options":{"blockSize":65,"blockRows":7,"workers":4},"diffImages":81,"duration":350},{"id":1367525594272,"percentDifferent":0.25,"options":{"blockSize":65,"blockRows":9,"workers":4},"diffImages":54,"duration":300},{"id":1367525594572,"percentDifferent":0.25,"options":{"blockSize":65,"blockRows":11,"workers":4},"diffImages":72,"duration":366},{"id":1367525594938,"percentDifferent":0.25,"options":{"blockSize":65,"blockRows":13,"workers":4},"diffImages":81,"duration":348},{"id":1367525595287,"percentDifferent":0.25,"options":{"blockSize":65,"blockRows":15,"workers":4},"diffImages":81,"duration":382},{"id":1367525595669,"percentDifferent":0.25,"options":{"blockSize":65,"blockRows":17,"workers":4},"diffImages":126,"duration":414},{"id":1367525596084,"percentDifferent":0.25,"options":{"blockSize":65,"blockRows":19,"workers":4},"diffImages":143,"duration":466},{"id":1367525596550,"percentDifferent":0.25,"options":{"blockSize":70,"blockRows":1,"workers":4},"diffImages":64,"duration":374},{"id":1367525596925,"percentDifferent":0.25,"options":{"blockSize":70,"blockRows":3,"workers":4},"diffImages":64,"duration":245},{"id":1367525597170,"percentDifferent":0.25,"options":{"blockSize":70,"blockRows":5,"workers":4},"diffImages":56,"duration":252},{"id":1367525597422,"percentDifferent":0.25,"options":{"blockSize":70,"blockRows":7,"workers":4},"diffImages":64,"duration":293},{"id":1367525597715,"percentDifferent":0.25,"options":{"blockSize":70,"blockRows":9,"workers":4},"diffImages":48,"duration":290},{"id":1367525598005,"percentDifferent":0.25,"options":{"blockSize":70,"blockRows":11,"workers":4},"diffImages":64,"duration":328},{"id":1367525598333,"percentDifferent":0.25,"options":{"blockSize":70,"blockRows":13,"workers":4},"diffImages":64,"duration":356},{"id":1367525598690,"percentDifferent":0.25,"options":{"blockSize":70,"blockRows":15,"workers":4},"diffImages":126,"duration":500},{"id":1367525599190,"percentDifferent":0.25,"options":{"blockSize":70,"blockRows":17,"workers":4},"diffImages":117,"duration":468},{"id":1367525599658,"percentDifferent":0.25,"options":{"blockSize":70,"blockRows":19,"workers":4},"diffImages":121,"duration":431},{"id":1367525600090,"percentDifferent":0.25,"options":{"blockSize":75,"blockRows":1,"workers":4},"diffImages":49,"duration":349},{"id":1367525600440,"percentDifferent":0.25,"options":{"blockSize":75,"blockRows":3,"workers":4},"diffImages":49,"duration":249},{"id":1367525600689,"percentDifferent":0.25,"options":{"blockSize":75,"blockRows":5,"workers":4},"diffImages":49,"duration":254},{"id":1367525600943,"percentDifferent":0.25,"options":{"blockSize":75,"blockRows":7,"workers":4},"diffImages":28,"duration":245},{"id":1367525601189,"percentDifferent":0.25,"options":{"blockSize":75,"blockRows":9,"workers":4},"diffImages":42,"duration":282},{"id":1367525601471,"percentDifferent":0.25,"options":{"blockSize":75,"blockRows":11,"workers":4},"diffImages":49,"duration":313},{"id":1367525601784,"percentDifferent":0.25,"options":{"blockSize":75,"blockRows":13,"workers":4},"diffImages":49,"duration":327},{"id":1367525602111,"percentDifferent":0.25,"options":{"blockSize":75,"blockRows":15,"workers":4},"diffImages":108,"duration":425},{"id":1367525602536,"percentDifferent":0.25,"options":{"blockSize":75,"blockRows":17,"workers":4},"diffImages":99,"duration":451},{"id":1367525602988,"percentDifferent":0.25,"options":{"blockSize":75,"blockRows":19,"workers":4},"diffImages":110,"duration":446},{"id":1367525603435,"percentDifferent":0.25,"options":{"blockSize":80,"blockRows":1,"workers":4},"diffImages":49,"duration":330},{"id":1367525603765,"percentDifferent":0.25,"options":{"blockSize":80,"blockRows":3,"workers":4},"diffImages":49,"duration":238},{"id":1367525604003,"percentDifferent":0.25,"options":{"blockSize":80,"blockRows":5,"workers":4},"diffImages":49,"duration":242},{"id":1367525604245,"percentDifferent":0.25,"options":{"blockSize":80,"blockRows":7,"workers":4},"diffImages":28,"duration":263},{"id":1367525604508,"percentDifferent":0.25,"options":{"blockSize":80,"blockRows":9,"workers":4},"diffImages":42,"duration":305},{"id":1367525604814,"percentDifferent":0.25,"options":{"blockSize":80,"blockRows":11,"workers":4},"diffImages":49,"duration":367},{"id":1367525605181,"percentDifferent":0.25,"options":{"blockSize":80,"blockRows":13,"workers":4},"diffImages":91,"duration":379},{"id":1367525605560,"percentDifferent":0.25,"options":{"blockSize":80,"blockRows":15,"workers":4},"diffImages":99,"duration":453},{"id":1367525606013,"percentDifferent":0.25,"options":{"blockSize":80,"blockRows":17,"workers":4},"diffImages":90,"duration":416},{"id":1367525606429,"percentDifferent":0.25,"options":{"blockSize":80,"blockRows":19,"workers":4},"diffImages":99,"duration":441},{"id":1367525606870,"percentDifferent":0.25,"options":{"blockSize":85,"blockRows":1,"workers":4},"diffImages":49,"duration":310},{"id":1367525607180,"percentDifferent":0.25,"options":{"blockSize":85,"blockRows":3,"workers":4},"diffImages":49,"duration":210},{"id":1367525607391,"percentDifferent":0.25,"options":{"blockSize":85,"blockRows":5,"workers":4},"diffImages":49,"duration":256},{"id":1367525607647,"percentDifferent":0.25,"options":{"blockSize":85,"blockRows":7,"workers":4},"diffImages":35,"duration":299},{"id":1367525607946,"percentDifferent":0.25,"options":{"blockSize":85,"blockRows":9,"workers":4},"diffImages":49,"duration":333},{"id":1367525608279,"percentDifferent":0.25,"options":{"blockSize":85,"blockRows":11,"workers":4},"diffImages":49,"duration":362},{"id":1367525608641,"percentDifferent":0.25,"options":{"blockSize":85,"blockRows":13,"workers":4},"diffImages":77,"duration":544},{"id":1367525609185,"percentDifferent":0.25,"options":{"blockSize":85,"blockRows":15,"workers":4},"diffImages":90,"duration":434},{"id":1367525609619,"percentDifferent":0.25,"options":{"blockSize":85,"blockRows":17,"workers":4},"diffImages":81,"duration":400},{"id":1367525610019,"percentDifferent":0.25,"options":{"blockSize":85,"blockRows":19,"workers":4},"diffImages":88,"duration":380},{"id":1367525610400,"percentDifferent":0.25,"options":{"blockSize":90,"blockRows":1,"workers":4},"diffImages":49,"duration":283},{"id":1367525610683,"percentDifferent":0.25,"options":{"blockSize":90,"blockRows":3,"workers":4},"diffImages":49,"duration":304},{"id":1367525610987,"percentDifferent":0.25,"options":{"blockSize":90,"blockRows":5,"workers":4},"diffImages":49,"duration":266},{"id":1367525611253,"percentDifferent":0.25,"options":{"blockSize":90,"blockRows":7,"workers":4},"diffImages":35,"duration":292},{"id":1367525611545,"percentDifferent":0.25,"options":{"blockSize":90,"blockRows":9,"workers":4},"diffImages":49,"duration":341},{"id":1367525611886,"percentDifferent":0.25,"options":{"blockSize":90,"blockRows":11,"workers":4},"diffImages":49,"duration":327},{"id":1367525612213,"percentDifferent":0.25,"options":{"blockSize":90,"blockRows":13,"workers":4},"diffImages":70,"duration":406},{"id":1367525612619,"percentDifferent":0.25,"options":{"blockSize":90,"blockRows":15,"workers":4},"diffImages":81,"duration":500},{"id":1367525613119,"percentDifferent":0.25,"options":{"blockSize":90,"blockRows":17,"workers":4},"diffImages":72,"duration":405},{"id":1367525613524,"percentDifferent":0.25,"options":{"blockSize":90,"blockRows":19,"workers":4},"diffImages":77,"duration":398},{"id":1367525613922,"percentDifferent":0.25,"options":{"blockSize":95,"blockRows":1,"workers":4},"diffImages":36,"duration":279},{"id":1367525614202,"percentDifferent":0.25,"options":{"blockSize":95,"blockRows":3,"workers":4},"diffImages":36,"duration":231},{"id":1367525614433,"percentDifferent":0.25,"options":{"blockSize":95,"blockRows":5,"workers":4},"diffImages":36,"duration":271},{"id":1367525614704,"percentDifferent":0.25,"options":{"blockSize":95,"blockRows":7,"workers":4},"diffImages":30,"duration":312},{"id":1367525615016,"percentDifferent":0.25,"options":{"blockSize":95,"blockRows":9,"workers":4},"diffImages":36,"duration":340},{"id":1367525615356,"percentDifferent":0.25,"options":{"blockSize":95,"blockRows":11,"workers":4},"diffImages":77,"duration":417},{"id":1367525615773,"percentDifferent":0.25,"options":{"blockSize":95,"blockRows":13,"workers":4},"diffImages":63,"duration":393},{"id":1367525616167,"percentDifferent":0.25,"options":{"blockSize":95,"blockRows":15,"workers":4},"diffImages":72,"duration":455},{"id":1367525616622,"percentDifferent":0.25,"options":{"blockSize":95,"blockRows":17,"workers":4},"diffImages":63,"duration":401},{"id":1367525617023,"percentDifferent":0.25,"options":{"blockSize":95,"blockRows":19,"workers":4},"diffImages":66,"duration":376},{"id":1367525617399,"percentDifferent":0.25,"options":{"blockSize":100,"blockRows":1,"workers":4},"diffImages":36,"duration":245},{"id":1367525617644,"percentDifferent":0.25,"options":{"blockSize":100,"blockRows":3,"workers":4},"diffImages":36,"duration":264},{"id":1367525617908,"percentDifferent":0.25,"options":{"blockSize":100,"blockRows":5,"workers":4},"diffImages":36,"duration":250},{"id":1367525618158,"percentDifferent":0.25,"options":{"blockSize":100,"blockRows":7,"workers":4},"diffImages":30,"duration":295},{"id":1367525618454,"percentDifferent":0.25,"options":{"blockSize":100,"blockRows":9,"workers":4},"diffImages":36,"duration":336},{"id":1367525618790,"percentDifferent":0.25,"options":{"blockSize":100,"blockRows":11,"workers":4},"diffImages":70,"duration":417},{"id":1367525619208,"percentDifferent":0.25,"options":{"blockSize":100,"blockRows":13,"workers":4},"diffImages":56,"duration":386},{"id":1367525619594,"percentDifferent":0.25,"options":{"blockSize":100,"blockRows":15,"workers":4},"diffImages":63,"duration":418},{"id":1367525620012,"percentDifferent":0.25,"options":{"blockSize":100,"blockRows":17,"workers":4},"diffImages":54,"duration":379},{"id":1367525620391,"percentDifferent":0.25,"options":{"blockSize":100,"blockRows":19,"workers":4},"diffImages":66,"duration":384}] |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .dot { | |
| stroke-opacity:0.8; | |
| fill-opacity: 0.4; | |
| shape-rendering: crispEdges; | |
| cursor: pointer; | |
| } | |
| .dot-label { font-size: 11px; font-family: Arial; color: #000; } | |
| #tooltip { | |
| color:white; | |
| position: absolute; | |
| background: rgba(0,0,0,0.95); | |
| padding: 9px 0px; | |
| -webkit-border-radius: 4px; | |
| -moz-border-radius: 4px; | |
| border-radius: 4px; | |
| display:none; | |
| } | |
| .buttons { float:right; margin-right: 20px;margin-top: 10px;} | |
| #tooltip:after { | |
| content: ' '; | |
| height: 0; | |
| position: absolute; | |
| width: 0; | |
| border: 10px solid transparent; | |
| border-right-color: rgba(0,0,0,0.8);; | |
| right:100%; | |
| top:50%; | |
| margin-top: -20px; | |
| } | |
| dt, dd, dl { display:inline;line-height: 1.4; } | |
| dt { text-align:right; padding-right: 8px;float:left; clear:left; font-weight: bold; width: 120px;} | |
| dd { margin-left: 0px; float:left; } | |
| dl { margin: 10px 0px 10px 80px; overflow:auto;} | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <div id="ch"></div> | |
| <div class='buttons'> | |
| <label> | |
| <input id="logc" type="checkbox" name="" value="log" checked > | |
| Logarithmic timescale | |
| </label> | |
| <label> | |
| <input id="bs" type="radio" name="sort" value="bs" checked > | |
| Block Size | |
| </label> | |
| <label> | |
| <input id="br" type="radio" name="sort" value="br" > | |
| Block Rows | |
| </label> | |
| </div> | |
| <div id="tooltip"></div> | |
| <script> | |
| var data, nest; | |
| var xAxisLabel = "Duration (s)", | |
| yAxisLabel = "Block Size" | |
| var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = 960 - margin.left - margin.right, | |
| height = 470 - margin.top - margin.bottom; | |
| var color = d3.scale.category20b(); | |
| var svg = d3.select("#ch").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| function chart(data, showLegend) { | |
| yV = document.querySelector('#br').checked ? "blockRows" : "blockSize"; | |
| yAxisLabel = yV == "blockSize" ? "Block Size" : "Block Rows"; | |
| rV = yV == "blockRows" ? "blockSize" : "blockRows"; | |
| logOrLine = document.querySelector('#logc').checked ? d3.scale.log : d3.scale.linear; | |
| var x = logOrLine() | |
| .range([0, width]); | |
| var r = d3.scale.linear() | |
| .range([5, 15]) | |
| var y = d3.scale.linear() | |
| .range([height,0]); | |
| var stroke = d3.scale.linear() | |
| .range([0,4]); | |
| var fillColor = d3.scale.linear() | |
| .range([0,color.range().length - 1 ]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .tickFormat(function(d) { return d / 1000;}) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .ticks(10) | |
| .orient("left"); | |
| data.forEach(function(d) { | |
| d.options.blockRows = +d.options.blockRows; | |
| d.duration = +d.duration; | |
| d.options.blockSize = +d.options.blockSize; | |
| }); | |
| x.domain(d3.extent(data, function(d) { return d.duration; })).nice(); | |
| y.domain([5,d3.max(data, function(d) { return d.options[yV]; })]).nice(); | |
| r.domain(d3.extent(data, function(d) { return d.options[rV]; })).nice(); | |
| stroke.domain(d3.extent(data, function(d) { return d.diffImages; })); | |
| fillColor.domain(d3.extent(data, function(d) { return d.options[yV]; })).nice(); | |
| svg.selectAll("g").remove(); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .append("text") | |
| .attr("class", "label") | |
| .attr("x", width) | |
| .attr("y", -6) | |
| .style("text-anchor", "end") | |
| .text(xAxisLabel); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("class", "label") | |
| .attr("transform", "rotate(-90)") | |
| .attr("y", 6) | |
| .attr("dy", ".71em") | |
| .style("text-anchor", "end") | |
| .text(yAxisLabel) | |
| svg.selectAll(".dot") | |
| .data(data) | |
| .enter().append("circle") | |
| .on("mouseover", hover) | |
| .on("mouseout", hoverOut) | |
| .on('click', changeIt) | |
| .attr("class", "dot") | |
| .attr("r", 0) | |
| .attr("cx", function(d) { return x(d.duration) + 20; }) | |
| .attr("cy", function(d) { return y(d.options[yV]) - r(d.options[rV]) ; }) | |
| .style('fill', function(d) { return color(Math.round(fillColor(d.options[yV]))); }) | |
| .style('stroke', function(d) { return color(Math.round(fillColor(d.options[yV]))); }) | |
| svg.selectAll(".dot") | |
| .transition() | |
| .delay(function(d, i) {return i * 7; }) | |
| .ease(d3.ease("back-out", 0)) | |
| .duration(900) | |
| .attr("cy", function(d) { return y(d.options[yV]) ; }) | |
| .attr("cx", function(d) { return x(d.duration); }) | |
| .attr("r", function(d){ return r(d.options[rV]) }) | |
| svg.selectAll(".legend").remove(); | |
| if(showLegend) { | |
| var legend = svg.selectAll(".legend") | |
| .data(color.domain().slice(0,data.length).reverse()) | |
| .enter().append("g") | |
| .attr("class", "legend") | |
| .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); | |
| legend.append("rect") | |
| .attr("x", width - 18) | |
| .attr("width", 18) | |
| .attr("height", 18) | |
| .style("fill", color); | |
| legend.append("text") | |
| .attr("x", width - 24) | |
| .attr("y", 9) | |
| .attr("dy", ".35em") | |
| .style("text-anchor", "end") | |
| .text(function(d) { return Math.floor(fillColor.invert(d)); }); | |
| } | |
| } | |
| d3.json("blocksize.json", function(error, d) { | |
| data = d; | |
| nest = d3.nest() | |
| .key(function(d) { return d.options.blockSize }) | |
| .map(data); | |
| chart(data, true) | |
| }); | |
| document.querySelector('.buttons #br').addEventListener('click',changeY) | |
| document.querySelector('.buttons #bs').addEventListener('click',changeY) | |
| document.querySelector('.buttons #logc').addEventListener('click',changeY) | |
| function changeY(e) { | |
| console.log('cl'); | |
| chart(data,true); | |
| } | |
| function changeIt(d) { | |
| chart(nest[d.options.blockSize + 15], false) | |
| } | |
| function hover(d) { | |
| var m = d.diffImages; | |
| d3.select("#tooltip") | |
| .html("<dl><dt>Block Size: </dt><dd>" + d.options.blockSize + "</dd><dt>Block Rows: </dt><dd>"+ d.options.blockRows +"</dd><dt>Images Generated: </dt><dd>" + m + "</dd><dt>Duration: </dt><dd>"+ Math.round(d.duration / 1000)+" seconds</dd></dl>") | |
| .style('display', 'block') | |
| .style("left", (d3.event.pageX) + 48 + "px") | |
| .style("top", (d3.event.pageY - 24) + "px") | |
| .transition() | |
| .ease("back-out", 0) | |
| .duration(200) | |
| .style("left", (d3.event.pageX) + 40 + "px") | |
| .style("opacity", .9) | |
| } | |
| function hoverOut() { | |
| d3.select("#tooltip") | |
| .transition() | |
| .ease("back-in", 0) | |
| .delay(20) | |
| .duration(250) | |
| .style("top", (d3.event.pageY) - 20 + "px") | |
| .style("opacity", 0) | |
| .each('end', hideTip) | |
| } | |
| function hideTip() { | |
| d3.select('#tooltip') | |
| .style('display', 'none'); | |
| } | |
| </script> |