{"id":13482153,"url":"https://github.com/martgnz/d3-snippets","last_synced_at":"2026-02-13T03:30:17.894Z","repository":{"id":142638562,"uuid":"53797122","full_name":"martgnz/d3-snippets","owner":"martgnz","description":"An Atom package with D3v5 snippets. Accelerate your graphics!","archived":false,"fork":false,"pushed_at":"2019-12-29T10:11:49.000Z","size":38,"stargazers_count":36,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-01-31T04:17:37.969Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/martgnz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-03-13T17:10:15.000Z","updated_at":"2021-06-02T09:42:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"5689b6de-1c94-4c9b-a8f8-7aa11d760ba9","html_url":"https://github.com/martgnz/d3-snippets","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martgnz%2Fd3-snippets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martgnz%2Fd3-snippets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martgnz%2Fd3-snippets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/martgnz%2Fd3-snippets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/martgnz","download_url":"https://codeload.github.com/martgnz/d3-snippets/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239816356,"owners_count":19701752,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-31T17:00:59.495Z","updated_at":"2026-02-13T03:30:15.817Z","avatar_url":"https://github.com/martgnz.png","language":null,"funding_links":[],"categories":["Code Editors"],"sub_categories":[],"readme":"# d3-snippets\nAn [Atom](https://atom.io) package with [D3v5](https://d3js.org) snippets. Accelerate your graphics!\n\nContributions are appreciated, if you miss a snippet feel free to create an issue or open a pull request.\n\n![d3-snippets in action](https://user-images.githubusercontent.com/1236790/71555299-fc69b300-2a2a-11ea-85c0-80b6dbf4d0c9.gif)\n\n## Install\nYou can install it inside Atom (just search for `d3-snippets`) or via command line:\n```\n$ apm install d3-snippets\n```\n\n## Reference\n\n\u003ca name=\"app\" href=\"#app\"\u003e#\u003c/a\u003e \u003ccode\u003eapp\u003c/code\u003e [\u003c\u003e](snippets/append.cson \"Source\")\n\nAppend something.\n\n```js\n.append('${1:}')\n```\n\n\u003ca name=\"area\" href=\"#area\"\u003e#\u003c/a\u003e \u003ccode\u003earea\u003c/code\u003e [\u003c\u003e](snippets/area.cson \"Source\")\n\nArea generator.\n\n```js\nconst area = d3.area()\n    .x(d =\u003e x(d.${1:}))\n    .y1(d =\u003e y(d.${2:}))\n    .y0(y(0));\n```\n\n\u003ca name=\"attr\" href=\"#attr\"\u003e#\u003c/a\u003e \u003ccode\u003eattr\u003c/code\u003e [\u003c\u003e](snippets/attr.cson \"Source\")\n\nSet attributes.\n\n```js\n.attr('${1:}', '${2:}')\n```\n\n\u003ca name=\"axisb\" href=\"#axisb\"\u003e#\u003c/a\u003e \u003ccode\u003eaxisb\u003c/code\u003e [\u003c\u003e](snippets/axis-bottom.cson \"Source\")\n\nBottom-oriented axis.\n\n```js\nd3.axisBottom(${1:x});\n```\n\n\u003ca name=\"axisl\" href=\"#axisl\"\u003e#\u003c/a\u003e \u003ccode\u003eaxisl\u003c/code\u003e [\u003c\u003e](snippets/axis-left.cson \"Source\")\n\nLeft-oriented axis.\n\n```js\nd3.axisLeft(${1:y});\n```\n\n\u003ca name=\"axisr\" href=\"#axisr\"\u003e#\u003c/a\u003e \u003ccode\u003eaxisr\u003c/code\u003e [\u003c\u003e](snippets/axis-right.cson \"Source\")\n\nRight-oriented axis.\n\n```js\nd3.axisRight(${1:y});\n```\n\n\u003ca name=\"axist\" href=\"#axist\"\u003e#\u003c/a\u003e \u003ccode\u003eaxist\u003c/code\u003e [\u003c\u003e](snippets/axis-top.cson \"Source\")\n\nTop-oriented axis.\n\n```js\nd3.axisTop(${1:x});\n```\n\n\u003ca name=\"axis\" href=\"#axis\"\u003e#\u003c/a\u003e \u003ccode\u003eaxis\u003c/code\u003e [\u003c\u003e](snippets/axis.cson \"Source\")\n\nCreate a SVG axis.\n\n```js\nd3.axis()\n    .scale(${1:})\n    .ticks(${2:})\n    .orient('${3:}')\n```\n\n\u003ca name=\"createblock\" href=\"#createblock\"\u003e#\u003c/a\u003e \u003ccode\u003ecreateblock\u003c/code\u003e [\u003c\u003e](snippets/block.cson \"Source\")\n\nScaffold a block.\n\n```js\n\u003c!DOCTYPE html\u003e\n\u003cstyle\u003e\n\u003c/style\u003e\n\u003cbody\u003e\n\u003cscript src=\"https://d3js.org/d3.v5.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n${1:}\n\u003c/script\u003e\n```\n\n\u003ca name=\"circle\" href=\"#circle\"\u003e#\u003c/a\u003e \u003ccode\u003ecircle\u003c/code\u003e [\u003c\u003e](snippets/circle.cson \"Source\")\n\nCreate a SVG circle.\n\n```js\n.enter()\n    .append('circle')\n    .attr('cx', ${1:})\n    .attr('cy', ${2:})\n    .attr('r', ${3:})\n    .style('fill', '${4:#111}');\n```\n\n\u003ca name=\"class\" href=\"#class\"\u003e#\u003c/a\u003e \u003ccode\u003eclass\u003c/code\u003e [\u003c\u003e](snippets/class.cson \"Source\")\n\nSet the element class.\n\n```js\n.attr('class', '${1:}')\n```\n\n\u003ca name=\"csv\" href=\"#csv\"\u003e#\u003c/a\u003e \u003ccode\u003ecsv\u003c/code\u003e [\u003c\u003e](snippets/csv.cson \"Source\")\n\nLoad a CSV file.\n\n```js\nd3.csv('${1:}').then(data =\u003e {\n  ${2:console.log(data);}\n});\n```\n\n\u003ca name=\"curve\" href=\"#curve\"\u003e#\u003c/a\u003e \u003ccode\u003ecurve\u003c/code\u003e [\u003c\u003e](snippets/curve.cson \"Source\")\n\nCurve shorthand.\n\n```js\n.curve(d3.${1:curveCatmullRom}.alpha(0.5));\n```\n\n\u003ca name=\"fdi\" href=\"#fdi\"\u003e#\u003c/a\u003e \u003ccode\u003efdi\u003c/code\u003e [\u003c\u003e](snippets/data-index.cson \"Source\")\n\nReturn the data and the index.\n\n```js\n(d, i) =\u003e ${1:}\n```\n\n\u003ca name=\"fd\" href=\"#fd\"\u003e#\u003c/a\u003e \u003ccode\u003efd\u003c/code\u003e [\u003c\u003e](snippets/data.cson \"Source\")\n\nReturn the data.\n\n```js\nd =\u003e ${1:}\n```\n\n\u003ca name=\"dom\" href=\"#dom\"\u003e#\u003c/a\u003e \u003ccode\u003edom\u003c/code\u003e [\u003c\u003e](snippets/domain.cson \"Source\")\n\nSet the scale domain.\n\n```js\n.domain([${1:}, ${2:}])\n```\n\n\u003ca name=\"dur\" href=\"#dur\"\u003e#\u003c/a\u003e \u003ccode\u003edur\u003c/code\u003e [\u003c\u003e](snippets/duration.cson \"Source\")\n\nSet the transition duration.\n\n```js\n.duration(${1:})\n```\n\n\u003ca name=\"ellipse\" href=\"#ellipse\"\u003e#\u003c/a\u003e \u003ccode\u003eellipse\u003c/code\u003e [\u003c\u003e](snippets/ellipse.cson \"Source\")\n\nCreate a SVG ellipse.\n\n```js\n.enter().append('ellipse')\n    .attr('cx', ${1:})\n    .attr('cy', ${2:})\n    .attr('rx', ${3:})\n    .attr('ry', ${4:})\n    .style('fill', '${5:#111}');\n```\n\n\u003ca name=\"ent\" href=\"#ent\"\u003e#\u003c/a\u003e \u003ccode\u003eent\u003c/code\u003e [\u003c\u003e](snippets/enter.cson \"Source\")\n\nEnter the data.\n\n```js\n.enter()\n```\n\n\u003ca name=\"extent\" href=\"#extent\"\u003e#\u003c/a\u003e \u003ccode\u003eextent\u003c/code\u003e [\u003c\u003e](snippets/extent.cson \"Source\")\n\nSet the dataset extent.\n\n```js\nd3.extent(${1:data}, d =\u003e d.${2:value});\n```\n\n\u003ca name=\"fill-opacity\" href=\"#fill-opacity\"\u003e#\u003c/a\u003e \u003ccode\u003efill-opacity\u003c/code\u003e [\u003c\u003e](snippets/fill-opacity.cson \"Source\")\n\nSet the element fill opacity.\n\n```js\n.attr('fill-opacity', ${1:0.5})\n```\n\n\u003ca name=\"fill\" href=\"#fill\"\u003e#\u003c/a\u003e \u003ccode\u003efill\u003c/code\u003e [\u003c\u003e](snippets/fill.cson \"Source\")\n\nSet the element fill.\n\n```js\n.attr('fill', '${1:none}')\n```\n\n\u003ca name=\"fn\" href=\"#fn\"\u003e#\u003c/a\u003e \u003ccode\u003efn\u003c/code\u003e [\u003c\u003e](snippets/function.cson \"Source\")\n\nBlank anonymous function.\n\n```js\n() =\u003e ${1:}\n```\n\n\u003ca name=\"geomap\" href=\"#geomap\"\u003e#\u003c/a\u003e \u003ccode\u003egeomap\u003c/code\u003e [\u003c\u003e](snippets/geo-map.cson \"Source\")\n\nCreate the projection and path for a map.\n\n```js\nconst projection = d3.${1:geoMercator}()\n    .fitSize([${2:width}, ${3:height}], ${4:land});\n\nconst path = d3.geoPath()\n    .projection(projection);\n${7:}\n```\n\n\u003ca name=\"g\" href=\"#g\"\u003e#\u003c/a\u003e \u003ccode\u003eg\u003c/code\u003e [\u003c\u003e](snippets/group.cson \"Source\")\n\nCreate a SVG group.\n\n```js\nsvg\n    .append('g')\n    .attr('class', '${1:}')\n```\n\n\u003ca name=\"join\" href=\"#join\"\u003e#\u003c/a\u003e \u003ccode\u003ejoin\u003c/code\u003e [\u003c\u003e](snippets/join.cson \"Source\")\n\nStart with a data join.\n\n```js\nd3.selectAll('${1:}')\n    .data(${2:})\n```\n\n\u003ca name=\"json\" href=\"#json\"\u003e#\u003c/a\u003e \u003ccode\u003ejson\u003c/code\u003e [\u003c\u003e](snippets/json.cson \"Source\")\n\nLoad a JSON file.\n\n```js\nd3.json('${1:}').then(data =\u003e {\n  ${2:console.log(data);}\n});\n```\n\n\u003ca name=\"lineg\" href=\"#lineg\"\u003e#\u003c/a\u003e \u003ccode\u003elineg\u003c/code\u003e [\u003c\u003e](snippets/line-generator.cson \"Source\")\n\nLine generator.\n\n```js\nconst line = d3.line()\n  .x(d =\u003e x(d.${1:}))\n  .y(d =\u003e y(d.${2:}));\n```\n\n\u003ca name=\"line\" href=\"#line\"\u003e#\u003c/a\u003e \u003ccode\u003eline\u003c/code\u003e [\u003c\u003e](snippets/line.cson \"Source\")\n\nCreate a SVG Line.\n\n```js\n.enter().append('line')\n    .attr('x1', ${1:})\n    .attr('y1', ${2:})\n    .attr('x2', ${3:})\n    .attr('y2', ${4:})\n    .style('stroke', '${5:#111}');\n```\n\n\u003ca name=\"locale\" href=\"#locale\"\u003e#\u003c/a\u003e \u003ccode\u003elocale\u003c/code\u003e [\u003c\u003e](snippets/locale.cson \"Source\")\n\nSet a default locale.\n\n```js\nconst ${1:en_US} = {\n    'decimal': '.',\n    'thousands': ',',\n    'grouping': [3],\n    'currency': ['$', ''],\n    'dateTime': '%a %b %e %X %Y',\n    'date': '%m/%d/%Y',\n    'time': '%H:%M:%S',\n    'periods': ['AM', 'PM'],\n    'days': ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],\n    'shortDays': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],\n    'months': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],\n    'shortMonths': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n}\n\nformatDefaultLocale(${2:en_US});\ntimeFormatDefaultLocale(${3:en_US});\n\n```\n\n\u003ca name=\"margin\" href=\"#margin\"\u003e#\u003c/a\u003e \u003ccode\u003emargin\u003c/code\u003e [\u003c\u003e](snippets/margin.cson \"Source\")\n\nAppend a SVG with the margin convention.\n\n```js\nconst margin = {top: ${1:20}, right: ${2:10}, bottom: ${3:20}, left: ${4:10}},\n    width = ${5:960} - margin.left - margin.right,\n    height = ${6:500} - margin.top - margin.bottom;\n\nconst svg = d3.select('${7:body}').append('svg')\n    .attr('width', width + margin.left + margin.right)\n    .attr('height', height + margin.top + margin.bottom)\n  .append('g')\n    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');\n\n${8:}\n```\n\n\u003ca name=\"max\" href=\"#max\"\u003e#\u003c/a\u003e \u003ccode\u003emax\u003c/code\u003e [\u003c\u003e](snippets/max.cson \"Source\")\n\nGet the maximum value.\n\n```js\nd3.max(${1:data}, d =\u003e d.${2:value});\n```\n\n\u003ca name=\"min\" href=\"#min\"\u003e#\u003c/a\u003e \u003ccode\u003emin\u003c/code\u003e [\u003c\u003e](snippets/min.cson \"Source\")\n\nGet the minimum value.\n\n```js\nd3.min(${1:data}, d =\u003e d.${2:value});\n```\n\n\u003ca name=\"nest\" href=\"#nest\"\u003e#\u003c/a\u003e \u003ccode\u003enest\u003c/code\u003e [\u003c\u003e](snippets/nest.cson \"Source\")\n\nNest a dataset.\n\n```js\nconst nest = d3.nest()\n    .key(d =\u003e d.${1:})\n    .entries(${2:});\n```\n\n\u003ca name=\"on\" href=\"#on\"\u003e#\u003c/a\u003e \u003ccode\u003eon\u003c/code\u003e [\u003c\u003e](snippets/on.cson \"Source\")\n\nListen for events on the selection.\n\n```js\n.on('${1:}', ${2:})\n```\n\n\u003ca name=\"queue-promise\" href=\"#queue-promise\"\u003e#\u003c/a\u003e \u003ccode\u003equeue-promise\u003c/code\u003e [\u003c\u003e](snippets/queue-promise.cson \"Source\")\n\nLoad multiple files using a Promise.\n\n```js\nPromise.all([\n    d3.${1:json}('${2:}'),\n    d3.${3:json}('${4:}')\n  ]).then([${5:file1}, ${6:file2}] =\u003e {\n    console.log(${7:file1}, ${8:file1});\n  })\n```\n\n\u003ca name=\"queue\" href=\"#queue\"\u003e#\u003c/a\u003e \u003ccode\u003equeue\u003c/code\u003e [\u003c\u003e](snippets/queue.cson \"Source\")\n\nCreate a queue to load multiple files.\n\n```js\nd3.queue()\n    .defer(${1:d3.json}, '${2:}')\n    .defer(${3:d3.json}, '${4:}')\n    .await(function(error, ${5:file1}, ${6:file2}) {\n        console.log(${7:file1}, ${8:file1});\n    });\n```\n\n\u003ca name=\"r\" href=\"#r\"\u003e#\u003c/a\u003e \u003ccode\u003er\u003c/code\u003e [\u003c\u003e](snippets/radius.cson \"Source\")\n\nSet the element radius.\n\n```js\n.attr('r', ${1:5})\n```\n\n\u003ca name=\"ran\" href=\"#ran\"\u003e#\u003c/a\u003e \u003ccode\u003eran\u003c/code\u003e [\u003c\u003e](snippets/range.cson \"Source\")\n\nSet the scale range.\n\n```js\n.range([${1:}, ${2:}])\n```\n\n\u003ca name=\"rect\" href=\"#rect\"\u003e#\u003c/a\u003e \u003ccode\u003erect\u003c/code\u003e [\u003c\u003e](snippets/rect.cson \"Source\")\n\nCreate a SVG rect.\n\n```js\n.enter().append('rect')\n    .attr('x', ${1:})\n    .attr('y', ${2:})\n    .attr('width', ${3:width})\n    .attr('height', ${4:height})\n    .attr('rx', ${5:0})\n    .attr('ry', ${6:0})\n    .style('fill', '${7:#111}');\n```\n\n\u003ca name=\"seq\" href=\"#seq\"\u003e#\u003c/a\u003e \u003ccode\u003eseq\u003c/code\u003e [\u003c\u003e](snippets/scale-sequential.cson \"Source\")\n\nCreate a sequential scale.\n\n```js\nd3.scaleSequential(d3.${1:interpolateViridis})\n    .domain([${2:}])\n```\n\n\u003ca name=\"scale\" href=\"#scale\"\u003e#\u003c/a\u003e \u003ccode\u003escale\u003c/code\u003e [\u003c\u003e](snippets/scale.cson \"Source\")\n\nCreate a sample scale.\n\n```js\nd3.${1:scaleLinear}()\n    .domain([${2:}, ${3:}])\n    .range([${4:}, ${5:}]);\n```\n\n\u003ca name=\"sel\" href=\"#sel\"\u003e#\u003c/a\u003e \u003ccode\u003esel\u003c/code\u003e [\u003c\u003e](snippets/select.cson \"Source\")\n\nSelect an element.\n\n```js\nd3.select('${1:}')\n```\n\n\u003ca name=\"sela\" href=\"#sela\"\u003e#\u003c/a\u003e \u003ccode\u003esela\u003c/code\u003e [\u003c\u003e](snippets/selectAll.cson \"Source\")\n\nSelect all the elements.\n\n```js\nd3.selectAll('${1:}')\n```\n\n\u003ca name=\"sort\" href=\"#sort\"\u003e#\u003c/a\u003e \u003ccode\u003esort\u003c/code\u003e [\u003c\u003e](snippets/sort.cson \"Source\")\n\nSort a dataset.\n\n```js\n${1:data}.sort((a, b) =\u003e ${2:a}.${3:value} - ${4:b}.${5:value});\n```\n\n\u003ca name=\"stroke-opacity\" href=\"#stroke-opacity\"\u003e#\u003c/a\u003e \u003ccode\u003estroke-opacity\u003c/code\u003e [\u003c\u003e](snippets/stroke-opacity.cson \"Source\")\n\nSet the element stroke opacity.\n\n```js\n.attr('stroke-opacity', ${1:0.5})\n```\n\n\u003ca name=\"stroke-width\" href=\"#stroke-width\"\u003e#\u003c/a\u003e \u003ccode\u003estroke-width\u003c/code\u003e [\u003c\u003e](snippets/stroke-width.cson \"Source\")\n\nSet the element stroke width.\n\n```js\n.attr('stroke-width', ${1:1})\n```\n\n\u003ca name=\"stroke\" href=\"#stroke\"\u003e#\u003c/a\u003e \u003ccode\u003estroke\u003c/code\u003e [\u003c\u003e](snippets/stroke.cson \"Source\")\n\nSet the element stroke.\n\n```js\n.attr('stroke', '${1:black}')\n```\n\n\u003ca name=\"style\" href=\"#style\"\u003e#\u003c/a\u003e \u003ccode\u003estyle\u003c/code\u003e [\u003c\u003e](snippets/style.cson \"Source\")\n\nSet the element style.\n\n```js\n.style('${1:}', '${2:}')\n```\n\n\u003ca name=\"anchor\" href=\"#anchor\"\u003e#\u003c/a\u003e \u003ccode\u003eanchor\u003c/code\u003e [\u003c\u003e](snippets/text-anchor.cson \"Source\")\n\nSet the text anchor.\n\n```js\n.attr('text-anchor', '${1:middle}')\n```\n\n\u003ca name=\"text\" href=\"#text\"\u003e#\u003c/a\u003e \u003ccode\u003etext\u003c/code\u003e [\u003c\u003e](snippets/text.cson \"Source\")\n\nSet the element text.\n\n```js\n.text('${1:}')\n```\n\n\u003ca name=\"tickSize\" href=\"#tickSize\"\u003e#\u003c/a\u003e \u003ccode\u003etickSize\u003c/code\u003e [\u003c\u003e](snippets/tick-size.cson \"Source\")\n\nSet the tick size.\n\n```js\n.tickSize(${1:})\n```\n\n\u003ca name=\"tickValues\" href=\"#tickValues\"\u003e#\u003c/a\u003e \u003ccode\u003etickValues\u003c/code\u003e [\u003c\u003e](snippets/tick-values.cson \"Source\")\n\nSet the tick values.\n\n```js\n.tickValues(['${1:}'])\n```\n\n\u003ca name=\"translate\" href=\"#translate\"\u003e#\u003c/a\u003e \u003ccode\u003etranslate\u003c/code\u003e [\u003c\u003e](snippets/translate.cson \"Source\")\n\nTranslate the element.\n\n```js\n.attr('transform', `translate(${${1:0}},${${2:0}})`)\n```\n\n\u003ca name=\"voronoi\" href=\"#voronoi\"\u003e#\u003c/a\u003e \u003ccode\u003evoronoi\u003c/code\u003e [\u003c\u003e](snippets/voronoi.cson \"Source\")\n\nCreate a Voronoi diagram.\n\n```js\nconst voronoi = d3.voronoi()\n    .x(d =\u003e x(d.${1:}))\n    .y(d =\u003e y(d.${2:}))\n    .extent([[0, 0], [${3:width}, ${4:height}]]);\n\nconst voronoiGroup = svg.append('g')\n    .attr('class', 'voronoi');\n\nvoronoiGroup.selectAll('path')\n    .data(voronoi.polygons(${5:data}))\n    .enter().append('path')\n    .attr('d', d =\u003e d ? 'M' + d.join('L') + 'Z' : null)\n\n```\n\n\u003ca name=\"x\" href=\"#x\"\u003e#\u003c/a\u003e \u003ccode\u003ex\u003c/code\u003e [\u003c\u003e](snippets/x.cson \"Source\")\n\nSet the x position.\n\n```js\n.attr('x', ${1:})\n```\n\n\u003ca name=\"y\" href=\"#y\"\u003e#\u003c/a\u003e \u003ccode\u003ey\u003c/code\u003e [\u003c\u003e](snippets/y.cson \"Source\")\n\nSet the y position.\n\n```js\n.attr('y', ${1:})\n```\n\n## Hacking\n```\n$ cd ~/.atom/packages\n$ git clone git@github.com:martgnz/d3-snippets.git\n$ cd d3-snippets\n$ apm install\n$ apm link\n```\n\n## Credit\nMost of the inspiration comes from [fabriotav](https://github.com/fabriciotav/d3-snippets-for-sublime-text-2)'s  and [shancarter](https://github.com/shancarter/sublime-text-d3/)'s Sublime Text packages.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartgnz%2Fd3-snippets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmartgnz%2Fd3-snippets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmartgnz%2Fd3-snippets/lists"}