An Atom package with D3v4 snippets. Accelerate your graphics!
Contributions are appreciated, if you miss a snippet feel free to create an issue or open a pull request.
You can install it inside Atom (just search for d3-snippets
) or via command line:
$ apm install d3-snippets
# app <>
Append something.
.append('${1:}')
# area <>
Area generator.
var area = d3.area().x(function(d) { return x(d.${1:}); }).y1(function(d) { return y(d.${2:}); }).y0(y(0));
# attr <>
Set attributes.
.attr('${1:}', '${2:}')
# axisb <>
Bottom-oriented axis.
d3.axisBottom(${1:x});
# axisl <>
Left-oriented axis.
d3.axisLeft(${1:y});
# axisr <>
Right-oriented axis.
d3.axisRight(${1:y});
# axist <>
Top-oriented axis.
d3.axisTop(${1:x});
# axis <>
Create a SVG axis.
d3.axis().scale(${1:}).ticks(${2:}).orient('${3:}')
# createblock <>
Scaffold a block.
<!DOCTYPE html><style></style><body><script src="https://d3js.org/d3.v4.min.js"></script><script>${1:}</script>
# circle <>
Create a SVG circle.
.enter().append('circle').attr('cx', ${1:}).attr('cy', ${2:}).attr('r', ${3:}).style('fill', '${4:#111}');
# class <>
Set the element class.
.attr('class', '${1:}')
# csv <>
Load a CSV file.
d3.csv('${1:}', function(error, data) {${2:console.log(data);}});
# curve <>
Curve shorthand.
.curve(d3.${1:curveCatmullRom}.alpha(0.5));
# fdi <>
Return the data and the index.
function(d, i) { return ${1:};}
# fd <>
Return the data.
function(d) { return ${1:};}
# dom <>
Set the scale domain.
.domain([${1:}, ${2:}])
# dur <>
Set the transition duration.
.duration(${1:})
# ellipse <>
Create a SVG ellipse.
.enter().append('ellipse').attr('cx', ${1:}).attr('cy', ${2:}).attr('rx', ${3:}).attr('ry', ${4:}).style('fill', '${5:#111}');
# ent <>
Enter the data.
.enter()
# extent <>
Set the dataset extent.
d3.extent(${1:data}, function(d) { return d.${2:value}; });
# fill-opacity <>
Set the element fill opacity.
.attr('fill-opacity', ${1:0.5})
# fill <>
Set the element fill.
.attr('fill', '${1:none}')
# fn <>
Blank anonymous function.
function() { return ${1:};}
# geomap <>
Create the projection and path for a map.
var projection = d3.${1:geoMercator}().fitSize([${2:width}, ${3:height}], ${4:land});var path = d3.geoPath().projection(projection);${7:}
# g <>
Create a SVG group.
svg.append('g').attr('class', '${1:}')
# join <>
Start with a data join.
d3.selectAll('${1:}').data(${2:})
# json <>
Load a JSON file.
d3.json('${1:}', function(error, data) {${2:console.log(data);}});
# lineg <>
Line generator.
var line = d3.line().x(function(d) { return x(d.${1:}); }).y(function(d) { return y(d.${2:}); });
# line <>
Create a SVG Line.
.enter().append('line').attr('x1', ${1:}).attr('y1', ${2:}).attr('x2', ${3:}).attr('y2', ${4:}).style('stroke', '${5:#111}');
# locale <>
Set a default locale.
var ${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 <>
Append a SVG with the margin convention.
var 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;var 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:}
# nest <>
Nest a dataset.
var nest = d3.nest().key(function(d) { return ${1:}; }).entries(${2:});
# on <>
Listen for events on the selection.
.on('${1:}', ${2:})
# queue <>
Create a queue to load multiple files.
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 <>
Set the element radius.
.attr('r', ${1:5})
# ran <>
Set the scale range.
.range([${1:}, ${2:}])
# rect <>
Create a SVG rect.
.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 <>
Create a sequential scale.
d3.scaleSequential(d3.${1:interpolateViridis}).domain([${2:}])
# scale <>
Create a sample scale.
d3.${1:scaleLinear}().domain([${2:}, ${3:}]).range([${4:}, ${5:}]);
# sel <>
Select an element.
d3.select('${1:}')
# sela <>
Select all the elements.
d3.selectAll('${1:}')
# sort <>
Sort a dataset.
${1:data}.sort(function(a, b) {return ${2:a}.${3:value} - ${4:b}.${5:value};});
# stroke-opacity <>
Set the element stroke opacity.
.attr('stroke-opacity', ${1:0.5})
# stroke-width <>
Set the element stroke width.
.attr('stroke-width', ${1:1})
# stroke <>
Set the element stroke.
.attr('stroke', '${1:black}')
# style <>
Set the element style.
.style('${1:}', '${2:}')
# anchor <>
Set the text anchor.
.attr('text-anchor', '${1:middle}')
# text <>
Set the element text.
.text('${1:}')
# tickSize <>
Set the tick size.
.tickSize(${1:})
# tickValues <>
Set the tick values.
.tickValues(['${1:}'])
# translate <>
Translate the element.
.attr('transform', 'translate(' + ${1:0} + ',' + ${2:0} + ')')
# voronoi <>
Create a Voronoi diagram.
var voronoi = d3.voronoi().x(function(d) {return x(d.${1:}); }).y(function(d) {return y(d.${2:}); }).extent([[0, 0], [${3:width}, ${4:height}]]);var voronoiGroup = svg.append('g').attr('class', 'voronoi');voronoiGroup.selectAll('path').data(voronoi.polygons(${5:data})).enter().append('path').attr('d', function(d) { return d ? 'M' + d.join('L') + 'Z' : null; })
# x <>
Set the x position.
.attr('x', ${1:})
# y <>
Set the y position.
.attr('y', ${1:})
$ cd ~/.atom/packages
$ git clone git@github.com:martgnz/d3-snippets.git
$ cd d3-snippets
$ apm install
$ apm link
Most of the inspiration comes from fabriotav's and shancarter's Sublime Text packages.
Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.