xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Data on weapons exports in the world</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> h1,h2,p { font-family:"Helvetica"; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } .y.axis path, .x.axis path { opacity: 0; } </style> </head> <body> <h1>Who is exporting weapons worldwide?</h1> <h2>Data about weapons exports</h2> <script type="text/javascript"> //Defines a bunch of variables to be used later in the chart, makes life easier when wanting to change some stuff //1 width and height of the svg element var w = 600; var h = 500; //2 padding variables, defines various white spaces in the chart var padding = [ 20, 10, 30, 80 ]; //Top, right, bottom, left var maxBsize = 50; //3 creates the scale for axis, the scale needs to be created before the axis itself //linear scale, basically a scale for continuous numbers,range defines the length of the scale var xScale = d3.scale.linear() .range([ padding[3], w-padding[3]-padding[1]]); var yScale = d3.scale.linear() .range([padding[0], h- padding[2]]); var sScale = d3.scale.linear().range([1,maxBsize]); //4 creates both axis var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); //creates svg element named box var svg = d3.select("body").append("svg").attr("width",w).attr("height",h); //load the data and bind it to rectangles d3.csv("WeaponsExport19952014b.csv", function(data) { var circles = svg.selectAll("circle").data(data).enter().append("circle"); //defines the input domain for the linear scale xScale.domain([ 0,d3.max(data, function(d) { return +d.Y1995; })]); yScale.domain([d3.max(data, function(d) { return +d.Y2014}),0]); sScale.domain([0,d3.max(data,function(d) { return +d.Total; })]); circles.attr("cx", function(d) { return xScale(d.Y1995);}) .attr("cy",function(d) { return yScale(d.Y2014); }) .attr("r", function(d) { return sScale(d.YC1995)}) .attr("fill","#9933FF") .append("title") .text(function(d) { return d.Country + "'s total weapons exports for the period 1995-2014 is " + d.Total + " TIV"; }); circles.transition() .duration(300) .attr("r", function(d) { return sScale(d.YC1995);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC1996);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC1997);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC1998);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC1999);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC2000);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC2001);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC2002);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC2003);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC2004);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC2005);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC2006);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC2007);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC2008);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC2009);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC2010);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC2011);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC2012);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC2013);}) .transition() .duration(300) .attr("r", function(d) { return sScale(d.YC2014);}); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (h - padding[2])+")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + padding[3] + ",0)") .call(yAxis); }); /* */ </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js