Skip to content

Instantly share code, notes, and snippets.

@databayou

databayou/.block

Last active May 31, 2019
Embed
What would you like to do?
Multiple Polygons transition
license: mit

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

<!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}
]
}
];
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.