Old school D3 from simpler times

All examples By author By category About

emeeks

Full window Github gist

Ch. 2, Fig. 23 - D3.js in Action

This is the code for Chapter 2, Figure 23 from D3.js in Action showing a simple scatterplot that uses d3.scale.linear and d3.time.scale to set the X position, Y position, radius and color of each datapoint represented by an SVG circle.

<html>
<head>
  <title>D3 in Action Chapter 2 - Example 11</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
</style>
<body>

<div>
  <svg>
  </svg>
</div>
</body>
  <footer>
    
<script>
d3.json("tweets.json",function(error,data) {dataViz(data.tweets)});

function dataViz(incomingData) {

incomingData.forEach(function (el) {
el.impact = el.favorites.length + el.retweets.length
el.tweetTime = new Date(el.timestamp);
})

var maxImpact = d3.max(incomingData, function(el) {return el.impact});
var startEnd = d3.extent(incomingData, function(el) {return el.tweetTime});
var timeRamp = d3.time.scale().domain(startEnd).range([20,480]);
var yScale = d3.scale.linear().domain([0,maxImpact]).range([0,460]);
var radiusScale = d3.scale.linear().domain([0,maxImpact]).range([1,20]);
var colorScale = d3.scale.linear().domain([0,maxImpact]).range(["white","#990000"]);

d3.select("svg")
.selectAll("circle")
.data(incomingData)
.enter()
.append("circle")
.attr("r", function(d) {return radiusScale(d.impact)})
.attr("cx", function(d,i) {return timeRamp(d.tweetTime)})
.attr("cy", function(d) {return 480 - yScale(d.impact)})
.style("fill", function(d) {return colorScale(d.impact)})
.style("stroke", "black")
.style("stroke-width", "1px")
}

</script>
  </footer>

</html>

xxxxxxxxxx
 
<html>
<head>
  <title>D3 in Action Chapter 2 - Example 11</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
</style>
<body>
​
<div>
  <svg>
  </svg>
</div>
</body>
  <footer>
    
<script>
d3.json("tweets.json",function(error,data) {dataViz(data.tweets)});
​
function dataViz(incomingData) {
​
incomingData.forEach(function (el) {
el.impact = el.favorites.length + el.retweets.length
el.tweetTime = new Date(el.timestamp);
})
​
var maxImpact = d3.max(incomingData, function(el) {return el.impact});
var startEnd = d3.extent(incomingData, function(el) {return el.tweetTime});
var timeRamp = d3.time.scale().domain(startEnd).range([20,480]);
var yScale = d3.scale.linear().domain([0,maxImpact]).range([0,460]);
var radiusScale = d3.scale.linear().domain([0,maxImpact]).range([1,20]);
var colorScale = d3.scale.linear().domain([0,maxImpact]).range(["white","#990000"]);
​
d3.select("svg")
.selectAll("circle")
.data(incomingData)
.enter()
.append("circle")
.attr("r", function(d) {return radiusScale(d.impact)})
.attr("cx", function(d,i) {return timeRamp(d.tweetTime)})
.attr("cy", function(d) {return 480 - yScale(d.impact)})
.style("fill", function(d) {return colorScale(d.impact)})
.style("stroke", "black")
.style("stroke-width", "1px")
}
​
​
</script>
  </footer>
​
</html>
​
    

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js