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-snippets

Reference

# 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 [email protected]:martgnz/d3-snippets.git
$ cd d3-snippets
$ apm install
$ apm link

Credit

Most of the inspiration comes from fabriotav's and shancarter's Sublime Text packages.

Name		Name	Last commit message	Last commit date
Latest commit History 46 Commits
snippets		snippets
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE.md		LICENSE.md
README.md		README.md
package.json		package.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

d3-snippets

Install

Reference

Hacking

Credit

About

Releases 10

Packages

Contributors 2

License

martgnz/d3-snippets

Folders and files

Latest commit

History

Repository files navigation

d3-snippets

Install

Reference

Hacking

Credit

About

Resources

License

Stars

Watchers

Forks

Releases 10

Packages 0

Contributors 2

Packages