diff --git a/js/Myjs.js b/js/Myjs.js index 40edc2d..c30d45f 100644 --- a/js/Myjs.js +++ b/js/Myjs.js @@ -53,7 +53,7 @@ var featureGroup = L.featureGroup(); var drawControl = new L.Control.Draw({ position: 'bottomright', - collapsed: false, + collapsed: false, draw: { // Available Shapes in Draw box. To disable anyone of them just convert true to false polyline: false, @@ -74,25 +74,25 @@ map.addControl(drawControl); // To add anything to map, add it to "drawControl" //***************************************************************************************************************************************** // Index Road Network by Using R-Tree //***************************************************************************************************************************************** -var rt = cw(function(data,cb){ - var self = this; - var request,_resp; - importScripts("js/rtree.js"); - if(!self.rt){ - self.rt=RTree(); - request = new XMLHttpRequest(); - request.open("GET", data); - request.onreadystatechange = function() { - if (request.readyState === 4 && request.status === 200) { - _resp=JSON.parse(request.responseText); - self.rt.geoJSON(_resp); - cb(true); - } - }; - request.send(); - }else{ - return self.rt.bbox(data); - } +var rt = cw(function(data, cb) { + var self = this; + var request, _resp; + importScripts("js/rtree.js"); + if (!self.rt) { + self.rt = RTree(); + request = new XMLHttpRequest(); + request.open("GET", data); + request.onreadystatechange = function() { + if (request.readyState === 4 && request.status === 200) { + _resp = JSON.parse(request.responseText); + self.rt.geoJSON(_resp); + cb(true); + } + }; + request.send(); + } else { + return self.rt.bbox(data); + } }); rt.data(cw.makeUrl("js/trips.json")); @@ -117,34 +117,38 @@ function clearMap() { var heat, scatter, pie, bar, line = false; -map.on('draw:created', function (e) { - - clearMap(); - - var type = e.layerType, - layer = e.layer; - - if (type === 'rectangle') { - var bounds=layer.getBounds(); - rt.data([[bounds.getSouthWest().lng,bounds.getSouthWest().lat],[bounds.getNorthEast().lng,bounds.getNorthEast().lat]]). - then(function(d){var result = d.map(function(a) {return a.properties;}); - console.log(result); // Trip Info: avspeed, distance, duration, endtime, maxspeed, minspeed, starttime, streetnames, taxiid, tripid - DrawRS(result); - - if (bar === true) { - barChart(result); - } else if (line === true) { - lineChart(result); - } else if (pie === true){ - horizontalBarChart(result); - } else if (scatter === true) { - scatterplot(result); - } else if (heat === true) { - heatMap(result); - } - }); - } - drawnItems.addLayer(layer); //Add your Selection to Map +map.on('draw:created', function(e) { + + clearMap(); + + var type = e.layerType, + layer = e.layer; + + if (type === 'rectangle') { + var bounds = layer.getBounds(); + rt.data([ + [bounds.getSouthWest().lng, bounds.getSouthWest().lat], + [bounds.getNorthEast().lng, bounds.getNorthEast().lat] + ]). + then(function(d) { + var result = d.map(function(a) { return a.properties; }); + console.log(result); // Trip Info: avspeed, distance, duration, endtime, maxspeed, minspeed, starttime, streetnames, taxiid, tripid + DrawRS(result); + + if (bar === true) { + barChart(result); + } else if (line === true) { + lineChart(result); + } else if (pie === true) { + horizontalBarChart(result); + } else if (scatter === true) { + scatterplot(result); + } else if (heat === true) { + heatMap(result); + } + }); + } + drawnItems.addLayer(layer); //Add your Selection to Map }); function barChartTrue() { @@ -155,7 +159,7 @@ function barChartTrue() { scatter = false; } -function lineChartTrue(){ +function lineChartTrue() { d3.select("#graph-display").select("svg").remove(); bar = false; line = true; @@ -163,7 +167,7 @@ function lineChartTrue(){ scatter = false; } -function pieChartTrue(){ +function pieChartTrue() { d3.select("#graph-display").select("svg").remove(); pie = true; bar = false; @@ -189,14 +193,14 @@ function heatMapTrue() { } function lineChart(e) { - var margin = { - top: 20, - right: 20, - bottom: 50, - left: 40 - }, - width = 960 - margin.left - margin.right, - height = 500 - margin.top - margin.bottom; + var margin = { + top: 20, + right: 20, + bottom: 50, + left: 40 + }, + width = 960 - margin.left - margin.right, + height = 500 - margin.top - margin.bottom; var x = d3.scaleBand().range([0, width], .05); var y = d3.scaleLinear().range([height, 0]); @@ -205,93 +209,93 @@ function lineChart(e) { var yAxis = d3.axisLeft().scale(y).ticks(20); var svg = d3.select("#graph-display").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 + ")"); + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var hourParser = d3.isoParse; var dataset = d3.nest() - .key(function (d) { return d3.timeHour.round(hourParser(d.starttime)); }).sortKeys(d3.ascending) - .rollup(function (d) { return d3.mean(d, function (g) { return g.duration; }); }) + .key(function(d) { return d3.timeHour.round(hourParser(d.starttime)); }).sortKeys(d3.ascending) + .rollup(function(d) { return d3.mean(d, function(g) { return g.duration; }); }) .entries(e); - console.log(JSON.stringify(dataset)); + console.log(JSON.stringify(dataset)); var line = d3.line() - .x(function(d) { return x(d.key); }) - .y(function(d) { return y(d.value); }); + .x(function(d) { return x(d.key); }) + .y(function(d) { return y(d.value); }); + + x.domain(dataset.map(function(d) { return new Date(d.key); })); + y.domain(d3.extent(dataset, function(d) { return d.value; })); + + svg.append("g") + .append("text") + .attr("x", width / 2) + .attr("y", 0) + .attr("text-anchor", "middle") + .attr('dy', -8) + .text("Visualizing average trip duration per hour: "); + - x.domain(dataset.map(function(d) { return new Date(d.key); })); - y.domain(d3.extent(dataset, function(d) { return d.value; })); + svg.append("g") + .attr("transform", "translate(-32," + height + ")") + .call(xAxis) + .selectAll("text") + .style("text-anchor", "end") + .attr("dx", "-.8em") + .attr("dy", "-.55em") + .attr("transform", "rotate(-45)"); svg.append("g") - .append("text") - .attr("x", width/2) - .attr("y", 0) - .attr("text-anchor", "middle") - .attr('dy', -8) - .text("Visualizing average trip during per hour: "); - - - svg.append("g") - .attr("transform", "translate(-32," + height + ")") - .call(xAxis) - .selectAll("text") - .style("text-anchor", "end") - .attr("dx", "-.8em") - .attr("dy", "-.55em") - .attr("transform", "rotate(-45)" ); - - svg.append("g") - .call(yAxis) - .append("text") - .attr("fill", "#000") - .attr("transform", "rotate(-90)") - .attr("y", 6) - .attr("dy", "0.71em") - .attr("text-anchor", "end") - .text("Duration"); - - // Add the valueline path. - svg.append("path") - .data([dataset]) - .attr("class", "line") - .attr("d", line); + .call(yAxis) + .append("text") + .attr("fill", "#000") + .attr("transform", "rotate(-90)") + .attr("y", 6) + .attr("dy", "0.71em") + .attr("text-anchor", "end") + .text("Duration"); + + // Add the valueline path. + svg.append("path") + .data([dataset]) + .attr("class", "line") + .attr("d", line); } function scatterplot(e) { -var margin = {top: 20, right: 20, bottom: 30, left: 40}, - width = 960 - margin.left - margin.right, - height = 500 - margin.top - margin.bottom; + var margin = { top: 20, right: 20, bottom: 30, left: 40 }, + width = 960 - margin.left - margin.right, + height = 500 - margin.top - margin.bottom; var dataset = d3.nest() - .key(function (d) { return d.streetnames[0] }).sortKeys(d3.ascending) - .rollup(function(d) { return {"avduration": d3.mean(d, function (g) { return g.duration; }), "avspeed": d3.mean(d, function (g) { return g.avspeed; })}}) + .key(function(d) { return d.streetnames[0] }).sortKeys(d3.ascending) + .rollup(function(d) { return { "avduration": d3.mean(d, function(g) { return g.duration; }), "avspeed": d3.mean(d, function(g) { return g.avspeed; }) } }) .entries(e); - console.log(JSON.stringify(dataset)); + console.log(JSON.stringify(dataset)); // setup x - var xValue = function(d) { return d.value.avspeed;}, // data -> value + var xValue = function(d) { return d.value.avspeed; }, // data -> value xScale = d3.scaleLinear().range([0, width]), // value -> display - xMap = function(d) { return xScale(xValue(d));}, // data -> display + xMap = function(d) { return xScale(xValue(d)); }, // data -> display xAxis = d3.axisBottom().scale(xScale); // setup y - var yValue = function(d) { return d.value.avduration;}, // data -> value + var yValue = function(d) { return d.value.avduration; }, // data -> value yScale = d3.scaleLinear().range([height, 0]), // value -> display - yMap = function(d) { return yScale(yValue(d));}, // data -> display + yMap = function(d) { return yScale(yValue(d)); }, // data -> display yAxis = d3.axisLeft().scale(yScale); // setup fill color - var cValue = function(d) { return d.key;}, + var cValue = function(d) { return d.key; }, color = d3.scaleOrdinal(d3.schemeCategory20); // add the graph canvas to the body of the webpage var svg = d3.select("#graph-display").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) - .append("g") + .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // add the tooltip area to the webpage @@ -300,131 +304,131 @@ var margin = {top: 20, right: 20, bottom: 30, left: 40}, .style("opacity", 0); // don't want dots overlapping axis, so add in buffer to data domain - xScale.domain([d3.min(dataset, xValue) - 1, d3.max(dataset, xValue) + 1]); - yScale.domain([d3.min(dataset, yValue) - 1, d3.max(dataset, yValue) + 1]); - - // x-axis - svg.append("g") - .attr("class", "x axis") - .attr("transform", "translate(0," + height + ")") - .call(xAxis) - .append("text") - .attr("fill", "#000") - .attr("transform", "rotate(0)") - .attr("y", 17) - .attr("dy", "0.71em") - .attr("text-anchor", "start") - .text("Average Speed"); - - // y-axis - svg.append("g") - .attr("class", "y axis") - .call(yAxis) - .append("text") - .attr("fill", "#000") - .attr("transform", "rotate(-90)") - .attr("y", 6) - .attr("dy", "0.71em") - .attr("text-anchor", "end") - .text("Average Duration"); - - // draw dots - svg.selectAll(".dot") - .data(dataset) - .enter().append("circle") - .attr("class", "dot") - .attr("r", 3.5) - .attr("cx", xMap) - .attr("cy", yMap) - .style("fill", function(d) { return color(cValue(d));}) - .on("mouseover", function(d) { - tooltip.transition() - .duration(200) - .style("opacity", .9); - tooltip.html(d.key + "
(Average Speed: " + xValue(d) - + ", Average Duration: " + yValue(d) + ")") - .style("left", (d3.event.pageX + 5) + "px") - .style("top", (d3.event.pageY - 28) + "px"); - }) - .on("mouseout", function(d) { - tooltip.transition() - .duration(500) - .style("opacity", 0); - }); - - // draw legend - var legend = svg.selectAll(".legend") - .data(color.domain()) - .enter().append("g") - .attr("class", "legend") - .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); - - // draw legend colored rectangles - legend.append("rect") - .attr("x", width - 18) - .attr("width", 18) - .attr("height", 18) - .style("fill", color); - - // draw legend text - legend.append("text") - .attr("x", width - 24) - .attr("y", 9) - .attr("dy", ".35em") - .style("text-anchor", "end") - .text(function(d) { return d;}) + xScale.domain([d3.min(dataset, xValue) - 1, d3.max(dataset, xValue) + 1]); + yScale.domain([d3.min(dataset, yValue) - 1, d3.max(dataset, yValue) + 1]); + + // x-axis + svg.append("g") + .attr("class", "x axis") + .attr("transform", "translate(0," + height + ")") + .call(xAxis) + .append("text") + .attr("fill", "#000") + .attr("transform", "rotate(0)") + .attr("y", 17) + .attr("dy", "0.71em") + .attr("text-anchor", "start") + .text("Average Speed"); + + // y-axis + svg.append("g") + .attr("class", "y axis") + .call(yAxis) + .append("text") + .attr("fill", "#000") + .attr("transform", "rotate(-90)") + .attr("y", 6) + .attr("dy", "0.71em") + .attr("text-anchor", "end") + .text("Average Duration"); + + // draw dots + svg.selectAll(".dot") + .data(dataset) + .enter().append("circle") + .attr("class", "dot") + .attr("r", 3.5) + .attr("cx", xMap) + .attr("cy", yMap) + .style("fill", function(d) { return color(cValue(d)); }) + .on("mouseover", function(d) { + tooltip.transition() + .duration(200) + .style("opacity", .9); + tooltip.html(d.key + "
(Average Speed: " + xValue(d) + + ", Average Duration: " + yValue(d) + ")") + .style("left", (d3.event.pageX + 5) + "px") + .style("top", (d3.event.pageY - 28) + "px"); + }) + .on("mouseout", function(d) { + tooltip.transition() + .duration(500) + .style("opacity", 0); + }); + + // draw legend + var legend = svg.selectAll(".legend") + .data(color.domain()) + .enter().append("g") + .attr("class", "legend") + .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); + + // draw legend colored rectangles + legend.append("rect") + .attr("x", width - 18) + .attr("width", 18) + .attr("height", 18) + .style("fill", color); + + // draw legend text + legend.append("text") + .attr("x", width - 24) + .attr("y", 9) + .attr("dy", ".35em") + .style("text-anchor", "end") + .text(function(d) { return d; }) } -function horizontalBarChart(e){ +function horizontalBarChart(e) { var hourParser = d3.isoParse; var dataset = d3.nest() - .key(function (d) { return d.taxiid }).sortKeys(d3.ascending) - .rollup(function (d) { return d3.sum(d, function (g) { return g.distance; });}) - .entries(e); + .key(function(d) { return d.taxiid }).sortKeys(d3.ascending) + .rollup(function(d) { return d3.sum(d, function(g) { return g.distance; }); }) + .entries(e); console.log(JSON.stringify(dataset)); - var margin = { - top: 20, - right: 20, - bottom: 50, - left: 60 - }, - width = 960 - margin.left - margin.right, - height = 900 - margin.top - margin.bottom; + var margin = { + top: 20, + right: 20, + bottom: 50, + left: 60 + }, + width = 960 - margin.left - margin.right, + height = 900 - margin.top - margin.bottom; var svg = d3.select("#graph-display").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 + ")"); + .attr("height", height + margin.top + margin.bottom) + .append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.append("g").attr("Fuckin' text yo"); var tooltip = d3.select("body").append("div").attr("class", "toolTip"); - + var x = d3.scaleLinear().range([0, width]); var y = d3.scaleBand().range([height, 0]); - - - dataset.sort(function(a, b) { return a.value - b.value; }); - - x.domain([0, d3.max(dataset, function(d) { return d.value; })]); + + + dataset.sort(function(a, b) { return a.value - b.value; }); + + x.domain([0, d3.max(dataset, function(d) { return d.value; })]); y.domain(dataset.map(function(d) { return d.key; })).padding(0.1); - svg.append("g") - .append("text") - .attr("x", width/2) - .attr("y", 0) - .attr("text-anchor", "middle") - .attr('dy', -8) - .text("Visualizing total distance traveled per taxi: "); + svg.append("g") + .append("text") + .attr("x", width / 2) + .attr("y", 0) + .attr("text-anchor", "middle") + .attr('dy', -8) + .text("Visualizing total distance traveled per taxi: "); svg.append("g") .attr("class", "x axis") - .attr("transform", "translate(0," + height + ")") - .call(d3.axisBottom(x).ticks(5).tickFormat(function(d) { return parseInt(d / 1000); }).tickSizeInner([-height])); + .attr("transform", "translate(0," + height + ")") + .call(d3.axisBottom(x).ticks(5).tickFormat(function(d) { return parseInt(d / 1000); }).tickSizeInner([-height])); svg.append("g") .attr("class", "y axis") @@ -432,34 +436,34 @@ function horizontalBarChart(e){ svg.selectAll(".bar") .data(dataset) - .enter().append("rect") + .enter().append("rect") .attr("class", "bar") .attr("x", 0) .attr("height", y.bandwidth()) .attr("y", function(d) { return y(d.key); }) .attr("width", function(d) { return x(d.value); }) - .on("mousemove", function(d){ + .on("mousemove", function(d) { tooltip - .style("left", d3.event.pageX - 50 + "px") - .style("top", d3.event.pageY - 70 + "px") - .style("display", "inline-block") - .html("Taxi ID: " + (d.key) + "
" + (d.value / 1000) + " Kilometers"); + .style("left", d3.event.pageX - 50 + "px") + .style("top", d3.event.pageY - 70 + "px") + .style("display", "inline-block") + .html("Taxi ID: " + (d.key) + "
" + (d.value / 1000) + " Kilometers"); }) - .on("mouseout", function(d){ tooltip.style("display", "none");}); + .on("mouseout", function(d) { tooltip.style("display", "none"); }); } function barChart(e) { - var margin = { - top: 20, - right: 20, - bottom: 50, - left: 40 - }, - width = 960 - margin.left - margin.right, - height = 500 - margin.top - margin.bottom; + var margin = { + top: 20, + right: 20, + bottom: 50, + left: 40 + }, + width = 960 - margin.left - margin.right, + height = 500 - margin.top - margin.bottom; var x = d3.scaleBand().rangeRound([0, width], .05).padding(0.1); @@ -469,9 +473,9 @@ function barChart(e) { var yAxis = d3.axisLeft().scale(y).ticks(10); var svg = d3.select("#graph-display").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 + ")"); + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var tooltip = d3.select("body").append("div").attr("class", "toolTip"); @@ -484,85 +488,85 @@ function barChart(e) { });*/ var dataset = d3.nest() - .key(function (d) { return d3.timeHour.round(hourParser(d.starttime)); }).sortKeys(d3.ascending) - .rollup(function (d) { return d3.mean(d, function (g) { return g.avspeed; }); }) + .key(function(d) { return d3.timeHour.round(hourParser(d.starttime)); }).sortKeys(d3.ascending) + .rollup(function(d) { return d3.mean(d, function(g) { return g.avspeed; }); }) .entries(e); - console.log(JSON.stringify(dataset)); - + console.log(JSON.stringify(dataset)); + x.domain(dataset.map(function(d) { return new Date(d.key); })); y.domain([0, d3.max(dataset, function(d) { return d.value; })]); svg.append("g") - .append("text") - .attr("x", width/2) - .attr("y", 0) - .attr("text-anchor", "middle") - .attr('dy', -8) - .text("Visualizing average trip speed per hour: "); - - - - svg.selectAll(".bar") - .data(dataset) - .enter().append("rect") - .attr("class", "bar") - .attr("x", function(d) { return x(new Date(d.key)); }) - .attr("width", x.bandwidth()) - .attr("y", function(d) { return y(d.value); }) - .attr("height", function(d) { return height - y(d.value); }) - .on("mousemove", function(d){ + .append("text") + .attr("x", width / 2) + .attr("y", 0) + .attr("text-anchor", "middle") + .attr('dy', -8) + .text("Visualizing average trip speed per hour: "); + + + + svg.selectAll(".bar") + .data(dataset) + .enter().append("rect") + .attr("class", "bar") + .attr("x", function(d) { return x(new Date(d.key)); }) + .attr("width", x.bandwidth()) + .attr("y", function(d) { return y(d.value); }) + .attr("height", function(d) { return height - y(d.value); }) + .on("mousemove", function(d) { tooltip - .style("left", d3.event.pageX - 50 + "px") - .style("top", d3.event.pageY - 70 + "px") - .style("display", "inline-block") - .html("" + (d.key) + "" + "
" + "Average Speed" + "
" + "" + (d.value) + ""); + .style("left", d3.event.pageX - 50 + "px") + .style("top", d3.event.pageY - 70 + "px") + .style("display", "inline-block") + .html("" + (d.key) + "" + "
" + "Average Speed" + "
" + "" + (d.value) + ""); }) - .on("mouseout", function(d){ tooltip.style("display", "none");}); - - - svg.append("g") - .attr("transform", "translate(0," + height + ")") - .call(xAxis) - .selectAll("text") - .style("text-anchor", "end") - .attr("dx", "-.8em") - .attr("dy", "-.55em") - .attr("transform", "rotate(-45)" ); - - // add the y Axis + .on("mouseout", function(d) { tooltip.style("display", "none"); }); + + + svg.append("g") + .attr("transform", "translate(0," + height + ")") + .call(xAxis) + .selectAll("text") + .style("text-anchor", "end") + .attr("dx", "-.8em") + .attr("dy", "-.55em") + .attr("transform", "rotate(-45)"); + + // add the y Axis svg.append("g") - .attr("class", "y axis") - .call(yAxis) - .append("text") - .attr("transform", "rotate(-90)") - .attr("y", 6) - .attr("dy", ".71em") - .style("text-anchor", "end") - .text("Value"); + .attr("class", "y axis") + .call(yAxis) + .append("text") + .attr("transform", "rotate(-90)") + .attr("y", 6) + .attr("dy", ".71em") + .style("text-anchor", "end") + .text("Value"); } -function heatMap(e){ - +function heatMap(e) { + var itemSize = 22, - cellSize = itemSize - 1, - margin = {top: 120, right: 20, bottom: 20, left: 110}; - + cellSize = itemSize - 1, + margin = { top: 120, right: 20, bottom: 20, left: 110 }; + var width = 750 - margin.right - margin.left, - height = 300 - margin.top - margin.bottom; + height = 300 - margin.top - margin.bottom; var dataset = d3.nest() - .key(function (d) { return d3.timeHour.round(hourParser(d.starttime)); }).sortKeys(d3.ascending) - .rollup(function (d) { return d.length }) + .key(function(d) { return d3.timeHour.round(hourParser(d.starttime)); }).sortKeys(d3.ascending) + .rollup(function(d) { return d.length }) .entries(e); - console.log(JSON.stringify(dataset)); + console.log(JSON.stringify(dataset)); - var x = d3.scaleBand().rangeRound([0, width], .05).padding(0.1); - var y = d3.scaleLinear().range([height, 0]); + var x = d3.scaleBand().rangeRound([0, width], .05).padding(0.1); + var y = d3.scaleLinear().range([height, 0]); - x.domain(dataset.map(function(d) { return new Date(d.key); })); - y.domain([0, d3.max(dataset, function(d) { return d.value; })]); + x.domain(dataset.map(function(d) { return new Date(d.key); })); + y.domain([0, d3.max(dataset, function(d) { return d.value; })]); var xScale = d3.scaleOrdinal() .domain(x_elements) @@ -570,7 +574,7 @@ function heatMap(e){ var xAxis = d3.axisTop() .scale(xScale) - .tickFormat(function (d) { + .tickFormat(function(d) { return d; }); @@ -580,7 +584,7 @@ function heatMap(e){ var yAxis = d3.axisLeft() .scale(yScale) - .tickFormat(function (d) { + .tickFormat(function(d) { return d; }); @@ -602,7 +606,7 @@ function heatMap(e){ .attr('width', cellSize) .attr('height', cellSize) .attr('y', function(d) { return yScale(d.key); }) - .attr('x', function(d) { return xScale(d.value ); }) + .attr('x', function(d) { return xScale(d.value); }) .attr('fill', function(d) { return colorScale(d.value); }); svg.append("g") @@ -619,7 +623,7 @@ function heatMap(e){ .style("text-anchor", "start") .attr("dx", ".8em") .attr("dy", ".5em") - .attr("transform", function (d) { + .attr("transform", function(d) { return "rotate(-65)"; }); } @@ -629,18 +633,18 @@ function heatMap(e){ // Input is a list of Trip and the function draw these trips on Map based on their IDs //***************************************************************************************************************************************** function DrawRS(trips) { - for (var j=0; j