数据可视化的经典案例，数据可视化案例及代码html

欧气 2024年09月27日 19:06 4 0

本文目录导读：

数据可视化的经典案例
代码 html

数据可视化案例及代码 html

数据可视化是将数据以图形、图表等直观的形式展示出来，以便更好地理解和分析数据，它可以帮助人们快速发现数据中的模式、趋势和异常，从而做出更明智的决策，在当今数字化时代，数据可视化已经成为了数据分析和处理中不可或缺的一部分，本文将介绍一些数据可视化的经典案例，并提供相应的代码 html，帮助读者更好地理解数据可视化的原理和应用。

数据可视化的经典案例

（一）全球人口分布地图

全球人口分布地图是一个非常经典的数据可视化案例，它通过将全球各个国家和地区的人口数量用不同的颜色和大小表示出来，直观地展示了全球人口的分布情况，这种可视化方式可以帮助人们快速了解全球人口的分布特点，以及不同地区之间的人口差异。

（二）股票价格走势图

股票价格走势图是金融领域中常用的数据可视化方式，它通过将股票价格随时间的变化用折线图或柱状图表示出来，直观地展示了股票价格的走势情况，这种可视化方式可以帮助投资者快速了解股票价格的变化趋势，以及股票价格的波动情况。

（三）网站流量实时监测图

网站流量实时监测图是网站运营中常用的数据可视化方式，它通过将网站的访问量、页面浏览量、停留时间等指标随时间的变化用折线图或柱状图表示出来，直观地展示了网站的流量情况，这种可视化方式可以帮助网站运营人员快速了解网站的流量变化趋势，以及网站的用户行为情况。

代码 html

（一）全球人口分布地图

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>全球人口分布地图</title>
</head>
<body>
 <script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
 <script>
 // 创建地图
 var map = L.map('map').setView([0, 0], 2);
 // 添加底图
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
 maxZoom: 18,
 minZoom: 3,
 zoomControl: false
 }).addTo(map);
 // 添加人口数据
 var populationData = {
 "中国": 1400050000,
 "印度": 1354051854,
 "美国": 333282759,
 "印度尼西亚": 273523615,
 "巴西": 212656788,
 "巴基斯坦": 200813818,
 "尼日利亚": 200612370,
 "孟加拉国": 167455035,
 "俄罗斯": 145934462,
 "墨西哥": 128932753
 };
 // 创建颜色映射
 var colorScale = d3.scaleLinear()
.domain([0, d3.max(Object.values(populationData))])
.range(['#f7fcfd', '#00538a']);
 // 添加 choropleth 图层
 L.choropleth({
 data: populationData,
 columns: ['country', 'population'],
 keyOn: 'feature.properties.name',
 valueProperty: 'population',
 fillColor: function(feature, layer) {
 return colorScale(feature.properties.population);
 },
 fillOpacity: 0.7,
 lineOpacity: 0.2,
 legend: true
 }).addTo(map);
 // 添加图例
 var legend = L.control({ position: 'bottomright' });
 legend.onAdd = function(map) {
 var div = L.DomUtil.create('div', 'info legend'),
 grades = [0, 100000000, 200000000, 300000000, 400000000, 500000000, 600000000, 700000000, 800000000, 900000000, 1000000000],
 labels = [];
 for (var i = 0; i < grades.length; i++) {
 div.innerHTML +=
 '<i style="background:'+ colorScale(grades[i]) +'"></i> '+
 grades[i] + (grades[i + 1]? '&ndash;' + grades[i + 1] +'<br>' : '+');
 }
 return div;
 };
 legend.addTo(map);
 </script>
 <div id="map" style="width: 100%; height: 500px;"></div>
</body>
</html>

在上述代码中，我们首先引入了 Leaflet 库，然后创建了一个地图对象，并添加了底图，我们定义了一个人口数据对象，其中包含了各个国家和地区的人口数量，我们创建了一个颜色映射，将人口数量映射到不同的颜色，我们添加了一个 choropleth 图层，将人口数据显示在地图上，并添加了一个图例。

