EfratVil/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Reusable scatter plot.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <script src="//d3js.org/d3.v4.min.js"></script>
    <div style="margin-left: 50px; margin-top: 20px;">
        <button id="btn1" type="button" class="btn btn-info btn-sm">Change Data</button>
        <button id="btn2" type="button" class="btn btn-info btn-sm">Change Color</button>
    </div>
    <p id="g1"></p>

 <script>
     function randomData(samples) {
         var data = [],
             random = d3.randomNormal();

         for (i = 0; i < samples; i++) {
             data.push({
                 x: random(),
                 y: random()
             });
         }
         return data;
     }

     var ds = randomData(200);
     var chart = "g1";

     var margin = { top: 20, right: 20, bottom: 30, left: 50 };
     width = 800 - margin.left - margin.right,
     height = 400 - margin.top - margin.bottom;

     var x = d3.scaleLinear()
         .range([0, width]);

     var y = d3.scaleLinear()
         .range([height, 0]);

     var xAxis = d3.axisBottom(x).ticks(12),
         yAxis = d3.axisLeft(y).ticks(12 * height / width);

     var svg = d3.select("#" + chart).append("svg")
              .attr("id", chart + "_svg")
              .attr("data-margin-right", margin.right)
              .attr("data-margin-left", margin.left)
              .attr("data-margin-top", margin.top)
              .attr("data-margin-bottom", margin.bottom)
              .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(ds, function (d) { return d.x; })).nice();
     y.domain(d3.extent(ds, function (d) { return d.y; })).nice();

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

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

     svg.selectAll(".dot")
         .data(ds)
       .enter().append("circle")
         .attr("class", "dot")
         .attr("r", 4)
         .attr("cx", function (d) { return x(d.x); })
         .attr("cy", function (d) { return y(d.y); })
         .attr("opacity", 0.5)
         .style("fill", "#4292c6");


     // Change data
     d3.select("#btn1").on("click", function () {

         var width = d3.select("#g1_svg").attr("width") - d3.select("#g1_svg").attr("data-margin-left") - d3.select("#g1_svg").attr("data-margin-right"),
             height = d3.select("#g1_svg").attr("height") - d3.select("#g1_svg").attr("data-margin-top") - d3.select("#g1_svg").attr("data-margin-bottom");

         var x = d3.scaleLinear()
                .range([0, width]);

         var y = d3.scaleLinear()
                .range([height, 0]);

         var xAxis = d3.axisBottom(x).ticks(12),
             yAxis = d3.axisLeft(y).ticks(12 * height / width);

         var ds = randomData(200);
         x.domain(d3.extent(ds, function (d) { return d.x; })).nice();
         y.domain(d3.extent(ds, function (d) { return d.y; })).nice();

         var t = svg.transition().duration(750);
         svg.select("#axis--x").transition(t).call(xAxis);
         svg.select("#axis--y").transition(t).call(yAxis);
         svg.selectAll(".dot").data(ds)
         svg.selectAll("circle").transition(t)
             .attr("cx", function (d) { return x(d.x); })
             .attr("cy", function (d) { return y(d.y); });
     });

     // Change color
     d3.select("#btn2").on("click", function () {
         var svg = d3.select("#g1_svg");
         if (d3.select("#g1_svg").selectAll('circle').style("fill") =="rgb(66, 146, 198)")
         { svg.selectAll('circle')
           .transition()
           .duration(750)
           .ease(d3.easeLinear)
           .style("fill", "#d6604d");
         }
         else
         { svg.selectAll('circle')
            .transition()
            .duration(750)
            .ease(d3.easeLinear)
            .style("fill", "#4292c6");
         }
     });


</script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	</head>
	<body>
	<script src="//d3js.org/d3.v4.min.js"></script>
	<div style="margin-left: 50px; margin-top: 20px;">
	<button id="btn1" type="button" class="btn btn-info btn-sm">Change Data</button>
	<button id="btn2" type="button" class="btn btn-info btn-sm">Change Color</button>
	</div>
	<p id="g1"></p>

	<script>
	function randomData(samples) {
	var data = [],
	random = d3.randomNormal();

	for (i = 0; i < samples; i++) {
	data.push({
	x: random(),
	y: random()
	});
	}
	return data;
	}

	var ds = randomData(200);
	var chart = "g1";

	var margin = { top: 20, right: 20, bottom: 30, left: 50 };
	width = 800 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

	var x = d3.scaleLinear()
	.range([0, width]);

	var y = d3.scaleLinear()
	.range([height, 0]);

	var xAxis = d3.axisBottom(x).ticks(12),
	yAxis = d3.axisLeft(y).ticks(12 * height / width);

	var svg = d3.select("#" + chart).append("svg")
	.attr("id", chart + "_svg")
	.attr("data-margin-right", margin.right)
	.attr("data-margin-left", margin.left)
	.attr("data-margin-top", margin.top)
	.attr("data-margin-bottom", margin.bottom)
	.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(ds, function (d) { return d.x; })).nice();
	y.domain(d3.extent(ds, function (d) { return d.y; })).nice();

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

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

	svg.selectAll(".dot")
	.data(ds)
	.enter().append("circle")
	.attr("class", "dot")
	.attr("r", 4)
	.attr("cx", function (d) { return x(d.x); })
	.attr("cy", function (d) { return y(d.y); })
	.attr("opacity", 0.5)
	.style("fill", "#4292c6");


	// Change data
	d3.select("#btn1").on("click", function () {

	var width = d3.select("#g1_svg").attr("width") - d3.select("#g1_svg").attr("data-margin-left") - d3.select("#g1_svg").attr("data-margin-right"),
	height = d3.select("#g1_svg").attr("height") - d3.select("#g1_svg").attr("data-margin-top") - d3.select("#g1_svg").attr("data-margin-bottom");

	var x = d3.scaleLinear()
	.range([0, width]);

	var y = d3.scaleLinear()
	.range([height, 0]);

	var xAxis = d3.axisBottom(x).ticks(12),
	yAxis = d3.axisLeft(y).ticks(12 * height / width);

	var ds = randomData(200);
	x.domain(d3.extent(ds, function (d) { return d.x; })).nice();
	y.domain(d3.extent(ds, function (d) { return d.y; })).nice();

	var t = svg.transition().duration(750);
	svg.select("#axis--x").transition(t).call(xAxis);
	svg.select("#axis--y").transition(t).call(yAxis);
	svg.selectAll(".dot").data(ds)
	svg.selectAll("circle").transition(t)
	.attr("cx", function (d) { return x(d.x); })
	.attr("cy", function (d) { return y(d.y); });
	});

	// Change color
	d3.select("#btn2").on("click", function () {
	var svg = d3.select("#g1_svg");
	if (d3.select("#g1_svg").selectAll('circle').style("fill") =="rgb(66, 146, 198)")
	{ svg.selectAll('circle')
	.transition()
	.duration(750)
	.ease(d3.easeLinear)
	.style("fill", "#d6604d");
	}
	else
	{ svg.selectAll('circle')
	.transition()
	.duration(750)
	.ease(d3.easeLinear)
	.style("fill", "#4292c6");
	}
	});


	</script>
	</body>