Skip to content

Instantly share code, notes, and snippets.

@kbourque

kbourque/index.html

Created March 24, 2016 06:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kbourque/e9cdb2ed09a5a17e3b72 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kbourque/e9cdb2ed09a5a17e3b72 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="../d3.min.js"></script>
</head>
<body>
<div id = "first"></div>
<div id = "second"></div>
<div id = "third"></div>
<p id = "scatterplot">Click on this text to update the scatterplot with new data values.</p>
<p id = "barchart">Click on this text to update the barchart with new data values.</p>
<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>
<script type="text/javascript">
// this is bar graph
// randomizing values of bars
//Width and height
var w2 = 600;
var h2 = 250;
var maxValue = 100;
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var xScale2 = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, w2], 0.05);
var yScale2 = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, h2]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w2)
.attr("height", h2);
//Create bars
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale2(i);
})
.attr("y", function(d) {
return h2 - yScale2(d);
})
.attr("width", xScale2.rangeBand())
.attr("height", function(d) {
return yScale2(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
//Create labels
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return xScale2(i) + xScale2.rangeBand() / 2;
})
.attr("y", function(d) {
return h2 - yScale2(d) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
/* THIS IS THE BAR GRAPH USING DIVS */
// adding bars and color bars
// d3.select("body").selectAll("div")
// .data(dataset)
// .enter()
// .append("div")
// .attr("class", "bar")
// .style("height", function(d) {
// var barHeight = d * 5;
// return barHeight + "px";
// })
// .style("background-color", function(d) {
// if (d % 2 == 0) {
// return "#EBBAB9";
// } else {
// return "#B5FFE1";
// }
// });
// manipulating svgs!
// var w = 500;
// var h = 100;
// var svg = d3.select("#second").append("svg")
// .attr("width", w)
// .attr("height", h);
// var dataset = [ 5, 10, 15, 20, 25 ];
// var circles = svg.selectAll("circle")
// .data(dataset)
// .enter()
// .append("circle");
// circles.attr("cx", function(d, i) {
// return (i * 50 + 25);
// })
// .attr("cy", h/2)
// .attr("r", function(d) {
// return d;
// })
// .attr("fill", "yellow")
// .attr("stroke", "orange")
// .attr("stroke-width", function(d) {
// return d/2;
// });
/* this is the scatterplot */
var padding = 30;
var dataset3 = [];
var numDataPoints = 50;
var maxRange = Math.random() * 1000;
for (var i = 0; i < numDataPoints; i++) {
var newNumber1 = Math.floor(Math.random() * maxRange);
var newNumber2 = Math.floor(Math.random() * maxRange);
dataset3.push([newNumber1, newNumber2]);
}
// scaling
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset3, function(d) { return d[0]; })])
.range([padding, w2-padding*2]);
// var yScale = d3.scale.linear()
.domain([0, d3.max(dataset3, function(d) { return d[1]; })])
.range([h2-padding, padding]);
var xAxis = d3.svg.axis();
//Define clipping path
svg.append("clipPath") //Make a new clipPath
.attr("id", "chart-area") //Assign an ID
.append("rect") //Within the clipPath, create a new rect
.attr("x", padding) //Set rect's position and size…
.attr("y", padding)
.attr("width", w2 - padding * 3)
.attr("height", h2 - padding * 2);
//each axis needs to be told on what scale to operate
xAxis.scale(xScale);
// where labels appear
xAxis.orient("bottom")
.ticks(5);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
var svg2 = d3.select("#third")
.append("svg")
.attr("width", w2)
.attr("height", h2);
svg2.append("g")
.attr("id", "circles")
.attr("clip-path", "url(#chart-area)")
.selectAll("circle")
.data(dataset3)
.enter()
.append("circle")
.attr({
cx: function(d) {return xScale(d[0]);},
cy: function(d) {return yScale(d[1]);},
r: 2
});
// creating the axes
//Create X axis
svg2.append("g")
.attr("class", "axis")
.attr("id", "xaxis")
.attr("transform", "translate(0," + (h2 - padding) + ")")
.call(xAxis);
//Create Y axis
svg2.append("g")
.attr("class", "axis")
.attr("id", "yaxis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
/*this was for when we were labeling the circles*/
// svg2.selectAll("text")
// .data(dataset3)
// .enter()
// .append("text")
// .text(function(d) {
// return d[0] + "," + d[1];
// })
// .attr({
// x: function(d) {return xScale(d[0]);},
// y: function(d) {return yScale(d[1]);}
// })
// .attr("font-family", "sans-serif")
// .attr("font-size", "11px")
// .attr("fill", "red");
//On click, update with new data
d3.select("#scatterplot")
.on("click", function() {
//adding new datavalues
var numValues = dataset3.length;
var maxRange = Math.random() * 1000;
dataset3 = [];
for (var i = 0; i < numValues; i++) {
var newNumber1 = Math.floor(Math.random() * maxRange);
var newNumber2 = Math.floor(Math.random() * maxRange);
dataset3.push([newNumber1, newNumber2]);
}
//updating scale domains
xScale.domain([0, d3.max(dataset3, function(d) { return d[0]})]);
yScale.domain([0, d3.max(dataset3, function(d) { return d[1]})]);
svg2.selectAll("circle")
.data(dataset3)
.transition()
.duration(1000)
.each("start", function() { // <-- Executes at start of transition
d3.select(this)
.attr("fill", "magenta")
.attr("r", 3);
})
.attr("cx", function(d) {
return xScale(d[0]);
})
.attr("cy", function(d) {
return yScale(d[1]);
})
.each("end", function() { // <-- Executes at end of transition
d3.select(this)
.transition()
.duration(1000)
.attr("fill", "black")
.attr("r", 2);
});
//Update X axis
svg2.select("#xaxis")
.transition()
.duration(1000)
.call(xAxis);
//Update Y axis
svg2.select("#yaxis")
.transition()
.duration(1000)
.call(yAxis);
});
d3.select("#barchart")
.on("click", function() {
//New values for dataset
var numValues = dataset.length; //Count original length of dataset
dataset = []; //Initialize empty array
for (var i = 0; i < numValues; i++) { //Loop numValues times
var newNumber = Math.floor(Math.random() * maxValue); //New random integer (0-24)
dataset.push(newNumber); //Add new number to array
}
var yScale2 = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, h2]);
//Update all rects
svg.selectAll("rect")
.data(dataset)
.transition()
.delay(function(d, i) {
return i / dataset.length * 100;
})
.duration(1000)
.attr("y", function(d) {
return h2 - yScale2(d);
})
.attr("height", function(d) {
return yScale2(d);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d * 10) + ")";
});
// Update all labels
svg.selectAll("text")
.data(dataset)
.transition()
.delay(function(d, i) {
return i / dataset.length * 100;
})
.duration(1000)
.text(function(d) {
return d;
})
.attr("x", function(d, i) {
return xScale2(i) + xScale2.rangeBand() / 2;
})
.attr("y", function(d) {
return h2 - yScale2(d) + 14;
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment