<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
#chart {
width: 100%;
height: 100%;
position: absolute;
}
</style>
<body>
<svg id="chart"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"> </script>
<script>
// Define margins
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = parseInt(d3.select("#chart").style("width")) - margin.left - margin.right,
height = parseInt(d3.select("#chart").style("height")) - margin.top - margin.bottom;
// Define date parser
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
// Define scales
var xScale = d3.time.scale().range([0, width]);
var yScale = d3.scale.linear().range([height, 0]);
var color = d3.scale.ordinal()
.range(["#8c510a", "#dfc27d", "#35978f"]);
// Define axes
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left");
// Define lines
var line = d3.svg.line().interpolate("basis")
.x(function(d) { return xScale(d["date"]); })
.y(function(d) { return yScale(d["concentration"]); });
// Define svg canvas
var svg = d3.select("#chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Read in data
d3.csv("giniLine.csv", function(error, data){
if (error) throw error;
// Set the color domain equal to the three product categories
var productCategories = d3.keys(data[0]).filter(function(key){return (key !== "Order Month") && (key !== "metric")})
color.domain(productCategories);
// console.log(JSON.stringify(data, null, 2)) // to view the structure
// Format the data field
data.forEach(function(d){
d["Order Month"] = parseDate(d["Order Month"])
});
// Filter the data to only include a single metric
var subset = data.filter(function(el) {return el.metric === "Quantity" });
// console.log(JSON.stringify(subset, null, 2))
// Reformat data to make it more copasetic for d3
// data = An array of objects
// concentrations = An array of three objects, each of which contains an array of objects
var concentrations = productCategories.map(function(category){
return {category: category, datapoints: subset.map(function(d){
return {date: d["Order Month"], concentration: +d[category]}
})}
})
// console.log(JSON.stringify(concentrations, null, 2)) // to view the structure
// Set the domain of the axes
xScale.domain(d3.extent(subset, function(d) {return d["Order Month"]; }));
yScale.domain([0.25, 0.5]);
// Place the axes on the chart
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("y", 6)
.attr("dy", ".71em")
.attr("dx", ".71em")
.style("text-anchor", "beginning")
.text("Product Concentration");
var products = svg.selectAll(".category")
.data(concentrations)
.enter().append("g")
.attr("class", "category");
products.append("path")
.attr("class", "line")
.attr("d", function(d) {return line(d.datapoints); })
.style("stroke", function(d) {return color(d.category); });
// console.log(JSON.stringify(d3.values(concentrations), null, 2)) // to view the structure
console.log(d3.values(concentrations)); // to view the structure
console.log(concentrations);
// console.log(concentrations.map(function()))
});
// Define responsive behavior
function resize() {
var width = parseInt(d3.select("#chart").style("width")) - margin.left - margin.right,
height = parseInt(d3.select("#chart").style("height")) - margin.top - margin.bottom;
// Update the range of the scale with new width/height
xScale.range([0, width]);
yScale.range([height, 0]);
// Update the axis and text with the new scale
svg.select('.x.axis')
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.select('.y.axis')
.call(yAxis);
// Force D3 to recalculate and update the line
svg.selectAll('.line')
.attr("d", function(d) { return line(d.datapoints); });
// Update the tick marks
xAxis.ticks(Math.max(width/75, 2));
yAxis.ticks(Math.max(height/50, 2));
};
// Call the resize function whenever a resize event occurs
d3.select(window).on('resize', resize);
// Call the resize function
resize();
</script>
</body>