bmount · January 17, 2013 21:29
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <meta charset="utf-8">
 <style>

 html {
  font-family: Helvetica;
 }

 path {
  fill: #ccc;
  stroke: #fff;
 }

 path:hover {
  fill: #aaa;
 }

 #map {
  position: absolute;
  top: 0px;
  left: 0px;
 }

 #box1 {
  position: absolute;
  top: 20px;
  left: 450px;
  width: 440px;
 }

 #box2 {
  position: absolute;
  top: 270px;
  width: 440px;
  text-align: center;
 }

 .type_a {
  position: absolute;
  top: 34px;
  left: 90px;
  color: rgba(50, 136, 189, 1);
 }

 .type_b {
  position: absolute;
  top: 180px;
  left: 4px;
  color: rgba(213, 62, 79, 1);
 }

 </style>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="http://d3js.org/topojson.v0.min.js"></script>
 <script src="http://d3js.org/queue.v1.min.js"></script>
 <script>

 var width = 440,
    height = 260,
    color1 = 'rgba(213, 62, 79, 1)',
    color2 = 'rgba(50, 136, 189, 1)';

 var proj = d3.geo.albers()
    .scale(500)
    .translate([220, 130])

 var path = d3.geo.path().projection(proj); // albers US

 var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("id", "map");

 box1 = d3.select("body").append("div")
    .attr("id", "box1")

 title = box1.append("h2")
 typeA = box1.append("h5").classed("type_a", true)
 typeB = box1.append("h5").classed("type_b", true)

 chart = box1.append("svg")

 box2 = d3.select("body").append("div")
    .attr("id", "box2")

 title.text("A Survey of America")

 var kinds = [['Beatles people', 'Elvis people'],
 ['run for cover', 'stand up and face the music'],
 ['come in by the door', 'come in by the window'],
 ['hard disk', 'SSD'],
 ['too fucking busy', 'vice versa'],
 ['tapatío', 'sriracha'],
 ['flour tortilla', 'corn tortilla'],
 ['carnitas', 'chorizo']]

 function pretend () {
 var q = Math.floor(Math.random()*100)
 return { 
   kind: kinds[Math.floor(kinds.length*Math.random())],
   q: [q, 100-q] 
 }
 }

 var states = {};

 queue()
    .defer(d3.json, "../4090846/us.json")
    .defer(d3.tsv, "../4090846/us-state-names.tsv")
    .await(got);

 var dbg;

 // <control> k + <a latin letter> + * for γρεεκ
 function arc (θ1, θ2, r) {
  var r = r || 50;
  var arc = d3.svg.arc()
    .startAngle(θ1)
    .endAngle(θ2)
    .outerRadius(r)
    .innerRadius(0);
  return arc;
 }

 function showChart (d, el) {
  title.text(states[d.id].name);
  box2.text(states[d.id].name);
  info = pretend();
  typeA.text(info.kind[0]);
  typeB.text(info.kind[1]);
  q = info.q;
  start = Math.PI/4 - q[0]/100*Math.PI;
  end = Math.PI/4 + q[0]/100*Math.PI;
  chart.selectAll("path").remove()
  chart.selectAll("circle").remove()
  chart.append("circle").attr("r", 50).attr("transform", 'translate(60,60)').style("fill", color1)
  chart.append("path").attr("d", arc(start, end))
    .attr("transform", function (d) { return 'translate(60,60)' }).style("fill", color2)
 }

 function showName (d) {
  box2.text(states[d.id].name)
 }

 function got(error, topology, names) {
  names.map(function (d) { states[d.id] = d; })
  svg.selectAll("path")
      .data(topojson.object(topology, topology.objects.states).geometries)
     .enter()
      .append("path")
      .attr("class", "states")
      .attr("d", path)
      .on("click", function (d) { showChart(d, this) })
      .on("mouseover", showName)
 }


 </script>
	<!DOCTYPE html>

	<meta charset="utf-8">
	<style>

	html {
	font-family: Helvetica;
	}

	path {
	fill: #ccc;
	stroke: #fff;
	}

	path:hover {
	fill: #aaa;
	}

	#map {
	position: absolute;
	top: 0px;
	left: 0px;
	}

	#box1 {
	position: absolute;
	top: 20px;
	left: 450px;
	width: 440px;
	}

	#box2 {
	position: absolute;
	top: 270px;
	width: 440px;
	text-align: center;
	}

	.type_a {
	position: absolute;
	top: 34px;
	left: 90px;
	color: rgba(50, 136, 189, 1);
	}

	.type_b {
	position: absolute;
	top: 180px;
	left: 4px;
	color: rgba(213, 62, 79, 1);
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	<script src="http://d3js.org/queue.v1.min.js"></script>
	<script>

	var width = 440,
	height = 260,
	color1 = 'rgba(213, 62, 79, 1)',
	color2 = 'rgba(50, 136, 189, 1)';

	var proj = d3.geo.albers()
	.scale(500)
	.translate([220, 130])

	var path = d3.geo.path().projection(proj); // albers US

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.attr("id", "map");

	box1 = d3.select("body").append("div")
	.attr("id", "box1")

	title = box1.append("h2")
	typeA = box1.append("h5").classed("type_a", true)
	typeB = box1.append("h5").classed("type_b", true)

	chart = box1.append("svg")

	box2 = d3.select("body").append("div")
	.attr("id", "box2")

	title.text("A Survey of America")

	var kinds = [['Beatles people', 'Elvis people'],
	['run for cover', 'stand up and face the music'],
	['come in by the door', 'come in by the window'],
	['hard disk', 'SSD'],
	['too fucking busy', 'vice versa'],
	['tapatío', 'sriracha'],
	['flour tortilla', 'corn tortilla'],
	['carnitas', 'chorizo']]

	function pretend () {
	var q = Math.floor(Math.random()*100)
	return {
	kind: kinds[Math.floor(kinds.length*Math.random())],
	q: [q, 100-q]
	}
	}

	var states = {};

	queue()
	.defer(d3.json, "../4090846/us.json")
	.defer(d3.tsv, "../4090846/us-state-names.tsv")
	.await(got);

	var dbg;

	// <control> k + <a latin letter> + * for γρεεκ
	function arc (θ1, θ2, r) {
	var r = r \|\| 50;
	var arc = d3.svg.arc()
	.startAngle(θ1)
	.endAngle(θ2)
	.outerRadius(r)
	.innerRadius(0);
	return arc;
	}

	function showChart (d, el) {
	title.text(states[d.id].name);
	box2.text(states[d.id].name);
	info = pretend();
	typeA.text(info.kind[0]);
	typeB.text(info.kind[1]);
	q = info.q;
	start = Math.PI/4 - q[0]/100*Math.PI;
	end = Math.PI/4 + q[0]/100*Math.PI;
	chart.selectAll("path").remove()
	chart.selectAll("circle").remove()
	chart.append("circle").attr("r", 50).attr("transform", 'translate(60,60)').style("fill", color1)
	chart.append("path").attr("d", arc(start, end))
	.attr("transform", function (d) { return 'translate(60,60)' }).style("fill", color2)
	}

	function showName (d) {
	box2.text(states[d.id].name)
	}

	function got(error, topology, names) {
	names.map(function (d) { states[d.id] = d; })
	svg.selectAll("path")
	.data(topojson.object(topology, topology.objects.states).geometries)
	.enter()
	.append("path")
	.attr("class", "states")
	.attr("d", path)
	.on("click", function (d) { showChart(d, this) })
	.on("mouseover", showName)
	}


	</script>
No results found