Skip to content

Instantly share code, notes, and snippets.

View d3_v4_transition_test.js
const circle = d3.select('circle');
function transition(radius, duration) {
circle.transition()
.duration(duration)
.attr('r', radius);
}
describe('#transition', () => {
beforeEach(() => {
View d3_v3_transition_test.js
const circle = d3.select('circle');
function transition(radius, duration) {
circle.transition()
.duration(duration)
.attr('r', radius);
}
describe('#transition', () => {
it('correctly transitions circle radius', () => {
View d3_test_utils.js
const d3SelectionProto = Object.assign({}, d3.selection.prototype);
const D3TestUtils = {
stubAndForceTransitions() {
d3.selection.prototype.transition = function() {
return this;
};
d3.selection.prototype.duration = function() {
return this;
View d3_3_clock_tick.js
const D3TestUtils = {
clockTick(milliseconds) {
const currentNow = Date.now();
Date.now = function() {
return currentNow + milliseconds;
}
d3.timer.flush();
}
View react_d3_with_tooltip.js
const React = require(‘react’);
const ReactDOM = require(‘react-dom’);
const MyTooltipComponent = require('my-tooltip-component');
class MyGraphComponent extends React.Component {
componentDidMount() {
this.drawChart();
}
shouldComponentUpdate() {
View react_d3.js
const React = require(‘react’);
const ReactDOM = require(‘react-dom’);
class MyGraphComponent extends React.Component {
componentDidMount() {
/* D3 code to append elements to this.svg */
}
shouldComponentUpdate() {
return false; // This prevents future re-renders of this component
View d3_d_line_test.js
describe('#renderLines', function() {
var xScale;
var yScale;
beforeEach(function() {
xScale = d3.scale.linear().domain([0, 10]).range([0, 100]);
yScale = d3.scale.linear().domain([0, 10]).range([0, 1000]);
});
it('renders lines correctly for a small 1-line data set', function() {
View d3_scale_test.js
/* Implementation */
function getXScale(dimensions, data) {
var range = [0, dimensions.width];
var domain = [0, data.length - 1];
return d3.scale.linear().domain(domain).range(range);
}
/* Test */
View d3_line_test.js
/* Implementation */
function renderLines(xScale, yScale, data) {
var lineGenerator = getLineGenerator(xScale, yScale);
d3.selectAll('path')
.data(data)
.enter()
.append('path')
.attr('d', lineGenerator);
}
View d3_circles_test.js
/* Implementation */
function renderCircles(xScale, yScale, data) {
d3.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx', circleCX.bind(undefined, xScale)
.attr('cy', circleCY.bind(undefined, yScale);
}
You can’t perform that action at this time.