An Atom package with D3v5 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
Append something.
.append('${1:}')Area generator.
const area = d3.area()
.x(d => x(d.${1:}))
.y1(d => y(d.${2:}))
.y0(y(0));Set attributes.
.attr('${1:}', '${2:}')Bottom-oriented axis.
d3.axisBottom(${1:x});Left-oriented axis.
d3.axisLeft(${1:y});Right-oriented axis.
d3.axisRight(${1:y});Top-oriented axis.
d3.axisTop(${1:x});Create a SVG axis.
d3.axis()
.scale(${1:})
.ticks(${2:})
.orient('${3:}')Scaffold a block.
<!DOCTYPE html>
<style>
</style>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
${1:}
</script>Create a SVG circle.
.enter()
.append('circle')
.attr('cx', ${1:})
.attr('cy', ${2:})
.attr('r', ${3:})
.style('fill', '${4:#111}');Set the element class.
.attr('class', '${1:}')Load a CSV file.
d3.csv('${1:}').then(data => {
${2:console.log(data);}
});Curve shorthand.
.curve(d3.${1:curveCatmullRom}.alpha(0.5));Return the data and the index.
(d, i) => ${1:}Return the data.
d => ${1:}Set the scale domain.
.domain([${1:}, ${2:}])Set the transition duration.
.duration(${1:})Create a SVG ellipse.
.enter().append('ellipse')
.attr('cx', ${1:})
.attr('cy', ${2:})
.attr('rx', ${3:})
.attr('ry', ${4:})
.style('fill', '${5:#111}');Enter the data.
.enter()Set the dataset extent.
d3.extent(${1:data}, d => d.${2:value});Set the element fill opacity.
.attr('fill-opacity', ${1:0.5})Set the element fill.
.attr('fill', '${1:none}')Blank anonymous function.
() => ${1:}Create the projection and path for a map.
const projection = d3.${1:geoMercator}()
.fitSize([${2:width}, ${3:height}], ${4:land});
const path = d3.geoPath()
.projection(projection);
${7:}Create a SVG group.
svg
.append('g')
.attr('class', '${1:}')Start with a data join.
d3.selectAll('${1:}')
.data(${2:})Load a JSON file.
d3.json('${1:}').then(data => {
${2:console.log(data);}
});Line generator.
const line = d3.line()
.x(d => x(d.${1:}))
.y(d => y(d.${2:}));Create a SVG Line.
.enter().append('line')
.attr('x1', ${1:})
.attr('y1', ${2:})
.attr('x2', ${3:})
.attr('y2', ${4:})
.style('stroke', '${5:#111}');Set a default locale.
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});Append a SVG with the margin convention.
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:}Get the maximum value.
d3.max(${1:data}, d => d.${2:value});Get the minimum value.
d3.min(${1:data}, d => d.${2:value});Nest a dataset.
const nest = d3.nest()
.key(d => d.${1:})
.entries(${2:});Listen for events on the selection.
.on('${1:}', ${2:})Load multiple files using a Promise.
Promise.all([
d3.${1:json}('${2:}'),
d3.${3:json}('${4:}')
]).then([${5:file1}, ${6:file2}] => {
console.log(${7:file1}, ${8:file1});
})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});
});Set the element radius.
.attr('r', ${1:5})Set the scale range.
.range([${1:}, ${2:}])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}');Create a sequential scale.
d3.scaleSequential(d3.${1:interpolateViridis})
.domain([${2:}])Create a sample scale.
d3.${1:scaleLinear}()
.domain([${2:}, ${3:}])
.range([${4:}, ${5:}]);Select an element.
d3.select('${1:}')Select all the elements.
d3.selectAll('${1:}')Sort a dataset.
${1:data}.sort((a, b) => ${2:a}.${3:value} - ${4:b}.${5:value});Set the element stroke opacity.
.attr('stroke-opacity', ${1:0.5})Set the element stroke width.
.attr('stroke-width', ${1:1})Set the element stroke.
.attr('stroke', '${1:black}')Set the element style.
.style('${1:}', '${2:}')Set the text anchor.
.attr('text-anchor', '${1:middle}')Set the element text.
.text('${1:}')Set the tick size.
.tickSize(${1:})Set the tick values.
.tickValues(['${1:}'])Translate the element.
.attr('transform', `translate(${${1:0}},${${2:0}})`)Create a Voronoi diagram.
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)Set the x position.
.attr('x', ${1:})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.