Steven Li StevenJL

Web applications developer

StevenJL / redux_react1.jsx

Last active January 31, 2016 03:24

	import React from 'react'
	import { createStore } from 'redux'

	// import `Provider` from the react-redux
	import { Provider } from 'react-redux'

	// Assuming `App` is the root component
	import App from './containers/App'

	import todoApp from './reducers'

StevenJL / import_export.js

Created January 31, 2016 07:00

	// NAMED EXPORT EXAMPLE

	// components/comment.jsx
	export Comment = React.createClass({
	...
	});

	export function commentHelper(){
	...
	}

StevenJL / import_export2.jsx

Created January 31, 2016 07:06

	// DEFAULT EXPORT EXAMPLE

	// helpers/some_helper.jsx
	// you can export an anonymous function
	export default function(){
	...
	}

	// container/App.jsx
	// and then name it when you import it

StevenJL / react_redux2.jsx

Last active March 21, 2017 21:09

	import React, { Component } from 'react'
	import { connect } from 'react-redux'
	import { addTodo, completeTodo, setVisibilityFilter, VisibilityFilters } from '../actions'
	import AddTodo from '../components/AddTodo'
	import TodoList from '../components/TodoList'
	import Footer from '../components/Footer'

	class App extends Component {
	render() {
	// Also note the destructuring syntax:

StevenJL / d3playground.html

Last active March 26, 2016 23:13

d3playground.html

	<!doctype html><meta charset="utf-8">
	<html>
	<head>
	<script src="http://d3js.org/d3.v3.min.js" type=""></script>
	</head>
	<body>
	<div id="d3_playground" style="width:400px;height:200px;border:black 1px solid;">
	</div>
	</body>
	</html>

StevenJL / select.js

Last active March 26, 2016 03:36

	d3.selectAll("circle.a").style("fill", "red")
	// select every circle with class "a" and fill it red.

	d3.select("circle").style("fill") // => "red"
	// Note that calling .style without the second argument will
	// return the current value.

	d3.select("circle").remove() // delete the circle

	d3.selectAll(“div.sales”).data([1,5,11,3])

StevenJL / svgs.js

Last active March 26, 2016 04:42

	<svg> // The <svg> tag creates the canvas for svg elements
	<g transform="translate(100,50)"> // The <g> is used to group elements. We can now move the circle and label together.
	<circle cy="100" cx="200" r="30"></circle>
	<text> The label for the circle</text>
	</g>


	<rect x="410" y="200" height="25" width="25"></rect>

	// Use path svg elements to drag squiggly lines.

StevenJL / d3.css

Created March 26, 2016 04:42

StevenJL / d3_bind_enter_exit.js

Last active March 26, 2016 04:55

	d3.selectAll("div") // Returns selection.
	.data(someData) // Bind each element in the selection to each element in `someData` array.
	.enter() // The `enter` function defines what to do with the extra data not represented as a `div`.
	.append("div") // In this case, you append a new div for every data that is not represented by a `div`.
	.html("Wow") // with the html "Wow",
	.append("span") // followed by a span,
	.html("More Wow") // with more html.
	.style("font-weight", "900"); // Applies style to the very last result, which in this case, is the html "More Wow".

StevenJL / functions.js

Last active March 26, 2016 09:45

	// You filter array data with a anonymous function passed to `filter`
	[1,2,3,4,5,6].filter(function(el) {return el >= 4});

	// In this example, we make the html of the div, a function of the data
	// in the array. We do this using an anonymous function.
	d3.select(“div”).data([1,2,3,4]).enter().append("div")
	.html(function (d) {return d});

	// In the below anonymous function, the d argument references the data bound to that div.
	// There is a second argument i that references the index, if needed.