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
| @@ -82,6 +82,7 @@ span.required-asterisk { | @@ -82,6 +82,7 @@ span.required-asterisk { | ||
| 82 | .plot-container { | 82 | .plot-container { |
| 83 | /*background: #ff3399;*/ | 83 | /*background: #ff3399;*/ |
| 84 | border: 2px dotted #888; | 84 | border: 2px dotted #888; |
| 85 | + position: relative; | ||
| 85 | } | 86 | } |
| 86 | .legend-list { | 87 | .legend-list { |
| 87 | list-style: none; | 88 | list-style: none; |
flaskr/static/js/plots/emissions-per-distance.js
| 1 | -// export draw_emissions_per_distance | ||
| 2 | 1 | ||
| 3 | function draw_emissions_per_distance(divId, csvUrl) { | 2 | function draw_emissions_per_distance(divId, csvUrl) { |
| 4 | // let divId = "emissions_per_distance_histogram"; | 3 | // let divId = "emissions_per_distance_histogram"; |
| @@ -43,9 +42,6 @@ function draw_emissions_per_distance(divId, csvUrl) { | @@ -43,9 +42,6 @@ function draw_emissions_per_distance(divId, csvUrl) { | ||
| 43 | } | 42 | } |
| 44 | 43 | ||
| 45 | function setupCursorBoxes(event, attendeeSum, attendeeNumberPerGroup, xScale, box, vertical, rightArea) { | 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 | const x = d3.pointer(event)[0]; | 45 | const x = d3.pointer(event)[0]; |
| 50 | const y = d3.pointer(event)[1]; | 46 | const y = d3.pointer(event)[1]; |
| 51 | // var y = d3.event.pageY - document.getElementById(<id-of-your-svg>).getBoundingClientRect().y + 10 | 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,13 +108,13 @@ function draw_emissions_per_distance(divId, csvUrl) { | ||
| 112 | .style("left", "0px") | 108 | .style("left", "0px") |
| 113 | .style("border", "1px solid grey") | 109 | .style("border", "1px solid grey") |
| 114 | .style("background", "rgba(255, 255, 255, 0.7)"); | 110 | .style("background", "rgba(255, 255, 255, 0.7)"); |
| 111 | + | ||
| 115 | d3.select("#" + divId) | 112 | d3.select("#" + divId) |
| 116 | .on("mousemove", function (event) { | 113 | .on("mousemove", function (event) { |
| 117 | setupCursorBoxes(event, attendeeSum, attendeeNumberPerGroup, xScale, box, vertical, rightArea); | 114 | setupCursorBoxes(event, attendeeSum, attendeeNumberPerGroup, xScale, box, vertical, rightArea); |
| 118 | }) | 115 | }) |
| 119 | .on("mouseover", function (event) { | 116 | .on("mouseover", function (event) { |
| 120 | setupCursorBoxes(event, attendeeSum, attendeeNumberPerGroup, xScale, box, vertical, rightArea); | 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,7 +174,7 @@ | ||
| 174 | <li class="nav-item m-4"> | 174 | <li class="nav-item m-4"> |
| 175 | <a id="cities_footprints_d3viz_lollipop_download_png" | 175 | <a id="cities_footprints_d3viz_lollipop_download_png" |
| 176 | href="#" | 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 | class="btn btn-lg btn-secondary"> | 178 | class="btn btn-lg btn-secondary"> |
| 179 | Download Plot PNG | 179 | Download Plot PNG |
| 180 | </a> | 180 | </a> |
| @@ -228,13 +228,13 @@ | @@ -228,13 +228,13 @@ | ||
| 228 | {% block js %} | 228 | {% block js %} |
| 229 | {% if not estimation.has_failed() %} | 229 | {% if not estimation.has_failed() %} |
| 230 | 230 | ||
| 231 | +{# Eventually, once we're done with plots, use flask's asset minifier #} | ||
| 231 | <script src="/static/js/vendor/d3.v6.js"></script> | 232 | <script src="/static/js/vendor/d3.v6.js"></script> |
| 232 | <script src="/static/js/vendor/d3-legend.js"></script> | 233 | <script src="/static/js/vendor/d3-legend.js"></script> |
| 233 | <script src="/static/js/vendor/d3-scale-chromatic.v1.min.js"></script> | 234 | <script src="/static/js/vendor/d3-scale-chromatic.v1.min.js"></script> |
| 234 | <script src="/static/js/vendor/d3-geo-projection.v2.min.js"></script> | 235 | <script src="/static/js/vendor/d3-geo-projection.v2.min.js"></script> |
| 235 | <script src="/static/js/plots/emissions-per-distance.js"></script> | 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 | <script type="text/javascript"> | 239 | <script type="text/javascript"> |
| 240 | 240 | ||
| @@ -281,7 +281,14 @@ draw_emissions_per_distance( | @@ -281,7 +281,14 @@ draw_emissions_per_distance( | ||
| 281 | "/estimation/{{ estimation.public_id }}.csv" | 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 | jQuery(document).ready(function($){ | 294 | jQuery(document).ready(function($){ |
| @@ -600,100 +607,6 @@ 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 | </script> | 611 | </script> |
| 699 | 612 |