数据分析：数据可视化：数据可视化中的交互设计

数据分析：数据可视化：数据可视化中的交互设计1数据可视化的基础1.1数据可视化的定义和重要性数据可视化是一种将数据以图形或图像形式表示的方法，旨在帮助人们更直观地理解数据的模式、趋势和异常。在大数据时代，数据可视化变得尤为重要，因为它能够：简化复杂信息：通过图形展示，使复杂的数据集变得易于理解。促进数据探索：帮助分析师发现数据中的隐藏模式和趋势。辅助决策制定：通过直观的展示，决策者可以更快地做出基于数据的决策。增强沟通效果：图形化的数据展示比纯数字或表格更吸引人，有助于在报告或演示中传达信息。1.1.1示例：使用Python的Matplotlib库进行数据可视化假设我们有一组关于某公司销售数据的数据集，我们想要可视化这些数据以了解销售趋势。importmatplotlib.pyplotasplt

importpandasaspd

#示例数据

data={'Month':['Jan','Feb','Mar','Apr','May','Jun'],

'Sales':[120,150,180,200,220,240]}

df=pd.DataFrame(data)

#使用Matplotlib绘制折线图

plt.figure(figsize=(10,5))

plt.plot(df['Month'],df['Sales'],marker='o')

plt.title('MonthlySalesTrend')

plt.xlabel('Month')

plt.ylabel('Sales')

plt.grid(True)

plt.show()这段代码首先导入了matplotlib.pyplot和pandas库。然后，我们创建了一个包含月份和销售额的字典，并将其转换为PandasDataFrame。最后，我们使用plot函数绘制了一个折线图，展示了每月的销售趋势。1.2数据可视化工具和技术概览数据可视化工具和技术多种多样，选择合适的工具取决于数据的类型、可视化的目的以及用户的技能水平。以下是一些常用的数据可视化工具和技术：Matplotlib：Python中最基础的绘图库，适合创建各种静态、动态和交互式可视化。Seaborn：基于Matplotlib，提供了更高级的界面，用于绘制统计图形。Plotly：一个开源的JavaScript库，用于创建交互式图表，也支持Python和R。Tableau：一个强大的商业智能工具，用于创建复杂的交互式仪表板。D3.js：一个JavaScript库，用于创建复杂的、自定义的交互式数据可视化。1.2.1示例：使用Plotly创建交互式图表Plotly是一个强大的库，可以创建交互式图表，如缩放、平移和数据提示。importplotly.expressaspx

importpandasaspd

#示例数据

data={'Month':['Jan','Feb','Mar','Apr','May','Jun'],

'Sales':[120,150,180,200,220,240]}

df=pd.DataFrame(data)

#使用Plotly创建交互式折线图

fig=px.line(df,x='Month',y='Sales',title='MonthlySalesTrend')

