test

A treemap of counties by state. Counties are colored green if they're growing and red if they're shrinking.

forked from emeeks's block: test

<head>
  <title>County Treemap</title>
</head>
<meta charset="utf-8">
<style>

svg {
  height: 500px;
  width: 1000px;
}

</style>
<body>
<div id="viz">
<svg></svg>
</div>
</body>

d3.select("svg")
  .append("circle")
  .attr("r", 25)
  .attr("cx", 50)
  .attr("cy", 50)
  .style("fill", "red")
  
  var smallArray = d3.range(10);
  console.log(smallArray);
  d3.select("svg")
  	.selectAll("circle.new")
  	.data(smallArray)
  	.enter()
  .append("circle")
  .attr("r", 5)
  .attr("cy", 40)
  .attr("cx", function (d) {return d * 50})
  .transition()
  .duration(8001)
  .attr("cy", function (d) {return d * 50})
  
  d3.select("svg").selectAll("circle")
  .on("mouseover", function () {
    d3.select(this)
      .transition()
      .duration(1000).style("fill", "yellow") 
  })
  .on("mouseout", function () {
    d3.select(this)
      .transition()
    	.delay(1000)
      .style("fill", "red")
  		.transition()
  		.duration(1000)
  		.attr("r", 100)})
  
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js