Playground gist for bl.ocks.org
-
-
Save mayo/c86889851c571792b755 to your computer and use it in GitHub Desktop.
Playground gist for bl.ocks.org
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| date | value | |
|---|---|---|
| 01/5/2014 | 1 | |
| 02/5/2014 | 2 | |
| 05/5/2014 | 1 | |
| 06/5/2014 | 2 | |
| 08/5/2014 | 2 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <title>Scale test</title> | |
| <style> | |
| body { | |
| font-family: 'helvetica neue'; | |
| font-size: .8em; | |
| } | |
| .line { | |
| fill: none; | |
| stroke: black; | |
| stroke-width: 1px; | |
| } | |
| .axis line, | |
| .axis path { | |
| stroke-width: 1px; | |
| stroke: black; | |
| fill: none; | |
| } | |
| .dots circle { | |
| fill: #555; | |
| fill-opacity: .5; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script> | |
| var margin = {top: 20, right: 50, bottom: 50, left: 20}, | |
| width = 960 - margin.left - margin.right, | |
| height = 502 - margin.top - margin.bottom; | |
| var parseDate = d3.time.format("%d/%m/%Y").parse; | |
| var dayCount = 0; | |
| var x = d3.time.scale() | |
| .range([0, width - margin.right]); | |
| var y = d3.scale.linear() | |
| .range([0, height - margin.left]); | |
| var dateFormat = d3.time.format('%a %b %d'); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("below"); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("right"); | |
| var line = d3.svg.line() | |
| .x(function(d) { return x(d.date); }) | |
| .y(function(d) { return y(d.value); }); | |
| var svg = d3.select("#chart").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom); | |
| d3.csv("data.csv", type, function(error, data) { | |
| x.domain(d3.extent(data, function(d) { return d.date; })); | |
| y.domain(d3.extent(data, function(d) { return parseFloat(d.value); })) | |
| svg.append("path") | |
| .datum(data) | |
| .attr("class", "line") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")") | |
| .attr("d", line); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(" + margin.left + "," + (margin.top + height + 20) + ")") | |
| .call(xAxis) | |
| .selectAll("text") | |
| .attr("dy", ".35em"); | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .attr("transform", "translate(" + (width + 20) + "," + margin.top + ")") | |
| .call(yAxis) | |
| .selectAll("text") | |
| .attr("dy", ".35em"); | |
| svg.append("g") | |
| .attr("class", "dots") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")") | |
| .selectAll("circle") | |
| .data(data) | |
| .enter() | |
| .append("circle") | |
| .attr("r", 5) | |
| .attr("cx", function(d) { return x(d.date); }) | |
| .attr("cy", function(d) { return y(d.value); });; | |
| }); | |
| function type(d) { | |
| d.date = parseDate(d.date); | |
| return d | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| weekday = (function() { | |
| cache = {}; | |
| // Returns the weekday number for the given date relative to January 1, 1970. | |
| function weekday(date) { | |
| c = cache[date]; | |
| if (c != null) { | |
| return c; | |
| } | |
| var weekdays = weekdayOfYear(date), | |
| year = date.getFullYear(); | |
| while (--year >= 1970) weekdays += weekdaysInYear(year); | |
| cache[date] = weekdays; | |
| //if we're looking up a weekend day, make sure we cache the correct weekday | |
| if (cache[weekdays] == null) { | |
| newDate = new Date(date); | |
| offset = newDate.getDay() == 0 ? -2 : newDate.getDay() == 6 ? -1 : 0; | |
| if (offset > 0) { | |
| date.setDate(date.getDate() + offset); | |
| //cache the new date as well | |
| cache[newDate] = lookupWeekdays; | |
| } | |
| cache[lookupWeekdays] = newDate; | |
| } | |
| return weekdays; | |
| } | |
| //multiplier to go from weekday number to miliseconds (javascript timestamp) | |
| weekday.factor = 864e5; | |
| // Returns the date for the specified weekday number relative to January 1, 1970. | |
| weekday.invert = function(weekdays) { | |
| c = cache[weekdays]; | |
| if (c != null) { | |
| return c; | |
| } | |
| var lookupWeekdays = weekdays; | |
| var year = 1970, | |
| yearWeekdays; | |
| // Compute the year. | |
| while ((yearWeekdays = weekdaysInYear(year)) <= weekdays) { | |
| ++year; | |
| weekdays -= yearWeekdays; | |
| } | |
| // Compute the date from the remaining weekdays. | |
| var days = weekdays % 5, | |
| day0 = ((new Date(year, 0, 1)).getDay() + 6) % 7; | |
| if (day0 + days > 4) days += 2; | |
| date = new Date(year, 0, (weekdays / 5 | 0) * 7 + days + 1); | |
| cache[date] = lookupWeekdays; | |
| cache[lookupWeekdays] = date; | |
| return date; | |
| }; | |
| // Returns the number of weekdays in the specified year. | |
| function weekdaysInYear(year) { | |
| return weekdayOfYear(new Date(year, 11, 31)) + 1; | |
| } | |
| // Returns the weekday number for the given date relative to the start of the year. | |
| function weekdayOfYear(date) { | |
| var days = d3.time.dayOfYear(date), | |
| weeks = days / 7 | 0, | |
| day0 = (d3.time.year(date).getDay() + 6) % 7, | |
| day1 = day0 + days - weeks * 7; | |
| return Math.max(0, days - weeks * 2 | |
| - (day0 <= 5 && day1 >= 5 || day0 <= 12 && day1 >= 12) // extra saturday | |
| - (day0 <= 6 && day1 >= 6 || day0 <= 13 && day1 >= 13)); // extra sunday | |
| } | |
| return weekday; | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment