Skip to content
Snippets Groups Projects
Commit 8ead043d authored by msaxena2's avatar msaxena2
Browse files

some transitions working

parent 5255b9e3
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
grapher.js
+ 19
− 15
View file @ 8ead043d
......@@ -23,21 +23,22 @@ function draw_chart(labels, values){
//svg lines drawn on graph for reference
var line = chart.selectAll("line")
.data(x.ticks(d3.max(values)));
//enter
line.enter().append("line")
//update selection
line
.transition()
.duration(1000)
.attr("x1", function(d) { return x(d) + margins.left; })
.attr("x2", function(d) { return x(d) + margins.left; })
.attr("y1", margins.top)
.attr("y2", height-margins.bottom);
//update section
line
//enter section
line.enter().append("line")
.transition()
.duration(1000)
.attr("x1", function(d) { return x(d) + margins.left; })
.attr("x2", function(d) { return x(d) + margins.left; })
.attr("y1", margins.top)
.attr("y2", height-margins.bottom);
//enter section
//exit section
line.exit().remove();
......@@ -74,11 +75,13 @@ function draw_chart(labels, values){
//enter
rect.enter().append("rect")
.attr("x", margins.left)
.attr("y", y)
.attr("y", height-margins.bottom)
.attr("width", x)
.attr("height", y.rangeBand());
//update
rect
rect.transition()
.duration(1000)
.ease('bounce')
.attr("x", margins.left)
.attr("y", y)
.attr("width", x)
......@@ -114,7 +117,7 @@ function draw_chart(labels, values){
var label = chart.selectAll(".label")
.data(labels);
//enter selection
label.enter().append("text")
.attr('class', 'label')
.attr("x", 100)
......@@ -123,7 +126,7 @@ function draw_chart(labels, values){
.attr("dy", ".36em")
.attr("text-anchor", "end")
.text(String);
//update selection
label
.attr("x", 100)
.attr("y", function(d){ return ylabel(d)+ ylabel.rangeBand()/2} )
......@@ -131,11 +134,12 @@ function draw_chart(labels, values){
.attr("dy", ".36em")
.attr("text-anchor", "end")
.text(String);
label.exit().remove();
//exit selection
label.exit().remove();
}
draw_chart(['John', 'Tim', 'Sam', 'Greg', 'Charles', 'jit'], [8, 4, 9, 12, 13, 13]);
draw_chart(['John', 'Tim', 'Sam', 'Greg', 'Charles', 'Gopal'], [8, 4, 9, 12, 13, 14]);
d3.select("#transition")
.on("click", function() {
draw_chart(['John', 'Tim', 'Sam'], [8, 4, 9]);
draw_chart(['John', 'Tim', 'Sam', 'Greg', 'Charles', 'Gopal', 'Rajan', 'Kevin', 'Ganguly'], [8, 4, 9, 12, 11, 23, 21, 5, 32]);
});
scratch.js 0 → 100644
+ 191
− 0
View file @ 8ead043d
//Width and height
var w = 600;
var h = 250;
var dataset = [ { key: 0, value: 5 }, //dataset is now an array of objects.
{ key: 1, value: 10 }, //Each object has a 'key' and a 'value'.
{ key: 2, value: 13 },
{ key: 3, value: 19 },
{ key: 4, value: 21 },
{ key: 5, value: 25 },
{ key: 6, value: 22 },
{ key: 7, value: 18 },
{ key: 8, value: 15 },
{ key: 9, value: 13 },
{ key: 10, value: 11 },
{ key: 11, value: 12 },
{ key: 12, value: 15 },
{ key: 13, value: 20 },
{ key: 14, value: 18 },
{ key: 15, value: 17 },
{ key: 16, value: 16 },
{ key: 17, value: 18 },
{ key: 18, value: 23 },
{ key: 19, value: 25 } ];
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, w], 0.05);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d.value; })])
.range([0, h]);
//Define key function, to be used when binding data
var key = function(d) {
return d.key;
};
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Create bars
svg.selectAll("rect")
.data(dataset, key)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d.value);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return yScale(d.value);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d.value * 10) + ")";
});
//Create labels
svg.selectAll("text")
.data(dataset, key)
.enter()
.append("text")
.text(function(d) {
return d.value;
})
.attr("text-anchor", "middle")
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / 2;
})
.attr("y", function(d) {
return h - yScale(d.value) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
//On click, update with new data
d3.selectAll("p")
.on("click", function() {
//See which p was clicked
var paragraphID = d3.select(this).attr("id");
//Decide what to do next
if (paragraphID == "add") {
//Add a data value
var maxValue = 25;
var newNumber = Math.floor(Math.random() * maxValue);
var lastKeyValue = dataset[dataset.length - 1].key;
console.log(lastKeyValue);
dataset.push({
key: lastKeyValue + 1,
value: newNumber
});
} else {
//Remove a value
dataset.shift(); //Remove one value from dataset
}
//Update scale domains
xScale.domain(d3.range(dataset.length));
yScale.domain([0, d3.max(dataset, function(d) { return d.value; })]);
//Select…
var bars = svg.selectAll("rect")
.data(dataset, key);
//Enter…
bars.enter()
.append("rect")
.attr("x", w)
.attr("y", function(d) {
return h - yScale(d.value);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return yScale(d.value);
})
.attr("fill", function(d) {
return "rgb(0, 0, " + (d.value * 10) + ")";
});
//Update…
bars.transition()
.duration(500)
.attr("x", function(d, i) {
return xScale(i);
})
.attr("y", function(d) {
return h - yScale(d.value);
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return yScale(d.value);
});
//Exit…
bars.exit()
.transition()
.duration(500)
.attr("x", -xScale.rangeBand())
.remove();
//Update all labels
//Select…
var labels = svg.selectAll("text")
.data(dataset, key);
//Enter…
labels.enter()
.append("text")
.text(function(d) {
return d.value;
})
.attr("text-anchor", "middle")
.attr("x", w)
.attr("y", function(d) {
return h - yScale(d.value) + 14;
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "white");
//Update…
labels.transition()
.duration(500)
.attr("x", function(d, i) {
return xScale(i) + xScale.rangeBand() / 2;
});
//Exit…
labels.exit()
.transition()
.duration(500)
.attr("x", -xScale.rangeBand())
.remove();
});
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment