Skip to content

Instantly share code, notes, and snippets.

.line-chart .highlight-mark {
fill: #FA7F9F;
stroke: #891836;
stroke-width: 1px;
}
.radial-heatmap circle.highlight {
stroke: #FA7F9F;
}
@pbeshai
pbeshai / LineChart-vega-basic.js
Last active December 19, 2015 20:01
LineChart using React and Vega, no interactivity
import React, { Component, PropTypes } from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import vg from 'vega';
class LineChart extends Component {
constructor(props) {
super(props);
this.state = {
vis: null
};
@pbeshai
pbeshai / LineChart-vega-hover-voronoi.js
Created December 19, 2015 20:52
LineChart using React and Vega, with highlight on mouseover using voronoi cells
import React, { Component, PropTypes } from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import vg from 'vega';
class LineChart extends Component {
constructor(props) {
super(props);
this.state = {
vis: null
};
@pbeshai
pbeshai / LineChart-vega-hover-mousemove.js
Created December 19, 2015 20:52
LineChart using React and Vega, with highlight on mouseover using mouse move
import React, { Component, PropTypes } from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import vg from 'vega';
class LineChart extends Component {
constructor(props) {
super(props);
this.state = {
vis: null
};
@pbeshai
pbeshai / typeahead.scss
Created April 21, 2015 19:18
typeahead.js styled in SCSS
/*
* typehead.js-bootstrap3.less
* @version 0.2.3
* https://github.com/hyspace/typeahead.js-bootstrap3.less
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/MIT
*/
//custom mixin for .form-control-validation
@pbeshai
pbeshai / RadialHeatmap-vega.js
Created December 19, 2015 22:08
Radial Heatmap using React and Vega, with mouse hover behaviour
import React, { Component, PropTypes } from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import vg from 'vega';
class RadialHeatmap extends Component {
constructor(props) {
super(props);
this.state = {
vis: null
};
@pbeshai
pbeshai / computeSegments.js
Last active April 2, 2018 11:28
Helpers for Showing Missing Data in Line Charts
/**
* Helper function to compute the contiguous segments of the data
*
* Derived from https://github.com/pbeshai/d3-line-chunked/blob/master/src/lineChunked.js
*
* @param {Array} lineData the line data
* @param {Function} defined function that takes a data point and returns true if
* it is defined, false otherwise
* @param {Function} isNext function that takes the previous data point and the
* current one and returns true if the current point is the expected one to
@pbeshai
pbeshai / .block
Last active January 25, 2019 21:35
Line Circle Illusion
license: mit
height: 540
border: no
@pbeshai
pbeshai / .block
Last active January 27, 2019 03:38
Animate 100,000 points with regl - I
license: mit
height: 720
border: no