Skip to content

Instantly share code, notes, and snippets.

@sdawson
Created April 11, 2013 08:20

Revisions

  1. sdawson revised this gist May 22, 2013. No changes.
  2. sdawson revised this gist May 22, 2013. No changes.
  3. sdawson revised this gist May 22, 2013. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions inlet.js
    Original file line number Diff line number Diff line change
    @@ -36,23 +36,23 @@ var line = d3.svg.line()
    console.log(d);
    return y(d.y); });


    //svg.append("g")
    //.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    svg.append("g")
    .attr("transform", "translate(100,100)");
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


    x.domain(d3.extent(data, function(d) { return d.x; }));
    y.domain(d3.extent(data, function(d) { return d.y; }));
    //x.domain(d3.extent(data, function(d) { return d.x; }));
    x.domain([0, d3.max(data, function(d) { return d.x; })]);
    //y.domain(d3.extent(data, function(d) { return d.y; }));
    y.domain([0, d3.max(data, function(d) { return d.y; })]);

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

    svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(40, 0)")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
  4. sdawson revised this gist May 22, 2013. 1 changed file with 5 additions and 2 deletions.
    7 changes: 5 additions & 2 deletions inlet.js
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,7 @@ console.log(data);
    var svg = d3.select("svg");

    var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    width = 950 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    var x = d3.scale.linear()
    @@ -37,8 +37,11 @@ var line = d3.svg.line()
    return y(d.y); });


    //svg.append("g")
    //.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    .attr("transform", "translate(100,100)");


    x.domain(d3.extent(data, function(d) { return d.x; }));
    y.domain(d3.extent(data, function(d) { return d.y; }));
  5. sdawson revised this gist Apr 11, 2013. 2 changed files with 46 additions and 58 deletions.
    2 changes: 1 addition & 1 deletion config.json
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"description":"line_chart1","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},"test_data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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}
    {"description":"line_chart1","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},"test_data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"freq.tsv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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}
    102 changes: 45 additions & 57 deletions inlet.js
    Original file line number Diff line number Diff line change
    @@ -1,77 +1,65 @@
    // Testing out mbostock's simple line chart eg.
    var svg = d3.select("svg");

    var data = tributary.test_data;
    data.forEach(function(d) {
    d.x = +d.x;
    d.y = +d.y;
    });
    console.log(data);


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

    var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 405 - margin-left - margin.right,
    height = 367 - margin.top - margin.bottom;

    var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var lines = lineChart()
    .data(data)
    .width(500)
    .height(500);

    lines(g);

    function lineChart() {
    var data = [];
    var width = 300;
    var height = 300;

    var chart = function(g) {
    var x = d3.scale.linear()
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

    var x = d3.scale.linear()
    .range([0, width]);
    var y = d3.scale.linear()

    var y = d3.scale.linear()
    .range([height, 0]);
    var xAxis = d3.svg.axis()

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

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

    var line = d3.svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

    x.domain(d3.extent(data, function(d) { return d.x; }));
    y.domain(d3.extent(data, function(d) { return d.y; }));

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

    g.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Price (@$)");

    g.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);
    }
    return chart;
    }

    var line = d3.svg.line()
    .x(function(d) {
    //console.log(d);
    return x(d.x); })
    .y(function(d) {
    console.log(d);
    return y(d.y); });


    svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    x.domain(d3.extent(data, function(d) { return d.x; }));
    y.domain(d3.extent(data, function(d) { return d.y; }));

    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("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Price ($)");


    svg.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);
  6. sdawson revised this gist Apr 11, 2013. No changes.
  7. sdawson revised this gist Apr 11, 2013. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions inlet.js
    Original file line number Diff line number Diff line change
    @@ -12,12 +12,12 @@ var margin = {top: 20, right: 20, bottom: 30, left: 50},
    height = 367 - margin.top - margin.bottom;

    var g = svg.append("g")
    .attr("transform", "translate" + margin.left + "," + margin.top + ")");
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var lines = lineChart()
    .data(data)
    .width(328)
    .height(322);
    .width(500)
    .height(500);

    lines(g);

  8. sdawson revised this gist Apr 11, 2013. 3 changed files with 18 additions and 1 deletion.
    2 changes: 1 addition & 1 deletion config.json
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"description":"line_chart1","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},"test_data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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}
    {"description":"line_chart1","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},"test_data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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}
    1 change: 1 addition & 0 deletions inlet.js
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    // Testing out mbostock's simple line chart eg.
    var svg = d3.select("svg");

    var data = tributary.test_data;
    16 changes: 16 additions & 0 deletions style.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    .axis path,
    .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
    }

    .line {
    fill: none;
    stroke: steelblue;
    stroke-width = 1.5px;
    }

    .x.axis path {
    display: none;
    }
  9. sdawson revised this gist Apr 11, 2013. 1 changed file with 4 additions and 3 deletions.
    7 changes: 4 additions & 3 deletions inlet.js
    Original file line number Diff line number Diff line change
    @@ -70,6 +70,7 @@ function lineChart() {
    return chart;
    }

    var line = svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });




  10. sdawson revised this gist Apr 11, 2013. 1 changed file with 36 additions and 18 deletions.
    54 changes: 36 additions & 18 deletions inlet.js
    Original file line number Diff line number Diff line change
    @@ -31,27 +31,45 @@ function lineChart() {

    var y = d3.scale.linear()
    .range([height, 0]);

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

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

    var line = d3.svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

    x.domain(d3.extent(data, function(d) { return d.x; }));
    y.domain(d3.extent(data, function(d) { return d.y; }));

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

    g.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Price (@$)");

    g.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);
    }
    return chart;
    }

    var x = d3.scale.linear()
    .range([0, width]);

    var y = d3.scale.linear()
    .range([height, 0]);

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

    var yAxis = svg.axis()
    .scale(y)
    .orient("left");

    var line = svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

    x.domain(d3.extent(data, function(d) { return d.x; }));
    y.domain(d3.extent(data, function(d) { return d.y; }));
    .y(function(d) { return y(d.y); });
  11. sdawson revised this gist Apr 11, 2013. 1 changed file with 34 additions and 19 deletions.
    53 changes: 34 additions & 19 deletions inlet.js
    Original file line number Diff line number Diff line change
    @@ -1,8 +1,39 @@
    var svg = d3.select("svg");

    var data = tributary.test_data;
    data.forEach(function(d) {
    d.x = +d.x;
    d.y = +d.y;
    });

    var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin-left - margin.right,
    height = 500 - margin.top - margin.bottom;
    width = 405 - margin-left - margin.right,
    height = 367 - margin.top - margin.bottom;

    var g = svg.append("g")
    .attr("transform", "translate" + margin.left + "," + margin.top + ")");

    var lines = lineChart()
    .data(data)
    .width(328)
    .height(322);

    lines(g);

    function lineChart() {
    var data = [];
    var width = 300;
    var height = 300;

    var chart = function(g) {
    var x = d3.scale.linear()
    .range([0, width]);

    var y = d3.scale.linear()
    .range([height, 0]);
    }
    return chart;
    }

    var x = d3.scale.linear()
    .range([0, width]);
    @@ -22,21 +53,5 @@ var line = svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

    svg.attr("width", width + margin.left + margin.right)
    .attr("height", height + martin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var vals = tributary.test_data.map(function(d) {
    return {
    x: +d.x,
    y: +d.y
    }
    });

    x.domain(d3.extent(data, function(d) { return d.x; }));
    y.domain(d3.extent(data, function(d) { return d.y; }));

    svg.append("g")
    .attr(

    y.domain(d3.extent(data, function(d) { return d.y; }));
  12. sdawson revised this gist Apr 11, 2013. 1 changed file with 13 additions and 0 deletions.
    13 changes: 13 additions & 0 deletions inlet.js
    Original file line number Diff line number Diff line change
    @@ -27,3 +27,16 @@ svg.attr("width", width + margin.left + margin.right)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var vals = tributary.test_data.map(function(d) {
    return {
    x: +d.x,
    y: +d.y
    }
    });

    x.domain(d3.extent(data, function(d) { return d.x; }));
    y.domain(d3.extent(data, function(d) { return d.y; }));

    svg.append("g")
    .attr(

  13. sdawson revised this gist Apr 11, 2013. 1 changed file with 29 additions and 1 deletion.
    30 changes: 29 additions & 1 deletion inlet.js
    Original file line number Diff line number Diff line change
    @@ -1 +1,29 @@
    {}
    var svg = d3.select("svg");

    var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin-left - margin.right,
    height = 500 - margin.top - margin.bottom;

    var x = d3.scale.linear()
    .range([0, width]);

    var y = d3.scale.linear()
    .range([height, 0]);

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

    var yAxis = svg.axis()
    .scale(y)
    .orient("left");

    var line = svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

    svg.attr("width", width + margin.left + margin.right)
    .attr("height", height + martin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  14. sdawson revised this gist Apr 11, 2013. 2 changed files with 7 additions and 1 deletion.
    2 changes: 1 addition & 1 deletion config.json
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"description":"line_chart1","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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}
    {"description":"line_chart1","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},"test_data.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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}
    6 changes: 6 additions & 0 deletions test_data.csv
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,6 @@
    x,y
    1,5
    2,60
    3,42
    4,109
    5,27
  15. sdawson revised this gist Apr 11, 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/5361671">Launch: line_chart1</a> ] 5361671 by sdawson<br>
  16. sdawson created this gist Apr 11, 2013.
    1 change: 1 addition & 0 deletions config.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"description":"line_chart1","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"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}
    1 change: 1 addition & 0 deletions inlet.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {}