vvoros/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>

  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script>

    // simple circle
    d3.select("body")
      .append("svg")
        .attr("width", 50)
        .attr("height", 50)
      .append("circle")
        .attr("cx", 25)
        .attr("cy", 25)
        .attr("r", 25)
        .style("fill", "purple");

    // data bind
    let theData = [ 'a', 'b', 'c' ];

    d3.select("body")
      .selectAll("p")
      .data(theData)
      .enter()
      .append("p")
        .text((d, i) => {
          return `${i}. item: ${d}`;
        });

    // data bind to svg
    let circleData = [
      {
        x_axis: 30,
        y_axis: 30,
        radius: 20,
        color : "green"
      },
      {
        x_axis: 70,
        y_axis: 70,
        radius: 20,
        color : "purple"
      },
      {
        x_axis: 110,
        y_axis: 100,
        radius: 20,
        color : "red"
      }];

    d3.select("body")
      .append("p")
      .append("svg")
        .attr("width", 200)
        .attr("height", 200)
      .selectAll("circle")
      .data(circleData)
      .enter()
      .append("circle")
        .attr("cx", (d) => {
          return d.x_axis;
        })
        .attr("cy", (d) => {
          return d.y_axis;
        })
        .attr("r", (d) => {
          return d.radius;
        })
        .style("fill", (d) => {
          return d.color;
        });

    // path generator
    let lineData = [ { "x": 1,   "y": 5},  { "x": 20,  "y": 20},
                   { "x": 40,  "y": 10}, { "x": 60,  "y": 40},
                   { "x": 80,  "y": 5},  { "x": 100, "y": 60}];

    let lineFunction = d3.line()
                          .x(function(d) { return d.x; })
                          .y(function(d) { return d.y; })
                          .curve(d3.curveCatmullRom.alpha(0.5));

    d3.select("body")
      .append("p")
      .append("svg")
        .attr("width", 200)
        .attr("height", 200)
      .append("path")
        .attr("d", lineFunction(lineData))
        .attr("stroke", "blue")
        .attr("stroke-width", 2)
        .attr("fill", "none");


    // scale
    let rectangleData = [
      { "x_axis": 10, "y_axis": 10, "height": 20, "width":20, "color" : "green" },
      { "x_axis": 200, "y_axis": 40, "height": 20, "width":20, "color" : "purple" },
      { "x_axis": 70, "y_axis": 70, "height": 20, "width":20, "color" : "red" }];

    let max_x = d3.max(rectangleData, (d) => {
      return d.x_axis + d.width;
    });
    let max_y = d3.max(rectangleData, (d) => {
      return d.y_axis + d.height;
    });

    let linearScale = d3.scaleLinear()
                        .domain([0, d3.max([max_x, max_y])])
                        .range([0, 100]);

    d3.select("body")
      .append("p")
      .append("svg")
        .attr("width", linearScale(max_x))
        .attr("height", linearScale(max_y))
      .selectAll("rect")
      .data(rectangleData)
      .enter()
      .append("rect")
        .attr("x", (d) => {
          return linearScale(d.x_axis);
        })
        .attr("y", (d) => {
          return linearScale(d.y_axis);
        })
        .attr("height", (d) => {
          return linearScale(d.height);
        })
        .attr("width", (d) => {
          return linearScale(d.width);
        })
        .style("fill", (d) => {
          return d.color;
        });

    // grouping, transformation, text
    let container = d3.select("body")
      .append("p")
      .append("svg")
        .attr("width", 250)
        .attr("height", 250);

    let circleGroup = container.append("g")
      .attr("transform", "translate(80,0)");

    circleGroup.selectAll("circle")
      .data(circleData)
      .enter()
      .append("circle")
        .attr("cx", (d) => {
          return d.x_axis;
        })
        .attr("cy", (d) => {
          return d.y_axis;
        })
        .attr("r", (d) => {
          return d.radius;
        })
        .style("fill", (d) => {
          return d.color;
        });

    circleGroup.selectAll("text")
      .data(circleData)
      .enter()
      .append("text")
        .attr("x", (d) => {
          return d.x_axis;
        })
        .attr("y", (d) => {
          return d.y_axis;
        })
        .text((d) => {
          return "( " + d.x_axis + ", " + d.y_axis +" )";
        })
        .attr("font-family", "sans-serif")
        .attr("font-size", "10px")
        .attr("fill", "grey");

    container.append("g")
      .selectAll("rect")
      .data(rectangleData)
      .enter()
      .append("rect")
        .attr("x", (d) => {
          return d.x_axis;
        })
        .attr("y", (d) => {
          return d.y_axis;
        })
        .attr("height", (d) => {
          return d.height;
        })
        .attr("width", (d) => {
          return d.width;
        })
        .style("fill", (d) => {
          return d.color;
        });

  </script>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	</head>
	<body>
	</body>

	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	// simple circle
	d3.select("body")
	.append("svg")
	.attr("width", 50)
	.attr("height", 50)
	.append("circle")
	.attr("cx", 25)
	.attr("cy", 25)
	.attr("r", 25)
	.style("fill", "purple");

	// data bind
	let theData = [ 'a', 'b', 'c' ];

	d3.select("body")
	.selectAll("p")
	.data(theData)
	.enter()
	.append("p")
	.text((d, i) => {
	return `${i}. item: ${d}`;
	});

	// data bind to svg
	let circleData = [
	{
	x_axis: 30,
	y_axis: 30,
	radius: 20,
	color : "green"
	},
	{
	x_axis: 70,
	y_axis: 70,
	radius: 20,
	color : "purple"
	},
	{
	x_axis: 110,
	y_axis: 100,
	radius: 20,
	color : "red"
	}];

	d3.select("body")
	.append("p")
	.append("svg")
	.attr("width", 200)
	.attr("height", 200)
	.selectAll("circle")
	.data(circleData)
	.enter()
	.append("circle")
	.attr("cx", (d) => {
	return d.x_axis;
	})
	.attr("cy", (d) => {
	return d.y_axis;
	})
	.attr("r", (d) => {
	return d.radius;
	})
	.style("fill", (d) => {
	return d.color;
	});

	// path generator
	let lineData = [ { "x": 1, "y": 5}, { "x": 20, "y": 20},
	{ "x": 40, "y": 10}, { "x": 60, "y": 40},
	{ "x": 80, "y": 5}, { "x": 100, "y": 60}];

	let lineFunction = d3.line()
	.x(function(d) { return d.x; })
	.y(function(d) { return d.y; })
	.curve(d3.curveCatmullRom.alpha(0.5));

	d3.select("body")
	.append("p")
	.append("svg")
	.attr("width", 200)
	.attr("height", 200)
	.append("path")
	.attr("d", lineFunction(lineData))
	.attr("stroke", "blue")
	.attr("stroke-width", 2)
	.attr("fill", "none");


	// scale
	let rectangleData = [
	{ "x_axis": 10, "y_axis": 10, "height": 20, "width":20, "color" : "green" },
	{ "x_axis": 200, "y_axis": 40, "height": 20, "width":20, "color" : "purple" },
	{ "x_axis": 70, "y_axis": 70, "height": 20, "width":20, "color" : "red" }];

	let max_x = d3.max(rectangleData, (d) => {
	return d.x_axis + d.width;
	});
	let max_y = d3.max(rectangleData, (d) => {
	return d.y_axis + d.height;
	});

	let linearScale = d3.scaleLinear()
	.domain([0, d3.max([max_x, max_y])])
	.range([0, 100]);

	d3.select("body")
	.append("p")
	.append("svg")
	.attr("width", linearScale(max_x))
	.attr("height", linearScale(max_y))
	.selectAll("rect")
	.data(rectangleData)
	.enter()
	.append("rect")
	.attr("x", (d) => {
	return linearScale(d.x_axis);
	})
	.attr("y", (d) => {
	return linearScale(d.y_axis);
	})
	.attr("height", (d) => {
	return linearScale(d.height);
	})
	.attr("width", (d) => {
	return linearScale(d.width);
	})
	.style("fill", (d) => {
	return d.color;
	});

	// grouping, transformation, text
	let container = d3.select("body")
	.append("p")
	.append("svg")
	.attr("width", 250)
	.attr("height", 250);

	let circleGroup = container.append("g")
	.attr("transform", "translate(80,0)");

	circleGroup.selectAll("circle")
	.data(circleData)
	.enter()
	.append("circle")
	.attr("cx", (d) => {
	return d.x_axis;
	})
	.attr("cy", (d) => {
	return d.y_axis;
	})
	.attr("r", (d) => {
	return d.radius;
	})
	.style("fill", (d) => {
	return d.color;
	});

	circleGroup.selectAll("text")
	.data(circleData)
	.enter()
	.append("text")
	.attr("x", (d) => {
	return d.x_axis;
	})
	.attr("y", (d) => {
	return d.y_axis;
	})
	.text((d) => {
	return "( " + d.x_axis + ", " + d.y_axis +" )";
	})
	.attr("font-family", "sans-serif")
	.attr("font-size", "10px")
	.attr("fill", "grey");

	container.append("g")
	.selectAll("rect")
	.data(rectangleData)
	.enter()
	.append("rect")
	.attr("x", (d) => {
	return d.x_axis;
	})
	.attr("y", (d) => {
	return d.y_axis;
	})
	.attr("height", (d) => {
	return d.height;
	})
	.attr("width", (d) => {
	return d.width;
	})
	.style("fill", (d) => {
	return d.color;
	});

	</script>

	</html>