xxxxxxxxxx
<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>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
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