tonyfast · August 29, 2015 14:18 · tonyfast · Mar 31, 2015
diff --git a/body_config.yml b/body_config.yml
 Domain:
    x: [-0.7, 0.7]
    y: [0, 1.0]
 Full_model:
    0:
        density: 0.0
        radius: 0.08
        position: [0.0, 0.0]
    1:
        density: 0.5
        radius: 0.04
        position: [-0.2, 0.45]
    2:
        density: 0.5
        radius: 0.04
        position: [0.2, 0.7]
    3:
        density: 0.5
        radius: 0.03
        position: [0.3, 0.4]
    4:
        density: 0.5
        radius: 0.03
        position: [-0.14, 0.55]
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
  <head>
    <script src='//cdn.jsdelivr.net/g/d3js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.2.7/js-yaml.min.js"></script>
  </head>
  <body>
    <script>
      ;( function(){
        
        board = {};
        path = {};
        
        var w = 500,
            h = 400;
        
        var svg = d3.select('body')
          .append('svg')
          .attr('height',w)
          .attr('width',h);
        
        d3.text( 'body_config.yml')
          .get( function(e,d){
            board = jsyaml.load( d );
            d3.csv( 'trajdata.csv')
              .get(function(e,d){
                path = d;
                mount(svg);
              });
          });
        
        var mount = function(svg){
          var scale = {
            x: d3.scale.linear().domain( board['Domain']['x']).range([0,w]),
            y: d3.scale.linear().domain( 
              [1,0].map( function(d){ 
                return board['Domain']['y'][d]; 
              }) 
            ).range([0,h]),
            r: d3.scale.linear().domain( board['Domain']['y'] ).range([0,h])
          }
          var line = d3.svg.line()
            .x( function(d){
              return scale['x']( d['x'] );
            })
            .y( function(d){
              return scale['y']( d['y'] );
            })
            .interpolate('linear');
          svg.selectAll('circle')
            .data( board['Full_model'] )
            .call( function(s){
               s.enter()
                .append('circle')
                .attr('cx',function(d){
                  return scale.x(d['position'][0]);
                })
                .attr('cy',function(d){
                  return scale.y(d['position'][1]);
                })
                .attr('r',function(d){
                  return scale.r(d['radius']);
                })
                .attr('fill','blue')
            });
          svg.append('path')
            .attr('d',line(path))
            .attr("stroke", "steelblue")
            .attr("stroke-width", "2")
            .attr("fill", "none");

        }
      })();
    </script>
  </body>
 </html>
diff --git a/trajdata.csv b/trajdata.csv
	Domain:
	x: [-0.7, 0.7]
	y: [0, 1.0]
	Full_model:
	0:
	density: 0.0
	radius: 0.08
	position: [0.0, 0.0]
	1:
	density: 0.5
	radius: 0.04
	position: [-0.2, 0.45]
	2:
	density: 0.5
	radius: 0.04
	position: [0.2, 0.7]
	3:
	density: 0.5
	radius: 0.03
	position: [0.3, 0.4]
	4:
	density: 0.5
	radius: 0.03
	position: [-0.14, 0.55]
	<!doctype html>
	<html>
	<head>
	<script src='//cdn.jsdelivr.net/g/d3js'></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/3.2.7/js-yaml.min.js"></script>
	</head>
	<body>
	<script>
	;( function(){

	board = {};
	path = {};

	var w = 500,
	h = 400;

	var svg = d3.select('body')
	.append('svg')
	.attr('height',w)
	.attr('width',h);

	d3.text( 'body_config.yml')
	.get( function(e,d){
	board = jsyaml.load( d );
	d3.csv( 'trajdata.csv')
	.get(function(e,d){
	path = d;
	mount(svg);
	});
	});

	var mount = function(svg){
	var scale = {
	x: d3.scale.linear().domain( board['Domain']['x']).range([0,w]),
	y: d3.scale.linear().domain(
	[1,0].map( function(d){
	return board['Domain']['y'][d];
	})
	).range([0,h]),
	r: d3.scale.linear().domain( board['Domain']['y'] ).range([0,h])
	}
	var line = d3.svg.line()
	.x( function(d){
	return scale['x']( d['x'] );
	})
	.y( function(d){
	return scale['y']( d['y'] );
	})
	.interpolate('linear');
	svg.selectAll('circle')
	.data( board['Full_model'] )
	.call( function(s){
	s.enter()
	.append('circle')
	.attr('cx',function(d){
	return scale.x(d['position'][0]);
	})
	.attr('cy',function(d){
	return scale.y(d['position'][1]);
	})
	.attr('r',function(d){
	return scale.r(d['radius']);
	})
	.attr('fill','blue')
	});
	svg.append('path')
	.attr('d',line(path))
	.attr("stroke", "steelblue")
	.attr("stroke-width", "2")
	.attr("fill", "none");

	}
	})();
	</script>
	</body>
	</html>