Skip to content

Instantly share code, notes, and snippets.

@natemiller

natemiller/error.data.json Secret

Last active December 14, 2015 13:38
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save natemiller/df4b96809580fe7d00a6 to your computer and use it in GitHub Desktop.
Save natemiller/df4b96809580fe7d00a6 to your computer and use it in GitHub Desktop.
Download ZIP
Data Transitions
Raw
error.data.json
[
{
"name":"site1",
"temp": 30,
"pH": 7.2,
"x": 10,
"y": 50,
"s": 6
},
{
"name":"site1",
"temp": 25,
"pH": 8.0,
"x": 10,
"y": 35,
"s": 4
},
{
"name":"site1",
"temp": 25,
"pH": 7.2,
"x": 15,
"y": 70,
"s": 10
},
{
"name":"site2",
"temp": 30,
"pH": 7.2,
"x": 20,
"y": 20,
"s": 8
},
{
"name":"site2",
"temp": 30,
"pH": 8.0,
"x": 25,
"y": 55,
"s": 10
},
{
"name":"site2",
"temp": 25,
"pH": 8.0,
"x": 30,
"y": 30,
"s": 2
},
{
"name":"site3",
"temp": 25,
"pH": 7.6,
"x": 50,
"y": 100,
"s": 14
}
]
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
path {
stroke-width: 1.5px;
stroke: darkgrey;
stroke-dasharray:"3, 3";
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="option">
<input name="updateButton" type="button" value="X-axis: Temp, Fill: pH"/>
</div>
<script>
var margin = {top: 10, right: 10, bottom: 100, left: 40},
size = 5,
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
x = d3.scale.linear().range([0, width]),
y = d3.scale.linear().range([height, 0]),
xAxis = d3.svg.axis().scale(x).orient("bottom"),
yAxis = d3.svg.axis().scale(y).orient("left");
var color = d3.scale.category10();
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
d3.json("error.data.json", function(error,data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key == "name"; }));
x.domain([d3.min(data.map(function(d) {return d.pH}))-0.2,d3.max(data.map(function(d) { return d.pH; }))+0.2]);
y.domain([0,d3.max(data.map(function(d) { return (d.y); }))]);
var points = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//JOIN and ENTER
points.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", function(d) {return x(d.pH);})
.attr("cy", function(d){return y(d.y);})
.attr("r",8)
.attr("fill",function(d) {return color(d.name);})
.style("stroke", "darkgrey");
svg.append("g")
.attr("class","x axis")
.attr("transform", "translate("+ margin.left +"," + (height + margin.top) + ")")
.call(xAxis);
svg.append("g")
.attr("class","y axis")
.attr("transform","translate("+ margin.left +","+ margin.top +" )")
.call(yAxis);
//JOIN AND ENTER LEGEND
var legend = svg.selectAll('rect')
.data(data)
.enter().append("rect")
.attr('x', width-50)
.attr('y', function(d,i) {return i*20;})
.attr('width', 10)
.attr('height', 10)
.style('fill', function(d) {
return color(d.name);
});
//Append Legend Text
legend.append("text")
.attr('x', 100)
.attr('y', 100)
.text(function(d) { return d.name; })
.attr("font-family","sans-serif")
.attr("font-size","11px");
//ADD TRANSITION
d3.select("div")
.on("click", function() {
x.domain([d3.min(data.map(function(d) {return d.temp}))-1,d3.max(data.map(function(d) { return d.temp; }))+1]);
y.domain([0,d3.max(data.map(function(d) { return (d.y); }))]);
//DATA JOIN
var tempPlot = svg.selectAll("circle")
.data(data);
//ENTER new data
tempPlot.enter()
.append("circle")
.attr("cx", function(d){return x(d.temp);})
.attr("cy", function(d){return y(d.y);})
.attr("r",8)
.attr("fill",function(d) {return color(d.pH);})
.style("stroke", "darkgrey");
//TRANSITION new data
tempPlot.transition()
.duration(1000)
.attr("cx",function(d){return x(d.temp);})
.attr("cy", function(d){return y(d.y);})
.attr("r",8)
.attr("fill",function(d) {return color(d.pH);})
.style("stroke", "darkgrey");
//EXIT
tempPlot.exit()
.transition()
.duration(1000)
.remove();
var legend2 = svg.selectAll('rect')
.data(data);
//ENTER LEGEND
legend2.enter()
.append("rect")
.attr('x', width-50)
.attr('y', function(d,i) {return i*20;})
.attr('width', 10)
.attr('height', 10)
.style('fill', function(d) {
return color(d.pH);
});
//TRANSITION LEGEND
legend2.transition()
.duration(1000)
.attr('x', width-50)
.attr('y', function(d,i) {return i*20;})
.attr('width', 10)
.attr('height', 10)
.style('fill', function(d) {
return color(d.pH);
});
//EXIT LEGEND
legend2.exit()
.transition()
.duration(1000)
.remove();
//UPDATE AXES
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis);
svg.select(".y.axis")
.transition()
.duration(1000)
.call(yAxis);
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment