25:["$","title",null,{"children":"Visualization of Employee Earnings in Boston, 2019 | socrano | Observable"}] 4b:Td94,md`# Visualization of Employee Earnings in Boston, 2019 My name is: *Ruizhe Qiu* Class: https://johnguerra.co/classes/data_visualization_spring_2021/ Author: https://observablehq.com/@socrano User: The one need to analysis the finance of Boston, like government and company want to get market in Boston. Task: Help users to understand and analysis the finance of Boston. (Like help the government to relief those poor, or help the company to decide their products prices in Boston area.) Data: The total earnings of randomly selected people in Boston in 2019. Abstraction: For my visualization, I choose the dataset shows the employee earnings in Boston. It is a table in csv file. I only use one attribute from this table: Total Earnings. Total Earnings is a quantitative attributes. It shows the total earnings of certain person in 2019. This attribute is sequential. And the data is static. Visualization Introduction: Kernel Density Estimation, a visualization estimates the probability distribution of avariable. It is a histogram with percent as yAxis and has a line to show the trend of percent distribution. Insight: I will use the chart_total for insight. According to the chart_total, the insight is the total earnings of people in Boston are mainly ranged from 0 - 120,000 dollars in 2019. For those total earnings are higher than 60,000 dollars in 2019, the ratio decreases with the growth of earnings. And in the range 0 - 120,000, the earning range with most people is 0 -2,0000. It shows there are still many poor in Boston area, and the earnings of most people are ranged from 0 -120,000. This insight can help the government to relief those poor, or help the company to decide their products prices in Boston area. This insight helps us to understand the dataset more, and it cannot be got easily from the dataset directly, And it is also meaningful and actionable because it shows the finance condition in Boston area and allows the users to do actions according to this insight. Finally, it is generated from the true data. So it is an insight get from visualization. Thinking: 1. I also make a chart_part. The difference between chart_total and chart_part is the first one takes all data from dataset and the second only take 1000 from dataset randomly. But we can find totally different results from these two visualizations. If we only look at chart_part, we may think the total earnings in Boston area is ranged around 200,000, which is a result far away from our above insight. It shows some problems: 1. The dataset size is important, larger dataset usually will be more accurate, but also with higher price. We should find a balance between cost and dataset size. 2. Could there are some problems (like wrong data) in the dataset? Because I find the minimum total earning is only 0.98, which is a little hard to believe. So check if the dataset is correct is also important. 3. This dataset shows there are still many poor in the Boston area. It reminds us to do some for the world, and also should remember cherish what we have. 2. From this assignment, I find a good visualization template is very useful. It allows user to just import data and than will generate a visualization quickly. I should remember this point in my future visualization work. 3. I cannot find a valid bandwidth range for chart_part. It is a possible improvement in the future I need to solve. YouTube Link: https://youtu.be/2xwcjBGVcvU --- Made by Ruizhe Qiu`4c:[{"id":"9cc77766fe0aeb6a3c547f72b79f86d409c54bce8d590e20c21127a10c8e0082642bce6bc21b4c518c1e1f1a3e935ddf390b546ca382ed4043fb8bd249b2676b","href":"https://static.observableusercontent.com/files/9cc77766fe0aeb6a3c547f72b79f86d409c54bce8d590e20c21127a10c8e0082642bce6bc21b4c518c1e1f1a3e935ddf390b546ca382ed4043fb8bd249b2676b","name":"Employee Finance.csv","type":"text/csv","lastModified":1612787333617.678,"size":3372412}] 47:{"id":"09d0f9555fafd08f","slug":"test","title":"Visualization of Employee Earnings in Boston, 2019","thumbnail":"51e5788d9f21a35f918abb6889737ce1fc06180e2d4be759793a7d976e626eb7","access_level":"public","create_time":"$D2021-02-08T12:28:13.910Z","update_time":"$D2021-02-17T05:06:12.821Z","view_time":null,"first_public_time":"$D2021-02-10T06:00:33.178Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"3c32529f19d79e67","login":"socrano","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7e34544e65631904a28581d40ef16cead635adaf4172afd77033315c4273a78a","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":263,"publish_version":263,"role":null,"authored":false,"authors":[{"type":"individual","id":"fd7ef74f07d09318","login":"socrano","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7e34544e65631904a28581d40ef16cead635adaf4172afd77033315c4273a78a","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"fd7ef74f07d09318","login":"socrano","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7e34544e65631904a28581d40ef16cead635adaf4172afd77033315c4273a78a","tier":null,"role":"editor"}],"comments":[{"id":"efd73709202dee49","reply_to_id":null,"content":"this is a ton of great info, putting the chart at the top of the page will help draw the reader's attention","create_time":"$D2021-02-17T23:59:33.085Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"da76b9b2836b62c4","login":"tedbjerregaard","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e66c368c76c34b296ce2dfd26904aa94f57c9855bb294d28590fa5428039c169","tier":null}},{"id":"55cea642f0a0483b","reply_to_id":null,"content":"These charts look great! well done","create_time":"$D2021-02-18T00:01:47.320Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"da76b9b2836b62c4","login":"tedbjerregaard","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e66c368c76c34b296ce2dfd26904aa94f57c9855bb294d28590fa5428039c169","tier":null}},{"id":"164e71a98e48b959","reply_to_id":"efd73709202dee49","content":"Also adding the insight in the title might be a good idea","create_time":"$D2021-02-18T00:05:08.394Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"da76b9b2836b62c4","login":"tedbjerregaard","name":"","avatar_url":"https://avatars-next.observableusercontent.com/e66c368c76c34b296ce2dfd26904aa94f57c9855bb294d28590fa5428039c169","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualization of Employee Earnings in Boston, 2019","cells":[{"id":159,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"//Read from csv\nReadFromCSV = FileAttachment(\"Employee Finance.csv\").csv() ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"dataArray_total = [];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"dataArray_part = [];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"length = ReadFromCSV.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"//Only need one column from dataset\n//Get all data from dataset\n{\n for (let i = 0; i < length; i++) {\n dataArray_total[i] = ReadFromCSV[i][\"TOTAL EARNINGS\"]\n }\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"//get part of data from dataset\n{\n for (let i = 0; i < 1000; i++) {\n dataArray_part[i] = ReadFromCSV[i][\"TOTAL EARNINGS\"]\n }\n} ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"dataArray_total","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"dataArray_part","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"//Function used to trans float with \",\" from String to Float\nfunction transFloat(float) {\n float = float.replace(/[^0-9|\\.]/g, '');\n float = parseFloat(float);\n return float;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"dataFinal_total = dataArray_total.map(t => transFloat(t)) //Trans data from string to float","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"dataFinal_part = dataArray_part.map(t => transFloat(t)) //Trans data from string to float","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"dataFiance_total = Object.assign(await dataFinal_total, {title: \"Total Earnings (Dollor)\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"dataFiance_part = Object.assign(await dataFinal_part, {title: \"Total Earnings (Dollor)\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"//Because of the different data range, I set new range for bandwidth\nviewof newBandwidth_total = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${(form.value = form.i.valueAsNumber).toFixed(1)} bandwidth`;\n form.i.oninput();\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"//Because of the different data range, I set new range for bandwidth\nviewof newBandwidth_part = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${(form.value = form.i.valueAsNumber).toFixed(1)} bandwidth`;\n form.i.oninput();\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"import { chart as chart_total } with {dataFiance_total as data, newBandwidth_total as bandwidth} from \"@d3/kernel-density-estimation\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"import { chart as chart_part } with {dataFiance_part as data, newBandwidth_part as bandwidth} from \"@d3/kernel-density-estimation\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"chart_total","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"chart_part","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null