Skip to content

Instantly share code, notes, and snippets.

@ptvans

ptvans/_.md

Created March 20, 2013 20:07
Download ZIP

Revisions

  1. ptvans revised this gist Mar 20, 2013. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions _.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    [ <a href="http://tributary.io/inlet/5207989">Launch: simple area</a> ] 5207989 by ptvans<br>[ <a href="http://tributary.io/inlet/5207983">Launch: simple area</a> ] 5207983 by enjalot<br>
  2. ptvans created this gist Mar 20, 2013.
    1 change: 1 addition & 0 deletions config.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"description":"simple area","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"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,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false}}
    33 changes: 33 additions & 0 deletions inlet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    //this gives us 10 numbers, from 1 to 10
    var data = d3.range(1, 11);

    //we want to map our x values to pixel values
    var xscale = d3.scale.linear()
    .domain([d3.min(data), d3.max(data)])
    .range([0, 300]); //try changing 300

    //we want to map our y values to pixel values
    var yscale = d3.scale.linear()
    .domain([0, 1])
    .range([300, 0]) //svg corner starts at top left

    var line = d3.svg.area()
    .x(function(d) {
    //for each x value we map it to the pixel value
    return xscale(d);
    })
    .y0(300)
    .y1(function(d) {
    //for each data point we perform our y function and then
    //map that value to pixels
    return yscale(1/d);
    });

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

    var path = svg.append("path")
    .data([data])
    .attr("d", line) //this calls the line function with this element's data
    .style("fill", "black")
    .style("stroke", "#000000")
    .attr("transform", "translate(" + [100, 100] + ")")