Skip to content

Instantly share code, notes, and snippets.

@jakeNiemiec

jakeNiemiec/.block

Last active January 31, 2017 19:08
Show Gist options
  • Save jakeNiemiec/f6d76d177a489d15ac24c9caf736922f to your computer and use it in GitHub Desktop.
Save jakeNiemiec/f6d76d177a489d15ac24c9caf736922f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jakeNiemiec revised this gist Jan 31, 2017. No changes.
  2. jakeNiemiec revised this gist Jan 31, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -45,8 +45,8 @@
    var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .2);

    var y0 = d3.scale.linear().domain([0, 150]).range([height, 0]),
    y1 = d3.scale.linear().domain([0, 500]).range([height, 0]);
    var y0 = d3.scale.linear().domain([90, 120]).range([height, 0]),
    y1 = d3.scale.linear().domain([350, 410]).range([height, 0]);

    var xAxis = d3.svg.axis()
    .scale(x)
  3. jakeNiemiec created this gist Jan 31, 2017.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: mit
    3 changes: 3 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    Built with [blockbuilder.org](http://blockbuilder.org)

    forked from <a href='http://bl.ocks.org/jakeNiemiec/'>jakeNiemiec</a>'s block: <a href='http://bl.ocks.org/jakeNiemiec/1c903931b8088f45244eb465c8a050a3'>bar</a>
    7 changes: 7 additions & 0 deletions data.tsv
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    browser size time
    Chrome PB 103 388
    Chrome JSON 114 386
    Firefox PB 101 380
    Firefox JSON 111 400
    Safari PB 101 386
    Safari JSON 111 399
    120 changes: 120 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,120 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    body {
    font: 10px sans-serif;
    }

    .y.axisRight text {
    fill: orange;
    }

    .y.axisLeft text {
    fill: steelblue;
    }

    .axis path,
    .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
    }

    .bar1 {
    fill: steelblue;
    }

    .bar2 {
    fill: orange;
    }

    .x.axis path {
    display: none;
    }

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

    var margin = {top: 80, right: 80, bottom: 80, left: 80},
    width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .2);

    var y0 = d3.scale.linear().domain([0, 150]).range([height, 0]),
    y1 = d3.scale.linear().domain([0, 500]).range([height, 0]);

    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

    // create left yAxis
    var yAxisLeft = d3.svg.axis().scale(y0).ticks(6).orient("left");
    // create right yAxis
    var yAxisRight = d3.svg.axis().scale(y1).ticks(6).orient("right");

    var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("class", "graph")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    d3.tsv("data.tsv", type, function(error, data) {
    x.domain(data.map(function(d) { return d.browser; }));

    svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

    svg.append("g")
    .attr("class", "y axis axisLeft")
    .attr("transform", "translate(0,0)")
    .call(yAxisLeft)
    .append("text")
    .attr("y", 6)
    .attr("dy", "-2em")
    .style("text-anchor", "end")
    .style("text-anchor", "end")
    .text("Size (KB)");

    svg.append("g")
    .attr("class", "y axis axisRight")
    .attr("transform", "translate(" + (width) + ",0)")
    .call(yAxisRight)
    .append("text")
    .attr("y", 6)
    .attr("dy", "-2em")
    .attr("dx", "2em")
    .style("text-anchor", "end")
    .text("Time (ms)");

    bars = svg.selectAll(".bar").data(data).enter();

    bars.append("rect")
    .attr("class", "bar1")
    .attr("x", function(d) { return x(d.browser); })
    .attr("width", x.rangeBand()/2)
    .attr("y", function(d) { return y0(d.size); })
    .attr("height", function(d,i,j) { return height - y0(d.size); });

    bars.append("rect")
    .attr("class", "bar2")
    .attr("x", function(d) { return x(d.browser) + x.rangeBand()/2; })
    .attr("width", x.rangeBand() / 2)
    .attr("y", function(d) { return y1(d.time); })
    .attr("height", function(d,i,j) { return height - y1(d.time); });

    });

    function type(d) {
    d.size = +d.size;
    return d;
    }

    </script>