joyrexus/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Trying out example from @tmcw's GothamJS talk of component composition / event rebinding.
See also the man's post on D3 for HTML.

  
## index.coffee.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.6.3/coffee-script.min.js"></script>
<style>
  body {
    margin: 80px;
    font-family: "Helvetica Neue";
    font-weight: 100;
    font-size: 400px;
    color: #333;
  }
</style>
<body>
<script type="text/coffeescript">
  say = (msg) ->
    event = d3.dispatch 'click'
    clickable = (selection) -> selection.append('div').text(msg)
        .on('click', -> event.click(msg))
    d3.rebind clickable, event, 'on'

  d3.select('body').call say('hi!').on('click', (msg) -> alert msg)
</script>


## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
  body {
    margin: 80px;
    font-family: "Helvetica Neue";
    font-weight: 100;
    font-size: 400px;
    color: #333;
  }
</style>
<body>
<script>
  function say(msg) {
    var event = d3.dispatch('click');
    return d3.rebind(function(selection) {
      selection.append('div').text(msg)
        .on('click', function() {
          event.click(msg);
        });
    }, event, 'on');
  }

  d3.select('body').call(say('hi!')
    .on('click', function(msg) {
      alert(msg);
    }));
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.6.3/coffee-script.min.js"></script>
	<style>
	body {
	margin: 80px;
	font-family: "Helvetica Neue";
	font-weight: 100;
	font-size: 400px;
	color: #333;
	}
	</style>
	<body>
	<script type="text/coffeescript">
	say = (msg) ->
	event = d3.dispatch 'click'
	clickable = (selection) -> selection.append('div').text(msg)
	.on('click', -> event.click(msg))
	d3.rebind clickable, event, 'on'

	d3.select('body').call say('hi!').on('click', (msg) -> alert msg)
	</script>