Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active November 22, 2016 21:05
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. mbostock revised this gist Feb 9, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: gpl-3.0
  2. mbostock revised this gist Feb 9, 2016. 1 changed file with 11 additions and 0 deletions.
    11 changes: 11 additions & 0 deletions data.tsv
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    x y
    0 0.5
    0.1111111111111111 0.9546487134128409
    0.2222222222222222 0.1215987523460359
    0.3333333333333333 0.36029225090053707
    0.4444444444444444 0.994679123311691
    0.5555555555555556 0.2279894445553151
    0.6666666666666666 0.23171354099978253
    0.7777777777777778 0.9953036778474351
    0.8888888888888888 0.35604834166746735
    1 0.12450637661416192
  3. mbostock revised this gist Nov 17, 2015. 1 changed file with 76 additions and 79 deletions.
    155 changes: 76 additions & 79 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,103 +1,100 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Line Chart</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <style type="text/css">
    <meta charset="utf-8">
    <style>

    body {
    .axis text {
    font: 10px sans-serif;
    }

    .rule line {
    stroke: #eee;
    shape-rendering: crispEdges;
    }

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

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

    circle {
    .dot {
    fill: #fff;
    stroke: #000;
    }

    </style>
    </head>
    <body>
    <script type="text/javascript">
    </style>
    <body>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>

    var data = d3.range(10).map(function(i) {
    return {x: i / 9, y: (Math.sin(i * 2) + 1) / 2};
    });
    var margin = {top: 40, right: 40, bottom: 40, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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

    var w = 960,
    h = 500,
    p = 40,
    x = d3.scale.linear().domain([0, 1]).range([p, w - p]),
    y = d3.scale.linear().domain([0, 1]).range([h - p, p]);
    var y = d3.scale.linear()
    .domain([0, 1])
    .range([height, 0]);

    var z = d3.scale.linear()
    .domain([2 / 3, 1]) // D3 3.x tension is buggy!
    .range(["brown", "steelblue"]);

    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.x); })
    .y(function(d) { return y(d.y); });

    var vis = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .append("svg:g");

    var rules = vis.selectAll("g.rule")
    .data(x.ticks(10))
    .enter().append("svg:g")
    .attr("class", "rule");

    rules.append("svg:line")
    .attr("x1", x)
    .attr("x2", x)
    .attr("y1", p)
    .attr("y2", h - p - 1);

    rules.append("svg:line")
    .attr("class", function(d) { return d ? null : "axis"; })
    .attr("y1", y)
    .attr("y2", y)
    .attr("x1", p)
    .attr("x2", w - p + 1);

    rules.append("svg:text")
    .attr("x", x)
    .attr("y", h - p + 3)
    .attr("dy", ".71em")
    .attr("text-anchor", "middle")
    .text(x.tickFormat(10));

    rules.append("svg:text")
    .attr("y", y)
    .attr("x", p - 3)
    .attr("dy", ".35em")
    .attr("text-anchor", "end")
    .text(y.tickFormat(10));

    vis.selectAll("path")
    .data([0, 0.2, 0.4, 0.6, 0.8, 1])
    .enter().append("svg:path")
    .attr("d", function(d) { return line.tension(d)(data); })
    .style("stroke", d3.interpolateRgb("brown", "steelblue"));

    vis.selectAll("circle")
    .data(data)
    .enter().append("svg:circle")
    .attr("cx", function(d) { return x(d.x); })
    .attr("cy", function(d) { return y(d.y); })
    .attr("r", 4.5);

    </script>
    </body>
    </html>
    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 + ")");

    d3.tsv("data.tsv", type, function(error, data) {
    if (error) throw error;

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

    svg.append("g")
    .attr("class", "axis axis--y")
    .call(yAxis);

    svg.selectAll(".line")
    .data(z.ticks(6))
    .enter().append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line.tension(d)(data); })
    .style("stroke", z);

    svg.selectAll(".dot")
    .data(data)
    .enter().append("circle")
    .attr("class", "dot")
    .attr("cx", function(d) { return x(d.x); })
    .attr("cy", function(d) { return y(d.y); })
    .attr("r", 3.5);
    });

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

    </script>
  4. mbostock revised this gist Oct 12, 2012. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  5. mbostock revised this gist Jun 9, 2011. 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
    @@ -34,7 +34,7 @@
    <script type="text/javascript">

    var data = d3.range(10).map(function(i) {
    return {x: i / 9, y: (Math.sin(i / 2) + 1) / 2};
    return {x: i / 9, y: (Math.sin(i * 2) + 1) / 2};
    });

    var w = 960,
  6. mbostock revised this gist Jun 9, 2011. 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
    @@ -34,7 +34,7 @@
    <script type="text/javascript">

    var data = d3.range(10).map(function(i) {
    return {x: i / 9, y: (Math.sin(i / 9) + 1) / 2};
    return {x: i / 9, y: (Math.sin(i / 2) + 1) / 2};
    });

    var w = 960,
  7. mbostock revised this gist Jun 9, 2011. 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
    @@ -34,7 +34,7 @@
    <script type="text/javascript">

    var data = d3.range(10).map(function(i) {
    return {x: i / 9, y: (Math.sin(i / 3) + 1) / 2};
    return {x: i / 9, y: (Math.sin(i / 9) + 1) / 2};
    });

    var w = 960,
  8. mbostock revised this gist Jun 9, 2011. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -25,15 +25,16 @@

    circle {
    fill: #fff;
    stroke: #000;
    }

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

    var data = d3.range(20).map(function(i) {
    return {x: i / 19, y: (Math.sin(i / 3) + 1) / 2};
    var data = d3.range(10).map(function(i) {
    return {x: i / 9, y: (Math.sin(i / 3) + 1) / 2};
    });

    var w = 960,
  9. mbostock revised this gist Jun 9, 2011. 1 changed file with 2 additions and 3 deletions.
    5 changes: 2 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -18,12 +18,12 @@
    stroke: #000;
    }

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

    circle.line {
    circle {
    fill: #fff;
    }

    @@ -87,7 +87,6 @@
    vis.selectAll("path")
    .data([0, 0.2, 0.4, 0.6, 0.8, 1])
    .enter().append("svg:path")
    .attr("class", "line")
    .attr("d", function(d) { return line.tension(d)(data); })
    .style("stroke", d3.interpolateRgb("brown", "steelblue"));

  10. mbostock revised this gist Jun 9, 2011. 1 changed file with 18 additions and 6 deletions.
    24 changes: 18 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,6 @@

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

    @@ -39,10 +38,15 @@

    var w = 960,
    h = 500,
    p = 20,
    p = 40,
    x = d3.scale.linear().domain([0, 1]).range([p, w - p]),
    y = d3.scale.linear().domain([0, 1]).range([h - p, p]);

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

    var vis = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    @@ -80,11 +84,19 @@
    .attr("text-anchor", "end")
    .text(y.tickFormat(10));

    vis.append("svg:path")
    vis.selectAll("path")
    .data([0, 0.2, 0.4, 0.6, 0.8, 1])
    .enter().append("svg:path")
    .attr("class", "line")
    .attr("d", d3.svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); }));
    .attr("d", function(d) { return line.tension(d)(data); })
    .style("stroke", d3.interpolateRgb("brown", "steelblue"));

    vis.selectAll("circle")
    .data(data)
    .enter().append("svg:circle")
    .attr("cx", function(d) { return x(d.x); })
    .attr("cy", function(d) { return y(d.y); })
    .attr("r", 4.5);

    </script>
    </body>
  11. mbostock revised this gist Jun 9, 2011. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -56,26 +56,26 @@
    rules.append("svg:line")
    .attr("x1", x)
    .attr("x2", x)
    .attr("y1", 0)
    .attr("y2", h - 2 * p - 1);
    .attr("y1", p)
    .attr("y2", h - p - 1);

    rules.append("svg:line")
    .attr("class", function(d) { return d ? null : "axis"; })
    .attr("y1", y)
    .attr("y2", y)
    .attr("x1", 0)
    .attr("x2", w - 2 * p + 1);
    .attr("x1", p)
    .attr("x2", w - p + 1);

    rules.append("svg:text")
    .attr("x", x)
    .attr("y", h - 2 * p + 3)
    .attr("y", h - p + 3)
    .attr("dy", ".71em")
    .attr("text-anchor", "middle")
    .text(x.tickFormat(10));

    rules.append("svg:text")
    .attr("y", y)
    .attr("x", -3)
    .attr("x", p - 3)
    .attr("dy", ".35em")
    .attr("text-anchor", "end")
    .text(y.tickFormat(10));
  12. mbostock created this gist Jun 9, 2011.
    91 changes: 91 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,91 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Line Chart</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <style type="text/css">

    body {
    font: 10px sans-serif;
    }

    .rule line {
    stroke: #eee;
    shape-rendering: crispEdges;
    }

    .rule line.axis {
    stroke: #000;
    }

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

    circle.line {
    fill: #fff;
    }

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

    var data = d3.range(20).map(function(i) {
    return {x: i / 19, y: (Math.sin(i / 3) + 1) / 2};
    });

    var w = 960,
    h = 500,
    p = 20,
    x = d3.scale.linear().domain([0, 1]).range([p, w - p]),
    y = d3.scale.linear().domain([0, 1]).range([h - p, p]);

    var vis = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .append("svg:g");

    var rules = vis.selectAll("g.rule")
    .data(x.ticks(10))
    .enter().append("svg:g")
    .attr("class", "rule");

    rules.append("svg:line")
    .attr("x1", x)
    .attr("x2", x)
    .attr("y1", 0)
    .attr("y2", h - 2 * p - 1);

    rules.append("svg:line")
    .attr("class", function(d) { return d ? null : "axis"; })
    .attr("y1", y)
    .attr("y2", y)
    .attr("x1", 0)
    .attr("x2", w - 2 * p + 1);

    rules.append("svg:text")
    .attr("x", x)
    .attr("y", h - 2 * p + 3)
    .attr("dy", ".71em")
    .attr("text-anchor", "middle")
    .text(x.tickFormat(10));

    rules.append("svg:text")
    .attr("y", y)
    .attr("x", -3)
    .attr("dy", ".35em")
    .attr("text-anchor", "end")
    .text(y.tickFormat(10));

    vis.append("svg:path")
    .attr("class", "line")
    .attr("d", d3.svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); }));

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