Skip to content

Instantly share code, notes, and snippets.

@jspschool
Created February 7, 2013 12:54
Show Gist options
  • Save jspschool/4730726 to your computer and use it in GitHub Desktop.
Save jspschool/4730726 to your computer and use it in GitHub Desktop.

Revisions

  1. jspschool revised this gist Feb 7, 2013. 1 changed file with 11 additions and 3 deletions.
    14 changes: 11 additions & 3 deletions inlet.js
    Original file line number Diff line number Diff line change
    @@ -25,9 +25,6 @@ d3.selectAll("circle")
    d3.selectAll("circle")
    .attr("r", 5);




    var x_axis = d3.svg.axis().scale(x_scale);

    svg.append("g")
    @@ -42,3 +39,14 @@ svg.append("g")
    .attr("class","y axis")
    .attr("transform", "translate("+ margin + ", 0)" )
    .call(y_axis);

    d3.select(".x.axis")
    .append("text")
    .text("collisions with injury (per million miles)")
    .attr("x", (width / 2) - margin)
    .attr("y", margin / 1.5);

    d3.select(".y.axis")
    .append("text")
    .text("mean distance between failure (miles)")
    .attr("transform", "rotate (-90, -43, 0) translate(-280)");
  2. jspschool revised this gist Feb 7, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions _.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    [ <a href="http://tributary.io/inlet/4730726">Launch: read json svg</a> ] 4730726 by jspschool<br>[ <a href="http://tributary.io/inlet/4729040">Launch: read json</a> ] 4729040 by jspschool<br>[ <a href="http://tributary.io/inlet/4729039">Launch: read json</a> ] 4729039 by jspschool<br>
  3. jspschool created this gist Feb 7, 2013.
    1 change: 1 addition & 0 deletions bus_perf.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    [{"collision_with_injury": 3.2, "dist_between_fail": 3924.0, "customer_accident_rate": 2.12}, {"collision_with_injury": 2.8, "dist_between_fail": 3914.0, "customer_accident_rate": 1.3}, {"collision_with_injury": 4.05, "dist_between_fail": 3550.0, "customer_accident_rate": 1.5}, {"collision_with_injury": 4.7, "dist_between_fail": 3625.0, "customer_accident_rate": 0.79}, {"collision_with_injury": 2.0, "dist_between_fail": 3171.0, "customer_accident_rate": 2.8}, {"collision_with_injury": 9.29, "dist_between_fail": 2699.0, "customer_accident_rate": 1.28}, {"collision_with_injury": 9.29, "dist_between_fail": 3008.0, "customer_accident_rate": 1.28}, {"collision_with_injury": 2.3, "dist_between_fail": 2815.0, "customer_accident_rate": 1.74}, {"collision_with_injury": 4.65, "dist_between_fail": 3366.0, "customer_accident_rate": 1.17}, {"collision_with_injury": 5.32, "dist_between_fail": 3667.0, "customer_accident_rate": 0.82}, {"collision_with_injury": 4.1, "dist_between_fail": 4170.0, "customer_accident_rate": 0.8}, {"collision_with_injury": 3.87, "dist_between_fail": 3294.0, "customer_accident_rate": 1.01}, {"collision_with_injury": 3.43, "dist_between_fail": 3595.0, "customer_accident_rate": 1.31}, {"collision_with_injury": 6.23, "dist_between_fail": 4067.0, "customer_accident_rate": 1.54}, {"collision_with_injury": 3.82, "dist_between_fail": 3353.0, "customer_accident_rate": 1.03}, {"collision_with_injury": 6.91, "dist_between_fail": 3743.0, "customer_accident_rate": 1.17}, {"collision_with_injury": 9.31, "dist_between_fail": 3259.0, "customer_accident_rate": 1.36}, {"collision_with_injury": 7.01, "dist_between_fail": 3184.0, "customer_accident_rate": 1.25}, {"collision_with_injury": 7.08, "dist_between_fail": 2813.0, "customer_accident_rate": 1.96}, {"collision_with_injury": 10.3, "dist_between_fail": 3119.0, "customer_accident_rate": 0.63}, {"collision_with_injury": 3.74, "dist_between_fail": 3494.0, "customer_accident_rate": 1.27}, {"collision_with_injury": 4.37, "dist_between_fail": 3426.0, "customer_accident_rate": 1.21}, {"collision_with_injury": 5.22, "dist_between_fail": 3415.0, "customer_accident_rate": 1.76}, {"collision_with_injury": 3.98, "dist_between_fail": 3585.0, "customer_accident_rate": 1.17}, {"collision_with_injury": 6.17, "dist_between_fail": 3162.0, "customer_accident_rate": 1.01}, {"collision_with_injury": 1.92, "dist_between_fail": 3047.0, "customer_accident_rate": 1.02}, {"collision_with_injury": 5.15, "dist_between_fail": 3650.0, "customer_accident_rate": 0.83}]
    11 changes: 11 additions & 0 deletions chart.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    .axis path{ fill:none;
    stroke: black; }
    .axis {
    font-size:8pt; font-family:sans-serif;
    }
    .tick {
    fill:none;
    stroke:black; }
    circle{
    stroke:black; stroke-width:0.5px; fill:RoyalBlue;
    opacity:0.6; }
    1 change: 1 addition & 0 deletions config.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"description":"read json svg","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"bus_perf.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"chart.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}
    44 changes: 44 additions & 0 deletions inlet.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@

    var margin = 50, width = tributary.sw, height = tributary.sh;

    var data = tributary.bus_perf;

    var svg = d3.select("svg");

    svg.attr("width",width)
    .attr("height",height)
    .selectAll("circle")
    .data(data)
    .enter()
    .append("circle");

    var x_extent = d3.extent(data, function(d){ return d.collision_with_injury});
    var x_scale = d3.scale.linear().range([margin,width-margin]).domain(x_extent);

    var y_extent = d3.extent(data, function(d){ return d.dist_between_fail});
    var y_scale = d3.scale.linear().range([height-margin, margin]).domain(y_extent);

    d3.selectAll("circle")
    .attr("cx", function(d){ return x_scale(d.collision_with_injury)})
    .attr("cy", function(d){ return y_scale(d.dist_between_fail)});

    d3.selectAll("circle")
    .attr("r", 5);




    var x_axis = d3.svg.axis().scale(x_scale);

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


    var y_axis = d3.svg.axis().scale(y_scale).orient("left");

    svg.append("g")
    .attr("class","y axis")
    .attr("transform", "translate("+ margin + ", 0)" )
    .call(y_axis);