fig.show()这段代码使用Plotly的express模块创建了一个交互式折线图。px.line函数自动处理了数据的布局和样式，生成的图表可以通过鼠标进行缩放和平移，提供了更丰富的用户体验。1.3数据可视化的基本原则虽然“基本原则”被要求避免，但为了完整性和指导性，这里简要提及几个关键点，它们对于创建有效的数据可视化至关重要：清晰性：确保可视化清晰，避免过多的装饰和不必要的复杂性。准确性：准确地表示数据，避免误导性的图表。相关性：只展示与分析目标相关的信息，避免无关数据的干扰。可读性：使用合适的颜色、字体和布局，确保图表易于阅读。交互性：在可能的情况下，提供交互功能，如缩放、平移和数据提示，以增强用户体验。1.3.1示例：使用Tableau创建复杂的仪表板Tableau是一个商业智能工具，用于创建复杂的仪表板，可以整合多种数据源并提供深入的数据分析。虽然这里无法直接展示Tableau的代码示例，因为Tableau主要通过其图形界面进行操作，但可以描述一个基本的流程：导入数据：从Excel、SQL数据库或云服务等数据源导入数据。数据预处理：在Tableau中进行数据清洗和预处理，如过滤、分组和计算。创建视图：选择数据字段，创建图表或地图等视图。添加交互性：通过添加过滤器、参数和动作，使仪表板具有交互性。发布和共享：将仪表板发布到TableauServer或TableauOnline，与团队或客户共享。Tableau的强大之处在于其直观的拖放界面和对大数据集的高效处理能力，使得创建复杂的仪表板变得简单而快速。通过上述内容，我们不仅了解了数据可视化的定义和重要性，还探索了使用Python的Matplotlib和Plotly库进行数据可视化的具体方法，以及Tableau创建复杂仪表板的基本流程。这些工具和技术的选择和应用，将极大地提升数据分析的效率和效果。2数据分析：数据可视化中的交互设计2.1交互设计在数据可视化中的角色2.1.1交互设计的定义交互设计（InteractionDesign）是一种设计方法，它关注于设计人与产品或系统之间的交互过程，以提高用户体验为目标。在数据可视化领域，交互设计通过增加用户与数据的互动，使数据的探索和理解变得更加直观和高效。2.1.2交互设计在数据可视化中的作用在数据可视化中，交互设计扮演着至关重要的角色，它不仅能够提升数据的可读性和可理解性，还能增强用户的参与感和数据探索的深度。通过交互设计，用户可以动态地调整图表的参数，如筛选数据、改变视图、放大缩小等，从而更深入地洞察数据背后的故事。2.1.3交互设计的元素和原则元素筛选器：允许用户根据特定条件筛选数据，如时间范围、类别等。缩放和导航：用户可以放大查看细节，缩小看到整体趋势，或者在不同的数据视图之间导航。工具提示和信息框：当用户悬停或点击数据点时，显示详细信息，帮助理解数据的具体含义。动态更新：数据可视化应能实时响应用户操作，动态更新图表或数据视图。原则用户中心：设计应以用户的需求和行为为中心，确保交互的直观性和易用性。反馈即时性：用户操作后应立即得到反馈，以增强交互的流畅感。可定制性：允许用户根据个人偏好调整可视化参数，如颜色、布局等。数据驱动：交互设计应基于数据的特性，确保数据的准确性和完整性在交互中得到体现。2.2示例：使用D3.js实现交互式数据可视化2.2.1示例代码//引入D3.js库

constd3=require('d3');

//数据样例

constdata=[

{year:2010,sales:100},

{year:2011,sales:150},

{year:2012,sales:200},

{year:2013,sales:250},

{year:2014,sales:300},

{year:2015,sales:350},

{year:2016,sales:400},

{year:2017,sales:450},

{year:2018,sales:500},

{year:2019,sales:550},

{year:2020,sales:600}

];

//创建SVG容器

constsvg=d3.select('body')

.append('svg')

.attr('width',600)

.attr('height',400);

//定义比例尺

constxScale=d3.scaleLinear()

.domain([d3.min(data,d=>d.year),d3.max(data,d=>d.year)])

.range([0,600]);

constyScale=d3.scaleLinear()

.domain([0,d3.max(data,d=>d.sales)])

.range([400,0]);

//绘制折线图

constline=d3.line()

.x(d=>xScale(d.year))

.y(d=>yScale(d.sales));

svg.append('path')

.datum(data)

.attr('fill','none')

.attr('stroke','steelblue')

.attr('stroke-width',2)

.attr('d',line);

//添加交互：工具提示

consttooltip=d3.select('body')

.append('div')

.attr('class','tooltip')

.style('opacity',0);

svg.selectAll('circle')

.data(data)

.enter()

.append('circle')

.attr('cx',d=>xScale(d.year))

.attr('cy',d=>yScale(d.sales))

.attr('r',5)

.on('mouseover',function(event,d){

tooltip.transition()

.duration(200)

.style('opacity',.9);

tooltip.html(`Year:${d.year}<br/>Sales:${d.sales}`)

.style('left',event.pageX+'px')

.style('top',event.pageY+'px');

})

.on('mouseout',function(d){

tooltip.transition()

.duration(500)

.style('opacity',0);

});2.2.2示例描述上述代码使用D3.js库创建了一个交互式的折线图，用于展示2010年至2020年的销售数据。通过定义比例尺，数据被映射到SVG容器中，形成一条折线。每个数据点还被表示为一个圆圈，当用户鼠标悬停在这些圆圈上时，会显示一个工具提示，提供该点的具体年份和销售额信息，增强了数据的可读性和互动性。2.3总结交互设计在数据可视化中通过提供筛选、缩放、导航和动态更新等功能，极大地提升了数据的探索性和用户体验。设计者应遵循用户中心、反馈即时性、可定制性和数据驱动的原则，以创建既美观又实用的数据可视化作品。通过具体的技术和工具，如D3.js，可以实现这些交互设计的元素，使数据可视化更加生动和有效。3创建交互式数据可视化3.1选择合适的交互类型在创建交互式数据可视化时，选择正确的交互类型至关重要。这不仅影响用户体验，还决定了数据的可解释性和洞察力的深度。以下是一些常见的交互类型及其适用场景：缩放和平移：适用于查看具有大量数据点的图表，用户可以通过缩放和平移来聚焦于特定区域。悬停信息：当用户将鼠标悬停在数据点上时，显示详细信息。这有助于在不拥挤图表的情况下提供额外的数据细节。选择和过滤：允许用户选择数据集的一部分，或应用过滤器来查看特定条件下的数据。这对于探索性数据分析特别有用。动态更新：数据可视化应能够根据用户的选择或外部数据源的变化实时更新。这增强了数据的实时性和相关性。3.1.1示例：使用D3.js实现缩放和平移//引入D3.js库

constd3=require("d3");

//创建SVG容器

constsvg=d3.select("body").append("svg")

.attr("width",960)

.attr("height",500);

//定义缩放行为

constzoom=d3.zoom()

.scaleExtent([1,8])//设置缩放范围

.on("zoom",zoomed);//缩放事件处理函数

//将缩放行为应用到SVG容器

svg.call(zoom);

//缩放事件处理函数

functionzoomed(){

svg.selectAll("circle")//选择所有circle元素

.attr("transform",d3.event.transform);//应用缩放和平移变换

}3.2设计有效的用户界面设计用户界面时，应考虑以下几点以确保数据可视化既美观又实用：清晰性：确保图表和界面元素易于理解，避免复杂的布局和过多的视觉噪音。响应性：界面应快速响应用户的操作，提供流畅的交互体验。可访问性：考虑到所有用户，包括那些可能有视觉障碍的人，使用颜色对比度和辅助功能。一致性：界面元素和交互应保持一致，遵循用户熟悉的模式和标准。3.2.1示例：使用React和Material-UI创建响应式界面importReact,{useState}from'react';

import{Button,Slider}from'@material-ui/core';

functionDataVisualizationUI(){

const[scale,setScale]=useState(1);//状态管理缩放级别

//缩放按钮点击事件

consthandleZoom=(direction)=>{

setScale(scale+direction);//更新缩放级别

};

//滑块改变事件

consthandleSliderChange=(event,newValue)=>{

setScale(newValue);//更新缩放级别

};

return(

<div>

<ButtononClick={()=>handleZoom(-0.1)}>缩小</Button>

<ButtononClick={()=>handleZoom(0.1)}>放大</Button>

<Slider

value={scale}

onChange={handleSliderChange}

min={0.1}

max={2}

step={0.1}

/>

</div>

);

}

exportdefaultDataVisualizationUI;3.3实现交互功能的步骤实现交互式数据可视化功能通常遵循以下步骤：数据准备：清洗和预处理数据，确保数据格式适合可视化。选择工具和库：根据项目需求选择合适的可视化工具和库，如D3.js、Plotly或Bokeh。设计界面：创建用户界面草图，确定布局和交互元素。编码实现：使用所选工具和库编写代码，实现数据可视化和交互功能。测试和优化：测试交互功能，确保它们按预期工作，并优化性能和用户体验。3.3.1示例：使用Plotly.js创建可交互的散点图importplotly.expressaspx

importpandasaspd

#创建数据框

df=pd.DataFrame({

'x':[1,2,3,4,5],

'y':[1,4,9,16,25],

'size':[10,20,30,40,50],

'color':['red','green','blue','orange','purple']

})

#创建交互式散点图

fig=px.scatter(df,x='x',y='y',size='size',color='color',

hover_data=['x','y'],log_x=True,size_max=60)

#显示图表

