var x = d3.scale.linear() .domain([0,10]) .range([margin, width-margin]);

var y = d3.scale.linear() .domain ([120,0]) .range ([margin,height-margin]);

var r = d3.scale.linear() .domain ([0,22.4]) .range ([5,17]);

var c = d3.scale.category20() .domain(["Defence", "Education non-schools", "Business, Innovation and Skills", "Justice", "CLG Communities", "Department for Health non-NHS", "Transport inc. King’s Cross property", "Work and Pensions", "Environment, Food and Rural Affairs", "HM Revenue and Customs", "Energy and Climate Change", "Home Office", "Culture, Media and Sport", "Foreign and Commonwealth Office", "Cabinet Office", "HM Treasury" ]);

var xAxis = d3.svg.axis() .scale(x) .orient("bottom");

var yAxis = d3.svg.axis() .scale(y) .orient("left");

svg.append("g") .attr("class", "axis") .attr("transform", "translate(0," + (height - margin) + ")") .call(xAxis) .append("text") .attr("y", -16) .attr("dy", ".71em") .attr ("x",width -50) .style("text-anchor", "end") .text("% of under 25s unemployed");

svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + margin + ",0)") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .attr ("x",-56) .style("text-anchor", "end") .text("% of total unemployed out of work for 12 months or more");

svg.append("circle") .attr("cx",width -190) .attr("cy", height -100) .attr ("r", 17) .style ("fill","rgba(3,78,161,0.7) ");

svg.append("text") .attr("x", width -160) .attr("y", height -95) .attr("class", "legend") .style("fill", "gray") .style ("font-family", "open sans") .style ("font-size", "12px") .text("tot. num. unemplyd");

// Define 'div' for tooltips var tooltip = d3.select("body") .append("div") // declare the tooltip div .attr("class", "tooltip") // apply the 'tooltip' class .style("opacity", 0); // set the opacity to nil

d3.csv("https://www.cityam.com/wp-content/uploads/2015/06/data-5570638953554.csv",function(csv) {

/* set up variables for nesting our shapes */

/* create svg group for circles and text */ var g = svg.append("g").attr("class","bubbleGroup");

/* create variable for our circles */ var circles = g.selectAll("circle") .data(csv) .enter() .append("circle") .attr("class","countryBubble");

circles.attr("cx",function(d) {return 50;}) .attr("cy",function(d) {return y(0);}) .attr("r",function(d) {return r(0);}) .style("stroke","#ffffff") .style("stroke-width", 1) .style("fill", function(d) {return c(d.country)} ) .style("opacity", 0.8) .on("mouseover", mouseover) .on("mouseout", mouseout);

circles.transition() .duration(2000) .attr("cx",function(d) { return x(+d.all); }) .attr("cy",function(d) { return y(+d.lt); }) .attr("r",function(d) { return r((+d.lt)*1); })

/* create svg group for all the text, and assign an id make sure we set it all up after the circles are printed, so the text shows on top of the circles

*/ var textgroup = g.append("g").attr("id","countryText");

var texts = textgroup.selectAll("text") .data(csv) .enter() .append("text");

texts.text(function(d) { return (d.country); }) .attr("x",function(d) { return (x(+d.all)+r((+d.tot)*100))+5; }) .attr("y",function(d) { return (y(+d.lt)+r((+d.tot)*100))+2; }) .attr("font-family", "sans-serif") .attr("font-size", "14px") .attr("fill", function(d) { return "#c44b81"; })

// Add the show/hide text svg.append("text") .attr("x", 200) .attr("y", 50) .attr("class", "legend") .style("fill", "gray") .style ("font-family", "open sans") .style ("font-size", "12px")

.on("click", function(){ // Determine if current line is visible // false is on, true is off /* var active = countryText.active ? false : true , newOpacity = active ? 1 : 0; */

if (countryText.active==true) { active = false; } else { active = true; } // newOpacity = active ? 1 : 0;

if (active==true) { newOpacity = 1; } else { newOpacity = 0; }

// Hide or show the elements d3.select("#countryText").style("opacity", newOpacity); // Update whether or not the elements are active countryText.active = active; }) .text("Show/Hide");

function mouseover(d) { // show tooltip fade in tooltip.transition() .duration(500) .style("opacity", 0) .style("stroke-width", 9); tooltip.transition() .duration(200) .style("opacity", .9) .style("stroke-width", 3); tooltip.html("

"+d.country+"
Unemployment rate: "+d.all+"%
Of which long-term unemployed: "+d.lt+"%
Pc of under 25s unem.: "+d.under+"%
Total number: "+ formattot(d.totnum)+"

"); tooltip.style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 28) + "px"); }

function mouseout(p) { // show tooltip fadeout tooltip.transition().duration(200).style("opacity", .9); tooltip.transition().duration(500).style("opacity", 0); }

}) var the_chart = jQuery("#cam-chart-unem"), aspect = the_chart.width() / the_chart.height(), container = the_chart.parent(); jQuery(window).on("resize", function() { var targetWidth = container.width(); the_chart.attr("width", targetWidth); the_chart.attr("height", Math.round(targetWidth / aspect)); }).trigger("resize");