• This repository has been archived on 02/Nov/2021
  • Stars
    star
    429
  • Rank 97,897 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 9 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

D3Kit is a set tools to speed D3 related project development

d3Kit

status: retired

NPM version Build Status Dependency Status CDNJS version

d3Kit provides thin scaffold for creating reusable and responsive charts with D3. It aims to relieve you from the same groundwork tasks you found yourself doing again and again.

Introduction slides | Getting started guide | API Reference | All Documentation

For developers who have tried d3Kit v1-2, d3Kit v3 was rewritten to support D3 v4, consider several new use cases (<canvas>, for example) and use ES6 class for the implementation, making every chart can be extended easily. Documentation of version 1-2 can be found here

Install

npm install d3kit --save

See getting start guide for more details.

Examples

Here are a few examples of d3Kit in action:

Why should you use d3Kit?

Avoid coding basic building blocks again and again.

😫 You are tired of copying the boilerplate d3.select('body').append('svg')... from D3 examples.

Solution: There is SvgChart for that.

😫 You want to create a chart on <canvas> but never remember how to handle different screen resolution (retina display).

Solution: There is CanvasChart for that.

🤔 You want to use <svg> and <canvas> together.

Solution: There is HybridChart for that.

😫 You use D3's margin convention and are tired of copy pasting from Mike's block.

Solution: All SvgChart, CanvasChart and HybridChart extends AbstractChart, which was built based on the margin convention.

Reusable charts

🤔 You want to create a reusable chart in D3.

😫 You want to create a responsive chart, but are tired of listening to window resize or manually polling for element size.

🤔 You want to make a responsive chart that maintains aspect ratio.

Solution: Create a chart extends from SvgChart, CanvasChart, HybridChart or AbstractChart then you get all of the above handled.

🤔 You are familiar with creating charts in D3 and want to adapt them easily into React or angular components.

Solution: Currently there are react-d3kit and angular-d3kit-adapter that can convert charts written in d3Kit into React and Angular 1 components, respectively, in a few lines of code.

What is d3Kit?

The core of d3Kit are base classes for creating a chart. Currently there are SvgChart, CanvasChart and HybridChart. All are extended from AbstractChart.

AbstractChart

  • takes a target container (usually a <div>) and helps you build a chart inside.
  • encapsulates D3's margin convention. The dimension of each chart is defined by width, height and margin.
    • chart.width() get/set the total width (including margin)
    • chart.height() get/set the total height (including margin)
    • chart.margin() get/set the margin
    • chart.getInnerWidth() returns width excluding margin. This is usually used as the boundary of the x-axis.
    • chart.getInnerHeight() returns height excluding margin. This is usually used as the boundary of the y-axis.
  • can resize the chart to be percentage of a container and/or maintain aspect ratio
    • chart.fit(fitOptions:Object) Calling this function with single argument will resize the chart to fit into the container once. Please refer to slimfit documentation for fitOptions.
  • can listen to resize (either window or element) and update the chart size to fit container.
    • chart.fit(fitOptions:Object, watchOptions:Boolean/Object) Calling with two arguments, such as chart.fit({...}, true) or chart.fit({...}, {...}), will enable watching. Please refer to slimfit documentation for fitOptions and watchOptions
    • chart.stopFitWatcher() will disable the watcher.
  • dispatches event resize when the chart is resized.
    • chart.on('resize', listener) is then use to register what to do after the chart is resized.
  • defines two main input channels .data(...) and .options(...) and dispatches event data and options when they are changed, respectively.
    • chart.data(data) get/set data.
    • chart.options(options) get/merge options
    • chart.on('data', listener)
    • chart.on('options', listener)
  • assumes little about how you implement a chart. You can extends the class and implements it the way you want.

Most of the time you will not need to access AbstractChart directly, but you will use one of its children: SvgChart, CanvasChart or HybridChart.

SvgChart

This class creates <svg> boilerplate inside the container.

CanvasChart

