aitee · August 28, 2019 21:58 · Aug 28, 2019 · Aug 22, 2019 · Aug 22, 2019
diff --git a/index.html b/index.html
@@ -27,7 +27,7 @@
 <body>
 
 <!-- load the d3.js library -->    
-<script src="http://d3js.org/d3.v3.min.js"></script>
+<script src="https://d3js.org/d3.v3.min.js"></script>
 
 <script>
 

diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: mit
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+This is a follow on from the [simple d3.js graph with table](http://bl.ocks.org/d3noob/473f0cf66196a008cf99) used as an example in the book [D3 Tips and Tricks](https://leanpub.com/D3-Tips-and-Tricks).
+
+It demonstrates the generation of a graph and a html table with a few alterations. It should be taken in context with the text of the [book](https://leanpub.com/D3-Tips-and-Tricks) which can be downloaded for free from Leanpub.
+
+forked from <a href='http://bl.ocks.org/d3noob/'>d3noob</a>'s block: <a href='http://bl.ocks.org/d3noob/5d47df5374d210b6f651'>Graph and table with tricks</a>
diff --git a/data2.csv b/data2.csv
@@ -0,0 +1,27 @@
+date,close,open
+1-May-12,68.13,34.12
+30-Apr-12,63.98,45.56
+27-Apr-12,67.00,67.89
+26-Apr-12,89.70,78.54
+25-Apr-12,99.00,89.23
+24-Apr-12,130.28,99.23
+23-Apr-12,166.70,101.34
+20-Apr-12,234.98,122.34
+19-Apr-12,345.44,134.56
+18-Apr-12,443.34,160.45
+17-Apr-12,543.70,180.34
+16-Apr-12,580.13,210.23
+13-Apr-12,605.23,223.45
+12-Apr-12,622.77,201.56
+11-Apr-12,626.20,212.67
+10-Apr-12,628.44,310.45
+9-Apr-12,636.23,350.45
+5-Apr-12,633.68,410.23
+4-Apr-12,624.31,430.56
+3-Apr-12,629.32,460.34
+2-Apr-12,618.63,510.34
+30-Mar-12,599.55,534.23
+29-Mar-12,609.86,578.23
+28-Mar-12,617.62,590.12
+27-Mar-12,614.48,560.34
+26-Mar-12,606.98,580.12
diff --git a/index.html b/index.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style> /* set the CSS */
+
+body { font: 12px Arial;}
+
+path { 
+    stroke: steelblue;
+    stroke-width: 2;
+    fill: none;
+}
+
+.axis path,
+.axis line {
+    fill: none;
+    stroke: grey;
+    stroke-width: 1;
+    shape-rendering: crispEdges;
+}
+
+td, th {
+    padding: 1px 4px;
+    border: 1px black solid;
+}
+
+</style>
+<body>
+
+<!-- load the d3.js library -->    
+<script src="http://d3js.org/d3.v3.min.js"></script>
+
+<script>
+
+// Set the dimensions of the canvas / graph
+var margin = {top: 30, right: 20, bottom: 30, left: 50},
+    width = 600 - margin.left - margin.right,
+    height = 270 - margin.top - margin.bottom;
+
+// Parse the date / time
+var parseDate = d3.time.format("%d-%b-%y").parse;
+
+// Set the ranges
+var x = d3.time.scale().range([0, width]);
+var y = d3.scale.linear().range([height, 0]);
+
+// Define the axes
+var xAxis = d3.svg.axis().scale(x)
+    .orient("bottom").ticks(5);
+
+var yAxis = d3.svg.axis().scale(y)
+    .orient("left").ticks(5);
+
+// Define the line
+var valueline = d3.svg.line()
+	.x(function(d) { return x(d.date1); })
+    .y(function(d) { return y(d.close); });
+
+// Adds the svg canvas
+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 + ")");
+
+// Get the data
+d3.csv("data2.csv", function(error, data) {
+    data.forEach(function(d) {
+		d.date1 = parseDate(d.date);    //  <= Change to date1
+        d.close = +d.close;
+        d.open = +d.open;  //  <= added this for tidy house keeping
+        d.diff = Math.round(( d.close - d.open ) * 100 ) / 100;
+    });
+
+    // Scale the range of the data
+	x.domain(d3.extent(data, function(d) { return d.date1; }));//<=date1
+    y.domain([0, d3.max(data, function(d) { return d.close; })]);
+
+    // Add the valueline path.
+    svg.append("path")
+        .attr("class", "line")
+        .attr("d", valueline(data));
+
+    // Add the X Axis
+    svg.append("g")
+        .attr("class", "x axis")
+        .attr("transform", "translate(0," + height + ")")
+        .call(xAxis);
+
+    // Add the Y Axis
+    svg.append("g")
+        .attr("class", "y axis")
+        .call(yAxis);
+
+// The table generation function
+function tabulate(data, columns) {
+    var table = d3.select("body").append("table")
+            .attr("style", "margin-left: 200px")
+            .style("border-collapse", "collapse")// <= Add this line in
+            .style("border", "2px black solid"), // <= Add this line in
+        thead = table.append("thead"),
+        tbody = table.append("tbody");
+
+    // append the header row
+    thead.append("tr")
+        .selectAll("th")
+        .data(columns)
+        .enter()
+        .append("th")
+            .text(function(column) { return column; });
+
+    // create a row for each object in the data
+    var rows = tbody.selectAll("tr")
+        .data(data)
+        .enter()
+        .append("tr");
+
+    // create a cell in each row for each column
+    var cells = rows.selectAll("td")
+        .data(function(row) {
+            return columns.map(function(column) {
+                return {column: column, value: row[column]};
+            });
+        })
+        .enter()
+        .append("td")
+        .attr("style", "font-family: Courier") // sets the font style
+            .html(function(d) { return d.value; });
+
+    return table;
+}
+
+// render the table
+var peopleTable = tabulate(data, ["date", "close", "open", "diff"]);
+
+peopleTable.selectAll("tbody tr") 
+        .sort(function(a, b) {
+                return d3.descending(a.close, b.close);
+        });
+
+peopleTable.selectAll("thead th")
+        .text(function(column) {
+                return column.charAt(0).toUpperCase()+column.substr(1);
+        });
+
+});
+
+</script>
+</body>
No results found