1wheel/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<link rel="iframely player" type="text/html" href="http://bl.ocks.org/1wheel/raw/c3a4feeb5bf20a76d716/1894228ce36ef2de7fd920c8fc94a3236b4f9a72" media="(min-width:100) and (min-height:100)" title="Senate Map">
<link rel="iframely thumbnail" size="800x600" type="image/png" href="https://www.google.com/images/srpr/logo11w.png">

<style>
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0px;
}
  svg{
    display: inline-block;
  }
  circle{
    fill-opacity: .2;
    stroke-width: 1;
    stroke: black;
  }

  .axis {
    shape-rendering: crispEdges;
  }

  .x.axis line {
    stroke: black;
  }

  .x.axis .minor {
    stroke-opacity: .5;
  }

  .y.axis line, .y.axis path {
    fill: none;
    stroke: black;
  }

  .x.axis line, .x.axis path {
    fill: none;
    stroke: black;
  }
</style>

<body>

<iframe height="300" width="200" src="http://bl.ocks.org/1wheel/raw/c3a4feeb5bf20a76d716/1894228ce36ef2de7fd920c8fc94a3236b4f9a72/#54" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</body>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.compat.min.js"></script>

<script>

function ƒ(field){
  return function(object){
    return typeof(field) === 'undefined' ? object : object[field];
  }
}

var broadcastResize  = (function(){
  var windowId = '';
  window.addEventListener(
    "message",
    function(event){
      windowId = event.data.windowId;
      resize(); },
    false);

  function resize(){
    window.parent.postMessage({
      method: "resize",
      windowId: windowId,
      height: document.body.clientHeight
    }, '*')
  }

  return resize;
})();

//dynamically update href of link
d3.select('link').attr('href', window.location.href)


var currentHover = window.location.hash.replace('#', '');
var numPoints = 100;
var data1 = d3.range(numPoints).map(function(d, i){ return {value: Math.random()*i,             index: i}; })
var data2 = d3.range(numPoints).map(function(d, i){ return {value: Math.random()*i*i*i/100/100, index: i}; })

function draw(){
  d3.select('body').selectAll('*').remove();

  var margin = {top: 20, right: 20, bottom: 25, left: 50};
  var width = window.innerWidth - margin.left - margin.right - 100,
      height = 300 - margin.top - margin.bottom;

  var mobile = width < 500;
  if (!mobile){
    width = width/2;
  }

  var x = d3.scale.linear()
      .domain([0, numPoints])
      .range([0, width])

  var y = d3.scale.linear()
      .domain(d3.extent(data1.concat(data2), ƒ('value')))
      .range([height, 0])

  var xAxis = d3.svg.axis().scale(x)
  var yAxis = d3.svg.axis().scale(y).ticks(4).orient("left");

  var line = d3.svg.line()
      .x(_.compose(x, ƒ('index')))
      .y(_.compose(y, ƒ('value')))

  function addLine(data){
    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append('line')
        .attr('d', line(data));

    svg.selectAll('circle')
        .data(data).enter()
      .append('circle')
        .attr('r', 5)
        .attr('cx', _.compose(x, ƒ('index')))
        .attr('cy', _.compose(y, ƒ('value')))
        .on('mouseover', _.compose(setHover, ƒ('index')))

    // Add the x-axis.
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    // Add the y-axis.
    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + 0 + ",0)")
        .call(yAxis);


  }
  addLine(data1);
  addLine(data2);

  setHover(currentHover);
  broadcastResize();
}

draw();
window.onresize = draw;

function setHover(index){
  d3.selectAll('circle')
    .transition()
      .attr('r',              function(d){ return d.index == index ? 10 : 5; })
      .style('stroke',        function(d){ return d.index == index ? 'steelblue' : ''; })
      .style('stroke-width',  function(d){ return d.index == index ? 3 : ''; })

  window.location.hash = index;
  currentHover = index;
}


