[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_102":-5,"_50":16,"_103":-5,"_104":105,"_106":107},"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,"_76":77,"_78":79,"_80":-7,"_81":43,"_82":41,"_83":-5,"_84":85,"_86":16,"_87":88,"_89":88,"_90":-7,"_91":-7,"_56":92,"_58":93,"_94":-5,"_95":55,"_96":97,"_98":99,"_100":-5,"_101":-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/22750bc3becaf8a055e2456e90b638c11931f909c7f7933f0773557dc0123330.png","sourceType","gist","originalUrl","https://gist.github.com/aaizemberg/78bd3dade9593896a59d","author","aaizemberg","id","gist-user-aaizemberg","accountType","user","email","","displayName","avatar","oauthProvider","oauthId","isAdmin","stripeCustomerId","handle","handleNormalized","lifecycleEmailsEnabled",true,"createdAt",1791743441346,"updatedAt","gist-78bd3dade9593896a59d","files",{"_62":63,"_64":65,"_66":67},"f1",{"_68":74,"_70":75},"f2",{"_68":72,"_70":73},"f3",{"_68":69,"_70":71},"name","readme.md","text","This [other example](https://bl.ocks.org/pstuffa/3393ff2711a53975040077b7453781a9) of [pstuffa](https://github.com/pstuffa) works well with D3(v4)","index.html","\n\n\n \n \n Categorical Colors\n\n\n

d3 categorical colors & Google colors

\n \n

d3 category10

\n\n

google 10c

\n \n

d3 category20

\n\n

d3 category20b

\n\n

d3 category20c

\n \n

google 20c

\n \n

https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors\n \n \n\n\n","colores.js","// colores usados por Google en sus graficos, trends, etc.\n//\nfunction colores_google(n) {\n var colores_g = [\"#3366cc\", \"#dc3912\", \"#ff9900\", \"#109618\", \"#990099\", \"#0099c6\", \"#dd4477\", \"#66aa00\", \"#b82e2e\", \"#316395\", \"#994499\", \"#22aa99\", \"#aaaa11\", \"#6633cc\", \"#e67300\", \"#8b0707\", \"#651067\", \"#329262\", \"#5574a6\", \"#3b3eac\"];\n return colores_g[n % colores_g.length];\n}\n//\n//\n\nvar c10 = d3.scale.category10();\nvar c20 = d3.scale.category20();\nvar c20b = d3.scale.category20b();\nvar c20c = d3.scale.category20c();\n\nvar svg1 = d3.select(\"#c10\")\n .append(\"svg\")\n .attr(\"width\", 400)\n .attr(\"height\", 50);\n\nvar svg1b = d3.select(\"#g10c\")\n .append(\"svg\")\n .attr(\"width\", 400)\n .attr(\"height\", 50);\n\nvar svg2 = d3.select(\"#c20\")\n .append(\"svg\")\n .attr(\"width\", 400)\n .attr(\"height\", 20);\n\nvar svg3 = d3.select(\"#c20b\")\n .append(\"svg\")\n .attr(\"width\", 400)\n .attr(\"height\", 20);\n\nvar svg4 = d3.select(\"#c20c\")\n .append(\"svg\")\n .attr(\"width\", 400)\n .attr(\"height\", 20);\n\nvar svg5 = d3.select(\"#g20c\")\n .append(\"svg\")\n .attr(\"width\", 400)\n .attr(\"height\", 20);\n \nsvg1.selectAll(\"circle\")\n .data( d3.range(10) )\n .enter()\n .append(\"circle\")\n .attr(\"r\", 18 )\n .attr(\"cx\", d3.scale.linear().domain([-1, 10]).range([0, 400]) )\n .attr(\"cy\", 25)\n .attr(\"fill\", c10 );\n\nsvg1b.selectAll(\"circle\")\n .data( d3.range(10) )\n .enter()\n .append(\"circle\")\n .attr(\"r\", 18 )\n .attr(\"cx\", d3.scale.linear().domain([-1, 10]).range([0, 400]) )\n .attr(\"cy\", 25)\n .attr(\"fill\", function(d,i) { return colores_google(i); } );\n\nsvg2.selectAll(\"circle\")\n .data( d3.range(20) )\n .enter()\n .append(\"circle\")\n .attr(\"r\", 9 )\n .attr(\"cx\", d3.scale.linear().domain([-1, 20]).range([0, 400]) )\n .attr(\"cy\", 10)\n .attr(\"fill\", c20 );\n\nsvg3.selectAll(\"circle\")\n .data( d3.range(20) )\n .enter()\n .append(\"circle\")\n .attr(\"r\", 9 )\n .attr(\"cx\", d3.scale.linear().domain([-1, 20]).range([0, 400]) )\n .attr(\"cy\", 10)\n .attr(\"fill\", c20b );\nsvg4.selectAll(\"circle\")\n .data( d3.range(20) )\n .enter()\n .append(\"circle\")\n .attr(\"r\", 9 )\n .attr(\"cx\", d3.scale.linear().domain([-1, 20]).range([0, 400]) )\n .attr(\"cy\", 10)\n .attr(\"fill\", c20c );\n\nsvg5.selectAll(\"circle\")\n .data( d3.range(20) )\n .enter()\n .append(\"circle\")\n .attr(\"r\", 9 )\n .attr(\"cx\", d3.scale.linear().domain([-1, 20]).range([0, 400]) )\n .attr(\"cy\", 10)\n .attr(\"fill\", function(d,i) { return colores_google(i); } );\n","slug","78bd3dade9593896a59d","title","Categorical Colors","description","ownerType","ownerId","projectId","visibility","public","isTemplate","headCommitId","lHfhJc499ZOoWLBh1G2hU","startCommitId","forkedFrom","forkedFromVisibility",1402064591000,1512138414000,"publishedAt","isPublished","draftStatus","published","lifecycleStatus","active","trashedAt","purgeAfter","userId","account","appOrigin","https://next.vizhub.com","googleAnalyticsId","G-5BVJNTEF9V"]