While SvgChart creates necessary element for building chart with <svg>. This class creates <canvas> inside the container. It also handles different screen resolution for you (retina display vs. standard display).

HybridChart

Thought about using <svg> and <canvas> in combination? Here it is. A HybridChart creates both <svg> and <canvas> inside the container.

Build your own chart with plates

If SvgChart, CanvasChart or HybridChart does not fit your need yet, you can create your own.

Under the hood, d3Kit use its "plating" system to wrap different type of components (<svg>, <canvas>, etc.). The current implementation includes three types of plates: SvgPlate, CanvasPlate and DivPlate.

Think of AbstractChart as a container. Any resizing done to the chart will be applied to the plates in it by d3Kit. This abstraction helps you think of a chart as one piece and not to worry about how to keep track of each children size. Then you can just focus on what to drawn on svg or canvas based on the current dimension of the chart.

  • An SvgChart is an AbstractChart that has an SvgPlate in it.
  • A CanvasChart is an AbstractChart that has a CanvasPlate in it.
  • A HybridChart, as you may guess, is an AbstractChart that has two plates (CanvasPlate and SvgPlate) in it.

Now if you want to create a chart with multiple canvases and svg, just create a new subclass.

import { AbstractChart, CanvasPlate, SvgPlate } from 'd3kit';

class CustomChart extends AbstractChart {
  constructor(selector, ...options) {
    super(selector, ...options);

    this.addPlate('canvas1', new CanvasPlate());
    // now access D3 selection of this <canvas> element
    // via this.plates.canvas1.getSelection()

    this.addPlate('canvas2', new CanvasPlate());
    // now access D3 selection of this <canvas> element
    // via this.plates.canvas2.getSelection()

    this.addPlate('svg', new SvgPlate());
    // now access D3 selection of this <svg> element
    // via this.plates.svg.getSelection()

    this.updateDimensionNow();
  }
}

Once you call

new CustomChart('#my-chart');

This will be created.

<div id="my-chart">
  <div class="d3kit-chart-root">
  	 <canvas />
  	 <canvas />
  	 <svg></svg>
  </div>
</div>

Other features

LayerOrganizer

This was created from a habit of creating many <g>s inside the root <g>.

Input

<svg>
  <g class="container"></g>
</svg>
const layers = new LayerOrganizer(d3.selection('.container'));
layers.create(['content', 'x-axis', 'y-axis']);

Output

<svg>
  <g class="container">
    <!-- layers.get('content') is a D3 selection of this g -->
    <g class="content-layer"></g>
    <!-- layers.get('x-axis') is a D3 selection of this g -->
    <g class="x-axis-layer"></g>
    <!-- layers.get('y-axis') is a D3 selection of this g -->
    <g class="y-axis-layer"></g>
  </g>
</svg>

All SvgChart includes chart.layers by default, which is new LayerOrganizer(chart.container).

There are more features. Read more here.

Chartlet

d3Kit v1-2 also helps you create reusable subcomponent (a.k.a. Chartlet). We have not ported it to v3 yet.

Documentation

Want to learn more? Follow these links.

Appendix

A diagram explaining D3's margin convention

Authors

License

© 2015-2017 Twitter, Inc. MIT License

More Repositories

1

the-algorithm

Source code for Twitter's Recommendation Algorithm
Scala
60,968
star
2

twemoji

Emoji for everyone. https://twemoji.twitter.com/
HTML
16,575
star
3

typeahead.js

typeahead.js is a fast and fully-featured autocomplete library
JavaScript
16,526
star
4

twemproxy

A fast, light-weight proxy for memcached and redis
C
12,000
star
5

the-algorithm-ml

Source code for Twitter's Recommendation Algorithm
Python
9,844
star
6

finagle

A fault tolerant, protocol-agnostic RPC system
Scala
8,742
star
7

hogan.js

A compiler for the Mustache templating language
JavaScript
5,143
star
8

labella.js

Placing labels on a timeline without overlap.
JavaScript
3,869
star
9

scala_school

Lessons in the Fundamentals of Scala
HTML
3,700
star
10

