Skip to content

Instantly share code, notes, and snippets.

@enthal

enthal/index.html

Created February 2, 2012 23:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save enthal/1726550 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save enthal/1726550 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. enthal revised this gist Feb 3, 2012. 1 changed file with 17 additions and 6 deletions.
    23 changes: 17 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -61,7 +61,7 @@

    var w = 760;
    var h = 400;
    var x = d3.scale.linear().domain([-1, 1]).range([0,w]);
    var x = d3.scale.linear().domain([-5, 5]).range([0,w]);
    var y = d3.scale.linear().domain([ 0, 1]).range([h,0]);

    var pad = 50;
    @@ -76,12 +76,23 @@
    var legend = d3.select("body").append("div")
    .classed("legend", true)

    var continuous = make_gaussian_func(-2, .7);

    make_rules();
    chart_line();
    make_mouseover_guides();


    function square(xi) { return Math.pow(xi,2) }
    function make_gaussian_func(mu, sigma_squared) {
    // per: http://en.wikipedia.org/wiki/Gaussian_function
    // and: http://mathworld.wolfram.com/GaussianFunction.html
    var sqrt = Math.sqrt, pow = Math.pow, e = Math.E, pi = Math.PI;
    var sigma = sqrt(sigma_squared);
    var a = 1 / (sigma * sqrt(2 * pi));
    return (function(xi) {
    return pow( a * e, - pow(xi - mu, 2) / (2 * pow(sigma, 2)) )
    });
    }

    function chart_line() {
    var g = vis.append("svg:g")
    @@ -90,7 +101,7 @@
    g.append("svg:path")
    .attr("d", function(d) { return d3.svg.line()(
    x.ticks(100).map(function(xi) {
    return [ x(xi), y(square(xi)) ]
    return [ x(xi), y(continuous(xi)) ]
    })
    )})
    }
    @@ -122,14 +133,14 @@
    var xi = x.invert(d3.svg.mouse(this)[0]);

    legend
    .text("x: "+format_5f(xi)+ " | y: "+format_5f(square(xi)));
    .text("x: "+format_5f(xi)+ " | y: "+format_5f(continuous(xi)));

    guides
    .attr("transform", "translate("+(x(xi))+",0)")
    .attr("visibility", "visible")

    y_guides
    .attr("transform", "translate(0,"+y(square(xi))+")")
    .attr("transform", "translate(0,"+y(continuous(xi))+")")
    }

    function blank_legend_values() {
    @@ -149,7 +160,7 @@
    return d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(20)
    .ticks(10)
    }

    function make_y_axis() {
  2. enthal revised this gist Feb 3, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -149,7 +149,7 @@
    return d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(8)
    .ticks(20)
    }

    function make_y_axis() {
  3. enthal revised this gist Feb 3, 2012. 1 changed file with 5 additions and 4 deletions.
    9 changes: 5 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -78,7 +78,7 @@

    make_rules();
    chart_line();
    mousify();
    make_mouseover_guides();


    function square(xi) { return Math.pow(xi,2) }
    @@ -95,7 +95,7 @@
    )})
    }

    function mousify() {
    function make_mouseover_guides() {
    var guides = vis.append("svg:g")
    .classed("guides", true)
    var y_guides = guides.append("svg:g")
    @@ -116,9 +116,10 @@

    blank_legend_values();

    var format_5f = d3.format(".5f");

    function update_legend_values() {
    var xi = x.invert(d3.svg.mouse(this)[0]);
    var format_5f = d3.format(".5f");

    legend
    .text("x: "+format_5f(xi)+ " | y: "+format_5f(square(xi)));
    @@ -133,7 +134,7 @@

    function blank_legend_values() {
    legend
    .text("Try mousing over the graph!")
    .text("Mouse over the graph...")

    guides
    .attr("visibility", "hidden")
  4. enthal revised this gist Feb 3, 2012. 1 changed file with 33 additions and 32 deletions.
    65 changes: 33 additions & 32 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -78,20 +78,7 @@

    make_rules();
    chart_line();

    var guides = vis.append("svg:g")
    .classed("guides", true)
    var y_guides = guides.append("svg:g")
    guides.append("svg:line")
    .attr("y1",h)
    y_guides.append("svg:circle")
    .attr("r",7)
    y_guides.append("svg:line")
    .attr("x1",-20)
    .attr("x2",+20)

    make_mouse_area();
    blank_legend_values();
    mousify();


    function square(xi) { return Math.pow(xi,2) }
    @@ -108,35 +95,49 @@
    )})
    }

    function make_mouse_area() {
    function mousify() {
    var guides = vis.append("svg:g")
    .classed("guides", true)
    var y_guides = guides.append("svg:g")
    guides.append("svg:line")
    .attr("y1",h)
    y_guides.append("svg:circle")
    .attr("r",7)
    y_guides.append("svg:line")
    .attr("x1",-20)
    .attr("x2",+20)

    vis.append("svg:rect")
    .classed("mouse_area", true)
    .attr("width", w)
    .attr("height", h)
    .on("mousemove", update_legend_values)
    .on("mouseout", blank_legend_values)
    }

    function update_legend_values() {
    var xi = x.invert(d3.svg.mouse(this)[0]);
    var format_5f = d3.format(".5f");
    blank_legend_values();

    legend
    .text("x: "+format_5f(xi)+ " | y: "+format_5f(square(xi)));
    function update_legend_values() {
    var xi = x.invert(d3.svg.mouse(this)[0]);
    var format_5f = d3.format(".5f");

    guides
    .attr("transform", "translate("+(x(xi))+",0)")
    .attr("visibility", "visible")
    legend
    .text("x: "+format_5f(xi)+ " | y: "+format_5f(square(xi)));

    y_guides
    .attr("transform", "translate(0,"+y(square(xi))+")")
    }
    function blank_legend_values() {
    legend
    .text("Try mousing over the graph!")
    guides
    .attr("transform", "translate("+(x(xi))+",0)")
    .attr("visibility", "visible")

    guides
    .attr("visibility", "hidden")
    y_guides
    .attr("transform", "translate(0,"+y(square(xi))+")")
    }

    function blank_legend_values() {
    legend
    .text("Try mousing over the graph!")

    guides
    .attr("visibility", "hidden")
    }
    }


  5. enthal revised this gist Feb 3, 2012. 1 changed file with 24 additions and 7 deletions.
    31 changes: 24 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -14,11 +14,19 @@
    .mouse_area {
    opacity: 0;
    }
    line.guide {
    .guides {
    stroke-width: 1px;
    }
    .guides line {
    stroke: #BBF;
    shape-rendering: crispEdges;
    }
    .guides circle {
    fill: #BBF;
    stroke: #348;
    opacity: 0.2;
    }


    .rules line, .rules path {
    shape-rendering: crispEdges;
    @@ -71,10 +79,16 @@
    make_rules();
    chart_line();

    var guide_line = vis.append("svg:line")
    .classed("guide", true)
    .attr("y1",0)
    .attr("y2",h)
    var guides = vis.append("svg:g")
    .classed("guides", true)
    var y_guides = guides.append("svg:g")
    guides.append("svg:line")
    .attr("y1",h)
    y_guides.append("svg:circle")
    .attr("r",7)
    y_guides.append("svg:line")
    .attr("x1",-20)
    .attr("x2",+20)

    make_mouse_area();
    blank_legend_values();
    @@ -110,15 +124,18 @@
    legend
    .text("x: "+format_5f(xi)+ " | y: "+format_5f(square(xi)));

    guide_line
    guides
    .attr("transform", "translate("+(x(xi))+",0)")
    .attr("visibility", "visible")

    y_guides
    .attr("transform", "translate(0,"+y(square(xi))+")")
    }
    function blank_legend_values() {
    legend
    .text("Try mousing over the graph!")

    guide_line
    guides
    .attr("visibility", "hidden")
    }

  6. enthal revised this gist Feb 3, 2012. 1 changed file with 28 additions and 7 deletions.
    35 changes: 28 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,12 +8,17 @@
    <style type="text/css">

    body {
    font: 10px sans-serif;
    font: 12px sans-serif;
    }

    .mouse_area {
    opacity: 0;
    }
    line.guide {
    stroke-width: 1px;
    stroke: #BBF;
    shape-rendering: crispEdges;
    }

    .rules line, .rules path {
    shape-rendering: crispEdges;
    @@ -37,7 +42,7 @@
    .series path {
    fill: none;
    stroke: #348;
    stroke-width: 5px;
    stroke-width: 3px;
    }

    </style>
    @@ -62,11 +67,17 @@

    var legend = d3.select("body").append("div")
    .classed("legend", true)
    .text("Try mousing over the graph!")

    make_rules();
    chart_line();

    var guide_line = vis.append("svg:line")
    .classed("guide", true)
    .attr("y1",0)
    .attr("y2",h)

    make_mouse_area();
    blank_legend_values();


    function square(xi) { return Math.pow(xi,2) }
    @@ -92,13 +103,23 @@
    .on("mouseout", blank_legend_values)
    }

    var format_5f = d3.format(".5f")
    function update_legend_values() {
    xi = x.invert(d3.svg.mouse(this)[0]);
    legend.text("x: "+format_5f(xi)+ " | y: "+format_5f(square(xi)));
    var xi = x.invert(d3.svg.mouse(this)[0]);
    var format_5f = d3.format(".5f");

    legend
    .text("x: "+format_5f(xi)+ " | y: "+format_5f(square(xi)));

    guide_line
    .attr("transform", "translate("+(x(xi))+",0)")
    .attr("visibility", "visible")
    }
    function blank_legend_values() {
    legend.text("");
    legend
    .text("Try mousing over the graph!")

    guide_line
    .attr("visibility", "hidden")
    }


  7. enthal revised this gist Feb 3, 2012. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -92,9 +92,10 @@
    .on("mouseout", blank_legend_values)
    }

    var format_5f = d3.format(".5f")
    function update_legend_values() {
    xi = x.invert(d3.svg.mouse(this)[0]);
    legend.text("x: "+xi+ " | y: "+square(xi));
    legend.text("x: "+format_5f(xi)+ " | y: "+format_5f(square(xi)));
    }
    function blank_legend_values() {
    legend.text("");
  8. enthal revised this gist Feb 3, 2012. 1 changed file with 11 additions and 12 deletions.
    23 changes: 11 additions & 12 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -11,8 +11,8 @@
    font: 10px sans-serif;
    }

    .backplane {
    fill: #FAFAFA;
    .mouse_area {
    opacity: 0;
    }

    .rules line, .rules path {
    @@ -64,22 +64,13 @@
    .classed("legend", true)
    .text("Try mousing over the graph!")

    make_backplane();
    make_rules();
    chart_line();
    make_mouse_area();


    function square(xi) { return Math.pow(xi,2) }

    function make_backplane() {
    vis.append("svg:rect")
    .classed("backplane", true)
    .attr("width", w)
    .attr("height", h)
    .on("mousemove", update_legend_values)
    .on("mouseout", blank_legend_values)
    }

    function chart_line() {
    var g = vis.append("svg:g")
    .classed("series", true)
    @@ -90,7 +81,15 @@
    return [ x(xi), y(square(xi)) ]
    })
    )})
    }

    function make_mouse_area() {
    vis.append("svg:rect")
    .classed("mouse_area", true)
    .attr("width", w)
    .attr("height", h)
    .on("mousemove", update_legend_values)
    .on("mouseout", blank_legend_values)
    }

    function update_legend_values() {
  9. enthal revised this gist Feb 3, 2012. 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
    @@ -48,8 +48,8 @@

    var w = 760;
    var h = 400;
    var x = d3.scale.linear().domain([-1, 1]) .range([0,w]);
    var y = d3.scale.linear().domain([ 0, 1]) .range([h,0]);
    var x = d3.scale.linear().domain([-1, 1]).range([0,w]);
    var y = d3.scale.linear().domain([ 0, 1]).range([h,0]);

    var pad = 50;
    var svg = d3.select("body")
  10. enthal revised this gist Feb 3, 2012. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -90,6 +90,7 @@
    return [ x(xi), y(square(xi)) ]
    })
    )})
    .on("mousemove", update_legend_values)
    }

    function update_legend_values() {
  11. enthal revised this gist Feb 3, 2012. 1 changed file with 28 additions and 9 deletions.
    37 changes: 28 additions & 9 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -11,6 +11,10 @@
    font: 10px sans-serif;
    }

    .backplane {
    fill: #FAFAFA;
    }

    .rules line, .rules path {
    shape-rendering: crispEdges;
    stroke: #000;
    @@ -56,29 +60,44 @@
    var vis = svg.append("svg:g")
    .attr("transform", "translate(40,20)")

    var legend = d3.select("body").append("div")
    .classed("legend", true)
    .text("Try mousing over the graph!")

    make_backplane();
    make_rules();
    chart_line();


    function square(xi) { return Math.pow(xi,2) }

    function make_backplane() {
    vis.append("svg:rect")
    .classed("backplane", true)
    .attr("width", w)
    .attr("height", h)
    .on("mousemove", update_legend_values)
    .on("mouseout", blank_legend_values)
    }

    function chart_line() {
    var sample_n = 100;
    var g = vis.append("svg:g")
    .classed("series", true)

    g.append("svg:path")
    .attr("d", function(d) { return d3.svg.line()(
    x.ticks(100).map(function(xi) {
    return [
    x(xi),
    y(Math.pow(xi,2))
    ]
    return [ x(xi), y(square(xi)) ]
    })
    )})
    .on("mousemove", function() {
    g_x_y = d3.svg.mouse(this);
    console.log(x.invert(g_x_y[0]),y.invert(g_x_y[1]));
    } )
    }

    function update_legend_values() {
    xi = x.invert(d3.svg.mouse(this)[0]);
    legend.text("x: "+xi+ " | y: "+square(xi));
    }
    function blank_legend_values() {
    legend.text("");
    }


  12. enthal revised this gist Feb 3, 2012. 1 changed file with 5 additions and 6 deletions.
    11 changes: 5 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -44,8 +44,8 @@

    var w = 760;
    var h = 400;
    var x = d3.scale.linear().domain([0, 1]) .range([0,w]);
    var y = d3.scale.linear().domain([0, 1]) .range([h,0]);
    var x = d3.scale.linear().domain([-1, 1]) .range([0,w]);
    var y = d3.scale.linear().domain([ 0, 1]) .range([h,0]);

    var pad = 50;
    var svg = d3.select("body")
    @@ -68,14 +68,13 @@

    g.append("svg:path")
    .attr("d", function(d) { return d3.svg.line()(
    d3.range(sample_n).map(function(i) {
    var xi = i / sample_n;
    x.ticks(100).map(function(xi) {
    return [
    x(xi),
    y(Math.pow(xi,2))
    ]
    }))
    })
    })
    )})
    .on("mousemove", function() {
    g_x_y = d3.svg.mouse(this);
    console.log(x.invert(g_x_y[0]),y.invert(g_x_y[1]));
  13. enthal revised this gist Feb 3, 2012. 1 changed file with 72 additions and 44 deletions.
    116 changes: 72 additions & 44 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +1,7 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Axes</title>
    <title>D3 - Line Chart - continuous function</title>
    <!-- script type="text/javascript" src="https://raw.github.com/jquery/sizzle/master/sizzle.js"></script -->
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.min.js"></script>
    @@ -30,9 +30,10 @@
    }


    path {
    .series path {
    fill: none;
    stroke-width: 1.5px;
    stroke: #348;
    stroke-width: 5px;
    }

    </style>
    @@ -43,12 +44,10 @@

    var w = 760;
    var h = 400;
    var pad = 50;
    var d0 = new Date("Jan 29 2011 UTC");
    var d1 = new Date("March 15 2011 UTC");
    var x = d3.time.scale() .domain([d0, d1]).range([0,w]);
    var x = d3.scale.linear().domain([0, 1]) .range([0,w]);
    var y = d3.scale.linear().domain([0, 1]) .range([h,0]);

    var pad = 50;
    var svg = d3.select("body")
    .append("svg:svg")
    .attr("height", h + pad)
    @@ -57,47 +56,76 @@
    var vis = svg.append("svg:g")
    .attr("transform", "translate(40,20)")

    var rules = vis.append("svg:g").classed("rules", true)

    function make_x_axis() {
    return d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(8)
    make_rules();
    chart_line();


    function chart_line() {
    var sample_n = 100;
    var g = vis.append("svg:g")
    .classed("series", true)

    g.append("svg:path")
    .attr("d", function(d) { return d3.svg.line()(
    d3.range(sample_n).map(function(i) {
    var xi = i / sample_n;
    return [
    x(xi),
    y(Math.pow(xi,2))
    ]
    }))
    })
    .on("mousemove", function() {
    g_x_y = d3.svg.mouse(this);
    console.log(x.invert(g_x_y[0]),y.invert(g_x_y[1]));
    } )
    }

    function make_y_axis() {
    return d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10)
    }

    rules.append("svg:g").classed("grid x_grid", true)
    .attr("transform", "translate(0,"+h+")")
    .call(make_x_axis()
    .tickSize(-h,0,0)
    .tickFormat("")
    )

    rules.append("svg:g").classed("grid y_grid", true)
    .call(make_y_axis()
    .tickSize(-w,0,0)
    .tickFormat("")
    )

    rules.append("svg:g").classed("labels x_labels", true)
    .attr("transform", "translate(0,"+h+")")
    .call(make_x_axis()
    .tickSize(5)
    // .tickFormat(d3.time.format("%Y/%m"))
    )

    rules.append("svg:g").classed("labels y_labels", true)
    .call(make_y_axis()
    .tickSubdivide(1)
    .tickSize(10, 5, 0)
    )
    function make_rules() {
    var rules = vis.append("svg:g").classed("rules", true)

    function make_x_axis() {
    return d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(8)
    }

    function make_y_axis() {
    return d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10)
    }

    rules.append("svg:g").classed("grid x_grid", true)
    .attr("transform", "translate(0,"+h+")")
    .call(make_x_axis()
    .tickSize(-h,0,0)
    .tickFormat("")
    )

    rules.append("svg:g").classed("grid y_grid", true)
    .call(make_y_axis()
    .tickSize(-w,0,0)
    .tickFormat("")
    )

    rules.append("svg:g").classed("labels x_labels", true)
    .attr("transform", "translate(0,"+h+")")
    .call(make_x_axis()
    .tickSize(5)
    // .tickFormat(d3.time.format("%Y/%m"))
    )

    rules.append("svg:g").classed("labels y_labels", true)
    .call(make_y_axis()
    .tickSubdivide(1)
    .tickSize(10, 5, 0)
    )
    }


    </script>
  14. enthal created this gist Feb 2, 2012.
    105 changes: 105 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,105 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Axes</title>
    <!-- script type="text/javascript" src="https://raw.github.com/jquery/sizzle/master/sizzle.js"></script -->
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.min.js"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.time.min.js"></script>
    <style type="text/css">

    body {
    font: 10px sans-serif;
    }

    .rules line, .rules path {
    shape-rendering: crispEdges;
    stroke: #000;
    }

    .rules .tick {
    }
    .rules .minor {
    stroke: #BBB;
    }
    .rules .domain {
    fill: none;
    }

    .grid .tick {
    stroke: #CCC;
    }


    path {
    fill: none;
    stroke-width: 1.5px;
    }

    </style>
    </head>
    <body>
    <script type="text/javascript">


    var w = 760;
    var h = 400;
    var pad = 50;
    var d0 = new Date("Jan 29 2011 UTC");
    var d1 = new Date("March 15 2011 UTC");
    var x = d3.time.scale() .domain([d0, d1]).range([0,w]);
    var y = d3.scale.linear().domain([0, 1]) .range([h,0]);

    var svg = d3.select("body")
    .append("svg:svg")
    .attr("height", h + pad)
    .attr("width", w + pad)

    var vis = svg.append("svg:g")
    .attr("transform", "translate(40,20)")

    var rules = vis.append("svg:g").classed("rules", true)

    function make_x_axis() {
    return d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(8)
    }

    function make_y_axis() {
    return d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10)
    }

    rules.append("svg:g").classed("grid x_grid", true)
    .attr("transform", "translate(0,"+h+")")
    .call(make_x_axis()
    .tickSize(-h,0,0)
    .tickFormat("")
    )

    rules.append("svg:g").classed("grid y_grid", true)
    .call(make_y_axis()
    .tickSize(-w,0,0)
    .tickFormat("")
    )

    rules.append("svg:g").classed("labels x_labels", true)
    .attr("transform", "translate(0,"+h+")")
    .call(make_x_axis()
    .tickSize(5)
    // .tickFormat(d3.time.format("%Y/%m"))
    )

    rules.append("svg:g").classed("labels y_labels", true)
    .call(make_y_axis()
    .tickSubdivide(1)
    .tickSize(10, 5, 0)
    )


    </script>
    </body>
    </html>