xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Loading CSV Data with D3</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: #fff1e0; font-family: Arial, sans-serif; } h1{ margin: 0; font-size: 1.3em; color: #43423E; margin-bottom: 5px; } p{ font-size: 1em; margin: 10px 0 0 0; color: #777777; line-height: 1.3em; width: 660px; } circle{ fill: #8AB7C3; } circle:hover{ stroke-width: 8px; stroke: rgba(231, 114, 101, .3); fill:rgb(231, 114, 101); } .axis path, .axis line { fill: none; stroke: #777777; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; fill: #777777; } a{ text-decoration: none; } #xAxis-title{ margin:0 auto; padding: 10px; text-align: center; color: #777777; } .yText{ fill:#777777; font-size: 1em; } .source{ margin: 0; font-size: 12px; color: #777777; }/*.d3-tip { line-height: 1; font-weight: bold; padding: 12px; background: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 2px;}*/ /*.x.axis path,*/ </style> </head> <body> <h1>Which country spent the most per person on health in 2013?</h1> <p>In the graph you see the countries in the world that spend the most per person on health. <script type="text/javascript"> var w = 750; var h = 505; var padding = [30, 10, 70, 70]; var xScale = d3.scale.linear() .range([ padding[3], w - padding[1] - padding[3] ]); var yScale = d3.scale.linear() .range([ padding[0], h - padding[2] ]); var body = d3.select("body") // var tip = d3.tip() // .attr('class', 'd3-tip') // .offset([-10, 0]) // .html(function(d) { // return "<strong>Frequency:</strong> <span style='color:red'>" + d.lifeExpectancy + "</span>"; // }) var yAxis = d3.svg.axis() .scale(yScale) .orient('left'); var xAxis = d3.svg.axis() .scale(xScale) .orient('bottom') .ticks(13) .tickFormat(function(d) { return "$" + d ; }) var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); // svg.call(tip); //Load in contents of CSV file d3.csv("spending-on-health.csv", function(data) { data.sort(function(a, b) { return d3.descending(+a.lifeExpectancy, +b.lifeExpectancy); }); xScale.domain([ d3.min(data, function(d){ return +d.healthExpenditure; }), d3.max(data, function(d){ return +d.healthExpenditure; }) ]); yScale.domain([ d3.max(data, function(d){ return +d.lifeExpectancy; }), d3.min(data, function(d){ return +d.lifeExpectancy; }) ]); //.attr('height', data.length * 20 ) var circles = svg.selectAll("circle") .data(data) .enter() .append("circle") .attr('class','circle') // .on('mouseover', tip.show) // .on('mouseout', tip.hide); circles.attr("cx", function(d){ return xScale(d.healthExpenditure); }) .attr("cy", function(d) { return yScale(d.lifeExpectancy); }) .attr("r", 0.1) .append("title") .html(function(d){ return d.CountryName +' has a life expectancy of ' + d.lifeExpectancy + " years and spent $" + d.healthExpenditure + ' on health (per person)' }); circles.sort(function(a,b) { return d3.descending(+a.lifeExpectancy, +b.lifeExpectancy); }) .transition() .delay(function(d, i) { return i *50; }) .duration(5) .attr("r", 4); 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] -1) + ',0)') .call(yAxis); svg.append('text') .text('Life expectancy (years)') .attr('x',-10 ) .attr('y',30 ) .style("text-anchor", "end") .attr("dx", "-10em") .attr("dy", ".0em") .attr("transform", function(d) { return "rotate(-90)" }) .attr('class','yText' ) svg.append('text') .text('Total health spending per person (international $)') .attr('x',240 ) .attr('y',490 ) .style("text-anchor", "end") .attr("dx", "20em") .attr("dy", ".0em") .attr("transform", function(d) { return "rotate(0)" }) .attr('class','yText' ) }); </script> <p class="source">Source: <a href="https://www.worldbank.org/">The World Bank</a></p> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js