地图可视化

  • 示例
  • HTML
  • CSS
  • JS

更多有趣示例 尽在 知屋安砖社区

示例

HTML

<div class="wrapper"><h1>THREEJS - A breast cancer visualization by joni.giuro</h1><canvas width="750" height="500" id="source"></canvas><div id="container"></div><div class="dida"><h2 class="subtitle">Out of 100'000 women, how many were diagnosed with breast cancer?</h2><ul class="inline-list"><!--<li class="item"><a class="button" href="#" id="zero">10+</a></li>--><li class="item"><a class="button active" href="#" id="one">22-40</a></li><li class="item"><a class="button" href="#" id="two">41-57</a></li><li class="item"><a class="button" href="#" id="three">58-74</a></li><li class="item"><a class="button" href="#" id="four">75-92</a></li><li class="item"><a class="button" href="#" id="five">92+</a></li></ul></div><p>Nothing too fancy. I took the original image from here:<a href="http://www.worldwidebreastcancer.com/wp-content/uploads/2011/08/breastcancerstatsworldwide.jpg">Breast cancer stats</a>, converted it to grayscale, placed it on a canvas and read pixel information from it. Once I have collected the color informations I need, I then proceed to create a lot of cubes with threejs. After a while the bars get resized. That's the ideal breast cancer graph</p><div class="me"><ul class="block-list"><li class="item"><a href="http://zhereicome.com/experiments">Blog</a></li><li class="item"><a href="https://twitter.com/JoniGiuro">Twittur</a></li></ul></div></div>

CSS

@import url(https://fonts.googleapis.com/css?family=Alef);body {background: url('https://subtlepatterns.com/patterns/ticks.png') center center repeat;
}
.wrapper {font-family: Alef, Helvetica, Arial, sans-serif;text-align: center;color: #444;text-shadow: 0 1px white;
}a {color: #33b0d6;
}#source-image {display: none;
}#source {display: none;
}#container {position: relative;width: 750px;margin: 0 auto;
}canvas {margin: 0 auto;text-align: center;border: 1px solid black;background: rgba(255,255,255,.5);
}.inline-list {list-style: none;width: 740px;margin: 0 auto;padding: 0;
}.item {width: 15%;display: inline-block;
}.block-list .item {display: block;text-align: center;width: 100%;
}.button {display: block;padding: 10px;font-size: 20px;background: #444;color: #FFF;text-shadow: none;border-radius: 3px;text-decoration: none;font-weight: bold;
}.button:hover {background: #777;box-shadow: 0 0 5px rgba(0,0,0,.5);
}.button.active {background-color: #BADA55;
}

JS

