Skip to content

Instantly share code, notes, and snippets.

@alexcjohnson
alexcjohnson / tutorial_wrapper.py
Created May 7, 2020
Dash app tutorial wrapper
View tutorial_wrapper.py
#
# Dash app wrapper: show an app next to its code,
# for tutorials and presentations.
#
# Replace "todo" on the first line with your app, tweak the styles to taste.
# Then run this file as a dash app.
#
# Caveats:
# - Your app must be in a place you can import it from this script
# - In this version, your app must create an `app` variable, and
View massachusetts.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@alexcjohnson
alexcjohnson / React_D3.md
Last active Mar 30, 2021
Working with React and D3 together
View React_D3.md

React + D3

The key challenge in integrating D3 code into a React app is how to break up responsibility for DOM manipulation, so the two frameworks don’t step on each others’ toes yet updates are efficient and reliable. There are a lot of ways to go about this and which is best may depend on the specifics of your application. The key is to draw a very clear line between the responsibilities of React and D3 and never let either one cross into the other’s territory. React will always provide the overarching structure, D3 the details of the chart, but the exact boundary can be drawn in several places.

One other note - most of the discussion below (except for example react-faux-dom which is tailored to D3) applies just as well to integrating other packages or JS components inside a React app.

Approaches

Lifecycle methods wrapping regular D3 code:

@alexcjohnson
alexcjohnson / isnumeric.js
Created May 11, 2015
Plotly isNumeric implementation
View isnumeric.js
/**
* inspired by is-number <https://github.com/jonschlinkert/is-number>
* but significantly simplified and sped up by ignoring number and string constructors
* ie these return false:
* new Number(1)
* new String('1')
*/
'use strict';
@alexcjohnson
alexcjohnson / index.html
Last active Aug 29, 2015
map panning with no roll
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.zoomlayer {
fill: transparent;
}
.land {
fill: rgb(83, 207, 142);
}
.graticule {
@alexcjohnson
alexcjohnson / testIsNumeric.js
Created Apr 8, 2015
Test of various javascript isNumeric implementations
View testIsNumeric.js
var shouldPass = [
0xff,
5e3,
0,
-1.1,
37,
3.14,
1,
1.1,