AnomalyDetection

Anomaly Detection with R
R
3,529
star
11

scalding

A Scala API for Cascading
Scala
3,469
star
12

twitter-text

Twitter Text Libraries. This code is used at Twitter to tokenize and parse text to meet the expectations for what can be used on the platform.
HTML
3,051
star
13

TwitterTextEditor

A standalone, flexible API that provides a full-featured rich text editor for iOS applications.
Swift
2,950
star
14

opensource-website

Twitter's open source website, identifying projects we've released, organizations we support, and the work we do to support open source.
SCSS
2,918
star
15

util

Wonderful reusable code from Twitter
Scala
2,679
star
16

algebird

Abstract Algebra for Scala
Scala
2,284
star
17

finatra

Fast, testable, Scala services built on TwitterServer and Finagle
Scala
2,271
star
18

effectivescala

Twitter's Effective Scala Guide
HTML
2,241
star
19

summingbird

Streaming MapReduce with Scalding and Storm
Scala
2,136
star
20

pelikan

Pelikan is Twitter's unified cache backend
C
1,921
star
21

ios-twitter-image-pipeline

Twitter Image Pipeline is a robust and performant image loading and caching framework for iOS clients
C
1,851
star
22

twurl

OAuth-enabled curl for the Twitter API
Ruby
1,790
star
23

rezolus

Systems performance telemetry
Rust
1,546
star
24

twitter-server

Twitter-Server defines a template from which services at Twitter are built
Scala
1,542
star
25

activerecord-reputation-system

An Active Record Reputation System for Rails
Ruby
1,334
star
26

communitynotes

Documentation and source code powering Twitter's Community Notes
Python
1,319
star
27

compose-rules

Static checks to aid with a healthy adoption of Compose
Kotlin
1,311
star
28

fatcache

Memcache on SSD
C
1,301
star
29

rsc

Experimental Scala compiler focused on compilation speed
Scala
1,243
star
30

elephant-bird

Twitter's collection of LZO and Protocol Buffer-related Hadoop, Pig, Hive, and HBase code.
Java
1,137
star
31

cassovary

Cassovary is a simple big graph processing library for the JVM
Scala
1,039
star
32

Serial

Light-weight, fast framework for object serialization in Java, with Android support.
Java
988
star
33

hbc

A Java HTTP client for consuming Twitter's realtime Streaming API
Java
963
star
34

twemcache

Twemcache is the Twitter Memcached
C
925
star
35

innovators-patent-agreement

Innovators Patent Agreement (IPA)
919
star
36

vireo

Vireo is a lightweight and versatile video processing library written in C++11
C++
919
star
37

twitter-korean-text

Korean tokenizer
Scala
834
star
38

scrooge

A Thrift parser/generator
Scala
785
star
39

BreakoutDetection

Breakout Detection via Robust E-Statistics
C++
753
star
40

GraphJet

GraphJet is a real-time graph processing library.
Java
696
star
41

twitter-cldr-rb

Ruby implementation of the ICU (International Components for Unicode) that uses the Common Locale Data Repository to format dates, plurals, and more.
Ruby
667
star
42

bijection

Reversible conversions between types
Scala
657
star
43

chill

Scala extensions for the Kryo serialization library
Scala
608
star
44

ios-twitter-network-layer

Twitter Network Layer is a scalable and feature rich network layer built on top of NSURLSession for Apple platforms
Objective-C
574
star
45

hadoop-lzo

Refactored version of code.google.com/hadoop-gpl-compression for hadoop 0.20
Shell
544
star
46

storehaus

Storehaus is a library that makes it easy to work with asynchronous key value stores
Scala
464
star
47

rpc-perf

A tool for benchmarking RPC services
Rust
458
star
48

scoot

Scoot is a distributed task runner, supporting both a proprietary API and Bazel's Remote Execution.
Go
347
star
49

twitter-cldr-js

