databayou/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    This was a first attempt to make small multiples move. Initially I could not find the code to make small multiples transition. I wanted specific shapes, not those already available. Eventually I came across Arunkjn's bl.ock. It was presented as multiple polygons, but easy to modify. The code allowed me to make them move with the click of a button.
This bl.ock is the first attempt to make them move.
The final result can be seen at Fisheries Visualization Fleet It shows the fishing fleet of the European Union for a research on fisheries visualization. The polygons were used todepict boats.
This research was funded by the project SAF21 - Social science aspects of fisheries for the 21st Century. SAF21 is a project financed under the EU Horizon 2020 Marie Skłodowska-Curie (MSC) – ITN - ETN programme (project 642080).
For more information check Databayou
Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="polydata.json"></script>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>

<input name="change"
							       class="motion"
                                   type="button"
                                   value="CHANGE POLYGONS"
                                   onclick="polyData()" />


    <script type="text/javascript" src="multiple.js"></script>
</body>
</html>

## multiple.js
var vis = d3.select("body").append("svg")
         .attr("width", 1000)
         .attr("height", 667),

scaleX = d3.scale.linear()
        .domain([-30,30])
        .range([0,600]),

scaleY = d3.scale.linear()
        .domain([0,50])
        .range([500,0]),

color = d3.scale.category10();

vis.selectAll("polygon")
    .data(arrayOfPolygons)
  .enter().append("polygon")
    .attr("points",function(d) {
        return d.points.map(function(d) { return [scaleX(d.x),scaleY(d.y)].join(","); }).join(" ");})
.attr("fill", function(d){return color(d.name)})
.attr("stroke","#666")
    .attr("stroke-width",2);

	// add legend
	var legend = vis.append("g")
	  .attr("class", "legend")
        //.attr("x", w - 65)
        //.attr("y", 50)
	  .attr("height", 100)
	  .attr("width", 100)
    .attr('transform', 'translate(10,20)');

    legend
      .selectAll('rect')
      .data(arrayOfPolygons)
      .enter()
      .append("rect")
	  .attr("x", 40)
      .attr("y", function(d, i){ return i *  20;})
	  .attr("width", 10)
	  .attr("height", 10)
	  .style("fill", function(d) { return color(d.name);});

    legend.selectAll('text')
      .data(arrayOfPolygons)
      .enter()
      .append("text")
	  .attr("x", 50)
      .attr("y", function(d, i){ return i *  20 + 9;})
	  .text(function(d) {return d.name});

  ///////////////////////////After clicking the button////////////////////////////////
  function polyData() {

vis.selectAll("polygon")
    .data(arrayOfPolygonsbis)
    .transition()
    .duration(2000)
    .attr("points",function(d) {
        return d.points.map(function(d) { return [scaleX(d.x),scaleY(d.y)].join(","); }).join(" ");})
.attr("fill", function(d){return color(d.name)})
.attr("stroke","#666")
    .attr("stroke-width",2);
}

