Skip to content

Instantly share code, notes, and snippets.

@jrodgz
Last active February 10, 2016 06:33
Show Gist options
  • Save jrodgz/e56fea12ab3a1f831063 to your computer and use it in GitHub Desktop.
Save jrodgz/e56fea12ab3a1f831063 to your computer and use it in GitHub Desktop.
JDR VI3 for CS725@ODU

Joel D. Rodriguez-Ortiz

3 New Things Learned

  • During this week's tutorials I learned how to make scatterplots.
  • During this week's tutorials I learned how to label and position data points.
  • During this week's tutorials I learned how to use scales in D3.
  • During this week's tutorials I learned how to create axes in D3.
  • During this week's tutorials I learned how to manipulate page elements using transitions in D3.

This week in general, helped me realize how D3 iterates internally over the elements it creates. This was a doubt I needed to clarify last week. It also helped me realize general D3 semantics and selection patterns. I think I'm starting to "get the flow" of D3.

Important Note

I'm having a hard time getting the bl.ocks.org preview to render the page correctly. The page renders correctly when observed outside the preview using the raw address. I think this might be related to separating the tutorials into separate JavaScript files for organization, but I haven't confirmed this.

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
.axis path,
.axis line
{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text
{
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body style="text-align: center;">
<div style="padding: 10px;">
<h3>Initial Scatterplot Example</h3>
<script type="text/javascript" src="scatterplot.js"></script>
</div>
<div style="padding: 10px;">
<h3>Final Scatterplot Example</h3>
<script type="text/javascript" src="scatterplot_final.js"></script>
</div>
<div style="padding: 10px;">
<h3>Fun Transitions!</h3>
<script type="text/javascript" src="transitions.js"></script>
</div>
</body>
Just want to get rid of LICENSE warning in `bl.ocks.org`.
// width and height
var w = 500;
var h = 300;
var padding = 20;
var dataset = [
[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
[410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
[600, 150]
];
// scale functions
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([2, 5]);
// SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", function(d) {
return rScale(d[1]);
});
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d[0] + "," + d[1];
})
.attr("x", function(d) {
return xScale(d[0]);
})
.attr("y", function(d) {
return yScale(d[1]);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");
// width and height
var w = 500;
var h = 300;
var padding = 30;
// dynamic random dataset
var dataset = [];
var numDataPoints = 50;
var xRange = Math.random() * 1000;
var yRange = Math.random() * 1000;
for (var i = 0; i < numDataPoints; i++)
{
var newNumber1 = Math.round(Math.random() * xRange);
var newNumber2 = Math.round(Math.random() * yRange);
dataset.push([newNumber1, newNumber2]);
}
// create scales
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([2, 5]);
// define x axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
// define y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
// create svg element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// create circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.attr("r", function(d) {
return rScale(d[1]);
});
// create x axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
// create y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
// width and height
var w = 500;
var h = 300;
var container1 = d3.select("body").append("div");
var translateButton = container1.append("input")
.attr("type", "submit")
.attr("value", "Translate!")
.attr("margin", "5px");
var growButton = container1.append("input")
.attr("type", "submit")
.attr("value", "Grow!")
.attr("margin", "5px");
var colorButton = container1.append("input")
.attr("type", "submit")
.attr("value", "Color!")
.attr("margin", "5px");
var combinedButton = container1.append("input")
.attr("type", "submit")
.attr("value", "Combined!")
.attr("margin", "5px");
var container2 = d3.select("body").append("div");
var svg = container2.append("svg")
.attr("width", w)
.attr("height", h);
var mySquare = svg.append("rect")
.attr("x", 60)
.attr("y", 60)
.attr("width", 60)
.attr("height", 60)
.style("fill", "blue");
var aCircle = svg.append("circle")
.attr("cx", 60)
.attr("cy", 60)
.attr("r", 80)
.attr("fill", "yellow")
.attr("fill-opacity", 0);
var x = 60;
translateButton.on("click", function() {
x = (x == 60) ? 320 : 60;
mySquare.transition()
.attr("x", x)
.duration(1000)
.delay(100);
// clamp circle to square
aCircle.transition()
.attr("x", x)
.duration(1000)
.delay(100);
});
var squareWidth = 60;
growButton.on("click", function() {
squareWidth = (squareWidth == 60) ? 120 : 60;
mySquare.transition().attr("width", squareWidth); // makes it bigger
});
var color = "blue";
colorButton.on("click", function() {
color = (color == "blue") ? "green" : "blue";
mySquare.transition().style("fill", color);
});
var y = 60;
combinedButton.on("click", function() {
x = (x == 60) ? 320 : 60;
y = (y == 60) ? h - 60 : 60;
color = (color == "blue") ? "green" : "blue";
mySquare.transition()
.attr("x", x)
.style("fill", color)
.ease("linear")
.duration(250)
.each("end", function() {
d3.select(this).transition()
.attr("y", y)
.duration(350)
.ease("elastic");
});
aCircle.transition()
.ease("linear")
.duration(500)
.attr("cx", x)
.attr("fill", "red")
.attr("fill-opacity", 0.75)
.attr("r", 200)
.each("end", function() {
d3.select(this)
// restore circle to pre-blown up state
.attr("cy", y)
.attr("fill", "yellow")
.attr("fill-opacity", 0)
.attr("r", 80);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment