mathisonian/d3moji

First class emoji support for D3

📈 First class emoji support for D3

installation

CommonJS

npm install d3moji

var d3 = require('d3')
require('d3moji')(d3); // require and apply the plugin

old school

The plugin is automatically applied when d3 is found on the window object.

<script src="path/to/d3.js" />
<script src="path/to/d3moji.js" /> 

usage

Adding emoji to the svg

svg
    .append('emoji')
    .attr('symbol', 'smile') // codes taken from http://www.emoji-cheat-sheet.com/ the enclosing :colons: aren't necessary
    // do all the standard d3 stuff
    .attr('width', 30)
    .attr('height', 30)
    .attr('x', function(d) {
        return d[0];
    })
    .attr('y', function(d) {
        return d[1];
    })

selecting emoji

d3.select('emoji'); // select the first one found
d3.selectAll('emoji'); // select all emoji

attribution

This project uses the open source twemoji emoji svgs from twitter.

faq

why do you use the twitter emojis? I couldn't find open SVG sets for the others. PR's welcome if you know more about this.

LICENSE

MIT

d3moji's Issues

add an AMD example

The readme shows how to use this library with commonjs or with <script> tags. The module exports itself as an AMD module too - this should be reflected in the README

configurable URL

The plugin works by fetching emoji SVG assets from a CDN on demand. This URL should be configurable so that we can work support multiple icon sets.

See an example use case in #2

font-awesome svg

I discovered this a couple weeks ago https://github.com/encharm/Font-Awesome-SVG-PNG, but unfortunately still does not solve the problem, since currently it seems you need something like the twemoji cdn to serve it up. It would be slow, but could just do a gh-pages branch of that repo to serve up the generated SVG.