devbox
酷酷是懒虫
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

数据可视化 地图和音乐可视化_实践6 地图可视化与音乐可视化 csdn

作者：酷酷是懒虫 | 2024-08-22 10:05:38

赞

踩

实践6 地图可视化与音乐可视化 csdn

  1. <html>
  2. <head>
  3.     <meta charSet="utf-8">
  4.     <title>基于GeoJSON绘制北京地图</title>
  5.     <style>
  6.         .province {
  7.             stroke: black;
  8.             stroke-width: 1px;
  9.         }
  10.  
  11.         .southchinasea {
  12.             stroke: black;
  13.             stroke-width: 1px;
  14.             fill: red;
  15.         }
  16.         body {
  17.             background-image: url("https://img.mp.itc.cn/q_70,c_zoom,w_640/upload/20161019/b2a9d777c3734024bae19464c9f487ba_th.jpeg");
  18.             background-size: cover;
  19.             background-position: center;
  20.         }
  21.  
  22.     </style>
  23. </head>
  24. <body>
  25. <script src="https://d3js.org/d3.v7.min.js" charSet="utf-8"></script>
  26. <script>
  27.     var width = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) * 0.98;
  28.     var height = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) * 2;
  29.  
  30.     var svg = d3.select("body").append("svg")
  31.         .attr("width", width)
  32.         .attr("height", height);
  33.  
  34.     var projection = d3.geoMercator()
  35.         .center([116.3956, 39.93])
  36.         .scale(10000)
  37.         .translate([width / 2, height / 2]);
  38.  
  39.     //定义地形路径生成器
  40.     var geoPath = d3.geoPath()
  41.         .projection(projection);	//设定投影
  42.  
  43.     console.log(geoPath);
  44.     //颜色比例尺
  45.     var color = d3.schemePaired;           //d3.schemeBlues[9];       //d3.schemeCategory10;
  46.     console.log(color);
  47.  
  48.     //请求ChinaGeo.json
  49.     d3.json("hebei.json").then(function (data) {           //100000_full.json  A2_100000_full.json
  50.  
  51.         console.log(data);
  52.         var scaleColor = d3.scaleOrdinal()
  53.             .domain(d3.range(data.features.length))
  54.             .range(d3.schemeCategory10);
  55.  
  56.         var groups = svg.append("g");
  57.  
  58.         groups.selectAll("path")
  59.             .data(data.features)
  60.             .enter()
  61.             .append("path")
  62.             .attr("class", "province")
  63.             .attr("stroke", "black")
  64.             .attr("fill", (d, i) => color[i % 12])
  65.             .attr("d", (d, i) => geoPath(d));	//使用路径生成器
  66.  
  67.         var texts = svg.selectAll(".texts")
  68.             .data(data.features)
  69.             .enter()
  70.             .append("text")
  71.             .attr("class", "texts")
  72.             .text(function (d, i) {
  73.                 return d.properties.name + "-" + i;
  74.             })
  75.             .attr("transform", function (d) {
  76.                 var centroid = geoPath.centroid(d),
  77.                     x = centroid[0],
  78.                     y = centroid[1];
  79.                 return "translate(" + x + ", " + y + ")";
  80.             })
  81.             .attr('fill', '999')
  82.             .attr("font-size", "35px");
  83.         svg.append("text")
  84.             .attr("font-size", "40px")
  85.             .attr("font-family", "Fantasy")
  86.             .attr("text-anchor", "middle")
  87.             .attr("x", w / 2)
  88.             .attr("y", h / 17)
  89.             .text("河北省地图");
  90.     });
  91. </script>
  92. </body>
  93. </html>

 音乐可视化

  1.  
  2. <html>
  3. <head>
  4.     <meta charSet="utf-8">
  5.     <title>基于D3的音乐可视化</title>
  6. </head>
  7. <body>
  8. <audio id="audioElement" src="sb.mp3" controls="controls"></audio>
  9. <script src="d3.v3.min.js" charset="utf-8"></script>
  10. <script>
  11.     var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  12.     var audioElement = document.getElementById('audioElement');
  13.     var audioSrc = audioCtx.createMediaElementSource(audioElement);
  14.     var analyser = audioCtx.createAnalyser();
  15.  
  16.     //绑定分析器到音频媒体元素
  17.     audioSrc.connect(analyser);
  18.     audioSrc.connect(audioCtx.destination);
  19.  
  20.     var frequencyData = new Uint8Array(100);
  21.     var width = 1200;
  22.     var height =500;
  23.     var innerR = 80;//内半径
  24.     var r = Math.floor(Math.random() * 255);
  25.     var g = Math.floor(Math.random() * 255);
  26.     var b = Math.floor(Math.random() * 255);
  27.     var dataset=new Array(100);
  28.     for(var i=0;i<dataset.length;i++){
  29.         dataset[i]=new Array();
  30.         dataset[i][0]=120;
  31.         dataset[i][1]=100+Math.floor(Math.random()*(255-100));
  32.     }
  33.     //转化数据为适合生成饼图的对象数组
  34.     var pie = d3.layout.pie()
  35.         .value(function(d){return d[0];});
  36.  
  37.     var arcPath=d3.svg.arc()//内外半径
  38.         .innerRadius(innerR);
  39.  
  40.     var svg=d3.select("body")
  41.         .append("svg")
  42.         .attr("width",width)
  43.         .attr("height",height);
  44.  
  45.     var arcs=svg.selectAll("path")
  46.         .data(pie(dataset))//原生数据-->起止角度
  47.         .enter()
  48.         .append("path")
  49.         .attr("transform", "translate(" + width/2 + "," + height/2 + ")")
  50.         .attr("fill",function(d,i){//填充颜色
  51.             return 'rgb(0,152,'+dataset[i][1]+')';
  52.         })
  53.         .attr("stroke","#FFF")
  54.         .attr("d",function(d,i){
  55.             arcPath.outerRadius(dataset[i][1]);
  56.             return arcPath(d);   //起止角度(内外半径)——>路径的参数
  57.         });
  58.  
  59.     // 连续循环更新
  60.     function renderChart() {
  61.         requestAnimationFrame(renderChart);
  62.         analyser.getByteFrequencyData(frequencyData);
  63.         //console.log(frequencyData);
  64.         svg.selectAll('path')
  65.             .data(pie(dataset))
  66.             .attr("fill",function(d,i){//填充颜色
  67.                 return 'rgb(0,0,'+frequencyData[i]+')';
  68.             })
  69.             .attr("d",function(d,i){
  70.                 arcPath.outerRadius(frequencyData[i]+ innerR);
  71.                 return arcPath(d);
  72.             });
  73.     }
  74.     renderChart();
  75. </script>
  76. </body>
  77. </html>

 canvas特效

 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charSet="utf-8">
  5.     <title>浮雕和雕刻特效</title>
  6. </head>
  7. <style>
  8.     body {
  9.         text-align: center;
  10.         background-color: #f9f9f9;
  11.         font-size: 16px;
  12.         font-family: "Microsoft YaHei", sans-serif;
  13.     }
  14.  
  15.     button {
  16.         margin-top: 20px;
  17.         padding: 10px;
  18.         background-color: #4CAF50;
  19.         color: white;
  20.         border: none;
  21.         cursor: pointer;
  22.         border-radius: 3px;
  23.         box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  24.         transition: all 0.2s ease-in-out;
  25.     }
  26.  
  27.     button:hover {
  28.         transform: scale(1.05);
  29.     }
  30. </style>
  31. <body>
  32. <center>
  33.     <h2>浮雕和雕刻特效</h2>
  34.     <button id="embossBtn">浮雕</button>
  35.     <button id="engraveBtn">雕刻</button>
  36.     <br/><br/>
  37.     <canvas id="myCanvas" width="600" height="400" style="border:1px solid #c3c3c3;"></canvas>
  38.     <script type="text/javascript">
  39.         var c=document.getElementById("myCanvas");
  40.         var cxt=c.getContext("2d");
  41.         var img=new Image()
  42.         img.src="a.jpg"
  43.         img.onload = function () {
  44.             cxt.drawImage(img, 0, 0);
  45.         }
  46.  
  47.         function emboss() {
  48.             var imageData = cxt.getImageData(0, 0, c.width, c.height);
  49.             var data = imageData.data;
  50.  
  51.             for (var i = 0; i < data.length; i += 4) {
  52.                 if (i < c.width * 4 || i > data.length - c.width * 4) {
  53.                     continue;
  54.                 }
  55.  
  56.                 var x = (i / 4) % c.width;
  57.                 if (x === 0 || x === c.width - 1) {
  58.                     continue;
  59.                 }
  60.  
  61.                 var r1 = data[i - c.width * 4 + 0];
  62.                 var g1 = data[i - c.width * 4 + 1];
  63.                 var b1 = data[i - c.width * 4 + 2];
  64.  
  65.                 var r2 = data[i - 4 + 0];
  66.                 var g2 = data[i - 4 + 1];
  67.                 var b2 = data[i - 4 + 2];
  68.  
  69.                 var r3 = data[i + 4 + 0];
  70.                 var g3 = data[i + 4 + 1];
  71.                 var b3 = data[i + 4 + 2];
  72.  
  73.                 var r4 = data[i + c.width * 4 + 0];
  74.                 var g4 = data[i + c.width * 4 + 1];
  75.                 var b4 = data[i + c.width * 4 + 2];
  76.  
  77.                 var gray1 = (r1 + g1 + b1) / 3;
  78.                 var gray2 = (r2 + g2 + b2) / 3;
  79.                 var gray3 = (r3 + g3 + b3) / 3;
  80.                 var gray4 = (r4 + g4 + b4) / 3;
  81.  
  82.                 var xDiff = (gray2 + gray2 + gray2 - gray4 - gray4 - gray4);
  83.                 var yDiff = (gray1 + gray1 + gray1 - gray3 - gray3 - gray3);
  84.                 var gray = parseInt(Math.sqrt(xDiff * xDiff + yDiff * yDiff) * 0.8);
  85.                 if (gray > 255) {
  86.                     gray = 255;
  87.                 }
  88.  
  89.                 data[i + 0] = gray;
  90.                 data[i + 1] = gray;
  91.                 data[i + 2] = gray;
  92.             }
  93.  
  94.             cxt.putImageData(imageData, 0, 0);
  95.         }
  96.  
  97.         function engrave() {
  98.             var imageData = cxt.getImageData(0, 0, c.width, c.height);
  99.             var data = imageData.data;
  100.  
  101.             for (var i = 0; i < data.length; i += 4) {
  102.                 data[i + 0] = 255 - data[i + 0];
  103.                 data[i + 1] = 255 - data[i + 1];
  104.                 data[i + 2] = 255 - data[i + 2];
  105.             }
  106.  
  107.             cxt.putImageData(imageData, 0, 0);
  108.         }
  109.  
  110.         var embossBtn = document.getElementById('embossBtn');
  111.         var engraveBtn = document.getElementById('engraveBtn');
  112.  
  113.         embossBtn.addEventListener('click', function() {
  114.             emboss();
  115.         });
  116.  
  117.         engraveBtn.addEventListener('click', function() {
  118.             engrave();
  119.         });
  120.     </script>
  121. </center>
  122. </body>
  123. </html>

