Skip to content

Instantly share code, notes, and snippets.

@bdon

bdon/index.html

Last active December 11, 2015 14:58
Show Gist options
  • Save bdon/4617865 to your computer and use it in GitHub Desktop.
Save bdon/4617865 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
font-family: "Helvetica";
font-size: 10px;
}
.brush .extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
.domain {
stroke-width: 1;
fill:none;
stroke: black;
}
circle {
fill: steelblue;
}
.scaleExample {
margin-bottom:30px;
}
</style>
6 values, 4 ticks: <div class="scaleExample"></div>
2 values, 4 ticks: <div class="scaleExample"></div>
1 values, 4 ticks: <div class="scaleExample"></div>
0 values, 4 ticks: <div class="scaleExample"></div>
<script type="text/javascript">
data = [
[{x:0,y:1},{x:1,y:2},{x:2,y:3},{x:3,y:4},{x:4,y:5},{x:5,y:6}],
[{x:0,y:1},{x:1,y:2}],
[{x:0,y:1}],
[]
];
function chart(selection) {
selection.each(function(data) {
var svg = d3.select(this).selectAll("svg").data([data]);
var gEnter = svg.enter().append("svg")
.attr('height', 50)
.append("g")
.attr('transform', 'translate(20,30)');
var xSelector = function(d) { return d.x };
var xScale = d3.scale.linear()
.domain([d3.min(data, xSelector), d3.max(data, xSelector)])
.range([0,300]);
var yScale = d3.scale.linear()
.domain([0,10])
.range([5,20]);
var axis = d3.svg.axis().scale(xScale).ticks(4);
gEnter.selectAll('circle')
.data(data)
.enter().append('circle')
.attr('cx', function(d) { return xScale(d.x)})
.attr('cy', function(d) { return -yScale(d.y)})
.attr('r', 3);
gEnter.call(axis);
})
}
d3.selectAll('.scaleExample')
.data(data)
.call(chart);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment