<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高考数据展示</title>
</head>
<!-- cdn -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>
<!-- cdn -->
<!--Plugin CSS file with desired skin-->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css" />
<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--Plugin JavaScript file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
<body>
<div class="w90">
<div id="p2"></div>
<div class="text">
<h1>Lorem ipsum dolor sit amet </h1>
<p> consectetur adipisicing elit. Aperiam fugit dolores eveniet aliquam
consequuntur maiores in rem, sunt explicabo animi!</p>
</div>
</div>
<div class="w90">
<div class="text">
<div class="wrange">
<input type="text" class="js-range-slider" name="my_range" value="" />
</div>
<h1>Lorem ipsum dolor sit amet </h1>
<p> consectetur adipisicing elit. Aperiam fugit dolores eveniet aliquam
consequuntur maiores in rem, sunt explicabo animi!</p>
</div>
<div id="p1"></div>
</div>
<div id="map"></div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
}
.wrange{
width: 80%;
margin: auto;
margin-top: 10px;
margin-bottom: 60px;
}
.w90 {
background-color: #f3eaea;
width: 90vw;
min-width: 1200px;
height: 70vh;
margin: 40px auto;
display: flex;
}
.text {
display: block;
text-align: center;
margin: 40px;
}
#p1 {
height: 100%;
flex: 1;
background-color: rgb(213, 230, 224);
}
#p2 {
height: 100%;
flex: 1;
background-color: rgb(197, 151, 180);
}
#map {
background-color: #ebe4e4;
width: 90vw;
min-width: 1200px;
height: 80vh;
margin: auto;
}
</style>
<script src="./js/d3.min.js"></script>
<script src="./js/d3-tip.js"></script>
<script src="./js/index.js"></script>
</html>
d3_折线_柱状_地图.7z
需积分: 14 77 浏览量
2020-10-19
09:39:04
上传
评论 1
收藏 224KB 7Z 举报
d3_折线_柱状_地图.7z （8个子文件） 
d3_折线_柱状_地图 data 
各省数据.csv 2KB 全国.json 3.18MB 历年录取率.csv 1KB js d3-tip.js 9KB index.js 11KB d3.min.js 242KB
index.html 3KB .vscode settings.json 42B资源评论
