Slider

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_98":-5,"_50":16,"_99":-5,"_100":101,"_102":103},"routes/viz-public",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":16,"_18":16,"_19":-5,"_20":21,"_22":16,"_23":24,"_25":-5,"_26":-5,"_27":-5,"_28":16,"_29":30,"_31":-5,"_32":33},"vizInfo",{"_40":59,"_72":73,"_74":75,"_76":-7,"_77":43,"_78":41,"_79":-5,"_80":81,"_82":16,"_83":84,"_85":84,"_86":-7,"_87":-7,"_56":88,"_58":89,"_90":-5,"_91":55,"_92":93,"_94":95,"_96":-5,"_97":-5},"vizContent",{"_40":59,"_60":61},"ownerAccount",{"_40":41,"_42":43,"_44":45,"_46":39,"_47":-5,"_48":-7,"_49":-7,"_50":16,"_51":-7,"_52":39,"_53":39,"_54":55,"_56":57,"_58":57},"isOwner",false,"isAuthenticated","canCreatePrivate","commitId","similarVizzes",[],"embed","forksCount",0,"forkedFromViz","runtimeVersion","license","descriptionIsAiGenerated","sourceProvenance",{"_34":35,"_36":37,"_27":-5,"_38":39},"project","socialImageUrl","https://next.vizhub.com/images/045a9ce11a6d855e2c4f3426e0dad3a5e6384844f07befbb2b11952eed6687c7.png","sourceType","gist","originalUrl","https://gist.github.com/aaizemberg/9f019dafedb7f65bbb99a55eac9797fe","author","aaizemberg","id","gist-user-aaizemberg","accountType","user","email","","displayName","avatar","oauthProvider","oauthId","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791743441346,"updatedAt","gist-9f019dafedb7f65bbb99a55eac9797fe","files",{"_62":63,"_64":65},"f1",{"_66":70,"_68":71},"f2",{"_66":67,"_68":69},"name","index.html","text","\n\n\n \n \n Slider\n \n \n\n\n \n \n\n \n

\n\n \n\n","app.js","var w = 500, h = 600;\n\nvar svg = d3.select(\"div#viz\")\n .append(\"svg\")\n .attr(\"width\",w)\n .attr(\"height\",h);\n\nvar data = [{\"provincia\":\"Buenos Aires\",\"poblacion\":15625084},\n{\"provincia\":\"Córdoba\",\"poblacion\":3308876},\n{\"provincia\":\"Santa Fe\",\"poblacion\":3194537},\n{\"provincia\":\"Ciudad Autónoma de Buenos Aires\",\"poblacion\":2890151},\n{\"provincia\":\"Mendoza\",\"poblacion\":1738929},\n{\"provincia\":\"Tucumán\",\"poblacion\":1448188},\n{\"provincia\":\"Entre Ríos\",\"poblacion\":1235994},\n{\"provincia\":\"Salta\",\"poblacion\":1214441},\n{\"provincia\":\"Misiones\",\"poblacion\":1101593},\n{\"provincia\":\"Chaco\",\"poblacion\":1055259},\n{\"provincia\":\"Corrientes\",\"poblacion\":992595},\n{\"provincia\":\"Santiago del Estero\",\"poblacion\":874006},\n{\"provincia\":\"San Juan\",\"poblacion\":681055},\n{\"provincia\":\"Jujuy\",\"poblacion\":673307},\n{\"provincia\":\"Río Negro\",\"poblacion\":638645},\n{\"provincia\":\"Neuquén\",\"poblacion\":551266},\n{\"provincia\":\"Formosa\",\"poblacion\":530162},\n{\"provincia\":\"Chubut\",\"poblacion\":509108},\n{\"provincia\":\"San Luis\",\"poblacion\":432310},\n{\"provincia\":\"Catamarca\",\"poblacion\":367828},\n{\"provincia\":\"La Rioja\",\"poblacion\":333642},\n{\"provincia\":\"La Pampa\",\"poblacion\":318951},\n{\"provincia\":\"Santa Cruz\",\"poblacion\":273964},\n{\"provincia\":\"Tierra del Fuego\",\"poblacion\":127205}];\n\n// cargar el JSON desde un archivo externo, usar d3.json(...)\n\n// selectAll, select, data, enter, append\n\nvar data_filtered = _.filter(data, function(o) { return o.poblacion > 1; });\n\n// Tutoriales JS para gatos\n// http://jsforcats.com/ , https://jsparagatos.com/\n// http://learnjsdata.com/\n\nsvg.append(\"g\").style(\"font-weight\",\"normal\").style(\"fill\",\"grey\")\n .selectAll(\"text.lprov\").data(data_filtered).enter().append(\"text\")\n .attr(\"class\",\"lprov\")\n .attr(\"x\",230)\n .attr(\"y\", function(d,i) { return (i+1)*15;} )\n .text( function(d,i) { return d.provincia;} )\n .attr(\"text-anchor\",\"end\");\n\n\nvar max = d3.max(data.map(function(o) { return o.poblacion; }));\n\nvar escala = d3.scaleLinear()\n .domain([0, max ])\n .range([10, w-240]);\n\nvar color = d3.scaleOrdinal(d3.schemeCategory20);\n\nsvg.append(\"g\")\n .selectAll(\"rect\").data(data_filtered).enter().append(\"rect\")\n .attr(\"x\",240)\n .attr(\"y\", function(d,i) { return (i*15)+2;} )\n .attr(\"width\", 0 )\n .attr(\"height\", 14)\n .attr(\"fill\",function (d,i) { return color(i); } )\n .append(\"title\")\n .text( function(d,i) { return d.poblacion.toLocaleString() + ' habitantes';} );\n\nd3.selectAll(\"rect\")\n .transition().duration(1000)\n .delay( function(d,i) {return Math.sqrt(i*10000);} )\n .attr(\"width\", function(d,i) { return escala(d.poblacion);} )\n","slug","9f019dafedb7f65bbb99a55eac9797fe","title","Slider","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","Dhnjzbczb8JFb7leHOJOE","startCommitId","forkedFrom","forkedFromVisibility",1489858479000,1489858558000,"publishedAt","isPublished","draftStatus","published","lifecycleStatus","active","trashedAt","purgeAfter","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]