Skip to content

Instantly share code, notes, and snippets.

@justmytwospence

justmytwospence/bar.html

Last active August 29, 2015 14:01
Show Gist options
  • Save justmytwospence/e05cfec11af793e49cf3 to your computer and use it in GitHub Desktop.
Save justmytwospence/e05cfec11af793e49cf3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="d3/d3.js"></script>
<script type="text/javascript" src="d3/lib/colorbrewer/colorbrewer.js"></script>
<style>
rect:active {
fill: 'orange';
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
stroke-width: 1;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
.button {
display: inline-block;
border: 1px solid #005D92;
background: #3395CD;
background: -webkit-gradient(linear, left top, left bottom, from(#85C1E8), to(#3395CD));
background: -webkit-linear-gradient(top, #85C1E8, #3395CD);
background: -moz-linear-gradient(top, #85C1E8, #3395CD);
background: -ms-linear-gradient(top, #85C1E8, #3395CD);
background: -o-linear-gradient(top, #85C1E8, #3395CD);
background-image: -ms-linear-gradient(top, #85C1E8 0%, #3395CD 100%);
padding: 10px 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
text-shadow: #005D92 0 -1px 0;
color: #FFFFFF;
font-size: 14px;
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
font-weight: bold;
text-decoration: none;
vertical-align: middle;
margin: 4px;
}
.button:hover {
border: 1px solid #005D92;
text-shadow: #005D92 0 -1px 0;
background: #007CC2;
background: -webkit-gradient(linear, left top, left bottom, from(#6CB5E4), to(#007CC2));
background: -webkit-linear-gradient(top, #6CB5E4, #007CC2);
background: -moz-linear-gradient(top, #6CB5E4, #007CC2);
background: -ms-linear-gradient(top, #6CB5E4, #007CC2);
background: -o-linear-gradient(top, #6CB5E4, #007CC2);
background-image: -ms-linear-gradient(top, #6CB5E4 0%, #007CC2 100%);
color: #FFFFFF;
text-decoration: none;
}
.button:active {
text-shadow: #005D92 0 -1px 0;
border: 1px solid #005D92;
background: #6CB5E4;
background: -webkit-gradient(linear, left top, left bottom, from(#007CC2), to(#007CC2));
background: -webkit-linear-gradient(top, #007CC2, #6CB5E4);
background: -moz-linear-gradient(top, #007CC2, #6CB5E4);
background: -ms-linear-gradient(top, #007CC2, #6CB5E4);
background: -o-linear-gradient(top, #007CC2, #6CB5E4);
background-image: -ms-linear-gradient(top, #007CC2 0%, #6CB5E4 100%);
color: #FFFFFF;
}
</style>
</head>
<body>
<div class='buttons'>
<div class='button' id='add'>Add</div>
<div class='button' id='remove'>Remove</div>
</div>
<script type="text/javascript">
var dataset = [
{ key: 0, value: 5 },
{ key: 1, value: 10 },
{ 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 key = function(d) {
return d.key
}
var value = function(d) {
return d.value
}
var duration = 400
var margin = {top: 20, right: 10, bottom: 20, left: 30};
var w = 960 - margin.left - margin.right,
h = 500 - margin.top - margin.bottom;
var xScale = d3.scale.ordinal()
.domain(dataset.map(function(d) {return d.key; }))
.rangeRoundBands([0, w], 0.1);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) {
return d.value
})])
.range([h, 0]);
var heightScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) {
return d.value
})])
.range([0, h])
var colorScale = d3.scale.linear()
.domain([d3.min(dataset, value), d3.max(dataset, value)])
.range(colorbrewer.GnBu[3])
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
var yAxis = d3.svg.axis()
.scale(yScale)
.orient('left')
var svg = d3.select("body").append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
var columns = svg.selectAll('g.column')
.data(dataset, key)
.enter()
.append('g')
.classed('column', true)
.on('mouseover', function (d) {
var xPosition = parseFloat(d3.select(this).select('rect').attr("x")) + xScale.rangeBand() / 2;
var yPosition = parseFloat(d3.select(this).select('rect.imaginary').attr('height')) + 14;
d3.select(this).append("text")
.attr("id", "tooltip")
.attr("x", xPosition)
.attr("y", yPosition)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("font-weight", "bold")
.attr("fill", "black")
.text(d.value);
})
.on('mouseout', function (d) {
d3.select(this).select('.real')
.transition()
.duration(duration)
.attr('fill', function(d) { return colorScale(d.value); })
d3.select("#tooltip").remove();
})
.on("click", function() {
sortBars();
});
columns.append('rect')
.classed('imaginary', true)
.attr({
'x': function(d) { return xScale(d.key); },
'width': xScale.rangeBand(),
'y': 0,
'height': function(d) { return h - heightScale(d.value); },
'opacity': 0
})
columns.append('rect')
.classed('real', true)
.attr({
'x': function(d) { return xScale(d.key); },
'width': xScale.rangeBand(),
'y': function(d) { return yScale(d.value); },
'height': function(d) { return heightScale(d.value); },
'fill': function(d) { return colorScale(d.value); }
})
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + h + ')')
.call(xAxis)
svg.append('g')
.attr('class', 'y axis')
.call(yAxis)
d3.selectAll('div')
.on("click", function() {
var id = d3.select(this).attr('id');
if (id == 'add') {
var maxValue = Math.random() * 100,
lastKeyValue = dataset[dataset.length - 1].key,
newNumber = Math.floor(Math.random() * maxValue);
dataset.push({'key': lastKeyValue + 1,
'value': newNumber});
} else if (id == 'remove') {
dataset.shift()
}
console.log(dataset)
xScale.domain(dataset.map(function (d) {return d.key; }))
yScale.domain([0, d3.max(dataset, value)])
heightScale.domain([0, d3.max(dataset, value)])
colorScale.domain([d3.min(dataset, value), d3.max(dataset, value)])
columns = svg.selectAll('g.column')
.data(dataset, key)
columns.exit()
.selectAll('rect.imaginary')
.transition()
.duration(duration)
.attr('x', -w)
.remove()
columns.exit()
.selectAll('rect.real')
.transition()
.duration(duration)
.attr('x', -w)
.remove();
var new_columns = columns.enter()
.append('g')
.classed('column', true)
.on('mouseover', function (d) {
var xPosition = parseFloat(d3.select(this).select('rect').attr("x")) + xScale.rangeBand() / 2;
var yPosition = parseFloat(d3.select(this).select('rect.imaginary').attr('height')) + 14;
d3.select(this).append("text")
.attr("id", "tooltip")
.attr("x", xPosition)
.attr("y", yPosition)
.attr("text-anchor", "middle")
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("font-weight", "bold")
.attr("fill", "black")
.text(d.value);
})
.on('mouseout', function () {
d3.select(this).select('.real')
.transition()
.duration(duration)
.attr('fill', function(d) { return colorScale(d.value); })
d3.select("#tooltip").remove();
})
new_columns.append('rect')
.classed('imaginary', true)
.attr({
'x': w*2,
'width': xScale.rangeBand(),
'y': 0,
'height': function(d) { return h - heightScale(d.value); },
'opacity': 0
})
new_columns.append('rect')
.classed('real', true)
.attr({
'x': w*2,
'width': xScale.rangeBand(),
'y': function(d) { return yScale(d.value); },
'height': function(d) { return heightScale(d.value); },
'fill': function(d) { return colorScale(d.value); }
})
columns.selectAll('rect.imaginary')
.classed('imaginary', true)
.attr({
'x': function(d) { return xScale(d.key); },
'width': xScale.rangeBand(),
'y': 0,
'height': function(d) { return h - heightScale(d.value); },
'opacity': 0
})
columns.selectAll('rect.real')
.transition()
.duration(duration)
.attr({
'x': function(d) { return xScale(d.key); },
'width': xScale.rangeBand(),
'y': function(d) { return yScale(d.value); },
'height': function(d) { return heightScale(d.value); },
'fill': function(d) { return colorScale(d.value); }
})
svg.select('.x.axis')
.transition()
.duration(duration)
.call(xAxis)
svg.select('.y.axis')
.transition()
.duration(duration)
.call(yAxis)
});
</script>
</body>
</html>
Raw
scatter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="d3/d3.js"></script>
<style>
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<p>Button</p>
<script type="text/javascript">
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.floor(Math.random() * xRange);
var newNumber2 = Math.floor(Math.random() * yRange);
dataset.push([newNumber1, newNumber2]);
}
var w = 1000;
var h = 500;
var barpad = 1;
var padding = 40;
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.sqrt()
.domain([0, d3.max(dataset, function(d) {
return d[1]
})])
.range([1, 10])
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom')
.ticks(5)
var yAxis = d3.svg.axis()
.scale(yScale)
.orient('left')
.ticks(10)
var svg = d3.select('body')
.append('svg')
.attr('height', h)
.attr('width', w)
svg.append('g')
.attr('class', 'x axis')
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis)
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + padding + ', 0)')
.call(yAxis)
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", 0)
.attr("width", w)
.attr("height", h - padding);
var circles = svg.append('g')
.attr('id', 'circles')
.attr('clip-path', 'url(#chart-area)')
.selectAll('circle')
.data(dataset)
.enter()
.append('circle')
circles
.attr({
'cx': function(d, i) { return xScale(d[0]); },
'cy': function(d) { return yScale(d[1]); },
'r': function(d) { return rScale(d[1]); },
'fill': "#6699ff",
'opacity': .5
})
d3.select('p')
.on('click', function() {
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.floor(Math.random() * xRange);
var newNumber2 = Math.floor(Math.random() * yRange);
dataset.push([newNumber1, newNumber2]);
}
xScale.domain([0, d3.max(dataset, function(d) { return d[0]; })])
yScale.domain([0, d3.max(dataset, function(d) { return d[1]; })])
rScale.domain([0, d3.max(dataset, function(d) { return d[1]; })])
//Update x-axis
svg.select(".x.axis")
.transition()
.duration(1000)
.call(xAxis)
//Update y-axis
svg.select(".y.axis")
.transition()
.duration(1000)
.call(yAxis)
svg.selectAll('circle')
.data(dataset)
.transition()
.duration(1000)
.each('start', function () {
d3.select(this)
.attr('fill', 'red')
.attr('r', 7)
})
.attr({
'cx': function(d, i) { return xScale(d[0]); },
'cy': function(d) { return yScale(d[1]); },
'r': function(d) { return rScale(d[1]); }
})
.transition()
.duration(1000)
.attr("fill", "black")
.attr("r", 2);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment