type
status
date
slug
summary
tags
category
icon
password
HCI Lab3：Data Visualization
Learning Process
- 通过这个视频对dash与plotly有大致印象
- 参考教程
- 数据特征
- salaries-by-region.csv
- salaries-by-college-type.csv
- degrees-that-pay-back.csv
学校 | 地区 | 起薪中位数 | 薪资中位数 | 前90% | 前75% | 前25% | 前10% |
Stanford University | California | $70,400.00 | $129,000.00 | $68,400.00 | $93,100.00 | $184,000.00 | $257,000.00 |
学校 | 学校类型 | 起薪中位数 | 薪资中位数 | 前90% | 前75% | 前25% | 前10% |
MIT | Engineering | $72,200.00 | $126,000.00 | $76,800.00 | $99,200.00 | $168,000.00 | $220,000.00 |
毕业专业 | 起薪中位数 | 薪资中位数 | 变化率% | 前90% | 前75% | 前25% | 前10% |
Accounting | $46,000.00 | $77,100.00 | 67.6 | $42,200.00 | $56,100.00 | $108,000.00 | $152,000.00 |
- 回调函数的编写 @app.callback(output,input): output对应这后面函数的返回值指向对应的图表； input对应的输入值传入到后面的函数的形参中。
Design
The dashboard designed for this task consists of a total of four sections, each displaying a different type of visualization.
- Choropleth Map: The first part of the dashboard displays a choropleth map of the United States, with each state's color indicating the median salary level of that region. The darker the color, the higher the salary. A slider is provided to select different career stages, and the map will update accordingly. This map provides a geographical overview of salary distribution across the U.S.
- Scatter Plot: The second part of the dashboard displays a scatter plot showing the salaries of all colleges in the selected state from the choropleth map. This plot updates based on the selected state in the map and the career stage from the slider. It allows users to compare salary levels among different colleges in a specific region.
- Box Plot: The third part of the dashboard presents a box plot that illustrates the salary distribution of different college types. It also updates according to the chosen career stage (on the slider). It's a useful tool to compare salary distributions among different types of colleges, such as Engineering, Liberal Arts, etc.
- Bar Plot: The fourth and final part of the dashboard displays a bar plot of different undergraduate majors and their corresponding salaries. This plot also updates based on the selected career stage(on the slider). This visualization provides a clear comparison of salary levels across different majors.
Of course the dashboard also includes a header and a slider used to select the salary type.
Through these visualizations, users can gain insights into how region, college type, and major affect salary levels at different career stages.
Problems and Solutions
- 需要进行数据清洗
- 此外还需要注意将查到的学校位置与state_code相对应，以便对其染色
原因是数据是以"$70,400.00"的方式存储的，应该需要使用清洗数据，才可以用
color_continuous_scale来进行染色，色彩对应链接
- 作者:王大卫
- 链接:https://tangly1024.com/article/homework:hci-lab3
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。