fig.show()在这个例子中，我们使用了Plotly.js和Pandas库。数据被预处理成一个Pandas数据框，然后使用Plotly.js创建一个散点图。散点图的大小和颜色可以根据数据框中的’size’和’color’列动态变化，同时，当用户将鼠标悬停在数据点上时，会显示详细的’x’和’y’值，实现了悬停信息的交互功能。通过以上步骤和示例，我们可以看到创建交互式数据可视化需要综合考虑数据、工具选择、界面设计和编码实现。每一步都至关重要，确保最终的可视化既功能强大又用户友好。4数据可视化中的用户参与4.1理解用户需求和背景在数据可视化项目中，理解用户需求和背景是至关重要的第一步。这不仅涉及到识别用户的具体需求，如他们希望从数据中获取什么信息，还涉及到理解他们的背景知识，包括他们对数据主题的熟悉程度、他们使用数据可视化的经验以及他们可能的偏好。4.1.1原理用户调研：通过问卷、访谈或用户测试收集用户信息，了解他们的需求和期望。用户画像：创建用户模型，包括年龄、职业、兴趣和技能水平，以更好地理解目标受众。情境分析：考虑用户在什么情境下使用数据可视化，这可能影响设计的选择。4.1.2内容用户调研方法：介绍如何设计有效的调研问卷，如何进行深入的用户访谈，以及如何组织用户测试。用户画像构建：提供步骤和技巧，帮助创建详细且准确的用户模型。情境分析：讨论不同使用情境对数据可视化设计的影响，如移动设备与桌面设备的差异，或实时数据与历史数据的展示。4.2设计用户参与的策略设计用户参与的策略意味着创建一个数据可视化界面，使用户能够与数据进行互动，从而更深入地理解数据。这包括选择合适的交互元素，如滑块、下拉菜单、按钮等，以及设计这些元素的布局和行为。4.2.1原理交互设计原则：确保交互元素直观、易于使用，同时提供足够的反馈，让用户知道他们的操作结果。数据探索：设计支持用户探索数据的工具，如过滤、排序和缩放功能。故事讲述：通过数据可视化讲述故事，引导用户通过数据发现趋势和模式。4.2.2内容交互元素选择：讨论如何根据数据类型和用户需求选择最合适的交互元素。布局与行为设计：提供指导，帮助设计交互元素的布局，以及它们在用户操作时的行为。故事讲述技巧：介绍如何通过数据可视化讲述一个引人入胜的故事，包括如何使用视觉层次和引导线。4.2.3示例代码假设我们正在设计一个数据可视化应用，用于展示全球温度变化趋势。下面是一个使用D3.js创建交互式折线图的简单示例，用户可以通过滑块选择不同的年份。//加载数据

d3.csv("global_temperatures.csv",function(data){

data.forEach(function(d){

d.year=+d.year;

d.temperature=+d.temperature;

});

//创建滑块

varslider=d3.select("#slider")

.append("input")

.attr("type","range")

.attr("min",d3.min(data,function(d){returnd.year;}))

.attr("max",d3.max(data,function(d){returnd.year;}))

.attr("value",d3.min(data,function(d){returnd.year;}))

.on("input",updateChart);

//创建图表

varsvg=d3.select("body").append("svg")

.attr("width",960)

.attr("height",500);

varline=d3.line()

.x(function(d){returnx(d.year);})

.y(function(d){returny(d.temperature);});

varx=d3.scaleLinear()

.domain([d3.min(data,function(d){returnd.year;}),d3.max(data,function(d){returnd.year;})])

.range([0,960]);

vary=d3.scaleLinear()

.domain([d3.min(data,function(d){returnd.temperature;}),d3.max(data,function(d){returnd.temperature;})])

.range([500,0]);

svg.append("path")

.datum(data)

.attr("class","line")

.attr("d",line);

//更新图表函数

functionupdateChart(){

varselectedYear=+d3.event.target.value;

varfilteredData=data.filter(function(d){returnd.year<=selectedYear;});

svg.select(".line")

.datum(filteredData)

.attr("d",line);

}

});4.2.4数据样例year,temperature

1880,13.8

1881,13.9

1882,13.7

1883,13.6

1884,13.8

1885,13.9

1886,14.0

1887,14.1

1888,14.2

1889,14.3

