basic d3 graph

_.md

[ Launch: basic d3 graph ] b5658b6ac10fbe891bdf by markarios

config.json

{"description":"basic d3 graph","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},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/TCJaZLO.png"}

inlet.js

var margin = {top:20,right:20,bottom:20,left:39};
var padding = {top:20, right:20,bottom:20,left:20};
var outerwidth = 400;
var outerheight = 400;
var innerheight = outerheight - margin.top - margin.bottom;
var innerwidth = outerwidth - margin.left - margin.right;
var h = innerheight - padding.top - padding.bottom;
var w = innerwidth - padding.left - padding.right;

var canvas = d3.select("svg")
	.attr("width",outerwidth)
	.attr("height",outerheight)
	.append("g")
	.attr("transform","translate(" + margin.left + "," + margin.top + ")");

var chart = canvas
	.attr("width",w)
	.attr("height",h)
	.append("g")
	.attr("transform","translate(" + padding.left+"," + padding.top + ")");


var mydata = [ [5,5], [10,10] ,[15,15],[25,59], [23,50]];


var xmax = d3.max(mydata,function(d){return d[0]});
var xmin = d3.min(mydata,function(d){return d[0]});
xmin = xmin > 0 ? 0:xmin;
var ymax = d3.max(mydata,function(d){return d[1]});
var ymin = d3.min(mydata,function(d){return d[1]});
ymin = ymin > 0 ? 0:ymin;


var xscale = d3.scale.linear().domain([xmin,xmax]).range([0,w]);
var yscale = d3.scale.linear().domain([ymin,ymax]).range([h,0]);

var circles = chart.selectAll("circle")
	.data(mydata)
	.enter()
	.append("circle")
	.attr("cx",function(d,i){ return xscale(d[0])})
	.attr("cy",function(d,i){ return yscale(d[1])})
	.attr("r",2.64);

var xAxis = d3.svg.axis().scale(xscale).ticks(5);
var yAxis = d3.svg.axis().scale(yscale).orient("left");

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

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

styles.css

svg {
  font: 10px sans-serif;
  shape-rendering: crispEdges;
}

.axis path, .axis line {
  fill: none;
  stroke: #878787;
}