├── .gitignore ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── package.json └── snippets ├── append.cson ├── area.cson ├── attr.cson ├── axis-bottom.cson ├── axis-left.cson ├── axis-right.cson ├── axis-top.cson ├── axis.cson ├── block.cson ├── circle.cson ├── class.cson ├── csv.cson ├── curve.cson ├── data-index.cson ├── data.cson ├── domain.cson ├── duration.cson ├── ellipse.cson ├── enter.cson ├── extent.cson ├── fill-opacity.cson ├── fill.cson ├── function.cson ├── geo-map.cson ├── group.cson ├── join.cson ├── json.cson ├── line-generator.cson ├── line.cson ├── locale.cson ├── margin.cson ├── max.cson ├── min.cson ├── nest.cson ├── on.cson ├── queue-promise.cson ├── queue.cson ├── radius.cson ├── range.cson ├── rect.cson ├── scale-sequential.cson ├── scale.cson ├── select.cson ├── selectAll.cson ├── sort.cson ├── stroke-opacity.cson ├── stroke-width.cson ├── stroke.cson ├── style.cson ├── text-anchor.cson ├── text.cson ├── tick-size.cson ├── tick-values.cson ├── translate.cson ├── voronoi.cson ├── x.cson └── y.cson /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules 4 | docs -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [2.0.0] - Major - 2019-12-29 2 | * Switch to d3v5, this only means changing the way `d3.json` and `d3.csv` work. 3 | * Rewritten the snippets using ES2015. 4 | * New snippet for using `Promise.all` to load files. This is the way to do it now as d3-queue is no longer recommended. 5 | * New snippet for `d3.max`. 6 | * New snippet for `d3.min`. 7 | 8 | ## [1.2.1] - Path - 2017-11-01 9 | * Change block snippet shorthand to `createblock` to prevent a collision with the CSS display property. 10 | 11 | ## [1.2.0] - Minor - 2017-10-29 12 | * New snippet to scaffold blocks. 13 | 14 | ## [1.1.0] - Minor - 2017-10-24 15 | ### Added 16 | * Support for TypeScript and React scopes (`.ts`, `.tsx`, and `.jsx`). 17 | * New snippet to set the _x_. 18 | * New snippet to set the _y_. 19 | * New snippet to set the radius. 20 | * New snippet to add a class. 21 | * New snippet to add a group. 22 | * New snippet for `d3.extent`. 23 | * New snippet for `d3.scaleSequential`. 24 | * New snippet for sorting a dataset. 25 | * New snippets for customizing the stroke. 26 | * New snippets for customizing the fill. 27 | * New snippets for customizing the axis ticks. 28 | * New snippet to set the text. 29 | * New snippet to set the text anchor. 30 | 31 | ### Fixes 32 | * Improve [d3-voronoi](https://github.com/d3/d3-voronoi) snippet. 33 | 34 | ## [1.0.1] - Patch - 2017-05-14 35 | ### Fixes 36 | * Fix semicolon on margin snippet. 37 | 38 | ## [1.0.0] - Major - 2017-04-15 39 | * Update to D3.v4. 40 | 41 | ### Added 42 | * New snippets for [d3-axis](https://github.com/d3/d3-axis). 43 | * New snippets for [d3-shape](https://github.com/d3/d3-shape). 44 | * New snippet for [d3-voronoi](https://github.com/d3/d3-voronoi). 45 | 46 | ### Update 47 | * Rename map snippet to geomap. 48 | 49 | ### Fixes 50 | * Improve descriptions 51 | 52 | ## [0.2.0] - Minor - 2016-10-11 53 | ### Added 54 | * New snippets contributed by @dephora for `domain`, `range`, `append`, `duration`, `enter` and `on`. Add `d3.svg.axis` snippet. 55 | 56 | ### Fixes 57 | * Small bug on `attr` snippet, by @dephora. 58 | 59 | ## [0.1.1] - Patch 60 | * Small bugfix on the queue snippet 61 | * Improve anonymous function descriptions 62 | 63 | ## [0.1.0] - First Release 64 | * Add the first snippets 65 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Martín González 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # d3-snippets 2 | An [Atom](https://atom.io) package with [D3v5](https://d3js.org) snippets. Accelerate your graphics! 3 | 4 | Contributions are appreciated, if you miss a snippet feel free to create an issue or open a pull request. 5 | 6 | ![d3-snippets in action](https://user-images.githubusercontent.com/1236790/71555299-fc69b300-2a2a-11ea-85c0-80b6dbf4d0c9.gif) 7 | 8 | ## Install 9 | You can install it inside Atom (just search for `d3-snippets`) or via command line: 10 | ``` 11 | $ apm install d3-snippets 12 | ``` 13 | 14 | ## Reference 15 | 16 | # app [<>](snippets/append.cson "Source") 17 | 18 | Append something. 19 | 20 | ```js 21 | .append('${1:}') 22 | ``` 23 | 24 | # area [<>](snippets/area.cson "Source") 25 | 26 | Area generator. 27 | 28 | ```js 29 | const area = d3.area() 30 | .x(d => x(d.${1:})) 31 | .y1(d => y(d.${2:})) 32 | .y0(y(0)); 33 | ``` 34 | 35 | # attr [<>](snippets/attr.cson "Source") 36 | 37 | Set attributes. 38 | 39 | ```js 40 | .attr('${1:}', '${2:}') 41 | ``` 42 | 43 | # axisb [<>](snippets/axis-bottom.cson "Source") 44 | 45 | Bottom-oriented axis. 46 | 47 | ```js 48 | d3.axisBottom(${1:x}); 49 | ``` 50 | 51 | # axisl [<>](snippets/axis-left.cson "Source") 52 | 53 | Left-oriented axis. 54 | 55 | ```js 56 | d3.axisLeft(${1:y}); 57 | ``` 58 | 59 | # axisr [<>](snippets/axis-right.cson "Source") 60 | 61 | Right-oriented axis. 62 | 63 | ```js 64 | d3.axisRight(${1:y}); 65 | ``` 66 | 67 | # axist [<>](snippets/axis-top.cson "Source") 68 | 69 | Top-oriented axis. 70 | 71 | ```js 72 | d3.axisTop(${1:x}); 73 | ``` 74 | 75 | # axis [<>](snippets/axis.cson "Source") 76 | 77 | Create a SVG axis. 78 | 79 | ```js 80 | d3.axis() 81 | .scale(${1:}) 82 | .ticks(${2:}) 83 | .orient('${3:}') 84 | ``` 85 | 86 | # createblock [<>](snippets/block.cson "Source") 87 | 88 | Scaffold a block. 89 | 90 | ```js 91 | 92 | 94 | 95 | 96 | 99 | ``` 100 | 101 | # circle [<>](snippets/circle.cson "Source") 102 | 103 | Create a SVG circle. 104 | 105 | ```js 106 | .enter() 107 | .append('circle') 108 | .attr('cx', ${1:}) 109 | .attr('cy', ${2:}) 110 | .attr('r', ${3:}) 111 | .style('fill', '${4:#111}'); 112 | ``` 113 | 114 | # class [<>](snippets/class.cson "Source") 115 | 116 | Set the element class. 117 | 118 | ```js 119 | .attr('class', '${1:}') 120 | ``` 121 | 122 | # csv [<>](snippets/csv.cson "Source") 123 | 124 | Load a CSV file. 125 | 126 | ```js 127 | d3.csv('${1:}').then(data => { 128 | ${2:console.log(data);} 129 | }); 130 | ``` 131 | 132 | # curve [<>](snippets/curve.cson "Source") 133 | 134 | Curve shorthand. 135 | 136 | ```js 137 | .curve(d3.${1:curveCatmullRom}.alpha(0.5)); 138 | ``` 139 | 140 | # fdi [<>](snippets/data-index.cson "Source") 141 | 142 | Return the data and the index. 143 | 144 | ```js 145 | (d, i) => ${1:} 146 | ``` 147 | 148 | # fd [<>](snippets/data.cson "Source") 149 | 150 | Return the data. 151 | 152 | ```js 153 | d => ${1:} 154 | ``` 155 | 156 | # dom [<>](snippets/domain.cson "Source") 157 | 158 | Set the scale domain. 159 | 160 | ```js 161 | .domain([${1:}, ${2:}]) 162 | ``` 163 | 164 | # dur [<>](snippets/duration.cson "Source") 165 | 166 | Set the transition duration. 167 | 168 | ```js 169 | .duration(${1:}) 170 | ``` 171 | 172 | # ellipse [<>](snippets/ellipse.cson "Source") 173 | 174 | Create a SVG ellipse. 175 | 176 | ```js 177 | .enter().append('ellipse') 178 | .attr('cx', ${1:}) 179 | .attr('cy', ${2:}) 180 | .attr('rx', ${3:}) 181 | .attr('ry', ${4:}) 182 | .style('fill', '${5:#111}'); 183 | ``` 184 | 185 | # ent [<>](snippets/enter.cson "Source") 186 | 187 | Enter the data. 188 | 189 | ```js 190 | .enter() 191 | ``` 192 | 193 | # extent [<>](snippets/extent.cson "Source") 194 | 195 | Set the dataset extent. 196 | 197 | ```js 198 | d3.extent(${1:data}, d => d.${2:value}); 199 | ``` 200 | 201 | # fill-opacity [<>](snippets/fill-opacity.cson "Source") 202 | 203 | Set the element fill opacity. 204 | 205 | ```js 206 | .attr('fill-opacity', ${1:0.5}) 207 | ``` 208 | 209 | # fill [<>](snippets/fill.cson "Source") 210 | 211 | Set the element fill. 212 | 213 | ```js 214 | .attr('fill', '${1:none}') 215 | ``` 216 | 217 | # fn [<>](snippets/function.cson "Source") 218 | 219 | Blank anonymous function. 220 | 221 | ```js 222 | () => ${1:} 223 | ``` 224 | 225 | # geomap [<>](snippets/geo-map.cson "Source") 226 | 227 | Create the projection and path for a map. 228 | 229 | ```js 230 | const projection = d3.${1:geoMercator}() 231 | .fitSize([${2:width}, ${3:height}], ${4:land}); 232 | 233 | const path = d3.geoPath() 234 | .projection(projection); 235 | ${7:} 236 | ``` 237 | 238 | # g [<>](snippets/group.cson "Source") 239 | 240 | Create a SVG group. 241 | 242 | ```js 243 | svg 244 | .append('g') 245 | .attr('class', '${1:}') 246 | ``` 247 | 248 | # join [<>](snippets/join.cson "Source") 249 | 250 | Start with a data join. 251 | 252 | ```js 253 | d3.selectAll('${1:}') 254 | .data(${2:}) 255 | ``` 256 | 257 | # json [<>](snippets/json.cson "Source") 258 | 259 | Load a JSON file. 260 | 261 | ```js 262 | d3.json('${1:}').then(data => { 263 | ${2:console.log(data);} 264 | }); 265 | ``` 266 | 267 | # lineg [<>](snippets/line-generator.cson "Source") 268 | 269 | Line generator. 270 | 271 | ```js 272 | const line = d3.line() 273 | .x(d => x(d.${1:})) 274 | .y(d => y(d.${2:})); 275 | ``` 276 | 277 | # line [<>](snippets/line.cson "Source") 278 | 279 | Create a SVG Line. 280 | 281 | ```js 282 | .enter().append('line') 283 | .attr('x1', ${1:}) 284 | .attr('y1', ${2:}) 285 | .attr('x2', ${3:}) 286 | .attr('y2', ${4:}) 287 | .style('stroke', '${5:#111}'); 288 | ``` 289 | 290 | # locale [<>](snippets/locale.cson "Source") 291 | 292 | Set a default locale. 293 | 294 | ```js 295 | const ${1:en_US} = { 296 | 'decimal': '.', 297 | 'thousands': ',', 298 | 'grouping': [3], 299 | 'currency': ['$', ''], 300 | 'dateTime': '%a %b %e %X %Y', 301 | 'date': '%m/%d/%Y', 302 | 'time': '%H:%M:%S', 303 | 'periods': ['AM', 'PM'], 304 | 'days': ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], 305 | 'shortDays': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 306 | 'months': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 307 | 'shortMonths': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 308 | } 309 | 310 | formatDefaultLocale(${2:en_US}); 311 | timeFormatDefaultLocale(${3:en_US}); 312 | 313 | ``` 314 | 315 | # margin [<>](snippets/margin.cson "Source") 316 | 317 | Append a SVG with the margin convention. 318 | 319 | ```js 320 | const margin = {top: ${1:20}, right: ${2:10}, bottom: ${3:20}, left: ${4:10}}, 321 | width = ${5:960} - margin.left - margin.right, 322 | height = ${6:500} - margin.top - margin.bottom; 323 | 324 | const svg = d3.select('${7:body}').append('svg') 325 | .attr('width', width + margin.left + margin.right) 326 | .attr('height', height + margin.top + margin.bottom) 327 | .append('g') 328 | .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); 329 | 330 | ${8:} 331 | ``` 332 | 333 | # max [<>](snippets/max.cson "Source") 334 | 335 | Get the maximum value. 336 | 337 | ```js 338 | d3.max(${1:data}, d => d.${2:value}); 339 | ``` 340 | 341 | # min [<>](snippets/min.cson "Source") 342 | 343 | Get the minimum value. 344 | 345 | ```js 346 | d3.min(${1:data}, d => d.${2:value}); 347 | ``` 348 | 349 | # nest [<>](snippets/nest.cson "Source") 350 | 351 | Nest a dataset. 352 | 353 | ```js 354 | const nest = d3.nest() 355 | .key(d => d.${1:}) 356 | .entries(${2:}); 357 | ``` 358 | 359 | # on [<>](snippets/on.cson "Source") 360 | 361 | Listen for events on the selection. 362 | 363 | ```js 364 | .on('${1:}', ${2:}) 365 | ``` 366 | 367 | # queue-promise [<>](snippets/queue-promise.cson "Source") 368 | 369 | Load multiple files using a Promise. 370 | 371 | ```js 372 | Promise.all([ 373 | d3.${1:json}('${2:}'), 374 | d3.${3:json}('${4:}') 375 | ]).then([${5:file1}, ${6:file2}] => { 376 | console.log(${7:file1}, ${8:file1}); 377 | }) 378 | ``` 379 | 380 | # queue [<>](snippets/queue.cson "Source") 381 | 382 | Create a queue to load multiple files. 383 | 384 | ```js 385 | d3.queue() 386 | .defer(${1:d3.json}, '${2:}') 387 | .defer(${3:d3.json}, '${4:}') 388 | .await(function(error, ${5:file1}, ${6:file2}) { 389 | console.log(${7:file1}, ${8:file1}); 390 | }); 391 | ``` 392 | 393 | # r [<>](snippets/radius.cson "Source") 394 | 395 | Set the element radius. 396 | 397 | ```js 398 | .attr('r', ${1:5}) 399 | ``` 400 | 401 | # ran [<>](snippets/range.cson "Source") 402 | 403 | Set the scale range. 404 | 405 | ```js 406 | .range([${1:}, ${2:}]) 407 | ``` 408 | 409 | # rect [<>](snippets/rect.cson "Source") 410 | 411 | Create a SVG rect. 412 | 413 | ```js 414 | .enter().append('rect') 415 | .attr('x', ${1:}) 416 | .attr('y', ${2:}) 417 | .attr('width', ${3:width}) 418 | .attr('height', ${4:height}) 419 | .attr('rx', ${5:0}) 420 | .attr('ry', ${6:0}) 421 | .style('fill', '${7:#111}'); 422 | ``` 423 | 424 | # seq [<>](snippets/scale-sequential.cson "Source") 425 | 426 | Create a sequential scale. 427 | 428 | ```js 429 | d3.scaleSequential(d3.${1:interpolateViridis}) 430 | .domain([${2:}]) 431 | ``` 432 | 433 | # scale [<>](snippets/scale.cson "Source") 434 | 435 | Create a sample scale. 436 | 437 | ```js 438 | d3.${1:scaleLinear}() 439 | .domain([${2:}, ${3:}]) 440 | .range([${4:}, ${5:}]); 441 | ``` 442 | 443 | # sel [<>](snippets/select.cson "Source") 444 | 445 | Select an element. 446 | 447 | ```js 448 | d3.select('${1:}') 449 | ``` 450 | 451 | # sela [<>](snippets/selectAll.cson "Source") 452 | 453 | Select all the elements. 454 | 455 | ```js 456 | d3.selectAll('${1:}') 457 | ``` 458 | 459 | # sort [<>](snippets/sort.cson "Source") 460 | 461 | Sort a dataset. 462 | 463 | ```js 464 | ${1:data}.sort((a, b) => ${2:a}.${3:value} - ${4:b}.${5:value}); 465 | ``` 466 | 467 | # stroke-opacity [<>](snippets/stroke-opacity.cson "Source") 468 | 469 | Set the element stroke opacity. 470 | 471 | ```js 472 | .attr('stroke-opacity', ${1:0.5}) 473 | ``` 474 | 475 | # stroke-width [<>](snippets/stroke-width.cson "Source") 476 | 477 | Set the element stroke width. 478 | 479 | ```js 480 | .attr('stroke-width', ${1:1}) 481 | ``` 482 | 483 | # stroke [<>](snippets/stroke.cson "Source") 484 | 485 | Set the element stroke. 486 | 487 | ```js 488 | .attr('stroke', '${1:black}') 489 | ``` 490 | 491 | # style [<>](snippets/style.cson "Source") 492 | 493 | Set the element style. 494 | 495 | ```js 496 | .style('${1:}', '${2:}') 497 | ``` 498 | 499 | # anchor [<>](snippets/text-anchor.cson "Source") 500 | 501 | Set the text anchor. 502 | 503 | ```js 504 | .attr('text-anchor', '${1:middle}') 505 | ``` 506 | 507 | # text [<>](snippets/text.cson "Source") 508 | 509 | Set the element text. 510 | 511 | ```js 512 | .text('${1:}') 513 | ``` 514 | 515 | # tickSize [<>](snippets/tick-size.cson "Source") 516 | 517 | Set the tick size. 518 | 519 | ```js 520 | .tickSize(${1:}) 521 | ``` 522 | 523 | # tickValues [<>](snippets/tick-values.cson "Source") 524 | 525 | Set the tick values. 526 | 527 | ```js 528 | .tickValues(['${1:}']) 529 | ``` 530 | 531 | # translate [<>](snippets/translate.cson "Source") 532 | 533 | Translate the element. 534 | 535 | ```js 536 | .attr('transform', `translate(${${1:0}},${${2:0}})`) 537 | ``` 538 | 539 | # voronoi [<>](snippets/voronoi.cson "Source") 540 | 541 | Create a Voronoi diagram. 542 | 543 | ```js 544 | const voronoi = d3.voronoi() 545 | .x(d => x(d.${1:})) 546 | .y(d => y(d.${2:})) 547 | .extent([[0, 0], [${3:width}, ${4:height}]]); 548 | 549 | const voronoiGroup = svg.append('g') 550 | .attr('class', 'voronoi'); 551 | 552 | voronoiGroup.selectAll('path') 553 | .data(voronoi.polygons(${5:data})) 554 | .enter().append('path') 555 | .attr('d', d => d ? 'M' + d.join('L') + 'Z' : null) 556 | 557 | ``` 558 | 559 | # x [<>](snippets/x.cson "Source") 560 | 561 | Set the x position. 562 | 563 | ```js 564 | .attr('x', ${1:}) 565 | ``` 566 | 567 | # y [<>](snippets/y.cson "Source") 568 | 569 | Set the y position. 570 | 571 | ```js 572 | .attr('y', ${1:}) 573 | ``` 574 | 575 | ## Hacking 576 | ``` 577 | $ cd ~/.atom/packages 578 | $ git clone git@github.com:martgnz/d3-snippets.git 579 | $ cd d3-snippets 580 | $ apm install 581 | $ apm link 582 | ``` 583 | 584 | ## Credit 585 | Most 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. 586 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "d3-snippets", 3 | "main": "./lib/d3-snippets", 4 | "version": "2.0.0", 5 | "description": "A collection of D3.v4 snippets. Accelerate your graphics!", 6 | "keywords": [ 7 | "d3", 8 | "snippets", 9 | "javascript", 10 | "data visualization" 11 | ], 12 | "activationCommands": { 13 | "atom-workspace": "d3-snippets:toggle" 14 | }, 15 | "repository": "https://github.com/martgnz/d3-snippets", 16 | "license": "MIT", 17 | "engines": { 18 | "atom": ">=1.0.0 <2.0.0" 19 | }, 20 | "dependencies": {} 21 | } 22 | -------------------------------------------------------------------------------- /snippets/append.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Append something": 3 | prefix: "app" 4 | body: ".append('${1:}')" 5 | -------------------------------------------------------------------------------- /snippets/area.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Area generator": 3 | prefix: "area" 4 | body: """ 5 | const area = d3.area() 6 | .x(d => x(d.${1:})) 7 | .y1(d => y(d.${2:})) 8 | .y0(y(0)); 9 | """ 10 | -------------------------------------------------------------------------------- /snippets/attr.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set attributes": 3 | prefix: "attr" 4 | body: ".attr('${1:}', '${2:}')" 5 | -------------------------------------------------------------------------------- /snippets/axis-bottom.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Bottom-oriented axis": 3 | prefix: "axisb" 4 | body: """ 5 | d3.axisBottom(${1:x}); 6 | """ 7 | -------------------------------------------------------------------------------- /snippets/axis-left.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Left-oriented axis": 3 | prefix: "axisl" 4 | body: """ 5 | d3.axisLeft(${1:y}); 6 | """ 7 | -------------------------------------------------------------------------------- /snippets/axis-right.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Right-oriented axis": 3 | prefix: "axisr" 4 | body: """ 5 | d3.axisRight(${1:y}); 6 | """ 7 | -------------------------------------------------------------------------------- /snippets/axis-top.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Top-oriented axis": 3 | prefix: "axist" 4 | body: """ 5 | d3.axisTop(${1:x}); 6 | """ 7 | -------------------------------------------------------------------------------- /snippets/axis.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Create a SVG axis": 3 | prefix: "axis" 4 | body: """ 5 | d3.axis() 6 | .scale(${1:}) 7 | .ticks(${2:}) 8 | .orient('${3:}') 9 | """ 10 | -------------------------------------------------------------------------------- /snippets/block.cson: -------------------------------------------------------------------------------- 1 | ".text.html": 2 | 'Scaffold a block': 3 | 'prefix': 'createblock' 4 | 'body': ''' 5 | 6 | 8 | 9 | 10 | 13 | ''' 14 | -------------------------------------------------------------------------------- /snippets/circle.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Create a SVG circle": 3 | prefix: "circle" 4 | body: """ 5 | .enter() 6 | .append('circle') 7 | .attr('cx', ${1:}) 8 | .attr('cy', ${2:}) 9 | .attr('r', ${3:}) 10 | .style('fill', '${4:#111}'); 11 | """ 12 | -------------------------------------------------------------------------------- /snippets/class.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the element class": 3 | prefix: "class" 4 | body: ".attr('class', '${1:}')" 5 | -------------------------------------------------------------------------------- /snippets/csv.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Load a CSV file": 3 | prefix: "csv" 4 | body: """ 5 | d3.csv('${1:}').then(data => { 6 | ${2:console.log(data);} 7 | }); 8 | """ 9 | -------------------------------------------------------------------------------- /snippets/curve.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Curve shorthand": 3 | prefix: "curve" 4 | body: """ 5 | .curve(d3.${1:curveCatmullRom}.alpha(0.5)); 6 | """ 7 | -------------------------------------------------------------------------------- /snippets/data-index.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Return the data and the index": 3 | prefix: "fdi" 4 | body: "(d, i) => ${1:}" 5 | -------------------------------------------------------------------------------- /snippets/data.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Return the data": 3 | prefix: "fd" 4 | body: "d => ${1:}" 5 | -------------------------------------------------------------------------------- /snippets/domain.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the scale domain": 3 | prefix: "dom" 4 | body: ".domain([${1:}, ${2:}])" 5 | -------------------------------------------------------------------------------- /snippets/duration.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the transition duration": 3 | prefix: "dur" 4 | body: ".duration(${1:})" 5 | -------------------------------------------------------------------------------- /snippets/ellipse.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Create a SVG ellipse": 3 | prefix: "ellipse" 4 | body: """ 5 | .enter().append('ellipse') 6 | .attr('cx', ${1:}) 7 | .attr('cy', ${2:}) 8 | .attr('rx', ${3:}) 9 | .attr('ry', ${4:}) 10 | .style('fill', '${5:#111}'); 11 | """ 12 | -------------------------------------------------------------------------------- /snippets/enter.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Enter the data": 3 | prefix: "ent" 4 | body: ".enter()" 5 | -------------------------------------------------------------------------------- /snippets/extent.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the dataset extent": 3 | prefix: "extent" 4 | body: "d3.extent(${1:data}, d => d.${2:value});" 5 | -------------------------------------------------------------------------------- /snippets/fill-opacity.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the element fill opacity": 3 | prefix: "fill-opacity" 4 | body: ".attr('fill-opacity', ${1:0.5})" 5 | -------------------------------------------------------------------------------- /snippets/fill.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the element fill": 3 | prefix: "fill" 4 | body: ".attr('fill', '${1:none}')" 5 | -------------------------------------------------------------------------------- /snippets/function.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Blank anonymous function": 3 | prefix: "fn" 4 | body: "() => ${1:}" 5 | -------------------------------------------------------------------------------- /snippets/geo-map.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Create the projection and path for a map": 3 | prefix: "geomap" 4 | body: """ 5 | const projection = d3.${1:geoMercator}() 6 | .fitSize([${2:width}, ${3:height}], ${4:land}); 7 | 8 | const path = d3.geoPath() 9 | .projection(projection); 10 | ${7:} 11 | """ 12 | -------------------------------------------------------------------------------- /snippets/group.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Create a SVG group": 3 | prefix: "g" 4 | body: """ 5 | svg 6 | .append('g') 7 | .attr('class', '${1:}') 8 | """ 9 | -------------------------------------------------------------------------------- /snippets/join.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Start with a data join": 3 | prefix: "join" 4 | body: """ 5 | d3.selectAll('${1:}') 6 | .data(${2:}) 7 | """ 8 | -------------------------------------------------------------------------------- /snippets/json.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Load a JSON file": 3 | prefix: "json" 4 | body: """ 5 | d3.json('${1:}').then(data => { 6 | ${2:console.log(data);} 7 | }); 8 | """ 9 | -------------------------------------------------------------------------------- /snippets/line-generator.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Line generator": 3 | prefix: "lineg" 4 | body: """ 5 | const line = d3.line() 6 | .x(d => x(d.${1:})) 7 | .y(d => y(d.${2:})); 8 | """ 9 | -------------------------------------------------------------------------------- /snippets/line.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Create a SVG Line": 3 | prefix: "line" 4 | body: """ 5 | .enter().append('line') 6 | .attr('x1', ${1:}) 7 | .attr('y1', ${2:}) 8 | .attr('x2', ${3:}) 9 | .attr('y2', ${4:}) 10 | .style('stroke', '${5:#111}'); 11 | """ 12 | -------------------------------------------------------------------------------- /snippets/locale.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set a default locale": 3 | prefix: "locale" 4 | body: """ 5 | const ${1:en_US} = { 6 | 'decimal': '.', 7 | 'thousands': ',', 8 | 'grouping': [3], 9 | 'currency': ['\$', ''], 10 | 'dateTime': '%a %b %e %X %Y', 11 | 'date': '%m/%d/%Y', 12 | 'time': '%H:%M:%S', 13 | 'periods': ['AM', 'PM'], 14 | 'days': ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'], 15 | 'shortDays': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 16 | 'months': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], 17 | 'shortMonths': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 18 | } 19 | 20 | formatDefaultLocale(${2:en_US}); 21 | timeFormatDefaultLocale(${3:en_US}); 22 | 23 | """ 24 | -------------------------------------------------------------------------------- /snippets/margin.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Append a SVG with the margin convention": 3 | prefix: "margin" 4 | body: """ 5 | const margin = {top: ${1:20}, right: ${2:10}, bottom: ${3:20}, left: ${4:10}}, 6 | width = ${5:960} - margin.left - margin.right, 7 | height = ${6:500} - margin.top - margin.bottom; 8 | 9 | const svg = d3.select('${7:body}').append('svg') 10 | .attr('width', width + margin.left + margin.right) 11 | .attr('height', height + margin.top + margin.bottom) 12 | .append('g') 13 | .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); 14 | 15 | ${8:} 16 | """ 17 | -------------------------------------------------------------------------------- /snippets/max.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Get the maximum value": 3 | prefix: "max" 4 | body: "d3.max(${1:data}, d => d.${2:value});" 5 | -------------------------------------------------------------------------------- /snippets/min.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Get the minimum value": 3 | prefix: "min" 4 | body: "d3.min(${1:data}, d => d.${2:value});" 5 | -------------------------------------------------------------------------------- /snippets/nest.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Nest a dataset": 3 | prefix: "nest" 4 | body: """ 5 | const nest = d3.nest() 6 | .key(d => d.${1:}) 7 | .entries(${2:}); 8 | """ 9 | -------------------------------------------------------------------------------- /snippets/on.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Listen for events on the selection": 3 | prefix: "on" 4 | body: ".on('${1:}', ${2:})" 5 | -------------------------------------------------------------------------------- /snippets/queue-promise.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Load multiple files using a Promise": 3 | prefix: "queue-promise" 4 | body: """ 5 | Promise.all([ 6 | d3.${1:json}('${2:}'), 7 | d3.${3:json}('${4:}') 8 | ]).then([${5:file1}, ${6:file2}] => { 9 | console.log(${7:file1}, ${8:file1}); 10 | }) 11 | """ 12 | -------------------------------------------------------------------------------- /snippets/queue.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Create a queue to load multiple files": 3 | prefix: "queue" 4 | body: """ 5 | d3.queue() 6 | .defer(${1:d3.json}, '${2:}') 7 | .defer(${3:d3.json}, '${4:}') 8 | .await(function(error, ${5:file1}, ${6:file2}) { 9 | console.log(${7:file1}, ${8:file1}); 10 | }); 11 | """ 12 | -------------------------------------------------------------------------------- /snippets/radius.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the element radius": 3 | prefix: "r" 4 | body: ".attr('r', ${1:5})" 5 | -------------------------------------------------------------------------------- /snippets/range.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the scale range": 3 | prefix: "ran" 4 | body: ".range([${1:}, ${2:}])" 5 | -------------------------------------------------------------------------------- /snippets/rect.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Create a SVG rect": 3 | prefix: "rect" 4 | body: """ 5 | .enter().append('rect') 6 | .attr('x', ${1:}) 7 | .attr('y', ${2:}) 8 | .attr('width', ${3:width}) 9 | .attr('height', ${4:height}) 10 | .attr('rx', ${5:0}) 11 | .attr('ry', ${6:0}) 12 | .style('fill', '${7:#111}'); 13 | """ 14 | -------------------------------------------------------------------------------- /snippets/scale-sequential.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Create a sequential scale": 3 | prefix: "seq" 4 | body: """ 5 | d3.scaleSequential(d3.${1:interpolateViridis}) 6 | .domain([${2:}]) 7 | """ 8 | -------------------------------------------------------------------------------- /snippets/scale.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Create a sample scale": 3 | prefix: "scale" 4 | body: """ 5 | d3.${1:scaleLinear}() 6 | .domain([${2:}, ${3:}]) 7 | .range([${4:}, ${5:}]); 8 | """ 9 | -------------------------------------------------------------------------------- /snippets/select.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Select an element": 3 | prefix: "sel" 4 | body: "d3.select('${1:}')" 5 | -------------------------------------------------------------------------------- /snippets/selectAll.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Select all the elements": 3 | prefix: "sela" 4 | body: "d3.selectAll('${1:}')" 5 | -------------------------------------------------------------------------------- /snippets/sort.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Sort a dataset": 3 | prefix: "sort" 4 | body: """ 5 | ${1:data}.sort((a, b) => ${2:a}.${3:value} - ${4:b}.${5:value}); 6 | """ 7 | -------------------------------------------------------------------------------- /snippets/stroke-opacity.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the element stroke opacity": 3 | prefix: "stroke-opacity" 4 | body: ".attr('stroke-opacity', ${1:0.5})" 5 | -------------------------------------------------------------------------------- /snippets/stroke-width.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the element stroke width": 3 | prefix: "stroke-width" 4 | body: ".attr('stroke-width', ${1:1})" 5 | -------------------------------------------------------------------------------- /snippets/stroke.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the element stroke": 3 | prefix: "stroke" 4 | body: ".attr('stroke', '${1:black}')" 5 | -------------------------------------------------------------------------------- /snippets/style.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the element style": 3 | prefix: "style" 4 | body: ".style('${1:}', '${2:}')" 5 | -------------------------------------------------------------------------------- /snippets/text-anchor.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the text anchor": 3 | prefix: "anchor" 4 | body: ".attr('text-anchor', '${1:middle}')" 5 | -------------------------------------------------------------------------------- /snippets/text.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the element text": 3 | prefix: "text" 4 | body: ".text('${1:}')" 5 | -------------------------------------------------------------------------------- /snippets/tick-size.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the tick size": 3 | prefix: "tickSize" 4 | body: ".tickSize(${1:})" 5 | -------------------------------------------------------------------------------- /snippets/tick-values.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the tick values": 3 | prefix: "tickValues" 4 | body: ".tickValues(['${1:}'])" 5 | -------------------------------------------------------------------------------- /snippets/translate.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Translate the element": 3 | prefix: "translate" 4 | body: ".attr('transform', `translate(${${1:0}},${${2:0}})`)" 5 | -------------------------------------------------------------------------------- /snippets/voronoi.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Create a Voronoi diagram": 3 | prefix: "voronoi" 4 | body: """ 5 | const voronoi = d3.voronoi() 6 | .x(d => x(d.${1:})) 7 | .y(d => y(d.${2:})) 8 | .extent([[0, 0], [${3:width}, ${4:height}]]); 9 | 10 | const voronoiGroup = svg.append('g') 11 | .attr('class', 'voronoi'); 12 | 13 | voronoiGroup.selectAll('path') 14 | .data(voronoi.polygons(${5:data})) 15 | .enter().append('path') 16 | .attr('d', d => d ? 'M' + d.join('L') + 'Z' : null) 17 | 18 | """ 19 | -------------------------------------------------------------------------------- /snippets/x.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the x position": 3 | prefix: "x" 4 | body: ".attr('x', ${1:})" 5 | -------------------------------------------------------------------------------- /snippets/y.cson: -------------------------------------------------------------------------------- 1 | ".source.js, .source.ts, .source.tsx, .source.jsx": 2 | "Set the y position": 3 | prefix: "y" 4 | body: ".attr('y', ${1:})" 5 | --------------------------------------------------------------------------------