[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_93":-5,"_50":16,"_94":-5,"_95":96,"_97":98},"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,"_68":69,"_70":65,"_71":-7,"_72":43,"_73":41,"_74":-5,"_75":76,"_77":16,"_78":79,"_80":79,"_81":-7,"_82":-7,"_56":83,"_58":84,"_85":-5,"_86":55,"_87":88,"_89":90,"_91":-5,"_92":-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/assets/unfurl.webp","sourceType","gist","originalUrl","https://gist.github.com/aaizemberg/6153101","author","aaizemberg","id","gist-user-aaizemberg","accountType","user","email","","displayName","avatar","oauthProvider","oauthId","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791743441346,"updatedAt","gist-6153101","files",{"_62":63},"f1",{"_64":65,"_66":67},"name","d3.js para principiantes","text","Ariel Aizemberg\n@aaizemberg ( https://twitter.com/aaizemberg )\nhttp://www.linkedin.com/in/arielaizemberg\n\nIntroducción\n Que es D3\n\tQuién creó esta librería\n\n\tMirar algunos ejemplos de la galería\n\t\thttps://github.com/mbostock/d3/wiki/Gallery\n\t\thttp://visualizing.org/explore#featured=1&tools=741&sort=recent\n\t\thttp://biovisualize.github.io/d3visualization/\n\t\t\n\tVentajas de esta librería, con respecto a su antecesor Protovis ( http://stackoverflow.com/questions/6212104/protovis-vs-d3-js )\n\n\nComo podemos representar los datos\n\tstring\n\tvector\n\tcsv\n\txml\n\tJSON\nMapeando datos (binding data)\n\tAsociando datos a elementos de una página HTML5\n\t\tarmando una página HTML5\n\t\t

párrafos\n\t\t

div\n\t\t\n

este es un párrafo

\n\n\n----------------------------------------------------------------------\n#\n# Agregamos la librería d3.js\n#\n\n\n\n \n\n\n

este es un párrafo

\n\n \n \n\n\n----------------------------------------------------------------------\n#\n# Agregamos D3.js\n# Mapeando datos a elementos de la página\n# Binding Data\n# \n# .. tenemos todo listo, pero hay que explicar el function(d,i) \n#\n\n\n\n\n\n\n\n\n \n\n\n----------------------------------------------------------------------\n#\n# usando CSS\n#\n\n\n\n\n\n\n\n \n\n\n \n\n\n----------------------------------------------------------------------\n#\n# SVG (gráficos vectoriales escalables)\n#\n# http://es.wikipedia.org/wiki/Scalable_Vector_Graphics\n# http://en.wikipedia.org/wiki/Scalable_Vector_Graphics\n#\n# SVG Basic Shapes\n# http://www.w3.org/TR/SVG/shapes.html\n#\n# Ej.\n\n\n\n----------------------------------------------------------------------\n# \n# \n \n\n\n \n

\n\n \n \n \n \n\n\n----------------------------------------------------------------------\n# \n# \n \n\n \n\n

\n \n \n \n \n\n\n----------------------------------------------------------------------\n# \n# \n \n\n \n\n

\n \n \n \n \n\n\n----------------------------------------------------------------------\n# \n# actualizando el origen de los datos en cada click del boton\n# \n\n\n\n \n\n \n\n

\n \n \n \n \n \n\n\n----------------------------------------------------------------------\n#\n# Armando un scatterplot\n#\n# Input! Domain! (mi conjunto de datos de entrada es el dominio)\n# Output! Range! (la salida, son los pixeles en la pantalla)\n#\n# consoleLog entendiendo el vector que se genera a partir de la llamada a \"ticks(n)\"\n# .ticks\n#\n# truco para invertir el eje Y\n# .range([height,0]);\n#\n\n\n\n\n \n \n\n\n\n\n\n\n\n\n----------------------------------------------------------------------\n#\n# Terminamos con el cuarteto de Anscombe\n#\n\nhttp://bl.ocks.org/aaizemberg/8245718\n\n----------------------------------------------------------------------\n#\n# FIN\n#\n\nbonus track\n===========\n\nSi no queres programar y queres usar algo de D3\n1. http://app.raw.densitydesign.org/\n\nSi queres programar, pero te piden un gráfico estándar:\n1. [C3](http://c3js.org/)\n2. [D3 plus](http://d3plus.org/)\n3. [Rickshaw | is a JavaScript toolkit for creating interactive time series graphs](http://code.shutterstock.com/rickshaw/)\n4. [dimple | An object-oriented API for business analytics powered by d3](http://dimplejs.org/)\n5. [NVD3 | Re-usable charts for d3.js](http://nvd3.org/)\n","slug","6153101","title","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","sqdBpH4DZg0H94NHZEMI5","startCommitId","forkedFrom","forkedFromVisibility",1375670336000,1429217864000,"publishedAt","isPublished","draftStatus","published","lifecycleStatus","active","trashedAt","purgeAfter","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]