d3-snippets

v2.0.0

Published

2 years ago

A collection of D3.v4 snippets. Accelerate your graphics!

Downloads

0High
0Medium
0Low

martgnz

d3 snippets javascript data visualization

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.

d3-snippets in action

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.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

d3-snippets

Install

Reference

Hacking

Credit