美文网首页解密大数据
交互式可视化-d3

交互式可视化-d3

作者: 彭健平6点30 | 来源:发表于2018-03-11 23:29 被阅读27次

可视化网站

handeness
height
weight
avg

概括

本图主要通过barplot来使读者交互式地探寻棒球数据集中1,157名棒球运动员在不同身高范围内用手习惯(左手或右手或左右手并用)对击球率(avg)和全垒得分(HR)的影响。

设计

   采用dimple的观众驱动可视化,展示身高、不同用手习惯、体重和击球率对球员整体表现的分析。x轴代表观众驱动的button,y1轴代表全垒得分(HR),y2轴代表人数,折线展示X轴和y2的趋势,柱状图展示x轴和全垒得分(HR)。

   观众可点击右边的不同用手习惯、身高、体重、击球率标签来查询感兴趣的全垒得分和人数的变化。

总结

经过可视化分析,发现如下:

1.总体来看身高、体重、用手习惯都对棒球选手的表现有关系。体重、身高、击球率(avg)大体上都呈正态分布。用右手(R)的人最多,其次是用左手(L)的人,左右手(B)并用的最低。

2.在每个体重(weight)和身高(height)范围内,习惯用左手(L)的球员全垒得分(HR)最高,惯用右手(R)其次,左右手并用(B)最低。.当球员击球率(avg)越高时全垒得分(HR)越高。

所以整体来看,球员的身体重(weight)和身高(height)、击球率(avg)都呈现正态分布,而用手习惯对球员表现影响较大,也能扩大自己优势,只习惯用一只手的球员整体表现要优于左右手并用的球员,而只用左手的球员,表现又优于只用右手的球员。

反馈

1.查看体重(weight)和击球率(avg)时X轴刻度太密集。
   解决方法:给体重(weight)和击球率(avg)划分区间显示

2.不清楚折线图的作用。
   解决方法:在y1标题基础加上bar,y2标题基础上加上line,并在图正上方添加line的注释。

资源
泰坦尼克号上的生还者
Baseball: Left or Right Hand!
dimple文档
笔记
数据和源代码!

来一起学吧

相关文章

  • 王昊阳找的资料

    一. 可视化项目工具 1. d3 D3 is a JavaScript data visualization li...

  • 交互式可视化-d3

    可视化网站 概括 本图主要通过barplot来使读者交互式地探寻棒球数据集中1,157名棒球运动员在不同身高范围内...

  • D3 源代码解构

    D3是一个数据可视化的javascript库,相对于highchart和echarts专注图表可视化的库,D3更适...

  • freeCodeCamp 旅途17 - D3

    D3 D3.js,也叫 D3,表示数据驱动文档。 D3 是一个在浏览器里创建动态可视化数据的 JavaScript...

  • 干货 :数据可视化的10个关键术语

    Format 交互方式 交互式可视化允许您修改,操作和探索计算机显示的数据。绝大多数交互式可视化系统在计算机网络上...

  • 如何自学 D3

    在数据可视化的世界中,D3 可谓极其耀眼的明星。很多人着迷于 D3 那近乎无限可能的图形开发能力,而又被 D3 那...

  • R数据可视化-动态、交互式地图神器(三)符号标记

    Leaflet/LeafletCN 系列 R数据可视化-动态、交互式地图神器(一)概述与实现R数据可视化-动态、交...

  • d3

    d3js D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借...

  • Web 数据可视化工具,这37种总有一款是你需要的

    d3 一个对 HTML 和 SVG 进行可视化的 JavaScript 库。 官网 c3 基于 D3 的可复用图表...

  • D3.js制作图表

    D3是用于数据可视化的Javascript库。使用SVG,Canvas和HTML。结合强大的可视化技术和数据驱动的...

网友评论

    本文标题:交互式可视化-d3

    本文链接:https://www.haomeiwen.com/subject/kmsgfftx.html