（二）股票价格走势图

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>股票价格走势图</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.6.0/plotly.min.js"></script>
</head>
<body>
 <div id="graph"></div>
 <script>
 // 股票价格数据
 var stockPrices = [
 { x: [1, 2, 3, 4, 5], y: [10, 15, 12, 18, 20] },
 { x: [1, 2, 3, 4, 5], y: [25, 20, 22, 16, 25] }
 ];
 // 创建股票价格走势图
 Plotly.newPlot('graph', stockPrices);
 </script>
</body>
</html>

在上述代码中，我们首先引入了 Plotly.js 库，然后创建了一个股票价格数据对象，其中包含了两个股票的价格数据，我们使用 Plotly.newPlot() 函数创建了一个股票价格走势图，并将股票价格数据显示在图上。

（三）网站流量实时监测图

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>网站流量实时监测图</title>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.7.1/chart.min.js"></script>
</head>
<body>
 <canvas id="trafficChart" width="400" height="200"></canvas>
 <script>
 // 网站流量数据
 var trafficData = {
 labels: ['上午', '中午', '下午', '晚上'],
 datasets: [
 { label: '访问量', data: [100, 200, 150, 250], backgroundColor: 'rgba(75, 192, 192, 0.2)' },
 { label: '页面浏览量', data: [50, 100, 75, 125], backgroundColor: 'rgba(255, 99, 132, 0.2)' },
 { label: '停留时间', data: [30, 40, 35, 45], backgroundColor: 'rgba(54, 162, 235, 0.2)' }
 ]
 };
 // 创建网站流量实时监测图
 var ctx = document.getElementById('trafficChart').getContext('2d');
 new Chart(ctx, {
 type: 'bar',
 data: trafficData,
 options: {
 scales: {
 y: {
 beginAtZero: true
 }
 }
 }
 });
 // 模拟实时更新数据
 setInterval(function() {
 // 生成随机数据
 var newData = {
 labels: ['上午', '中午', '下午', '晚上'],
 datasets: [
 { label: '访问量', data: [Math.floor(Math.random() * 200) + 100, Math.floor(Math.random() * 200) + 100, Math.floor(Math.random() * 200) + 100, Math.floor(Math.random() * 200) + 100], backgroundColor: 'rgba(75, 192, 192, 0.2)' },
 { label: '页面浏览量', data: [Math.floor(Math.random() * 150) + 50, Math.floor(Math.random() * 150) + 50, Math.floor(Math.random() * 150) + 50, Math.floor(Math.random() * 150) + 50], backgroundColor: 'rgba(255, 99, 132, 0.2)' },
 { label: '停留时间', data: [Math.floor(Math.random() * 50) + 30, Math.floor(Math.random() * 50) + 30, Math.floor(Math.random() * 50) + 30, Math.floor(Math.random() * 50) + 30], backgroundColor: 'rgba(54, 162, 235, 0.2)' }
 ]
 };
 // 更新图表数据
 Chart.getChart(ctx).data = newData;
 Chart.getChart(ctx).update();
 }, 5000);
 </script>
</body>
</html>

在上述代码中，我们首先引入了 jQuery 和 Chart.js 库，然后创建了一个网站流量数据对象，其中包含了四个时间段的访问量、页面浏览量和停留时间，我们使用 Chart.js 库创建了一个网站流量实时监测图，并将网站流量数据显示在图上，我们使用 setInterval() 函数模拟实时更新数据，并更新图表数据。

数据可视化是一种非常有效的数据分析和处理方式，它可以帮助人们快速发现数据中的模式、趋势和异常，从而做出更明智的决策，本文介绍了一些数据可视化的经典案例，并提供了相应的代码 html，希望对读者有所帮助。

标签： #数据可视化 #经典案例