Old school D3 from simpler times

All examples By author By category About

aaizemberg

Full window Github gist

Ciudades con más de 50,000 habitantes (#treemap, #d3plus)

<!doctype html>
<meta charset="utf-8">

<link href="https://www.d3plus.org/css/d3plus.css" rel="stylesheet" />

<script src="https://www.d3plus.org/js/d3.js"></script>

<script src="https://www.d3plus.org/js/d3plus.js"></script>

<h1>Ciudades con más de 50,000 habitantes<h1>
<div id="viz"></div>

<script>
var data =[{"name":"Ciudad Autónoma de Bs As","value":2890151},
{"name":"La Matanza","value":1775272},
{"name":"Cordoba","value":1317298},
{"name":"Rosario","value":948312},
{"name":"La Plata","value":643133},
{"name":"Lomas de Zamora","value":616279},
{"name":"Mar del Plata","value":593337},
{"name":"Quilmes","value":582943},
{"name":"Almirante Brown","value":552139},
{"name":"San Miguel de Tucumán","value":548866},
{"name":"Merlo","value":527658},
{"name":"Salta","value":520683},
{"name":"Lanus","value":459263},
{"name":"Moreno","value":452505},
{"name":"Florencio Varela","value":426005},
{"name":"General San Martin","value":414196},
{"name":"Santa Fe","value":391164},
{"name":"Tigre","value":370913},
{"name":"Corrientes","value":346334},
{"name":"Avellaneda","value":342677},
{"name":"Tres de Febrero","value":340071},
{"name":"Berazategui","value":324156},
{"name":"Malvinas Argentinas","value":322375},
{"name":"Moron","value":321109},
{"name":"Esteban Echeverria","value":300745},
{"name":"Pilar","value":296826},
{"name":"San Isidro","value":292878},
{"name":"Bahia Blanca","value":291327},
{"name":"Resistencia","value":290723},
{"name":"San Miguel","value":276190},
{"name":"Posadas","value":275028},
{"name":"Vicente Lopez","value":269420},
{"name":"Jose C. Paz","value":265981},
{"name":"San Salvador de Jujuy","value":257970},
{"name":"Guaymallén","value":252618},
{"name":"Santiago del Estero","value":252192},
{"name":"Paraná","value":247139},
{"name":"Neuquén","value":231198},
{"name":"Formosa","value":222226},
{"name":"Escobar","value":212208},
{"name":"Godoy Cruz","value":191299},
{"name":"Las Heras","value":189067},
{"name":"Hurlingham","value":181241},
{"name":"La Rioja","value":178872},
{"name":"Comodoro Rivadavia","value":175196},
{"name":"San Luis","value":169947},
{"name":"Ituzaingo","value":167824},
{"name":"Ezeiza","value":162475},
{"name":"San Fernando","value":160284},
{"name":"San Fernando del Valle de Catamarca","value":159139},
{"name":"Rio Cuarto","value":157010},
{"name":"Concordia","value":149450},
{"name":"San Nicolas de los Arroyos","value":133602},
{"name":"San Rafael","value":118009},
{"name":"Tandil","value":116916},
{"name":"Mendoza","value":114893},
{"name":"Villa Mercedes","value":111391},
{"name":"Rawson","value":109424},
{"name":"San Carlos de Bariloche","value":109305},
{"name":"San Juan","value":109123},
{"name":"Maipú","value":106662},
{"name":"La Banda","value":106441},
{"name":"Santa Rosa","value":102860},
{"name":"Zarate","value":98522},
{"name":"Trelew","value":97915},
{"name":"Lujan","value":97363},
{"name":"Río Gallegos","value":95796},
{"name":"Rafaela","value":91571},
{"name":"Pergamino","value":91399},
{"name":"Presidencia Roque Saenz Peña","value":89882},
{"name":"Olavarria","value":89721},
{"name":"Berisso","value":87698},
{"name":"Junin","value":87509},
{"name":"Chimbas","value":87258},
{"name":"Campana","value":86860},
{"name":"General Rodriguez","value":85315},
{"name":"Necochea - Quequen","value":84784},
{"name":"Luján de Cuyo","value":82615},
{"name":"Rivadavia","value":82582},
{"name":"General Roca","value":81534},
{"name":"Puerto Madryn","value":81315},
{"name":"Presidente Peron","value":80824},
{"name":"Villa Gobernador Gálvez","value":80769},
{"name":"Gualeguaychú","value":80614},
{"name":"San Martín","value":79476},
{"name":"Villa Maria","value":79351},
{"name":"Cipolletti","value":77713},
{"name":"San Ramón de la Nueva Orán","value":76070},
{"name":"Venado Tuerto","value":75437},
{"name":"Concepción del Uruguay","value":72528},
{"name":"Goya","value":71606},
{"name":"Reconquista","value":70549},
{"name":"Río Grande","value":66475},
{"name":"Santo Tomé","value":65684},
{"name":"Oberá","value":63960},
{"name":"Banda del Río Salí","value":63226},
{"name":"Tartagal","value":63196},
{"name":"Villa Carlos Paz","value":62423},
{"name":"San Francisco","value":61750},
{"name":"San Pedro","value":59131},
{"name":"Punta Alta","value":58315},
{"name":"San Vicente","value":58165},
{"name":"Chivilcoy","value":58152},
{"name":"Yerba Buena - Marcos Paz","value":57392},
{"name":"Eldorado","value":57323},
{"name":"General Pico","value":56795},
{"name":"Ushuaia","value":56593},
{"name":"Ensenada","value":56463},
{"name":"Mercedes","value":56116},
{"name":"Azul","value":55728},
{"name":"Barranqueras","value":54698},
{"name":"Villa Mariano Moreno - El Colmenar","value":52960},
{"name":"Clorinda","value":52837},
{"name":"Viedma","value":52789},
{"name":"Caleta Olivia","value":51733},
{"name":"Marcos Paz","value":50460}];
  
  var visualization = d3plus.viz()
    .container("#viz")
    .data(data) 
    .type("tree_map") // visualization type
    .id("name")       // key for which our data is unique on
    .size("value")    // sizing of blocks
    .draw();          // finally, draw the visualization!

</script>

Modified http://www.d3plus.org/js/d3.js to a secure url

Modified http://www.d3plus.org/js/d3plus.js to a secure url

https://www.d3plus.org/js/d3.js

https://www.d3plus.org/js/d3plus.js