Difference between revisions of "Team:SJTU-BioX-Shanghai/HP test page"

 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<html>
+
<html>
−
    <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
+
<head> 
−
<style>
+
<meta charset="utf-8">
−
/* Clear the default wiki settings */
+
<title>做一个简单的图表</title>  
−
+
</head>  
−
#home_logo, #sideMenu { display:none; }
+
<body> 
−
#sideMenu, #top_title, .patrollink , #bars_item {display:none;}
+
−
#content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;}
+
−
body {background-color:white; }
+
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
−
#globalWrapper{padding:0;}
+
−
        p {margin:0}
+
−
        #HQ_page p{text-align:inherit;}
+
−
        #top_menu_inside #user_item{padding-top:0px;}
+
−
#top_menu_inside{border-left:0px;border-right:0px;width:auto;}
+
−
li{margin-bottom:0;}
+
−
</style>
+
  
−
<!DOCTYPE html>
+
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/jquery?
−
<meta charset="utf-8">
+
            action=raw&amp;ctype=text/javascript"></script>
−
<title>Geographic Bounding Boxes</title>
+
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/script?
−
<style>
+
            action=raw&amp;ctype=text/javascript"></script>
−
@import url(../maps.css?85b2875);
+
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/popper?
−
#map svg {
+
            action=raw&amp;ctype=text/javascript"></script>
−
  cursor: move;
+
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/ripple?
−
}
+
            action=raw&amp;ctype=text/javascript"></script>
−
path {
+
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/bootstrap?
−
  fill: none;
+
            action=raw&amp;ctype=text/javascript"></script>
−
  stroke: #000;
+
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/nav?
−
}
+
            action=raw&amp;ctype=text/javascript"></script>
−
.background {
+
        <script src="https://2017.igem.org/Template:SJTU-BioX-Shanghai/Javascript/echarts?
−
  stroke: none;
+
            action=raw&amp;ctype=text/javascript"></script>
−
  fill: #eef;
+
        <script type="text/javascript">
−
}
+
            // 基于准备好的dom，初始化echarts实例
−
.land {
+
            var myChart = echarts.init(document.getElementById('radar'));
−
  stroke-width: .75px;
+
−
  pointer-events: all;
+
−
}
+
−
.graticule {
+
−
  stroke: #333;
+
−
  stroke-width: .25px;
+
−
}
+
−
.bounds {
+
−
  fill: #f00;
+
−
  fill-opacity: .25;
+
−
  stroke: #000;
+
−
  stroke-width: 1px;
+
−
  pointer-events: none;
+
−
}
+
−
.country:hover .bounds {
+
−
  stroke-width: 2px;
+
−
}
+
−
.country:hover .land {
+
−
  stroke-width: 1px;
+
−
}
+
−
.outline {
+
−
  stroke: #000;
+
−
  stroke-width: 1.5px;
+
−
  fill: none;
+
−
}
+
−
.antimeridian {
+
−
  stroke-dasharray: 5 5;
+
−
}
+
−
 