var BreastCancer = {commonStuff : {tileSize: 15,heightGain: 1/30,width: 750,height: 420,sourceContext: null,dataArray: [],cubesArray: [],hReached : false,vReached : true,mouseDown : false,fighting : false,currentShow: 44,minShow: 22},doNotInit: function() {this.copySourceToCanvas();},copySourceToCanvas : function() {var self = this;var sourceCanvas = document.getElementById('source');var ctx = sourceCanvas.getContext('2d');this.commonStuff.sourceContext = ctx;var img = new Image();img.onload = function() {ctx.drawImage(img, 0, 0);self.collectData();};img.src = 'data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAUAAD/4QNvaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MkJFRjgwMDg0OTMyNjgxMTk5NENBMEE4RkY5M0UyQ0EiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjhGMzNFQTNCRUUzMTFFMkI5RjRCRjgzRDE4RjhFMkQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjhGMzNFQTJCRUUzMTFFMkI5RjRCRjgzRDE4RjhFMkQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMjgwMTE3NDA3MjA2ODExQjNBQUU0QjMxMTZGREJCMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyQkVGODAwODQ5MzI2ODExOTk0Q0EwQThGRjkzRTJDQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6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';},collectData : function() {var width = this.commonStuff.width;var height = this.commonStuff.height;var tileSize = this.commonStuff.tileSize;var ctx = this.commonStuff.sourceContext;var dataArray = this.commonStuff.dataArray;for ( var i = 0 ; i < width ; i += tileSize ) {for ( var q = 0 ; q < height ; q += tileSize ) {var pixelInfo = ctx.getImageData(i, q, 1, 1);dataArray.push({alpha: 255 - pixelInfo.data[2],column: i,row: q  });}}//this.boxesFlat();this.drawBoxes();},//THIS WAS THE SAME THING ON A 2D CANVAS, JUST FOR TESTING PURPOSESboxesFlat : function() {var data = this.commonStuff.dataArray;var arrayLength = data.length;var tileSize = this.commonStuff.tileSize;var width = this.commonStuff.width;var height = this.commonStuff.height;var row = -1;var ctx = this.commonStuff.sourceContext;for ( var i = 0 ; i < arrayLength ; i++ ) {var item = data[i];ctx.fillStyle = "rgb("+ (255 - item.alpha) + "," +(255 - item.alpha)+ "," + (255 - item.alpha)+ ")" ;ctx.fillRect( item.column, item.row, 4, 4 )}},//CREATE ALL THE BOXESdrawBoxes : function(  ) {var data = this.commonStuff.dataArray;var arrayLength = data.length;var tileSize = this.commonStuff.tileSize;var width = this.commonStuff.width;var height = this.commonStuff.height;var row = -1;var self = this;//THREEJS STUFF// set the scene sizevar WIDTH = 750,HEIGHT = 500// set some camera attributesvar VIEW_ANGLE = 45,ASPECT = WIDTH / HEIGHT,NEAR = 0.1,FAR = 10000;// get the DOM element to attach to// - assume we've got jQuery to handvar $container = $('#container');// create a WebGL renderer, camera// and a scenevar renderer = new THREE.WebGLRenderer();var camera =new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);var scene = new THREE.Scene();// add the camera to the scenescene.add(camera);// the camera starts at 0,0,0// so pull it backcamera.position.z = 700;camera.position.y = 0;//camera.lookAt(0,0,0)// start the rendererrenderer.setSize(WIDTH, HEIGHT);// attach the render-supplied DOM element$container.append(renderer.domElement);// create a point lightvar ambientLight =new THREE.AmbientLight(0x404040);var pointLight = new THREE.DirectionalLight(0xFFFFFF);// set its positionpointLight.position.x = 10;pointLight.position.y = 50;pointLight.position.z = 130;// add to the scenescene.add(pointLight);scene.add(ambientLight);var whiteMaterial =new THREE.MeshLambertMaterial({color: 0xFFFFFF});var greyMaterial =new THREE.MeshLambertMaterial({color: 0x444444});var cubeTopGeo = new THREE.CubeGeometry(800, 10, 10);var cubeTop = new THREE.Mesh( cubeTopGeo, greyMaterial);cubeTop.position.y = 250;cubeTop.position.z = -20;var cubeBottomGeo = new THREE.CubeGeometry(800, 10, 10);var cubeBottom = new THREE.Mesh( cubeTopGeo, greyMaterial);cubeBottom.position.y = -250;cubeBottom.position.z = -20;scene.add(cubeTop)scene.add(cubeBottom)//SCENEvar planeGeo = new THREE.PlaneGeometry(800, 500, 1, 1);var planeMesh = new THREE.Mesh( planeGeo, whiteMaterial);planeMesh.position.z = -20;scene.add(planeMesh)var otherMaterial =new THREE.MeshLambertMaterial({color: 0x2583db});// set up the sphere varsvar radius = 8,segments = 8,rings = 8;var geometry = new THREE.CubeGeometry( tileSize - 4, tileSize - 4, tileSize - 4 );var sphere = new THREE.SphereGeometry( tileSize - 10, 4, 4 );//LOOP TO CREATE ALL THE BLOCKS FROM THE DATA ARRAY PREVIOUSLY POPULATEDfor ( var i = 0 ; i < arrayLength ; i ++ ) {var item = data[i];// create the boxes materialvar material =new THREE.MeshLambertMaterial({//color: 0xEA80B0color: 0x444444});if(item.alpha > 30) {var mesh = new THREE.Mesh( geometry, material );} else {var mesh = new THREE.Mesh( sphere, otherMaterial );}//new mesh//position x//mesh.position.x = item.column - 350;mesh.position.x = 0;//position y//mesh.position.y = (20 - (item.row - 200));mesh.position.y = 0;//if it is not sea/*if(item.alpha > 30) {mesh.position.z = ((item.alpha ) * this.commonStuff.heightGain) * 10;mesh.scale.set(1 ,1 , (item.alpha + .1) * this.commonStuff.heightGain);}*///had to add .1 because inverting a matrix3 thing with 0 was logging an errorthis.commonStuff.cubesArray.push({mesh: mesh,positionX : item.column - 370,positionY :(20 - (item.row - 180)),//animatable: item.alpha < 10,alpha: 100/255 * item.alpha})// add the box to the scenescene.add(mesh);}var m = 0;var loop = this.commonStuff.cubesArray.length;var scaleCancer = false;//Didn't use request animation, don't even know why..var t = window.setInterval( function() {m++;// animation loop!for ( var i = 0 ; i < loop ; i++ ) {var current = self.commonStuff.cubesArray[i];if( m == 30 ) {self.commonStuff.hReached = true;self.commonStuff.vReached = false;}if( m == 80 ) {self.commonStuff.vReached = true;}if (m == 150) {scaleCancer = true;}if( !self.commonStuff.hReached ) {current.mesh.position.x = current.mesh.position.x + ( current.positionX - current.mesh.position.x ) / 10;}if( !self.commonStuff.vReached ) {current.mesh.position.y = current.mesh.position.y + ( current.positionY - current.mesh.position.y ) / 10;}if ( current.alpha < self.commonStuff.currentShow && current.alpha > self.commonStuff.minShow) {//console.log('ye')current.mesh.scale.z = current.mesh.scale.z + ( current.alpha / 10 - current.mesh.scale.z) / 20 ;current.mesh.material.color.setHex(0xEA80B0);} else {if (current.alpha > 12 ) {current.mesh.scale.z = current.mesh.scale.z + ( 1 - current.mesh.scale.z) / 20;current.mesh.material.color.setHex(0x444444);} else {current.mesh.position.z = Math.sin( (m + current.mesh.position.x) / 20 ) * 8}}}if (self.commonStuff.mouseDown) {camera.position.z -= 2;}camera.lookAt( scene.position );renderer.render(scene, camera);}, 10);//LISTENERSvar container = document.getElementById('container');//var zero = document.getElementById('zero');var one = document.getElementById('one');var two = document.getElementById('two');var three = document.getElementById('three');var four = document.getElementById('four');var five = document.getElementById('five');/*zero.onmousedown = function(e) {self.commonStuff.minShow = 0;self.commonStuff.currentShow = 10;e.preventDefault();};*/one.onmousedown = function(e) {self.commonStuff.minShow = 22;self.commonStuff.currentShow = 44;$('.button').removeClass('active');$(this).addClass('active');e.preventDefault();};two.onmousedown = function(e) {self.commonStuff.minShow = 44;self.commonStuff.currentShow = 57;$('.button').removeClass('active');$(this).addClass('active');e.preventDefault();};three.onmousedown = function(e) {self.commonStuff.minShow = 57;self.commonStuff.currentShow = 74;$('.button').removeClass('active');$(this).addClass('active');e.preventDefault();};four.onmousedown = function(e) {self.commonStuff.minShow = 74;self.commonStuff.currentShow = 92;$('.button').removeClass('active');$(this).addClass('active');e.preventDefault();};five.onmousedown = function(e) {self.commonStuff.minShow = 92;self.commonStuff.currentShow = 150;$('.button').removeClass('active');$(this).addClass('active');e.preventDefault();};container.onmousedown = function(e) {//self.commonStuff.mouseDown = true;self.commonStuff.currentShow = Math.random() * 100;}container.onmouseup = function(e) {//self.commonStuff.mouseDown = false;}//Camera movementcontainer.onmousemove = function(e) {camera.position.x = (e.offsetX - 350) / 2;camera.position.y = (e.offsetY - 250) / 2;}}}//DIDN'T USE INIT because I don't want to init a friggin' cancer :(BreastCancer.doNotInit();

疫情可视化（visualization）相关推荐

  1. Python新冠疫情可视化分析系统 计算机专业毕业设计源码08504

    摘 要 文中首先对新冠疫情可视化分析的项目需求进行了背景分析,接着介绍了项目的总体设计思路,然后具体阐述了疫情数据库的设计.疫情数据的查询.疫情数据的展示,并分析了核心代码.文中利用MySQL数据库存 ...

  2. 记录自己三天速成django+html制作国内疫情可视化平台的过程（二）

    3.可视化页面 3.1设计 经过(一)中的操作,我们已经将登录/注册的功能基本实现.下面就是设计可视化页面了,一共会画8张图,我初步的设计是这样的: {% load static %} <!DO ...

  3. 大数据疫情可视化平台1_基于Hadoop3.2.1、Hive3.1.2、搭建疫情信息可视化系统

    前言 项目效果展示 项目源码免费获得请私信博主,绝对免费! 目录 Linux基础命令:往期博客Linux课堂篇3_Linux目录结构.快捷键.常用基础命令 Hadoop3.2.1介绍与环境搭建 Hiv ...

  4. 【实战篇】39 # 如何实现世界地图的新冠肺炎疫情可视化？

    说明 [跟月影学可视化]学习笔记. 世界地图新冠肺炎疫情可视化 下面将实现世界地图新冠肺炎疫情可视化.数据用的是从 2020 年 1 月 22 日到 3 月 19 日这些天的新冠肺炎疫情进展.效果类似 ...

  5. python爬虫疫情可视化

    学习了pyecharts后来小试牛刀下,来做一个中国疫情可视化 首先安装pyecharts库 1.可以直接在pycharm上装 2.也可以更快命令行装,win+r cmd pip install -i ...

  6. 全球疫情可视化实时更新

    全球疫情可视化实时更新 1. 配置 boostrap为前端框架,echarts可视化,jQuery获取.处理数据 2. 思路 前端框架搭好,这里不细说 后端用JQuery从API中获取数据 3. 如何 ...

  7. 数据可视化之疫情可视化

    一 前言 新型冠状病毒肺炎(COVID-19,简称"新冠肺炎")疫情肆虐全球多个国家,2020年3月11日,世界卫生组织 (WHO) 正式宣布将新冠肺炎列为全球性大流行病. 在全球 ...

  8. 基于Springboot的新冠疫情可视化管理系统（可视化展示+后台管理功能）

    这里写自定义目录标题 基于Springboot的新冠疫情可视化管理系统 基础环境: 功能快捷键 实现效果图 源码查看 基于Springboot的新冠疫情可视化管理系统 本项目有基于Springboot ...

  9. 疫情数据可视化-湖北省疫情可视化软件设计大赛作品

    湖北省疫情监测中心(疫情数据可视化)目录 前言 一.数据可视化 二.疫情可视化 湖北省疫情监测中心 ① 主要框架 ② 数据爬取 ③ 疫情可视化模块(疫情监测模块) ④ 便民信息可视化模块(检测信息模块 ...

  10. Flask+Echarts搭建全国疫情可视化大屏

    Flask+Echarts搭建全国疫情可视化大屏 1.前言 2.实现 2.1 搭建flask应用 2.2 编写html及其对应css代码 2.3 可视化展示 2.3.1 左上角板块 2.3.2 中间上 ...

最新文章

  1. 111.二叉树的最小深度
  2. 开发日记-20190821 关键词 读书笔记《掌控习惯》DAY 1
  3. Spring Cloud【Finchley】-09Feign使用Hystrix
  4. spring AOP解析之xml方式详解
  5. SAP Spartacus cxOutlet里的元数据存储，outlet名称和待渲染Component的映射关系
  6. 方向向量转欧拉角_欧拉角、旋转向量和旋转矩阵的相互转换
  7. AngularJS：表达式
  8. 服务器虚拟化之－——VMware组件与功能。
  9. 带用户名和密码的GitHub链接
  10. 新电脑怎么分盘_新买的笔记本电脑收货后，该如何验机？
  11. java 访问权限控制
  12. mysql查阅建立的库_mysql 怎么查看创建的数据库和表
  13. 查看MySQL数据库大小
  14. 赢在电子商务网站制作与营销：B2C版
  15. Linux中vi的退出命令
  16. 微信小程序订阅消息 微信公众号模板消息
  17. c语言if语句用法总结,C语言if语句总结.doc
  18. 今天母亲节，作为程序员，我是这样表达爱的……
  19. 【第005问 Unity中如何显示三角形中心法线？】
  20. 上海万国驾校 科目三考试

热门文章

  1. 关于微星主板官网下载网卡驱动后，网络适配器消失的问题
  2. Linux系统的注销与关闭
  3. Session注销方式
  4. phpoffice 编辑excel文档
  5. 苹果自带地图定位 经纬度
  6. Axure交互式设计
  7. 【GANs学习笔记】（十六）CGAN、TRIPLEGAN
  8. 经典算法研究系列：八、再谈启发式搜索算法
  9. wmware16如何安装win7---超详细
  10. 服务器打不开微信怎么办,手机wifi只能用微信,打不开网页怎么处理?