</script>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">

	<link rel="iframely player" type="text/html" href="http://bl.ocks.org/1wheel/raw/c3a4feeb5bf20a76d716/1894228ce36ef2de7fd920c8fc94a3236b4f9a72" media="(min-width:100) and (min-height:100)" title="Senate Map">
	<link rel="iframely thumbnail" size="800x600" type="image/png" href="https://www.google.com/images/srpr/logo11w.png">

	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0px;
	}
	svg{
	display: inline-block;
	}
	circle{
	fill-opacity: .2;
	stroke-width: 1;
	stroke: black;
	}

	.axis {
	shape-rendering: crispEdges;
	}

	.x.axis line {
	stroke: black;
	}

	.x.axis .minor {
	stroke-opacity: .5;
	}

	.y.axis line, .y.axis path {
	fill: none;
	stroke: black;
	}

	.x.axis line, .x.axis path {
	fill: none;
	stroke: black;
	}
	</style>

	<body>

	<iframe height="300" width="200" src="http://bl.ocks.org/1wheel/raw/c3a4feeb5bf20a76d716/1894228ce36ef2de7fd920c8fc94a3236b4f9a72/#54" marginwidth="0" marginheight="0" scrolling="no"></iframe>
	</body>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.compat.min.js"></script>

	<script>

	function ƒ(field){
	return function(object){
	return typeof(field) === 'undefined' ? object : object[field];
	}
	}

	var broadcastResize = (function(){
	var windowId = '';
	window.addEventListener(
	"message",
	function(event){
	windowId = event.data.windowId;
	resize(); },
	false);

	function resize(){
	window.parent.postMessage({
	method: "resize",
	windowId: windowId,
	height: document.body.clientHeight
	}, '*')
	}

	return resize;
	})();

	//dynamically update href of link
	d3.select('link').attr('href', window.location.href)



	var currentHover = window.location.hash.replace('#', '');
	var numPoints = 100;
	var data1 = d3.range(numPoints).map(function(d, i){ return {value: Math.random()*i, index: i}; })
	var data2 = d3.range(numPoints).map(function(d, i){ return {value: Math.random()ii*i/100/100, index: i}; })

	function draw(){
	d3.select('body').selectAll('*').remove();

	var margin = {top: 20, right: 20, bottom: 25, left: 50};
	var width = window.innerWidth - margin.left - margin.right - 100,
	height = 300 - margin.top - margin.bottom;

	var mobile = width < 500;
	if (!mobile){
	width = width/2;
	}

	var x = d3.scale.linear()
	.domain([0, numPoints])
	.range([0, width])

	var y = d3.scale.linear()
	.domain(d3.extent(data1.concat(data2), ƒ('value')))
	.range([height, 0])

	var xAxis = d3.svg.axis().scale(x)
	var yAxis = d3.svg.axis().scale(y).ticks(4).orient("left");

	var line = d3.svg.line()
	.x(_.compose(x, ƒ('index')))
	.y(_.compose(y, ƒ('value')))

	function addLine(data){
	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	svg.append('line')
	.attr('d', line(data));

	svg.selectAll('circle')
	.data(data).enter()
	.append('circle')
	.attr('r', 5)
	.attr('cx', _.compose(x, ƒ('index')))
	.attr('cy', _.compose(y, ƒ('value')))
	.on('mouseover', _.compose(setHover, ƒ('index')))

	// Add the x-axis.
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	// Add the y-axis.
	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + 0 + ",0)")
	.call(yAxis);


	}
	addLine(data1);
	addLine(data2);

	setHover(currentHover);
	broadcastResize();
	}

	draw();
	window.onresize = draw;

	function setHover(index){
	d3.selectAll('circle')
	.transition()
	.attr('r', function(d){ return d.index == index ? 10 : 5; })
	.style('stroke', function(d){ return d.index == index ? 'steelblue' : ''; })
	.style('stroke-width', function(d){ return d.index == index ? 3 : ''; })

	window.location.hash = index;
	currentHover = index;
	}





	</script>