DataV首次实战分享:教你30分钟创建汽车大屏

来源:互联网
更新时间:2016/8/31 12:18:58
责任编辑:王亮
字体:

【在线技术公开课预告】9月8日,来自阿里数据引擎数据可视化团队的闻啸 (花名:宁朗)将通过DataV团队在数据产品和数据大屏两个应用场景中的数据可视化实践案例,向大家分享开发过程中的信息设计思考和技术实现细节。欢迎关注数据可视化的开发者报名: http://edu.csdn.net/huiyiCourse/detail/188


先看一下汽车大屏: https://datav.aliyun.com/share/20acd88491367bf262fcb1e862ee8f1c

点击图片看大图中国学网 www.xue163.com

我是一个技术男,同样也是个汽车爱好者,上个月买了辆的宝马,却发现路上的“宝马越来越多”(⊙﹏⊙)b ...... 点击图片看大图

我喜欢钻研技术,也喜欢钻研汽车,最近研究了一下数据可视化,发现用datav可以玩出一些花样,这次就分享一下我做汽车数据大屏的经验。

没数据是不行的,首先七拼八凑了一些汽车数据,然后......

清洗数据

我找到的数据是这样的

尺寸 人数
4567mm*1786mm*1454mm 1
5300*1800*1600 1
长 4369mm 宽 1802mm \高1445mm 1
4670mm*1780mm*1435mm 1
4430*1793*1399 1
4671*1815*1478 1
4929mm*1898mm*1655mm 1
4430mm*1793mm*1399mm 1
4714*1810*1442 1
长4484mm 宽1798mm \高 1577mm 1
5090×1926×1900 1

看到这尺寸我就吐了…… 真是什么格式都有。

作为一个前端,用 javascript 简单的把他转化成了一个统一、干净的格式还是很容易的,相同尺寸的人数也统计(加)起来

var car = {};
require("tongji.txt")
.split("\n")
.forEach(function(v){
  var [size, num] = v.split("\t");
  size = size.replace(/^\D*(\d{4})\D*?(\d{4})\D*?(\d{4})\D*$/g, '$1*$2*$3')
  if (!car[size]) car[size] = 0;
  car[size] += num*1; 
});

/*
car = {
  4369*1802*1445: 1,
  4430*1793*1399: 2,
  4484*1798*1577: 1,
  4567*1786*1454: 1,
  4670*1780*1435: 1,
  4671*1815*1478: 1,
  4714*1810*1442: 1,
  4929*1898*1655: 1,
  5090*1926*1900: 1,
  5300*1800*1600: 1,
  //...
}
*/

清洗好的数据,就存入数据库

匹配车型

数据虽然干净了,但我还是有点不放心,通过车辆尺寸真的能找到车型?

找了一个车型库,简单写一个 SQL 测试一下

select 
  concat(`长度(mm)`, '*', `宽度(mm)`, '*', `高度(mm)`) as size, 
  count(distinct 车系) as cnt,
  group_concat(distinct 车系)
 from models 
group by size 
order by cnt desc 
limit 1000

得到的结果都是如下表一样,都是同品牌的相似车型,应该对结果不会有太大影响。

再连接上我的测试数据,结果几乎只是国产、进口的区别。

size cnt group_concat(distinct 车系)
4629*1880*1653 2 奥迪Q5,奥迪Q5(进口)
4638*1803*1598 2 英菲尼迪EX,英菲尼迪QX50(进口)
4624*1811*1460 2 宝马3系,宝马3系(进口)
4660*1852*1400 2 英菲尼迪G系,英菲尼迪Q60

为了计算方便,我再把 size 直接转化成了车型 id,这样数据就算准备好了。

DataV 上场

首先选了一个最顺眼的模板(技术男一般喜欢冷色,除非你心里住了一只小绵羊,才会选择“双11”的同款大屏)

点击图片看大图

我暂时没有什么地理数据,所以人人喜爱的地图,这次就删掉了,如果有人想看地图的操作分享,可以给我留言,我会再做异常关于地图可视化的分享。

www.xue163.com true http://www.xue163.com/184/6/1843342.html report 5132 DataV首次实战分享:教你30分钟创建汽车大屏,【在线技术公开课预告】9月8日,来自阿里数据引擎数据可视化团队的闻啸(花名:宁朗)将通过DataV团队在数据产品和数据大屏两个应用场景中的数据可视化实践案例,向大家分享开发过程中的信息设计思考和技术实现细节。欢迎关注数据可视化的开发者报名:http:...
最近关注
首页推荐
热门图片
相关文章:
最新添加资讯
24小时热门资讯
精彩资讯
精彩推荐
热点推荐
真视界
精彩图片
社区精粹
关于本站 | 广告服务 | 手机版 | 商务合作 | 免责申明 | 招聘信息 | 联系我们
Copyright © 2004-2016 Xue163.com All Rights Reserved. 中国学网 版权所有
京ICP备10044368号-1 京公网安备11010802011102号
荐闻 | 学网头条知识问答 | 装修 | 作业 | 荐闻 | 学网头条精彩微信 | 新闻中心 | 软件教室 | 设计大全 | 网络相关 | 英语学习 | 开发编程 | 考试中心 | 参考范文 | 管理文库 | 营销中心 | 站长之家 | IT信息中心 | 商学院 | 数码大全 | 硬件DIY | 企业服务 | 网吧在线 | 问吧 | 百科 | 硬件知识 | 本网视点 | 文库 | 手机 | 平板 | 汽车 | 游戏 | 家电 | 精彩摄影 | 时尚科技 | 现代家居 | IT女人 | 经验 | 每日新闻 | 健康养生 | 图书馆 | 猎奇 | 精彩看点 | 图库 | 新闻中心 | 软件教室 | 设计大全 | 网络相关 | 英语学习 | 开发编程 | 考试中心 | 参考范文 | 管理文库 | 营销中心 | 站长之家 | IT信息中心 | 商学院 | 数码大全 | 硬件DIY | 企业服务 | 网吧在线 | 问吧 | 百科 | 硬件知识 | 本网视点 | 文库 | 手机 | 平板 | 汽车 | 游戏 | 家电 | 精彩摄影 | 时尚科技 | 现代家居 | IT女人 | 经验 | 每日新闻 | 健康养生 | 图书馆 | 精彩微信 | 猎奇 | 精彩看点 | 图库编程 方案 信息windows方案windows answer文档机构教育文档问答中心IT编程数码信息解决方案信息中心IT科技