Ordinal Scale - Days of Week
HTML
<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
CSS
html
{
background:#f9f9f9;
}
body {
font: 10px sans-serif;
}
path
{
stroke: #e0553d;
stroke-width: 2;
fill: none
}
.axis path, .axis line
{
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
svg
{
display:block;
border:1px solid #ebebeb;
background:#fff;
}
JavaScript
var data=[{"Day":"Sunday","EC":1},{"Day":"Monday","EC":4424},{"Day":"Tuesday","EC":3408},{"Day":"Wednesday","EC":3137},{"Day":"Thursday","EC":2239},{"Day":"Friday","EC":3090},{"Day":"Saturday","EC":209}];
var days=['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
// set up a drawing context
var margin = {
top: 40,
right: 40,
bottom: 70,
left: 100
};
var width = 540 - margin.left - margin.right;
var height = 330 - margin.top - margin.bottom;
// d3 init
x = d3.scale.ordinal().domain(days).rangePoints([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom")
.ticks(6)
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10);
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"
);
var valueline = d3.svg.line()
.x(function(d) {
return x(d.Day); })
.y(function(d) {
return y(d.EC);});
// Scale the range of the data
//x.domain(d3.extent(data.map(function(d) { return d.Day; })));
y.domain([0, d3.max(data, function(d) {
return d.EC;
})]);
svg.append("path") // Add the valueline path.
.attr("d", valueline(data));
// Add the black dots
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d) { return x(d.Day) })
//.attr("cx", function(d) { return x(d.Day); })
.attr("cy", function(d) { return y(d.EC); })
// Add the axes
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
...