slightfoot

// MIT License
//
// Copyright (c) 2019 Simon Lightfoot
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:

gcalmettes

Note: still a work in progress

In his heat-histogram, Adam Pierce shows how using masks lets you draw an area with multiple colors using just one path.

Here this method is applied to explore the weekly mileage I ran in 2014. Instead of updating the mask itself like in Adam's bl.ocks, the underlying masked paths are redrawn depending on the threshold values from the inputs, so the path can be selectively colored.

The bars are the distance (yellow) and elevation (blue) of the individual runs, hover on them to get more details.

rosskevin

// @flow

declare module 'react-relay' {
  declare export type RecordState = 'EXISTENT' | 'NONEXISTENT' | 'UNKNOWN';

  declare export type onCompleted = (response: ?Object, errors: ?Array<PayloadError>) => void
  declare export type onError = (error: Error) => void

  declare export type CommitOptions = {
    onCompleted: onCompleted,

micahstubbs

license: MIT
border: no
height: 750

nodkz

let relayStore;
function relayCreateStore() {
  const env = new Relay.Environment();
  env.injectNetworkLayer(new Relay.DefaultNetworkLayer('/graphql'));
  if (__DEV__) {
    RelayNetworkDebug.init(env);
  }
  env.reset = () => relayCreateStore();
  env.mutate = ({
    query,

Psykar

Notes

• This code handles any JS runtime error during rendering React components. Without this handling, once an error occurs, whole component tree is damaged and can't be used at all. With this handling, nothing will be rendered in production environment (error span in dev env.) + in production the error is logged to Sentry (if you are not using it just delete related code)
• This is basicaly a workaround for proposed feature in React core - described in Issue: facebook/react#2461
• Works for all variants of Component creation - React.createClass, extending React.Component and also stateless functional components.
• To get this work, just put this snippet into your entry js file. Then it will work in whole application.
• Also supporting React Hot Reload!
• If you find this useful, please retweet https://twitter.com/Aldredcz/status/744650159942995968 :)

Ideas

• specify custom error renderer (global / per component, e.g. by implementing method renderOnError() in a comp

emeeks

// https://d3js.org/d3-force/ Version 1.0.0. Copyright 2016 Mike Bostock.
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-quadtree'), require('d3-collection'), require('d3-dispatch'), require('d3-timer')) :
  typeof define === 'function' && define.amd ? define(['exports', 'd3-quadtree', 'd3-collection', 'd3-dispatch', 'd3-timer'], factory) :
  (factory((global.d3 = global.d3 || {}),global.d3,global.d3,global.d3,global.d3));
}(this, function (exports,d3Quadtree,d3Collection,d3Dispatch,d3Timer) { 'use strict';

  function center(x, y) {
    var nodes;

susielu

Overlapping Bump Chart

Playing around with the idea of a bump chart comparison with two overlapping areas. Based on Farmers Markets data from data.gov.

Another iteration with step interpolation instead of cardinal.

cmgiven

license: mit

almost

This is a proposal for a lightning talk at the Reactive 2016 conference.

NOTE: If you like this, star ⭐ the Gist - the amount of stars decides whether it makes the cut! You could also Retweet if you want :)

Get Flow

Type checking JavaScript with Flow

JavaScript is a dynamic language, and there's nothing wrong with that. It allows quick iteration and lowers barriers. However, sometimes some compile-time type checking is just what you need to keep your code in line and give yourself the confidence to build bigger and faster. Flow gives the best of both worlds. You can have normal JavaScript but you can also add types where they're helpful, and it adds zero cost at runtime. In this talk I'll show Flow as it applies to a Redux & React codebase.