d3-snippets v2.0.0
d3-snippets
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.
Install
You can install it inside Atom (just search for d3-snippets) or via command line:
$ apm install d3-snippetsReference
# app <>
Append something.
.append('${1:}')# area <>
Area generator.
const area = d3.area()
.x(d => x(d.${1:}))
.y1(d => 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.v5.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:}').then(data => {
${2:console.log(data);}
});# curve <>
Curve shorthand.
.curve(d3.${1:curveCatmullRom}.alpha(0.5));# fdi <>
Return the data and the index.
(d, i) => ${1:}# fd <>
Return the data.
d => ${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}, d => 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.
() => ${1:}# geomap <>
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:}# 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:}').then(data => {
${2:console.log(data);}
});# lineg <>
Line generator.
const line = d3.line()
.x(d => x(d.${1:}))
.y(d => 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.
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 <>
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:}# max <>
Get the maximum value.
d3.max(${1:data}, d => d.${2:value});# min <>
Get the minimum value.
d3.min(${1:data}, d => d.${2:value});# nest <>
Nest a dataset.
const nest = d3.nest()
.key(d => d.${1:})
.entries(${2:});# on <>
Listen for events on the selection.
.on('${1:}', ${2:})# queue-promise <>
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});
})# 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((a, b) => ${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.
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 <>
Set the x position.
.attr('x', ${1:})# y <>
Set the y position.
.attr('y', ${1:})Hacking
$ cd ~/.atom/packages
$ git clone git@github.com:martgnz/d3-snippets.git
$ cd d3-snippets
$ apm install
$ apm linkCredit
Most of the inspiration comes from fabriotav's and shancarter's Sublime Text packages.