+
−
.example path.Polygon {
+
−
  fill: url(#hatch);
+
−
}
+
−
.example text {
+
−
  font-size: 11px;
+
−
  font-family: sans-serif;
+
−
}
+
−
</style>
+
−
 
+
−
<p class="breadcrumbs"><a href="http://www.jasondavies.com/">Jason Davies</a> → <a href="../">Maps</a>
+
−
 
+
−
<h1>Geographic Bounding Boxes</h1>
+
−
<div id="map"></div>
+
−
 
+
−
<div class="wrapper">
+
−
  <p class="caption">A geographic bounding box for each country (including semi-independent regions) from Natural Earth’s <a href="http://www.naturalearthdata.com/downloads/110m-cultural-vectors/110m-admin-0-countries/">1:110m Cultural Vectors</a>.
+
−
 
+
−
  <p>A <a href="http://en.wikipedia.org/wiki/Minimum_bounding_box">minimum bounding box</a> in <i>geographic coordinates</i> is an area defined by minimum and maximum longitudes and latitudes.
+
−
  <p>Computing bounding boxes in 2D is simple: track the minimum and maximum x- and y-coordinates point by point.
+
−
  Assuming line segments are straight for both polylines and polygons, nothing else needs to be done.
+
−
  <p>Why doesn’t this work for a sphere?
+
−
 
+
−
  <h2>The Antimeridian</h2>
+
−
  <p>Imagine a set of points clustered around the antimeridian at 180°E.
+
−
  A 2D algorithm will find a bounding box with longitudes extending all the way from around -180° to around +180°, even if the true <i>minimum</i> bounding box has a much smaller width.
+
−
  <p>A better approach is to compute the true minimum-width bounding box, even if it crosses the antimeridian.
+
−
  <div class="example"></div>
+
−
 
+
−
  <h2>Line Segments</h2>
+
−
  <p>D3 treats line segments as great-circle arcs: two successive points define the minor arc of the great circle going through those points.
+
−
  <p>Here we need to be even more careful than for points, since it matters whether or not the line crosses the antimeridian.
+
−
  <div class="example"></div>
+
−
 
+
−
  <p>In addition, intermediate points between the segment endpoints may have latitudes extending beyond the maximum or minimum endpoint latitude.
+
−
  <div class="example"></div>
+
−
 
+
−
  <h2>Polygons</h2>
+
−
  <p>A polygon may contain any number of holes, and the location of its interior depends on the winding order of its vertices.
+
−
  <p>In D3, if a polygon’s vertices wind around a point in a counter-clockwise direction, this means the point is outside the polygon.
+
−
  Otherwise, it is inside <span id="inside"></span>.
+
−
  <div class="example"></div>
+
−
 
+
−
  <p>If a polygons vertices wind around either pole, this means the longitudes have maximum extent from 180°W to +180°E.
+
−
  <div class="example"></div>
+
−
 
+
−
  <p>Lastly, a polygon may contain either pole, even if its vertices do not extend to the pole, in which case the latitude extent is extended to the pole.
+
−
  <div class="example"></div>
+
−
 
+
−
  <h2>Further Reading</h2>
+
−
  <p>The described behaviour is supported by <code>d3.geo.bounds</code> as of <a href="http://d3js.org">D3</a> version <a href="https://github.com/mbostock/d3/releases/tag/v3.1.7">3.1.7</a>.
+
−
</div>
+
−
 
+
−
<script src="../../d3.min.js?94db87"></script>
+
−
<script src="../topojson.min.js?1.1.1"></script>
+
−
<script src="app.min.js"></script>
+
  
 +
            // 指定图表的配置项和数据
 +
            var option = {
 +
                title: {
 +
                    text: ' '
 +
                },
 +
                tooltip: {},
 +
                legend: {
 +
                    data: ['Chip', 'Microdroplet', 'Paper']
 +
                },
 +
                radar: {
 +
                    // shape: 'circle',
 +
                    name: {
 +
                        textStyle: {
 +
                            color: '#fff',
 +
                            backgroundColor: '#999',
 +
                            borderRadius: 3,
 +
                            padding: [3, 5]
 +
                        }
 +
                    },
 +
                    indicator: [{
 +
                        name: 'Even Color',
 +
                        max: 5
 +
                    }, {
 +
                        name: 'Technical Realization',
 +
                        max: 5
 +
                    }, {
 +
                        name: 'Obvious Color',
 +
                        max: 5
 +
                    }, {
 +
                        name: 'Culture Environment',
 +
                        max: 5
 +
                    }, {
 +
                        name: 'Bacteria fixation',
 +
                        max: 5
 +
                    }, {
 +
                        name: 'Price',
 +
                        max: 5
 +
                    }, {
 +
                        name: 'Portable',
 +
                        max: 5
 +
                    }, ]
 +
                },
 +
                series: [{
 +
                    name: ' Radar graph for three potential loaders ',
 +
                    type: 'radar',
 +
                    // areaStyle: {normal: {}},
 +
                    data: [{
 +
                        value: [3, 3, 1, 1, 4, 4,5],
 +
                        name: 'Chip'
 +
                       
 +
                    }, {
 +
                        value: [1, 2, 2, 5, 5, 4,5],
 +
                        name: 'Microdroplet',
 +
                       
 +
                    }, {
 +
                        value: [4, 5, 5, 3, 3, 5,5],
 +
                        name: 'Paper',
 +
                     
 +
                    }]
 +
                }]
 +
            };
  
 +
            myChart.setOption(option);
 +
        </script>
  
 +
</body> 
 
</html>
 
</html>

Latest revision as of 22:15, 13 August 2018

做一个简单的图表