JavaScript implementation of the ICU (International Components for Unicode) that uses the Common Locale Data Repository to format dates, plurals, and more. Based on twitter-cldr-rb.
JavaScript
345
star
50

scala_school2

Scala School 2
Scala
340
star
51

rustcommon

Common Twitter Rust lib
Rust
339
star
52

wordpress

The official Twitter plugin for WordPress. Embed Twitter content and grow your audience on Twitter.
PHP
310
star
53

ios-twitter-logging-service

Twitter Logging Service is a robust and performant logging framework for iOS clients
Objective-C
300
star
54

nodes

A library to implement asynchronous dependency graphs for services in Java
Java
246
star
55

SentenTree

A novel text visualization technique
JavaScript
226
star
56

interactive

Twitter interactive visualization
HTML
213
star
57

joauth

A Java library for authenticating HTTP Requests using OAuth
Java
211
star
58

thrift_client

A Thrift client wrapper that encapsulates some common failover behavior
Ruby
196
star
59

hpack

Header Compression for HTTP/2
Java
192
star
60

zktraffic

ZooKeeper protocol analyzer and stats gathering daemon
Python
165
star
61

twemoji-parser

A simple library for identifying emoji entities within a string in order to render them as Twemoji.
Scala
162
star
62

cache-trace

A collection of Twitter's anonymized production cache traces.
Shell
162
star
63

sbf

Java
159
star
64

tormenta

Scala extensions for Storm
Scala
132
star
65

whiskey

HTTP library for Android (beta)
Java
131
star
66

hraven

hRaven collects run time data and statistics from MapReduce jobs in an easily queryable format
Java
127
star
67

netty-http2

HTTP/2 for Netty
Java
120
star
68

sqrl

A Safe, Stateful Rules Language for Event Streams
TypeScript
100
star
69

ccommon

Cache Commons
C
99
star
70

focus

Focus aligns Git worktree content based on outlines of a repository's Bazel build graph. Focused repos are sparse, shallow, and thin and unlock markedly better performance in large repos.
Rust
91
star
71

dict_minimize

Access scipy optimizers from your favorite deep learning framework.
Python
77
star
72

metrics

76
star
73

twitter.github.io

HTML
71
star
74

go-bindata

Go
68
star
75

birdwatch

67
star
76

diffusion-rl

Python
66
star
77

cloudhopper-commons

Cloudhopper Commons
Java
57
star
78

twitter-cldr-npm

TwitterCldr npm package
JavaScript
49
star
79

.github

Twitter GitHub Organization-wide files
48
star
80

bazel-multiversion

Bazel rules to resolve, fetch and manage 3rdparty JVM dependencies with support for multiple parallel versions of the same dependency. Powered by Coursier.
Scala
47
star
81

libwatchman

A C interface to watchman
C
44
star
82

sslconfig

Twitter's OpenSSL Configuration
42
star
83

ios-twitter-apache-thrift

A thrift encoding and decoding library for Swift
Swift
41
star
84

gatekeeper-service

GateKeeper is a service built to automate the manual steps involved in onboarding, offboarding, and lost asset scenarios.
Python
36
star
85

dodo

The Twitter OSS Project Builder
Shell
35
star
86

repo-scaffolding

Tools for creating repos based on open source standards and best practices
33
star
87

iago2

A load generator, built for engineers
Scala
24
star
88

caladrius

Performance modelling system for Distributed Stream Processing Systems (DSPS) such as Apache Heron and Apache Storm
Python
22
star
89

ossdecks

Repository for Twitter Open Source Decks
10
star
90

curation-style-guide

Document Repository for Twitter's Curation Style Guide
10
star
91

analytics-infra-governance

Description of the process for how to commit, review, and release code to the Scalding OSS family (Scalding, Summingbird, Algebird, Bijection, Storehaus, etc)
9
star
92

gpl-commitment

Twitter's GPL Cooperation Commitment
5
star
93

second-control-probability-distributions

4
star
94

google-tag-manager-event-tag

Smarty
3
star
95

google-tag-manager-base-tag

Smarty
2
star