1890,14.44.3评估用户参与度的方法评估用户参与度是确保数据可视化设计有效性的关键。这涉及到收集和分析用户与数据可视化交互的数据，以了解哪些设计元素最吸引用户，以及用户如何使用这些元素。4.3.1原理数据分析：使用日志文件、热图和点击流数据来分析用户行为。用户反馈：通过问卷调查、用户访谈和直接观察收集用户反馈。参与度指标：定义和使用参与度指标，如时间花费、页面浏览量和交互次数。4.3.2内容数据分析工具：介绍如何使用GoogleAnalytics、Mixpanel等工具来收集和分析用户数据。用户反馈收集：提供策略，帮助设计有效的反馈收集机制。参与度指标定义：讨论如何定义和测量参与度指标，以及这些指标如何帮助改进设计。4.3.3示例代码下面是一个使用GoogleAnalytics来跟踪用户在数据可视化页面上的行为的示例代码。//初始化GoogleAnalytics

ga('create','UA-XXXX-Y','auto');

ga('send','pageview');

//跟踪用户点击事件

d3.selectAll(".interactive-element")

.on("click",function(){

ga('send','event','DataVisualization','click','InteractiveElement');

});通过上述代码，我们可以跟踪用户何时点击数据可视化中的交互元素，这有助于我们评估哪些元素最吸引用户，以及用户如何与数据进行互动。以上内容详细介绍了数据可视化中的用户参与，包括理解用户需求和背景、设计用户参与的策略以及评估用户参与度的方法。通过遵循这些原则和技巧，我们可以创建出更吸引用户、更易于理解和更有效的数据可视化设计。5高级数据可视化交互技术5.1动态数据可视化动态数据可视化允许用户通过时间序列、动画或其他交互方式探索数据的变化。这种技术特别适用于展示随时间变化的数据集，如股票价格、天气模式或人口统计趋势。5.1.1示例：使用D3.js创建动态折线图假设我们有一组股票价格数据，我们希望创建一个动态折线图，显示过去一年每天的股票价格变化。数据样例[

{"date":"2023-01-01","price":100},

{"date":"2023-01-02","price":102},

//...更多数据点

{"date":"2023-12-31","price":120}

]代码示例<!DOCTYPEhtml>

<html>

<head>

<scriptsrc="/d3.v6.min.js"></script>

</head>

<body>

<script>

//加载数据

d3.json("stock_prices.json").then(function(data){

//数据预处理

data.forEach(function(d){

d.date=newDate(d.date);

d.price=+d.price;

});

//设置图表尺寸

varwidth=960,

height=500;

//创建SVG容器

varsvg=d3.select("body").append("svg")

.attr("width",width)

.attr("height",height);

//创建X和Y轴

varx=d3.scaleTime().range([0,width]);

vary=d3.scaleLinear().range([height,0]);

varxAxis=d3.axisBottom(x);

varyAxis=d3.axisLeft(y);

//添加轴到SVG

svg.append("g")

.attr("transform","translate(0,"+height+")")

.call(xAxis);

svg.append("g")

.call(yAxis);

//创建折线

varline=d3.line()

.x(function(d){returnx(d.date);})

.y(function(d){returny(d.price);});

//更新数据和轴

functionupdate(){

x.domain(d3.extent(data,function(d){returnd.date;}));

y.domain([0,d3.max(data,function(d){returnd.price;})]);

//更新折线

svg.selectAll(".line")

.data([data])

.enter().append("path")

.attr("class","line")

.attr("d",line)

.attr("stroke","steelblue")

.attr("stroke-width",2)

.attr("fill","none");

//更新轴

svg.select(".x.axis").call(xAxis);

svg.select(".y.axis").call(yAxis);

}

//初始化图表

update();

//创建动画

varinterval=setInterval(function(){

//更新数据

data.push({date:newDate(),price:Math.random()*100});

data.shift();

//更新图表

update();

},1000);

});

</script>

</body>

</html>5.1.2解释此代码示例使用D3.js库加载股票价格数据，并创建一个动态折线图。数据被预处理以确保日期和价格被正确解析。通过setInterval函数，我们定期更新数据集，添加新的数据点并移除最旧的数据点，从而创建一个动态更新的图表。5.2多维数据的交互展示多维数据的交互展示技术使用户能够探索具有多个变量的数据集。这通常涉及使用多坐标系、散点图矩阵或平行坐标图等方法。5.2.1示例：使用Plotly.js创建交互式散点图矩阵假设我们有一组包含年龄、收入、教育水平和职业的数据集，我们希望创建一个散点图矩阵来探索这些变量之间的关系。数据样例[

{"age":25,"income":50000,"education":"Bachelor's","job":"Engineer"},

{"age":30,"income":60000,"education":"Master's","job":"Analyst"},

//...更多数据点

]代码示例<!DOCTYPEhtml>

