Skip to content

Instantly share code, notes, and snippets.

@ptvans
Created March 20, 2013 20:07
Show Gist options
  • Save ptvans/5207989 to your computer and use it in GitHub Desktop.
Save ptvans/5207989 to your computer and use it in GitHub Desktop.
simple area
{"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}}
//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] + ")")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment