Skip to content

Instantly share code, notes, and snippets.

Avatar

Shelby Sturgis stormpython

  • Netflix
  • San Francisco, CA
View GitHub Profile
View Instructions.md

Snippet UI Take Home Assignment

image

Overview

The Snippet UI consists of an input and output area. The input area contains a code editor which accepts javascript code. The output area needs to display the result of the evaluated code in the code editor, e.g. see below. The goal of this activity is to hook up the Run button so that the results of the evaluated code appear in the output area.

running in action

View pixelate.js
import { cloneDeep, findIndex, first, isFunction } from 'lodash';
export default function () {
let x = (d) => d.x;
let y = (d) => d.y;
let xScale = d3.scale.linear();
let yScale = d3.scale.linear();
function X(d, i) {
return xScale(x.call(this, d, i));
View Container.js
'use strict';
// modules
import React from 'react';
import ReactDOM from 'react-dom';
import d3 from 'd3';
let PropTypes = React.PropTypes;
class Container extend React.Component {
View Symbols.js
'use strict';
// modules
import React from 'react';
import ReactDOM from 'react-dom';
import d3 from 'd3';
import { isNaN } from 'lodash';
import pointsLayout from '../layout/symbols';
@stormpython
stormpython / https.js
Created Jan 19, 2016
HTTP Proxy Example using https-proxy-agent
View https.js
const { fromNode: fn } = require('bluebird');
const { createWriteStream, unlinkSync } = require('fs');
const Wreck = require('wreck');
const HttpsProxyAgent = require('https-proxy-agent');
const getProgressReporter = require('../progress_reporter');
function sendRequest({ sourceUrl, timeout, proxy }) {
const maxRedirects = 11; //Because this one goes to 11.
sourceUrl = proxy ? sourceUrl.agent = new HttpsProxyAgent(proxy) : sourceUrl;
View index.html
<div id="bullet">
<svg width=600 height=500></svg>
</div>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
@stormpython
stormpython / countries.json
Last active Nov 13, 2015
European Life Expectancy
View countries.json
[
{ "abbr": "ad", "name": "Andorra", "leb": 84.2, "pop": 79200, "size": 468 },
{ "abbr": "al", "name": "Albania", "leb": 74, "pop": 2887000, "size": 28748 },
{ "abbr": "at", "name": "Austria", "leb": 81.5, "pop": 8608000, "size": 83858 },
{ "abbr": "ba", "name": "Bosnia and Herzegovina", "leb": 76, "pop": 3750000, "size": 51129 },
{ "abbr": "be", "name": "Belgium", "leb": 81, "pop": 11259000, "size": 30510 },
{ "abbr": "bg", "name": "Bulgaria", "leb": 74.5, "pop": 7265000, "size": 110910 },
{ "abbr": "by", "name": "Belaurs", "leb": 72.5, "pop": 9481000, "size": 207600 },
{ "abbr": "ch", "name": "Switzerland", "leb": 82.8, "pop": 8081000, "size": 41290 },
{ "abbr": "cy", "name": "Cyprus", "leb": 81.2, "pop": 876000, "size": 9251 },
@stormpython
stormpython / index.html
Last active Nov 12, 2015
Police Killings Visualization Project Map
View index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
path {
fill: none;
stroke: #000000;
stroke-linejoin: round;
stroke-linecap: round;
}
@stormpython
stormpython / bar_chart.js
Created Nov 11, 2015
Police Killings Visualization Project
View bar_chart.js
function barChart() {
var key = function (d) { return d.key; };
var margin = { top: 20, right: 20, left: 20, bottom: 20 };
var width = 500;
var height = 500;
var xScale = d3.scale.linear();
var yScale = d3.scale.ordinal();
var yAxis = d3.svg.axis().orient('left').tickSize(0);
var sort = function (a, b) { return a.count - b.count; };
var padding = 0.1;