<html>

<head>

<scriptsrc="https://cdn.plot.ly/plotly-latest.min.js"></script>

</head>

<body>

<divid="scatterMatrix"></div>

<script>

//加载数据

d3.json("people_data.json").then(function(data){

//创建散点图矩阵

vartraces=[];

vardimensions=[

{label:'Age',values:data.map(d=>d.age)},

{label:'Income',values:data.map(d=>d.income)},

//可以添加更多维度

];

for(vari=0;i<dimensions.length;i++){

for(varj=0;j<dimensions.length;j++){

if(i===j)continue;

traces.push({

x:dimensions[i].values,

y:dimensions[j].values,

mode:'markers',

type:'scatter',

name:dimensions[i].label+'vs'+dimensions[j].label

});

}

}

//创建布局

varlayout={

xaxis:{title:dimensions[0].label},

yaxis:{title:dimensions[1].label},

showlegend:false,

hovermode:'closest',

height:600,

width:600

};

//绘制图表

Plotly.newPlot('scatterMatrix',traces,layout);

});

</script>

</body>

</html>5.2.2解释此代码示例使用Plotly.js库加载包含年龄和收入的数据集，并创建一个散点图矩阵。通过遍历数据集中的维度，我们为每一对维度创建一个散点图。Plotly.js提供了丰富的交互功能，如悬停信息和缩放，使用户能够深入探索数据。5.3实时数据流的可视化实时数据流的可视化技术用于处理和展示连续生成的数据，如传感器数据或社交媒体流。这些技术通常需要高效的数据处理和更新机制。5.3.1示例：使用Socket.IO和D3.js创建实时数据流折线图假设我们有一组实时传感器数据，我们希望创建一个折线图，实时展示数据流。数据样例传感器数据通过WebSocket实时传输，格式如下：{"timestamp":"2023-01-01T00:00:00Z","value":23.5}代码示例<!DOCTYPEhtml>

<html>

<head>

<scriptsrc="/d3.v6.min.js"></script>

<scriptsrc="/socket.io/socket.io.js"></script>

</head>

<body>

<script>

//创建SVG容器

varsvg=d3.select("body").append("svg")

.attr("width",960)

.attr("height",500);

//创建折线

varline=d3.line()

.x(function(d){returnx(d.timestamp);})

.y(function(d){returny(d.value);});

//创建X和Y轴

varx=d3.scaleTime().range([0,960]);

vary=d3.scaleLinear().range([500,0]);

varxAxis=d3.axisBottom(x);

varyAxis=d3.axisLeft(y);

//添加轴到SVG

svg.append("g")

.attr("transform","translate(0,500)")

.call(xAxis);

svg.append("g")

.call(yAxis);

//初始化数据

vardata=[];

//连接到WebSocket

varsocket=io();

socket.on('sensorData',function(newData){

//更新数据

data.push(newData);

if(data.length>100)data.shift();

//更新轴和折线

x.domain(d3.extent(data,function(d){returnd.timestamp;}));

y.domain([0,d3.max(data,function(d){returnd.value;})]);

svg.selectAll(".line")

.data([data])

.enter().append("path")

.attr("class","line")

.attr("d",line)

.attr("stroke","steelblue")

.attr("stroke-width",2)

.attr("fill","none");

svg.select(".x.axis").call(xAxis);

svg.select(".y.axis").call(yAxis);

});

</script>

</body>

</html>5.3.2解释此代码示例使用D3.js和Socket.IO库创建一个实时更新的折线图。数据通过WebSocket实时接收，每次接收到新数据时，图表会自动更新。我们限制数据集的大小以保持图表的性能，同时确保数据的最新状态被展示。通过这些高级数据可视化交互技术，用户可以更深入地理解复杂数据集，发现隐藏的模式和趋势，从而做出更明智的决策。6数据分析：数据可视化：数据可视化中的交互设计6.1案例研究与最佳实践6.1.1数据可视化项目案例分析在数据可视化项目中，交互设计是提升用户体验和数据洞察力的关键。以一个假设的销售数据分析项目为例，我们可以通过以下步骤来理解交互设计的重要性：数据收集与清洗：首先，收集销售数据，包括产品、地区、时间等维度。使用Py