naxxateux · August 29, 2015 13:57
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset='utf-8'>
 <html>

 <head>
    <script src='http://d3js.org/d3.v3.min.js'></script>
 </head>

 <body>
    <div id='chart-container' align='center'></div>
    <script>
    var margin = {
        top: 100,
        right: 100,
        bottom: 100,
        left: 100
    },
        width = 1000 - margin.left - margin.right,
        height = 1000 - margin.top - margin.bottom;

    var maxCountryRadius = 2000,
        outerRadius = 400;

    var svg = d3.select('#chart-container').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 + ')');

    d3.csv('data.csv', function(error, data) {
        if (error) {
            console.log(error);
        } else {
            var square = d3.scale.linear()
                .domain([0, d3.max(data, function(d) {
                    return d.value;
                })])
                .range([0, maxCountryRadius]);

            var angle = d3.scale.linear()
                .domain([0, data.length - 1])
                .range([0, Math.PI]);

            var textAngle = d3.scale.linear()
                .domain([0, data.length - 1])
                .range([0, 180]);

            // Small points
            var points = svg.append('g')
                .attr('class', 'points');

            points.selectAll('circle')
                .data(data)
                .enter()
                .append('circle')
                .attr('cx', function(d, i) {
                    return width / 2 + outerRadius * Math.cos(angle(i));
                })
                .attr('cy', function(d, i) {
                    return height / 2 + outerRadius * Math.sin(angle(i));
                })
                .attr('r', 1)
                .attr('stroke-width', 0)
                .attr('stroke', '#000000')
                .attr('fill', '#000000')
                .attr('opacity', 1);

            // Value circles
            var circles = svg.append('g')
                .attr('class', 'circles');

            circles.selectAll('circle')
                .data(data)
                .enter()
                .append('circle')
                .attr('cx', function(d, i) {
                    return width / 2 + outerRadius * Math.cos(angle(i));
                })
                .attr('cy', function(d, i) {
                    return height / 2 + outerRadius * Math.sin(angle(i));
                })
                .attr('r', function(d) {
                    console.log(square(d.value));
                    return Math.sqrt(square(d.value));
                })
                .attr('stroke-width', 0)
                .attr('stroke', '#000000')
                .attr('fill', '#000000')
                .attr('opacity', .1);

            circles.selectAll('text')
                .data(data)
                .enter()
                .append('text')
                .attr('transform', function(d, i) {
                    return 'translate(' + (width / 2 + outerRadius * 1.01 * Math.cos(angle(i))) + ', ' + (height / 2 + outerRadius * 1.01 * Math.sin(angle(i))) + ') rotate(' + textAngle(i) + ')';
                })
                .attr('font-family', 'Arial')
                .attr('font-size', '11px')
                .attr('dominant-baseline', 'central')
                .attr('text-anchor', 'start')
                .text(function(d) {
                    return d.country;
                });

            var paths = svg.append('g')
                .attr('class', 'paths');

            paths.selectAll('path')
                .data(data)
                .enter()
                .append('path')
                .attr('d', function(d, i) {
                    return 'M ' + (width / 2 + outerRadius * Math.cos(angle(i))) + ', ' + (height / 2 + outerRadius * Math.sin(angle(i))) + ' Q ' + (width / 2) + ', ' + (height / 2) + ' ' + (width / 2) + ', ' + 0;
                })
                .attr('stroke-width', .1)
                .attr('stroke', '#000000')
                .attr('fill', 'none')
                .attr('opacity', 1);
        }
    });
    </script>
 </body>

 </html>
	country	value
	Argentina	12915.8
	Australia	13789.6
	Austria	63377.1
	Belarus	7016.1
	Belgium	92795.8
	Brazil	38250.3
	Bulgaria	4449.6
	Canada	119425.5
	China	965289
	Chinese Taipei	144086.1
	Costa Rica	3116.9
	Croatia	3302.7
	Czech Republic	84844
	Denmark	25249.3
	Estonia	5404.1
	Finland	21618.5
	France	214376.2
	Germany	679164.3
	Greece	3015.6
	Hong Kong	273500.7
	Hungary	55389
	India	39728.6
	Indonesia	22779.1
	Ireland	12817.4
	Israel	15509.1
	Italy	171530.4
	Japan	476027.8
	Saudi Arabia	11566.1
	South Korea	287840.9
	Lithuania	5255.8
	Luxembourg	7580.8
	Malaysia	86411.9
	Mexico	201536.8
	Morocco	4417.3
	Netherlands	186041.9
	Norway	12671
	Philippines	31013.3
	Poland	68688.8
	Portugal	15554
	Romania	23330.5
	Russia	19420.1
	Singapore	185148.2
	Slovakia	44372.5
	Slovenia	11490.4
	South Africa	15992.7
	Spain	91530.3
	Sweden	64575.9
	Switzerland	43035.7
	Thailand	92927.7
	Tunisia	5214
	Turkey	37444.3
	Ukraine	12956.5
	United Arab Emirates	24602.8
	United Kingdom	163042.8
	United States	626730.9
	Vietnam	28770.1
	<!DOCTYPE html>
	<meta charset='utf-8'>
	<html>

	<head>
	<script src='http://d3js.org/d3.v3.min.js'></script>
	</head>

	<body>
	<div id='chart-container' align='center'></div>
	<script>
	var margin = {
	top: 100,
	right: 100,
	bottom: 100,
	left: 100
	},
	width = 1000 - margin.left - margin.right,
	height = 1000 - margin.top - margin.bottom;

	var maxCountryRadius = 2000,
	outerRadius = 400;

	var svg = d3.select('#chart-container').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 + ')');

	d3.csv('data.csv', function(error, data) {
	if (error) {
	console.log(error);
	} else {
	var square = d3.scale.linear()
	.domain([0, d3.max(data, function(d) {
	return d.value;
	})])
	.range([0, maxCountryRadius]);

	var angle = d3.scale.linear()
	.domain([0, data.length - 1])
	.range([0, Math.PI]);

	var textAngle = d3.scale.linear()
	.domain([0, data.length - 1])
	.range([0, 180]);

	// Small points
	var points = svg.append('g')
	.attr('class', 'points');

	points.selectAll('circle')
	.data(data)
	.enter()
	.append('circle')
	.attr('cx', function(d, i) {
	return width / 2 + outerRadius * Math.cos(angle(i));
	})
	.attr('cy', function(d, i) {
	return height / 2 + outerRadius * Math.sin(angle(i));
	})
	.attr('r', 1)
	.attr('stroke-width', 0)
	.attr('stroke', '#000000')
	.attr('fill', '#000000')
	.attr('opacity', 1);

	// Value circles
	var circles = svg.append('g')
	.attr('class', 'circles');

	circles.selectAll('circle')
	.data(data)
	.enter()
	.append('circle')
	.attr('cx', function(d, i) {
	return width / 2 + outerRadius * Math.cos(angle(i));
	})
	.attr('cy', function(d, i) {
	return height / 2 + outerRadius * Math.sin(angle(i));
	})
	.attr('r', function(d) {
	console.log(square(d.value));
	return Math.sqrt(square(d.value));
	})
	.attr('stroke-width', 0)
	.attr('stroke', '#000000')
	.attr('fill', '#000000')
	.attr('opacity', .1);

	circles.selectAll('text')
	.data(data)
	.enter()
	.append('text')
	.attr('transform', function(d, i) {
	return 'translate(' + (width / 2 + outerRadius * 1.01 * Math.cos(angle(i))) + ', ' + (height / 2 + outerRadius * 1.01 * Math.sin(angle(i))) + ') rotate(' + textAngle(i) + ')';
	})
	.attr('font-family', 'Arial')
	.attr('font-size', '11px')
	.attr('dominant-baseline', 'central')
	.attr('text-anchor', 'start')
	.text(function(d) {
	return d.country;
	});

	var paths = svg.append('g')
	.attr('class', 'paths');

	paths.selectAll('path')
	.data(data)
	.enter()
	.append('path')
	.attr('d', function(d, i) {
	return 'M ' + (width / 2 + outerRadius * Math.cos(angle(i))) + ', ' + (height / 2 + outerRadius * Math.sin(angle(i))) + ' Q ' + (width / 2) + ', ' + (height / 2) + ' ' + (width / 2) + ', ' + 0;
	})
	.attr('stroke-width', .1)
	.attr('stroke', '#000000')
	.attr('fill', 'none')
	.attr('opacity', 1);
	}
	});
	</script>
	</body>

	</html>