dandavison/index.html

## index.html
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <script type="text/javascript" src="page.js"></script>
    <link rel="stylesheet" href="page.css" type="text/css"></link>
  </head>
  <body>
    <script type="text/javascript">
      $(function () { main() });
    </script>
  </body>
</html>

## page.coffee
data = (Math.random() for i in [1..4])

window.main = ->
    vis = d3.select('body')
        .selectAll('__nothing__')
        .data(data)
        .enter().append('div')
        .style('height', (d) -> d * 300)
        .style('width', 50)

## page.css
div {
    display: inline-block;
    margin-right: 2px;
    background-color: darkblue;
}

## page.js
(function() {
  var data, i;
  data = (function() {
    var _results;
    _results = [];
    for (i = 1; i <= 4; i++) {
      _results.push(Math.random());
    }
    return _results;
  })();
  window.main = function() {
    var vis;
    return vis = d3.select('body').selectAll('__nothing__').data(data).enter().append('div').style('height', function(d) {
      return d * 300;
    }).style('width', 50);
  };
}).call(this);

## page.org

      
    Raw
  

              page.org
            
          
    <html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <script type="text/javascript" src="page.js"></script>
    <link rel="stylesheet" href="page.css" type="text/css"></link>
  </head>
  <body>
    <script type="text/javascript">
      $(function () { main() });
    </script>
  </body>
</html>
div {
    display: inline-block;
    margin-right: 2px;
    background-color: darkblue;
}
data = (Math.random() for i in [1..4])

window.main = ->
    vis = d3.select('body')
        .selectAll('__nothing__')
        .data(data)
        .enter().append('div')
        .style('height', (d) -> d * 300)
        .style('width', 50)
(setq org-src-fontify-natively t)
(add-hook 'org-babel-post-tangle-hook
          (lambda () (when (eq major-mode 'coffee-mode) (coffee-compile-file))))
Instructions


  Open this in emacs with a recent version of org-mode
  Place point on the emacs-lisp block and issue M-x
    org-babel-execute-src-block ( C-c C-c )
  Create the html/css/js files with M-x org-babel-tangle ( C-c C-v t )
  Open index.html in a browser
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="page.js"></script>
	<link rel="stylesheet" href="page.css" type="text/css"></link>
	</head>
	<body>
	<script type="text/javascript">
	$(function () { main() });
	</script>
	</body>
	</html>
	data = (Math.random() for i in [1..4])

	window.main = ->
	vis = d3.select('body')
	.selectAll('__nothing__')
	.data(data)
	.enter().append('div')
	.style('height', (d) -> d * 300)
	.style('width', 50)
	div {
	display: inline-block;
	margin-right: 2px;
	background-color: darkblue;
	}
	(function() {
	var data, i;
	data = (function() {
	var _results;
	_results = [];
	for (i = 1; i <= 4; i++) {
	_results.push(Math.random());
	}
	return _results;
	})();
	window.main = function() {
	var vis;
	return vis = d3.select('body').selectAll('__nothing__').data(data).enter().append('div').style('height', function(d) {
	return d * 300;
	}).style('width', 50);
	};
	}).call(this);