https://github.com/martgnz/d3-snippets
An Atom package with D3v5 snippets. Accelerate your graphics!
https://github.com/martgnz/d3-snippets
Last synced: 6 months ago
JSON representation
An Atom package with D3v5 snippets. Accelerate your graphics!
- Host: GitHub
- URL: https://github.com/martgnz/d3-snippets
- Owner: martgnz
- License: mit
- Created: 2016-03-13T17:10:15.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2019-12-29T10:11:49.000Z (over 6 years ago)
- Last Synced: 2025-01-31T04:17:37.969Z (over 1 year ago)
- Homepage:
- Size: 37.1 KB
- Stars: 36
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-d3 - d3-snippets - Snippets for Atom (Code Editors)
- awesome-d3 - d3-snippets - Snippets for Atom (Code Editors)
README
# d3-snippets
An [Atom](https://atom.io) package with [D3v5](https://d3js.org) snippets. Accelerate your graphics!
Contributions are appreciated, if you miss a snippet feel free to create an issue or open a pull request.
## Install
You can install it inside Atom (just search for `d3-snippets`) or via command line:
```
$ apm install d3-snippets
```
## Reference
# app [<>](snippets/append.cson "Source")
Append something.
```js
.append('${1:}')
```
# area [<>](snippets/area.cson "Source")
Area generator.
```js
const area = d3.area()
.x(d => x(d.${1:}))
.y1(d => y(d.${2:}))
.y0(y(0));
```
# attr [<>](snippets/attr.cson "Source")
Set attributes.
```js
.attr('${1:}', '${2:}')
```
# axisb [<>](snippets/axis-bottom.cson "Source")
Bottom-oriented axis.
```js
d3.axisBottom(${1:x});
```
# axisl [<>](snippets/axis-left.cson "Source")
Left-oriented axis.
```js
d3.axisLeft(${1:y});
```
# axisr [<>](snippets/axis-right.cson "Source")
Right-oriented axis.
```js
d3.axisRight(${1:y});
```
# axist [<>](snippets/axis-top.cson "Source")
Top-oriented axis.
```js
d3.axisTop(${1:x});
```
# axis [<>](snippets/axis.cson "Source")
Create a SVG axis.
```js
d3.axis()
.scale(${1:})
.ticks(${2:})
.orient('${3:}')
```
# createblock [<>](snippets/block.cson "Source")
Scaffold a block.
```js
${1:}
```
# circle [<>](snippets/circle.cson "Source")
Create a SVG circle.
```js
.enter()
.append('circle')
.attr('cx', ${1:})
.attr('cy', ${2:})
.attr('r', ${3:})
.style('fill', '${4:#111}');
```
# class [<>](snippets/class.cson "Source")
Set the element class.
```js
.attr('class', '${1:}')
```
# csv [<>](snippets/csv.cson "Source")
Load a CSV file.
```js
d3.csv('${1:}').then(data => {
${2:console.log(data);}
});
```
# curve [<>](snippets/curve.cson "Source")
Curve shorthand.
```js
.curve(d3.${1:curveCatmullRom}.alpha(0.5));
```
# fdi [<>](snippets/data-index.cson "Source")
Return the data and the index.
```js
(d, i) => ${1:}
```
# fd [<>](snippets/data.cson "Source")
Return the data.
```js
d => ${1:}
```
# dom [<>](snippets/domain.cson "Source")
Set the scale domain.
```js
.domain([${1:}, ${2:}])
```
# dur [<>](snippets/duration.cson "Source")
Set the transition duration.
```js
.duration(${1:})
```
# ellipse [<>](snippets/ellipse.cson "Source")
Create a SVG ellipse.
```js
.enter().append('ellipse')
.attr('cx', ${1:})
.attr('cy', ${2:})
.attr('rx', ${3:})
.attr('ry', ${4:})
.style('fill', '${5:#111}');
```
# ent [<>](snippets/enter.cson "Source")
Enter the data.
```js
.enter()
```
# extent [<>](snippets/extent.cson "Source")
Set the dataset extent.
```js
d3.extent(${1:data}, d => d.${2:value});
```
# fill-opacity [<>](snippets/fill-opacity.cson "Source")
Set the element fill opacity.
```js
.attr('fill-opacity', ${1:0.5})
```
# fill [<>](snippets/fill.cson "Source")
Set the element fill.
```js
.attr('fill', '${1:none}')
```
# fn [<>](snippets/function.cson "Source")
Blank anonymous function.
```js
() => ${1:}
```
# geomap [<>](snippets/geo-map.cson "Source")
Create the projection and path for a map.
```js
const projection = d3.${1:geoMercator}()
.fitSize([${2:width}, ${3:height}], ${4:land});
const path = d3.geoPath()
.projection(projection);
${7:}
```
# g [<>](snippets/group.cson "Source")
Create a SVG group.
```js
svg
.append('g')
.attr('class', '${1:}')
```
# join [<>](snippets/join.cson "Source")
Start with a data join.
```js
d3.selectAll('${1:}')
.data(${2:})
```
# json [<>](snippets/json.cson "Source")
Load a JSON file.
```js
d3.json('${1:}').then(data => {
${2:console.log(data);}
});
```
# lineg [<>](snippets/line-generator.cson "Source")
Line generator.
```js
const line = d3.line()
.x(d => x(d.${1:}))
.y(d => y(d.${2:}));
```
# line [<>](snippets/line.cson "Source")
Create a SVG Line.
```js
.enter().append('line')
.attr('x1', ${1:})
.attr('y1', ${2:})
.attr('x2', ${3:})
.attr('y2', ${4:})
.style('stroke', '${5:#111}');
```
# locale [<>](snippets/locale.cson "Source")
Set a default locale.
```js
const ${1:en_US} = {
'decimal': '.',
'thousands': ',',
'grouping': [3],
'currency': ['$', ''],
'dateTime': '%a %b %e %X %Y',
'date': '%m/%d/%Y',
'time': '%H:%M:%S',
'periods': ['AM', 'PM'],
'days': ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
'shortDays': ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
'months': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
'shortMonths': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}
formatDefaultLocale(${2:en_US});
timeFormatDefaultLocale(${3:en_US});
```
# margin [<>](snippets/margin.cson "Source")
Append a SVG with the margin convention.
```js
const margin = {top: ${1:20}, right: ${2:10}, bottom: ${3:20}, left: ${4:10}},
width = ${5:960} - margin.left - margin.right,
height = ${6:500} - margin.top - margin.bottom;
const svg = d3.select('${7:body}').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
${8:}
```
# max [<>](snippets/max.cson "Source")
Get the maximum value.
```js
d3.max(${1:data}, d => d.${2:value});
```
# min [<>](snippets/min.cson "Source")
Get the minimum value.
```js
d3.min(${1:data}, d => d.${2:value});
```
# nest [<>](snippets/nest.cson "Source")
Nest a dataset.
```js
const nest = d3.nest()
.key(d => d.${1:})
.entries(${2:});
```
# on [<>](snippets/on.cson "Source")
Listen for events on the selection.
```js
.on('${1:}', ${2:})
```
# queue-promise [<>](snippets/queue-promise.cson "Source")
Load multiple files using a Promise.
```js
Promise.all([
d3.${1:json}('${2:}'),
d3.${3:json}('${4:}')
]).then([${5:file1}, ${6:file2}] => {
console.log(${7:file1}, ${8:file1});
})
```
# queue [<>](snippets/queue.cson "Source")
Create a queue to load multiple files.
```js
d3.queue()
.defer(${1:d3.json}, '${2:}')
.defer(${3:d3.json}, '${4:}')
.await(function(error, ${5:file1}, ${6:file2}) {
console.log(${7:file1}, ${8:file1});
});
```
# r [<>](snippets/radius.cson "Source")
Set the element radius.
```js
.attr('r', ${1:5})
```
# ran [<>](snippets/range.cson "Source")
Set the scale range.
```js
.range([${1:}, ${2:}])
```
# rect [<>](snippets/rect.cson "Source")
Create a SVG rect.
```js
.enter().append('rect')
.attr('x', ${1:})
.attr('y', ${2:})
.attr('width', ${3:width})
.attr('height', ${4:height})
.attr('rx', ${5:0})
.attr('ry', ${6:0})
.style('fill', '${7:#111}');
```
# seq [<>](snippets/scale-sequential.cson "Source")
Create a sequential scale.
```js
d3.scaleSequential(d3.${1:interpolateViridis})
.domain([${2:}])
```
# scale [<>](snippets/scale.cson "Source")
Create a sample scale.
```js
d3.${1:scaleLinear}()
.domain([${2:}, ${3:}])
.range([${4:}, ${5:}]);
```
# sel [<>](snippets/select.cson "Source")
Select an element.
```js
d3.select('${1:}')
```
# sela [<>](snippets/selectAll.cson "Source")
Select all the elements.
```js
d3.selectAll('${1:}')
```
# sort [<>](snippets/sort.cson "Source")
Sort a dataset.
```js
${1:data}.sort((a, b) => ${2:a}.${3:value} - ${4:b}.${5:value});
```
# stroke-opacity [<>](snippets/stroke-opacity.cson "Source")
Set the element stroke opacity.
```js
.attr('stroke-opacity', ${1:0.5})
```
# stroke-width [<>](snippets/stroke-width.cson "Source")
Set the element stroke width.
```js
.attr('stroke-width', ${1:1})
```
# stroke [<>](snippets/stroke.cson "Source")
Set the element stroke.
```js
.attr('stroke', '${1:black}')
```
# style [<>](snippets/style.cson "Source")
Set the element style.
```js
.style('${1:}', '${2:}')
```
# anchor [<>](snippets/text-anchor.cson "Source")
Set the text anchor.
```js
.attr('text-anchor', '${1:middle}')
```
# text [<>](snippets/text.cson "Source")
Set the element text.
```js
.text('${1:}')
```
# tickSize [<>](snippets/tick-size.cson "Source")
Set the tick size.
```js
.tickSize(${1:})
```
# tickValues [<>](snippets/tick-values.cson "Source")
Set the tick values.
```js
.tickValues(['${1:}'])
```
# translate [<>](snippets/translate.cson "Source")
Translate the element.
```js
.attr('transform', `translate(${${1:0}},${${2:0}})`)
```
# voronoi [<>](snippets/voronoi.cson "Source")
Create a Voronoi diagram.
```js
const voronoi = d3.voronoi()
.x(d => x(d.${1:}))
.y(d => y(d.${2:}))
.extent([[0, 0], [${3:width}, ${4:height}]]);
const voronoiGroup = svg.append('g')
.attr('class', 'voronoi');
voronoiGroup.selectAll('path')
.data(voronoi.polygons(${5:data}))
.enter().append('path')
.attr('d', d => d ? 'M' + d.join('L') + 'Z' : null)
```
# x [<>](snippets/x.cson "Source")
Set the x position.
```js
.attr('x', ${1:})
```
# y [<>](snippets/y.cson "Source")
Set the y position.
```js
.attr('y', ${1:})
```
## Hacking
```
$ cd ~/.atom/packages
$ git clone git@github.com:martgnz/d3-snippets.git
$ cd d3-snippets
$ apm install
$ apm link
```
## Credit
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.