xxxxxxxxxx
<html>
<head>
<meta charset="utf-8">
<title>Windrose</title>
<!--<link rel="stylesheet" href="bootstrap.min.css">-->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//d3js.org/d3.v3.min.js"></script>
</head>
<body>
<style>
.logo {
border-radius: 50%;
border: 1px solid #bbb;
margin: 6px;
}
</style>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div id="chart"></div>
<script>
var margin = {top: 10, right: 0, bottom: 0, left: 30},
width = 1000 - margin.right,
height = 1040 - margin.top - margin.bottom;
//Various scales. These domains make assumptions of data, naturally.
var xmax = 100,
ymax = 100;
var
x = d3.scale.linear()
.domain([-xmax, xmax])
.range([0, width]),
y = d3.scale.linear()
.domain([-ymax, ymax])
.range([height, 0]);
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("image")
.attr("x", function() {return x(0)-250})
.attr("y", function() {return y(0)-250})
.attr("width", 500)
.attr("xlink:href", "Windrose.svg")
d3.csv("parties.csv", function(data) {
svg.selectAll(".logo")
.data(data)
.enter().append("svg:image")
.attr("xlink:href", function(d) {return d['abbreviation'] + "_rounded.png"})
.attr("width", function(d) {return Math.sqrt(d['size'] / 80)})
.attr("x", function(d) { return x(Math.sin(d['rad'])*45) - Math.sqrt(d['size'] / 80) / 2})
.attr("y", function(d) { return y(Math.cos(d['rad'])*45) - Math.sqrt(d['size'] / 80) / 2})
.attr("class", "logo")
})
</script>
<!-- <img src="Windrose.svg" /> -->
</body>
</html>
https://d3js.org/d3.v3.min.js
https://code.jquery.com/jquery-1.11.1.min.js