灰度等高线

 

  1. <html>
  2. <head>
  3.     <meta charSet="utf-8">
  4.     <script src="https://d3js.org/d3.v5.min.js"></script>
  5. </head>
  6. <style>
  7.     body {
  8.         text-align: center;
  9.         background-color: #f9f9f9;
  10.         font-size: 16px;
  11.         font-family: "Microsoft YaHei", sans-serif;
  12.     }
  13.  
  14.     button {
  15.         margin-top: 20px;
  16.         padding: 10px;
  17.         background-color: #4CAF50;
  18.         color: white;
  19.         border: none;
  20.         cursor: pointer;
  21.         border-radius: 3px;
  22.         box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  23.         transition: all 0.2s ease-in-out;
  24.     }
  25.  
  26.     button:hover {
  27.         transform: scale(1.05);
  28.     }
  29.  
  30.     svg {
  31.         display: block;
  32.         margin: 0 auto;
  33.         border: 1px solid #ddd;
  34.         box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  35.     }
  36. </style>
  37. <body>
  38. <center>
  39.     <h2>使用D3绘制等高线图</h2>
  40.     <hr width=70%></hr>
  41.     <button id="gray">原图</button>
  42.     <button id="contour">登高线图</button>
  43.     <svg id="mySvg" width="600" height="400" style="border:1px solid #c3c3c3;"></svg>
  44.     <script type="text/javascript">
  45.         var svg=d3.select("#mySvg");
  46.         var img=new Image()
  47.         img.src="unknow.jpg"
  48.         img.onload = function () {
  49.             var canvas = document.createElement("canvas");
  50.             canvas.width = this.width;
  51.             canvas.height = this.height;
  52.             var ctx = canvas.getContext("2d");
  53.             ctx.drawImage(this, 0, 0);
  54.             var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
  55.  
  56.             // 灰度化处理
  57.             var grayData = new Array(canvas.width * canvas.height);
  58.             for (var i = 0; i < grayData.length; i++) {
  59.                 grayData[i] = (data[i * 4 + 0] + data[i * 4 + 1] + data[i * 4 + 2]) / 3.0 / 256.0;
  60.             }
  61.  
  62.             // 定义颜色比例尺
  63.             var colorScale = d3.scaleSequential()
  64.                 .domain([0, 64])
  65.                 .interpolator(d3.interpolateGreens);
  66.  
  67.             // 初始化等高线数据
  68.             var contours = d3.contours()
  69.                 .size([canvas.width, canvas.height])
  70.                 .thresholds(d3.range(0, 1, 0.1))(dataToValues(data));
  71.  
  72.             // 绘制登高线图
  73.             function drawContour() {
  74.                 svg.selectAll("path").remove();
  75.                 svg.selectAll("path")
  76.                     .data(contours)
  77.                     .enter().append("path")
  78.                     .attr("d", d3.geoPath(d3.geoIdentity().scale(5)))
  79.                     .attr("fill", function(d) { return colorScale(d.value); })
  80.                     .attr("stroke", "red")
  81.                     .attr("stroke-width", 1);
  82.             }
  83.  
  84.             // 绘制灰度图
  85.             function drawGray() {
  86.                 svg.selectAll("path").remove();
  87.                 svg.append("image")
  88.                     .attr("xlink:href", canvas.toDataURL())
  89.                     .attr("width", canvas.width)
  90.                     .attr("height", canvas.height);
  91.             }
  92.  
  93.             // 将原始数据转换为等高线数据
  94.             function dataToValues(data) {
  95.                 var values = new Array(canvas.width * canvas.height);
  96.                 for (var i = 0; i < values.length; i++) {
  97.                     values[i] = grayData[i];
  98.                 }
  99.                 return values;
  100.             }
  101.  
  102.             // 监听按钮点击事件
  103.             d3.select("#gray").on("click", drawGray);
  104.             d3.select("#contour").on("click", drawContour);
  105.  
  106.             // 默认绘制等高线图
  107.             drawContour();
  108.         }
  109.     </script>
  110. </center>
  111. </body>
  112. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/酷酷是懒虫/article/detail/1015807
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号