Commit 561e93922b0255b55489b7dfdfab63b9dd0e4fe2
1 parent
ad528ad0
Exists in
master
chore: lint
Showing
4 changed files
with
13 additions
and
103 deletions
Show diff stats
flaskr/static/css/common/main.css
flaskr/static/js/plots/emissions-per-distance.js
| 1 | -// export draw_emissions_per_distance | |
| 2 | 1 | |
| 3 | 2 | function draw_emissions_per_distance(divId, csvUrl) { |
| 4 | 3 | // let divId = "emissions_per_distance_histogram"; |
| ... | ... | @@ -43,9 +42,6 @@ function draw_emissions_per_distance(divId, csvUrl) { |
| 43 | 42 | } |
| 44 | 43 | |
| 45 | 44 | function setupCursorBoxes(event, attendeeSum, attendeeNumberPerGroup, xScale, box, vertical, rightArea) { |
| 46 | - // mousex = d3.mouse(this); | |
| 47 | - // const x = d3.mouse(this)[0]; | |
| 48 | - // const y = d3.mouse(this)[1]; | |
| 49 | 45 | const x = d3.pointer(event)[0]; |
| 50 | 46 | const y = d3.pointer(event)[1]; |
| 51 | 47 | // var y = d3.event.pageY - document.getElementById(<id-of-your-svg>).getBoundingClientRect().y + 10 |
| ... | ... | @@ -112,13 +108,13 @@ function draw_emissions_per_distance(divId, csvUrl) { |
| 112 | 108 | .style("left", "0px") |
| 113 | 109 | .style("border", "1px solid grey") |
| 114 | 110 | .style("background", "rgba(255, 255, 255, 0.7)"); |
| 111 | + | |
| 115 | 112 | d3.select("#" + divId) |
| 116 | 113 | .on("mousemove", function (event) { |
| 117 | 114 | setupCursorBoxes(event, attendeeSum, attendeeNumberPerGroup, xScale, box, vertical, rightArea); |
| 118 | 115 | }) |
| 119 | 116 | .on("mouseover", function (event) { |
| 120 | 117 | setupCursorBoxes(event, attendeeSum, attendeeNumberPerGroup, xScale, box, vertical, rightArea); |
| 121 | - | |
| 122 | 118 | }); |
| 123 | 119 | } |
| 124 | 120 | ... | ... |
flaskr/static/public/data/world.geojson renamed to flaskr/static/public/data/world-earth.geojson
flaskr/templates/estimation.html
| ... | ... | @@ -174,7 +174,7 @@ |
| 174 | 174 | <li class="nav-item m-4"> |
| 175 | 175 | <a id="cities_footprints_d3viz_lollipop_download_png" |
| 176 | 176 | href="#" |
| 177 | - title="This may not work on IE nor Edge. Please use a decent browser like Firefox." | |
| 177 | + title="This may not work on IE nor Edge." | |
| 178 | 178 | class="btn btn-lg btn-secondary"> |
| 179 | 179 | Download Plot PNG |
| 180 | 180 | </a> |
| ... | ... | @@ -228,13 +228,13 @@ |
| 228 | 228 | {% block js %} |
| 229 | 229 | {% if not estimation.has_failed() %} |
| 230 | 230 | |
| 231 | +{# Eventually, once we're done with plots, use flask's asset minifier #} | |
| 231 | 232 | <script src="/static/js/vendor/d3.v6.js"></script> |
| 232 | 233 | <script src="/static/js/vendor/d3-legend.js"></script> |
| 233 | 234 | <script src="/static/js/vendor/d3-scale-chromatic.v1.min.js"></script> |
| 234 | 235 | <script src="/static/js/vendor/d3-geo-projection.v2.min.js"></script> |
| 235 | 236 | <script src="/static/js/plots/emissions-per-distance.js"></script> |
| 236 | -{#<script src="https://d3js.org/d3.v4.js"></script>#} | |
| 237 | -{#<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.js"></script>#} | |
| 237 | +<script src="/static/js/plots/travel-legs-worldmap.js"></script> | |
| 238 | 238 | |
| 239 | 239 | <script type="text/javascript"> |
| 240 | 240 | |
| ... | ... | @@ -281,7 +281,14 @@ draw_emissions_per_distance( |
| 281 | 281 | "/estimation/{{ estimation.public_id }}.csv" |
| 282 | 282 | ); |
| 283 | 283 | |
| 284 | -console.log("Done."); | |
| 284 | + | |
| 285 | +draw_travel_legs_worldmap( | |
| 286 | + "#d3viz_travels", | |
| 287 | + "/static/public/data/world-earth.geojson", | |
| 288 | + "/estimation/{{ estimation.public_id }}/trips_to_destination_0.csv" | |
| 289 | +); | |
| 290 | + | |
| 291 | + | |
| 285 | 292 | |
| 286 | 293 | {# |
| 287 | 294 | jQuery(document).ready(function($){ |
| ... | ... | @@ -600,100 +607,6 @@ jQuery(document).ready(function($){ |
| 600 | 607 | }); |
| 601 | 608 | |
| 602 | 609 | |
| 603 | -jQuery(document).ready(function($) { | |
| 604 | - var vizid = "#d3viz_travels"; | |
| 605 | - var worldDataUrl = "/static/public/data/world.geojson"; | |
| 606 | - {#var travelsDataUrl = "/static/public/data/data_connectionmap_test.csv";#} | |
| 607 | - var travelsDataUrl = "/estimation/{{ estimation.public_id }}/trips_to_destination_0.csv"; | |
| 608 | - | |
| 609 | - {#var margin = {top: 40, right: 40, bottom: 150, left: 180},#} | |
| 610 | - var margin = {top: 0, right: 0, bottom: 0, left: 0}; | |
| 611 | - var width = $(vizid).parent().width(); | |
| 612 | - var height = width - margin.top - margin.bottom; | |
| 613 | - height *= 1.0; | |
| 614 | - {#var height = Math.max(300, 600) - margin.top - margin.bottom;#} | |
| 615 | - {#var width = Math.max(880, $(vizid).parent().width());#} | |
| 616 | - width = width - margin.left - margin.right; | |
| 617 | - | |
| 618 | - var size_ratio = 0.85; | |
| 619 | - width = 629.0 * size_ratio; | |
| 620 | - height = 604.0 * size_ratio; | |
| 621 | - {#width = 500.0;#} | |
| 622 | - {#height = 400.0;#} | |
| 623 | - | |
| 624 | - var offset_x = 0.0; | |
| 625 | - var offset_y = 0.0; | |
| 626 | - | |
| 627 | - var svg = d3.select(vizid) | |
| 628 | - .append("svg") | |
| 629 | - .attr("width", width + margin.left + margin.right) | |
| 630 | - .attr("height", height + margin.top + margin.bottom); | |
| 631 | - | |
| 632 | - var projection = d3.geoMercator() | |
| 633 | - .scale(85) | |
| 634 | - .translate([width / 2.0 + offset_x, height / 2.0 + offset_y]); | |
| 635 | - | |
| 636 | - {#var projection = d3.geoMercator()#} | |
| 637 | - {# .scale(85)#} | |
| 638 | - {# .translate([width / 2, height / 2 * 1.3]);#} | |
| 639 | - | |
| 640 | - // A path generator | |
| 641 | - var geopath = d3.geoPath().projection(projection); | |
| 642 | - | |
| 643 | - // Load world shape AND list of connection | |
| 644 | - {#d3.queue()#} | |
| 645 | - {# .defer(d3.json, worldDataUrl)#} | |
| 646 | - {#.defer(d3.json, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson") // World shape#} | |
| 647 | - {# .defer(d3.csv, travelsDataUrl)#} | |
| 648 | - {#.defer(d3.csv, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_connectionmap.csv") // Position of circles#} | |
| 649 | - {# .await(on_map_ready);#} | |
| 650 | - var worldDataPromise = d3.json(worldDataUrl); | |
| 651 | - var travelsDataPromise = d3.csv(travelsDataUrl); | |
| 652 | - Promise.all([worldDataPromise, travelsDataPromise]).then(function(values){ | |
| 653 | - on_map_ready(null, values[0], values[1]); | |
| 654 | - }); | |
| 655 | - | |
| 656 | - function on_map_ready(error, dataGeo, data) { | |
| 657 | - | |
| 658 | - // Reformat the list of link. Note that columns in csv file are called long1, long2, lat1, lat2 | |
| 659 | - var link = []; | |
| 660 | - data.forEach(function (row) { | |
| 661 | - source = [+row.origin_lon, +row.origin_lat]; | |
| 662 | - target = [+row.destination_lon, +row.destination_lat]; | |
| 663 | - topush = {type: "LineString", coordinates: [source, target]}; | |
| 664 | - link.push(topush); | |
| 665 | - }); | |
| 666 | - | |
| 667 | - // Draw the map | |
| 668 | - svg.append("g") | |
| 669 | - .selectAll("path") | |
| 670 | - .data(dataGeo.features) | |
| 671 | - .enter() | |
| 672 | - .append("path") | |
| 673 | - .attr("fill", "#b8b8b8") | |
| 674 | - .attr("d", geopath) | |
| 675 | - .style("stroke", "#fff") | |
| 676 | - .style("stroke-width", 0); | |
| 677 | - | |
| 678 | - // Add the path | |
| 679 | - svg.selectAll("myPath") | |
| 680 | - .data(link) | |
| 681 | - .enter() | |
| 682 | - .append("path") | |
| 683 | - .attr("d", geopath) | |
| 684 | -// .attr("d", function (d) { | |
| 685 | -// return geopath(d); | |
| 686 | - // }) | |
| 687 | - .style("fill", "none") | |
| 688 | - .style("stroke", "#69b3a2") | |
| 689 | - .style("stroke-width", 2); | |
| 690 | - | |
| 691 | - } | |
| 692 | - | |
| 693 | -}); | |
| 694 | - | |
| 695 | - | |
| 696 | - | |
| 697 | 610 | |
| 698 | 611 | </script> |
| 699 | 612 | ... | ... |