## polydata.json
var arrayOfPolygons = [
  {
    "name": "polygon 1",
    "points":[
      {"x":0.0, "y":25.0},
      {"x":8.5,"y":23.4},
      {"x":13.0,"y":1.0}
    ]
  },
  {
    "name": "polygon 2",
    "points":[
      {"x":15.5,"y":23.4},
      {"x":18.0,"y":30.0},
      {"x":20.0,"y":16.5}
    ]
  },
  {
    "name": "polygon 3",
    "points":[
      {"x":20.5,"y":20.4},
      {"x":10.0,"y":27.0},
      {"x":22.0,"y":20.5}
    ]
  },
  {
    "name": "polygon 4",
    "points":[
      {"x":5.5,"y":5.4},
      {"x":4.0,"y":27.0},
      {"x":3.0,"y":20.5},
      {"x":8.0,"y":10.5}
    ]
  }
];
var arrayOfPolygonsbis =  [{
    "name": "polygon 1",
    "points":[
      {"x":1, "y":5.0},
      {"x":4,"y":43.4},
      {"x":7,"y":21.0}
    ]
  },
  {
    "name": "polygon 2",
    "points":[
      {"x":27,"y":23.4},
      {"x":29,"y":30.0},
      {"x":40.0,"y":16.5}
    ]
  },
  {
    "name": "polygon 3",
    "points":[
      {"x":15,"y":20.4},
      {"x":25,"y":27.0},
      {"x":21,"y":49.5}
    ]
  },
  {
    "name": "polygon 4",
    "points":[
      {"x":2,"y":15.4},
      {"x":10,"y":37.0},
      {"x":1,"y":30.5},
      {"x":14,"y":20.5}
    ]
  }
];

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="polydata.json"></script>
	<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>

	<input name="change"
	class="motion"
	type="button"
	value="CHANGE POLYGONS"
	onclick="polyData()" />


	<script type="text/javascript" src="multiple.js"></script>
	</body>
	</html>
	var vis = d3.select("body").append("svg")
	.attr("width", 1000)
	.attr("height", 667),

	scaleX = d3.scale.linear()
	.domain([-30,30])
	.range([0,600]),

	scaleY = d3.scale.linear()
	.domain([0,50])
	.range([500,0]),

	color = d3.scale.category10();

	vis.selectAll("polygon")
	.data(arrayOfPolygons)
	.enter().append("polygon")
	.attr("points",function(d) {
	return d.points.map(function(d) { return [scaleX(d.x),scaleY(d.y)].join(","); }).join(" ");})
	.attr("fill", function(d){return color(d.name)})
	.attr("stroke","#666")
	.attr("stroke-width",2);

	// add legend
	var legend = vis.append("g")
	.attr("class", "legend")
	//.attr("x", w - 65)
	//.attr("y", 50)
	.attr("height", 100)
	.attr("width", 100)
	.attr('transform', 'translate(10,20)');

	legend
	.selectAll('rect')
	.data(arrayOfPolygons)
	.enter()
	.append("rect")
	.attr("x", 40)
	.attr("y", function(d, i){ return i * 20;})
	.attr("width", 10)
	.attr("height", 10)
	.style("fill", function(d) { return color(d.name);});

	legend.selectAll('text')
	.data(arrayOfPolygons)
	.enter()
	.append("text")
	.attr("x", 50)
	.attr("y", function(d, i){ return i * 20 + 9;})
	.text(function(d) {return d.name});

	///////////////////////////After clicking the button////////////////////////////////
	function polyData() {

	vis.selectAll("polygon")
	.data(arrayOfPolygonsbis)
	.transition()
	.duration(2000)
	.attr("points",function(d) {
	return d.points.map(function(d) { return [scaleX(d.x),scaleY(d.y)].join(","); }).join(" ");})
	.attr("fill", function(d){return color(d.name)})
	.attr("stroke","#666")
	.attr("stroke-width",2);
	}
	var arrayOfPolygons = [
	{
	"name": "polygon 1",
	"points":[
	{"x":0.0, "y":25.0},
	{"x":8.5,"y":23.4},
	{"x":13.0,"y":1.0}
	]
	},
	{
	"name": "polygon 2",
	"points":[
	{"x":15.5,"y":23.4},
	{"x":18.0,"y":30.0},
	{"x":20.0,"y":16.5}
	]
	},
	{
	"name": "polygon 3",
	"points":[
	{"x":20.5,"y":20.4},
	{"x":10.0,"y":27.0},
	{"x":22.0,"y":20.5}
	]
	},
	{
	"name": "polygon 4",
	"points":[
	{"x":5.5,"y":5.4},
	{"x":4.0,"y":27.0},
	{"x":3.0,"y":20.5},
	{"x":8.0,"y":10.5}
	]
	}
	];
	var arrayOfPolygonsbis = [{
	"name": "polygon 1",
	"points":[
	{"x":1, "y":5.0},
	{"x":4,"y":43.4},
	{"x":7,"y":21.0}
	]
	},
	{
	"name": "polygon 2",
	"points":[
	{"x":27,"y":23.4},
	{"x":29,"y":30.0},
	{"x":40.0,"y":16.5}
	]
	},
	{
	"name": "polygon 3",
	"points":[
	{"x":15,"y":20.4},
	{"x":25,"y":27.0},
	{"x":21,"y":49.5}
	]
	},
	{
	"name": "polygon 4",
	"points":[
	{"x":2,"y":15.4},
	{"x":10,"y":37.0},
	{"x":1,"y":30.5},
	{"x":14,"y":20.5}
	]
	}
	];