xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> text {fill:black} body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } circle{opacity:0.7} </style></head><body> <svg style="background:lightgrey" width=900 height=500></svg> <script> // Feel free to change or delete any of the code you see in this editor! var data = [ ] d3.select("body") .selectAll("text") .data (data) .enter() .append("p") .text(d=>d.nom) .style("background-color",d=>d.couleur) //santé var y = d3.scaleLinear() .domain ([0,90]) .range ([450,50]) //richesse var x = d3.scaleLog() .domain([200,150000]) .range([50,800]) // population var r = d3.scaleSqrt() .domain([1.2, 1.5e9]) .range([2,40]) // continent var c = d3.scaleOrdinal() .range(d3.schemeCategory10) function film(error, data) { annee=1800 afficher(data) d3.interval } function chercher_annee(data, annee) { return data.values.filter (e=>e.year == annee)[0]} var annee = 2010 function afficher (error, data) { data = data.sort((a,b) => d3.descending ( +chercher_annee(a, annee).population, +chercher_annee(b, annee).population) ) d3.select("svg") .selectAll("circle") .data (data) .enter() .append("circle") .style("fill",d=>d.couleur) .style("stroke","black") .attr("r",d => r (+chercher_annee(d, annee).population)) .attr("cx",d => x(+chercher_annee(d, annee).richesse)) .attr("cy",d=> y(+chercher_annee(d, annee).sante)) .attr("fill",d=> c(d.continent)) d3.select("svg") .append ("text") .text(annee) .attr ("x",800) .attr ("y",400) .style ("font-size","30px") } // Axeslegendes = d3.select('svg').append('g');var xAxis = d3.axisBottom().scale(x).tickFormat(function (d, i) {if (i % 3 == 0) return d;}),yAxis = d3.axisLeft().scale(y).ticks(8);legendes.append("g").attr("class", "x axis").attr("transform", "translate(0," + 450 + ")").call(xAxis).append('text').text('PIB par habitant').attr('transform', 'translate(500,-8)').attr('text-anchor', 'end');legendes.append("g").attr("class", "y axis").attr("transform", "translate(50,0)").call(yAxis).append('text').text('Espérance de vie à la naissance').attr('transform', 'translate(5,70)').attr('text-anchor', 'start'); d3.json("https://rawgit.com/Fil/d3-cours-gapminder/master/by_year.json", afficher) </script></body> https://d3js.org/d3.v4.min.js