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.
| 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)); |
| '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 { |
| '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'; |
| 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; | |
| <div id="bullet"> | |
| <svg width=600 height=500></svg> | |
| </div> | |
| <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> |
| [ | |
| { "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 }, |
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <style> | |
| path { | |
| fill: none; | |
| stroke: #000000; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; | |
| } |
| 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; |
Forked from Captain Anonymous's Pen oXpoev.
A Pen by Shelby Sturgis on CodePen.