D3 Examples - Tarea 4 Visual Analytics

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<body>
  <div id="chart"></div>
</body>
<script src="//d3js.org/d3.v3.min.js"></script>
​
<script>
  
  var data =[ { 
    'EPIScore': 80.47,  '10-YearPercentChange': 1.89, 'EnvironmentalHealth': 9283,
    'EcosystemVitality': 72.23, 'EH-HealthImpacts': 100, 'EH-AirQuality': 78.5, 
    'EH-WaterandSanitation': 100, 'EV-WaterResources': 95.18, 'EV-Agriculture': 65.31,
    'EV-Forests': 31.35,'EV-Fisheries': 13.4,'EV-BiodiversityandHabitat': 100,  
    'EV-ClimateandEnergy': 62.77, 'ChildMortality': 100,    'HouseholdAirQuality': 95,
    'AirPollution-AverageExposuretoPM2.5':  82.24, 
    'AirPollution-AveragePM2.5Exceedance': 58.27,
  'AccesstoSanitation': 100,        'AccesstoDrinkingWater':    100,    
  'WastewaterTreatment':    95.18,
    'AgriculturalSubsidies': 38.62, 
  'PesticideRegulation': 92,'ChangeinForestCover':31.35,
    'FishStocks': 8.33, 'CoastalShelfFishingPressure':  18.46, 
    'TerrestrialProtectedAreas': 100, 'TerrestrialProtectedAreas2': 100, 
    'MarineProtectedAreas': 100, 'TrendinCarbonIntensity':65.24, 
    'ChangeofinCarbonIntensity': 27.82, 'TrendinCO2EmissionsperKwH':58.26,
    'AccesstoElectricity': 100}];
  
  var width = 400;
  var height = 400;
  
    var bubble = d3.layout.pack().sort(null).size([960,960]).padding(1.5);
    bubble.nodes(data);
  
  var svg = d3.select("#chart")
            .append("svg")
            .attr("width",960)
            .attr("height", 960)
            .attr("class","bubble");
  
  var node = svg.selectAll(".node")
              .data(bubble.nodes(data)
              .filter(function(d){ return !d.children;}))
              .enter()
              .append("g")
              .attr("class","node")
              .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
​
  
</script>
​
​
​
​
    