nnattawat/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A reusable d3 line chart inspired by Reuseable Charts article. Function line() is used to create a new chart instance. Graphs are rendered using randomly-generated data which will be updated repeatedly.
This example can be view on bl.ocks.org.

  
## d3.line.js
/*
* Define line graph
*/
function line(){
  // Default settings
  var $el = d3.select("body")
  var width = 960;
  var height = 500;
  var color = "steelblue";
  var margin = {top: 10, right: 30, bottom: 30, left: 30};
  var data = [];
  var svg, y, xAxis, yAxis, line;
  var x = d3.scale.linear().range([0, width]);

  var object = {};

  // Method for render/refresh graph
  object.render = function(){
    if(!svg){ // Render first time
      y = d3.scale.linear()
      .range([height, 0]);

      xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

      yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

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

      svg = $el.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 + ")");

      x.domain(d3.extent(data, function(d) { return d.x; }));
      y.domain(d3.extent(data, function(d) { return d.y; }));

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

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

      svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("stroke", color)
        .attr("d", line);
    }else{ //Refresh
      object.data(data);
      x.domain(d3.extent(data, function(d) { return d.x; }));
      y.domain(d3.extent(data, function(d) { return d.y; }));

      svg.select("g.y")
        .transition()
        .duration(1000)
        .call(yAxis);

      svg.select("g.x")
        .transition()
        .duration(1000)
        .call(xAxis);

      svg.selectAll("path.line")
       .datum(data)
        .transition()
        .duration(1000)
       .attr("d", line);
    }
    return object;
  };

  // Getter and setter methods
  object.data = function(value){
    if (!arguments.length) return data;
    data = value;
    return object;
  };

  object.$el = function(value){
    if (!arguments.length) return $el;
    $el = value;
    return object;
  };

  object.width = function(value){
    if (!arguments.length) return width;
    width = value;
    return object;
  };

  object.height = function(value){
    if (!arguments.length) return height;
    height = value;
    return object;
  };

  object.color = function(value){
    if (!arguments.length) return color;
    color = value;
    return object;
  };
  object.x = function(value){
    if (!arguments.length) return x;
    x = value;
    return object;
  }
  return object;
};

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

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

.x.axis path {
  display: none;
}

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

.tooltip .circle{
  fill: none;
}
</style>
<body>
  <div id="line-1"></div>
  <div id="line-2"></div>
  <div id="line-3"></div>
  <div id="line-4"></div>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="d3.line.js"></script>
<script>

// Method used for generate random data.
var getData = function(){
  var data = [];
  for(var i=0; i<100; i++){
    data.push({
      x: i,
      y: Math.round(Math.random() * 100)
    });
  };
  return data;
};


/*
* Create graphs
*/
var line1 = line()
              .$el(d3.select("#line-1"))
              .height(100) // Set height
              .data(getData()) // Set data
              .render();

var line2 = line()
              .$el(d3.select("#line-2"))
              .height(100) // Set height
              .color("green") // Set color
              .data(getData()) // Set data
              .render();

var line3 = line()
              .$el(d3.select("#line-3"))
              .height(100) // Set height
              .color("red") // Set color
              .data(getData()) // Set data
              .render();

var line4 = line()
              .$el(d3.select("#line-4"))
              .height(100) // Set height
              .color("gray") // Set color
              .data(getData()) // Set data
              .render();
/*
* Refresh graphs repeatedly
*/
setInterval(function(){
  line1.data(getData()).render();
  line2.data(getData()).render();
  line3.data(getData()).render();
  line4.data(getData()).render();
}, 3000);
</script>


## thumbnail.png

      
    Raw
  

              thumbnail.png
	/*
	* Define line graph
	*/
	function line(){
	// Default settings
	var $el = d3.select("body")
	var width = 960;
	var height = 500;
	var color = "steelblue";
	var margin = {top: 10, right: 30, bottom: 30, left: 30};
	var data = [];
	var svg, y, xAxis, yAxis, line;
	var x = d3.scale.linear().range([0, width]);

	var object = {};

	// Method for render/refresh graph
	object.render = function(){
	if(!svg){ // Render first time
	y = d3.scale.linear()
	.range([height, 0]);

	xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

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

	svg = $el.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 + ")");

	x.domain(d3.extent(data, function(d) { return d.x; }));
	y.domain(d3.extent(data, function(d) { return d.y; }));

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

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

	svg.append("path")
	.datum(data)
	.attr("class", "line")
	.attr("stroke", color)
	.attr("d", line);
	}else{ //Refresh
	object.data(data);
	x.domain(d3.extent(data, function(d) { return d.x; }));
	y.domain(d3.extent(data, function(d) { return d.y; }));

	svg.select("g.y")
	.transition()
	.duration(1000)
	.call(yAxis);

	svg.select("g.x")
	.transition()
	.duration(1000)
	.call(xAxis);

	svg.selectAll("path.line")
	.datum(data)
	.transition()
	.duration(1000)
	.attr("d", line);
	}
	return object;
	};

	// Getter and setter methods
	object.data = function(value){
	if (!arguments.length) return data;
	data = value;
	return object;
	};

	object.$el = function(value){
	if (!arguments.length) return $el;
	$el = value;
	return object;
	};

	object.width = function(value){
	if (!arguments.length) return width;
	width = value;
	return object;
	};

	object.height = function(value){
	if (!arguments.length) return height;
	height = value;
	return object;
	};

	object.color = function(value){
	if (!arguments.length) return color;
	color = value;
	return object;
	};
	object.x = function(value){
	if (!arguments.length) return x;
	x = value;
	return object;
	}
	return object;
	};
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

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

	.x.axis path {
	display: none;
	}

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

	.tooltip .circle{
	fill: none;
	}
	</style>
	<body>
	<div id="line-1"></div>
	<div id="line-2"></div>
	<div id="line-3"></div>
	<div id="line-4"></div>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script src="d3.line.js"></script>
	<script>

	// Method used for generate random data.
	var getData = function(){
	var data = [];
	for(var i=0; i<100; i++){
	data.push({
	x: i,
	y: Math.round(Math.random() * 100)
	});
	};
	return data;
	};


	/*
	* Create graphs
	*/
	var line1 = line()
	.$el(d3.select("#line-1"))
	.height(100) // Set height
	.data(getData()) // Set data
	.render();

	var line2 = line()
	.$el(d3.select("#line-2"))
	.height(100) // Set height
	.color("green") // Set color
	.data(getData()) // Set data
	.render();

	var line3 = line()
	.$el(d3.select("#line-3"))
	.height(100) // Set height
	.color("red") // Set color
	.data(getData()) // Set data
	.render();

	var line4 = line()
	.$el(d3.select("#line-4"))
	.height(100) // Set height
	.color("gray") // Set color
	.data(getData()) // Set data
	.render();
	/*
	* Refresh graphs repeatedly
	*/
	setInterval(function(){
	line1.data(getData()).render();
	line2.data(getData()).render();
	line3.data(getData()).render();
	line4.data(getData()).render();
	}, 3000);
	</script>