RobertDelgado/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
		var myData =
		[
			{x:3, y:2, cat:"a"},
			{x:7, y:6, cat:"b"},
			{x:2, y:8, cat:"b"},
			{x:5, y:7, cat:"a"}


		];
		var colorMap =
		{
			a:"red",
			b:"blue"
		};
		//Setting up x and y scales
		var pointRadius = 4;
		var xAxisName = "x";
		var yAxisName = "y";
		var colorLookup = "cat"

		var margin = {left: 20, right: 20, top: 20, bottom: 20};
		var outerWidth = 250;
		var innerWidth = outerWidth - margin["left"] - margin["right"];
		var outerHeight = 250;
		var innerHeight = outerHeight - margin["top"] - margin["bottom"];


		var svg = d3.select("body").append("svg").attr("width", outerWidth).attr("height", outerHeight);
		var g = svg.append("g").attr("transform", "translate(" + margin["left"] + "," + margin["top"] +")");

		var xAxisG = g.append("g").attr("transform", "translate(0," + innerHeight + ")");


		var yAxisG = g.append("g");


		function render(data, x_input, y_input){


			var max_x = d3.max(myData, function(d){return d[xAxisName];});
			var max_y = d3.max(myData, function(d){return d[yAxisName];});
			var xScale = d3.scaleLinear().range([0,innerWidth]).domain([0,max_x]);
			var yScale = d3.scaleLinear().range([innerHeight,0]).domain([0,max_y]);

			var xAxis = d3.axisBottom().scale(xScale).tickPadding(2);//.tickSize(-innerWidth);
			var yAxis = d3.axisLeft().scale(yScale).tickPadding(2);//.tickSize(-innerHeight);


			xAxisG.append("text").attr(x_input, -innerWidth/2).attr(y_input, 100);
			yAxisG.append("text").attr(x_input, innerHeight/2).attr(y_input, 60).attr("transform", `rotate(-90)`);


			xScale.domain([0, max_x]);
			yScale.domain([0,max_y]);
			xAxisG.call(xAxis);
			yAxisG.call(yAxis);

			//var circs = svg.selectAll("circle").data(data);
			var circs = g.selectAll("circle").data(data);

			circs.enter().append("circle")
			.attr("r",pointRadius)
			.attr("fill", function(d){return (colorMap[d[colorLookup]]);})
			.attr("cx", function(d){return(xScale(d[x_input]));})
			.attr("cy", function(d){return(yScale(d[y_input]));});

			circs.exit().remove();

				};


		render(myData, "x", "y");
		//setTimeout(function(){render(myData[0,1]);}, 1000);
		//setTimeout(function(){render(myData[0,1,2]);}, 1000);


  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>

	<body>
	<script>
	var myData =
	[
	{x:3, y:2, cat:"a"},
	{x:7, y:6, cat:"b"},
	{x:2, y:8, cat:"b"},
	{x:5, y:7, cat:"a"}


	];
	var colorMap =
	{
	a:"red",
	b:"blue"
	};
	//Setting up x and y scales
	var pointRadius = 4;
	var xAxisName = "x";
	var yAxisName = "y";
	var colorLookup = "cat"

	var margin = {left: 20, right: 20, top: 20, bottom: 20};
	var outerWidth = 250;
	var innerWidth = outerWidth - margin["left"] - margin["right"];
	var outerHeight = 250;
	var innerHeight = outerHeight - margin["top"] - margin["bottom"];




	var svg = d3.select("body").append("svg").attr("width", outerWidth).attr("height", outerHeight);
	var g = svg.append("g").attr("transform", "translate(" + margin["left"] + "," + margin["top"] +")");

	var xAxisG = g.append("g").attr("transform", "translate(0," + innerHeight + ")");


	var yAxisG = g.append("g");













	function render(data, x_input, y_input){


	var max_x = d3.max(myData, function(d){return d[xAxisName];});
	var max_y = d3.max(myData, function(d){return d[yAxisName];});
	var xScale = d3.scaleLinear().range([0,innerWidth]).domain([0,max_x]);
	var yScale = d3.scaleLinear().range([innerHeight,0]).domain([0,max_y]);

	var xAxis = d3.axisBottom().scale(xScale).tickPadding(2);//.tickSize(-innerWidth);
	var yAxis = d3.axisLeft().scale(yScale).tickPadding(2);//.tickSize(-innerHeight);


	xAxisG.append("text").attr(x_input, -innerWidth/2).attr(y_input, 100);
	yAxisG.append("text").attr(x_input, innerHeight/2).attr(y_input, 60).attr("transform", `rotate(-90)`);


	xScale.domain([0, max_x]);
	yScale.domain([0,max_y]);
	xAxisG.call(xAxis);
	yAxisG.call(yAxis);

	//var circs = svg.selectAll("circle").data(data);
	var circs = g.selectAll("circle").data(data);

	circs.enter().append("circle")
	.attr("r",pointRadius)
	.attr("fill", function(d){return (colorMap[d[colorLookup]]);})
	.attr("cx", function(d){return(xScale(d[x_input]));})
	.attr("cy", function(d){return(yScale(d[y_input]));});

	circs.exit().remove();

	};


	render(myData, "x", "y");
	//setTimeout(function(){render(myData[0,1]);}, 1000);
	//setTimeout(function(){render(myData[0,1,2]);}, 1000);





	</script>
	</body>