Plot for the Sequential write to file exercise in UoT CS434
Each line represents a different file size:
To see the rest of the work consult github/dscape
See live at http://bl.ocks.org/dscape/6246398
Work based on fork. Check original work for credits.
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { font: 10px sans-serif; } | |
| .axis path, | |
| .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } | |
| .x.axis path { display: none; } | |
| .line { fill: none; stroke: steelblue; stroke-width: 1.5px; } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.js"></script> | |
| <script> | |
| // this iom and eom markers | |
| // are just to replace this data with your data | |
| // | |
| // lame, i know. sorry! | |
| // | |
| //#iom | |
| var csv = ["10485760,100,303", "10485760,1000,141", "10485760,10000,137", "10485760,100000,131", "10485760,1000000,128", "10485760,10000000,128", "10485760,100000000,127", "52428800,100,1691", "52428800,1000,852", "52428800,10000,657", "52428800,100000,687", "52428800,1000000,643", "52428800,10000000,683", "52428800,100000000,646", "104857600,100,3222", "104857600,1000,1528", "104857600,10000,1310", "104857600,100000,1380", "104857600,1000000,1634", "104857600,10000000,1606", "104857600,100000000,1556"].join("\n"); | |
| //#eom | |
| function convert_to_mb(value) { | |
| switch (value) { | |
| case '1048576': | |
| return "1MB"; | |
| case '10485760': | |
| return "10MB"; | |
| case '52428800': | |
| return "50MB"; | |
| case '104857600': | |
| return "100MB"; | |
| default: | |
| return value; | |
| } | |
| } | |
| var margin = { | |
| top: 20, | |
| right: 150, | |
| bottom: 30, | |
| left: 50 | |
| }, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var x = d3.scale.log().range([0, width]); | |
| var y = d3.scale.linear().range([height, 0]); | |
| var color = d3.scale.category10(); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left"); | |
| var line = d3.svg.line() | |
| .interpolate("cardinal") | |
| .x(function (d) { | |
| return x(d.block_size); | |
| }) | |
| .y(function (d) { | |
| return y(d.ms); | |
| }); | |
| var tooltip = d3.select("body") | |
| .append("div") | |
| .style("position", "absolute") | |
| .style("width", "300px") | |
| .style("z-index", "10") | |
| .style("visibility", "hidden") | |
| .text("tooltip"); | |
| var svg = d3.select("body").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 + ")"); | |
| csv = d3.csv.parseRows(csv); | |
| var by_block_size = {}; | |
| csv.forEach(function (row) { | |
| var total_bytes = row[0]; | |
| var block_size = row[1]; | |
| var ms = row[2]; | |
| if (!by_block_size[block_size]) { | |
| by_block_size[block_size] = {}; | |
| } | |
| by_block_size[block_size][total_bytes] = ms; | |
| }); | |
| var data = []; | |
| Object.keys(by_block_size) | |
| .sort(function (a, b) { | |
| a = +a; | |
| b = +b; | |
| return a - b; | |
| }).forEach(function (k) { | |
| var contents = by_block_size[k]; | |
| contents.block_size = k; | |
| data.push(contents); | |
| }); | |
| color.domain(d3.keys(data[0]).filter(function (key) { | |
| return key !== "block_size"; | |
| })); | |
| var blocks = color.domain().map(function (name) { | |
| return { | |
| name: name, | |
| values: data.map(function (d) { | |
| return { | |
| block_size: d.block_size, | |
| ms: +d[name] | |
| }; | |
| }) | |
| }; | |
| }); | |
| x.domain(d3.extent(data, function (d) { | |
| return d.block_size; | |
| })); | |
| y.domain([ | |
| d3.min(blocks, function (c) { | |
| return d3.min(c.values, function (v) { | |
| return v.ms; | |
| }); | |
| }), | |
| d3.max(blocks, function (c) { | |
| return d3.max(c.values, function (v) { | |
| return v.ms; | |
| }); | |
| }) | |
| ]); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis) | |
| .append("text") | |
| .attr("transform", "rotate(-90)") | |
| .attr("x", -80) | |
| .attr("y", 6) | |
| .attr("dy", "0.71em") | |
| .style("text-anchor", "middle") | |
| .text("Duration (ms)"); | |
| var block = svg.selectAll(".block") | |
| .data(blocks) | |
| .enter().append("g") | |
| .attr("class", "block"); | |
| block.append("path") | |
| .attr("class", "line") | |
| .attr("d", function (d) { | |
| return line(d.values); | |
| }) | |
| .style("stroke", function (d) { | |
| return color(d.name); | |
| }); | |
| blocks.forEach(function (b) { | |
| var label = b.name; | |
| svg.selectAll(".point") | |
| .data(b.values) | |
| .enter().append("svg:circle") | |
| .attr("stroke", function (d, i) { | |
| return color(label); | |
| }) | |
| .attr("fill", function (d, i) { | |
| return 'white'; | |
| }) | |
| .attr("cx", function (d, i) { | |
| return x(d.block_size); | |
| }) | |
| .attr("cy", function (d, i) { | |
| return y(d.ms); | |
| }) | |
| .attr("r", function (d, i) { | |
| return 4; | |
| }) | |
| .on("mouseover", function () { | |
| return tooltip.style("visibility", "visible"); | |
| }) | |
| .on("mousemove", function (d) { | |
| tooltip.html((Math.round(d.block_size / (1024) * 100) / 100) + | |
| ' kb, ' + d.ms + 'ms'); | |
| return tooltip.style("top", (d3.event.pageY - 20) + "px").style("left", (d3.event.pageX + 10) + "px"); | |
| }) | |
| .on("mouseout", function () { | |
| return tooltip.style("visibility", "hidden"); | |
| }); | |
| }); | |
| block.append("text") | |
| .datum(function (d) { | |
| return { | |
| name: d.name, | |
| value: d.values[d.values.length - 1] | |
| }; | |
| }) | |
| .attr("transform", function (d) { | |
| return "translate(" + x(d.value.block_size) + "," + y(d.value.ms) + ")"; | |
| }) | |
| .attr("x", 15) | |
| .attr("dy", ".35em") | |
| .text(function (d) { | |
| return convert_to_mb(d.name); | |
| }); | |
| </script> |