Skip to content

Instantly share code, notes, and snippets.

Avatar
:octocat:

Mike Surowiec mikesurowiec

:octocat:
View GitHub Profile
View draggingsvg.js
// This is inside of our React.Component
componentDidMount() {
// ... the clicking code was up here
const zoom = d3.zoom()
.scaleExtent([1, 5])
.translateExtent([[-100, -100], [svgViewportWidth-500, svgViewportHeight-500]])
.on('zoom', zoomed);
function zoomed() {
View clickingsvg.js
// The React.Component from before.
// This is just highlighting the differences.
import * as d3 from 'd3';
class DCMetroMap extends React.Component {
componentDidMount() {
// For every group inside of #Stations...
d3.selectAll('#Stations g')
View dcmetromapstub.js
import React from 'react';
import DCMetroMapHTML from './DCMetroMapHTML.js';
import Dimensions from 'react-dimensions';
const svgViewportWidth = 3266;
const svgViewportHeight = 3012;
class DCMetroMap extends React.Component {
render() {
const { containerHeight, containerWidth } = this.props;
View DCMetroMapHTML.js
const DCMetroMapHTML = `
<!-- Generator: Sketch 3.4.2 (15855)-->
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="main" stroke="none" stroke-width="1" fill-rule="evenodd" sketch:type="MSPage">
<!-- 2,100 lines of SVG, excluded for the sake of brevity -->
</g>
`;
export default DCMetroMapHTML;
@mikesurowiec
mikesurowiec / getRealtimeDataInstantaneous.js
Last active Jul 23, 2017
Shows how socket acts like a more standard REST api, with request / response
View getRealtimeDataInstantaneous.js
// Allows the client to get the data without having to wait for a new REQUEST_INTERVAL.
socket.on('getRealtimeDataForStations', (stations) => {
if (datastore.realtime && Array.isArray(stations)) {
stations.forEach((locationCode) => {
socket.emit(`realtime/${locationCode}`, datastore.realtime[locationCode]);
});
}
});
@mikesurowiec
mikesurowiec / realtime.js
Created Jul 23, 2017
DC Metro Pro realtime data fetch
View realtime.js
import _ from 'lodash';
import datastore from '../datastore';
import MetroApi from '../metroApi';
import MetroResponseTimes from '../metroResponseTimes';
module.exports = () => {
const startTime = process.hrtime();
return MetroApi.getRealtime().then((realtimeData) => {
const endTime = process.hrtime(startTime)[1] / 1000000; // [0]=seconds, [1]/1000000=ms
MetroResponseTimes.push(endTime);
@mikesurowiec
mikesurowiec / syncerIndex.js
Created Jul 23, 2017
DC Metro Pro synchronization logic
View syncerIndex.js
import { EventEmitter } from 'events';
import realtimeAction from './realtime';
import incidentsAction from './incidents';
import advisoriesAction from './advisories';
const eventEmitter = new EventEmitter();
const syncers = [
{ name: 'realtime', action: realtimeAction, interval: 2.5 * 1000 },
{ name: 'incidcents', action: incidentsAction, interval: 60 * 1000 },
View AudioComponent.js
// AudioComponent.js
import {
NativeModules,
} from 'react-native';
const { AudioManager } = NativeModules;
async function setPlaying (shouldPlay: boolean) => {
const isPlayingNativeResult = await AudioManager.setPlaying(shouldPlay);
View AudioManager.swift
// AudioManager.swift
import Foundation
@objc(AudioManager)
class AudioManager: RCTEventEmitter {
// ...
@objc func setPlaying(_ shouldPlay: Bool,
resolver resolve: RCTPromiseResolveBlock,
rejecter reject: RCTPromiseRejectBlock) -> Void {
View AudioManager.m
// AudioManager.m
#import "RCTBridgeModule.h"
// This registers your module with React Native, so it can be exposed to JS
@interface RCT_EXTERN_MODULE(AudioManager, NSObject)
RCT_EXTERN_METHOD(setPlaying:(BOOL) value
resolver:(RCTPromiseResolveBlock)resolve
rejecter:(RCTPromiseRejectBlock)reject