All Projects → Jannchie → Historical Ranking Data Visualization Based On D3.js

Jannchie / Historical Ranking Data Visualization Based On D3.js

Licence: gpl-3.0
这是一个数据可视化项目,能够将历史数据排名转化为动态柱状图图表

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects
HTML
75241 projects

Projects that are alternatives of or similar to Historical Ranking Data Visualization Based On D3.js

Victory Native
victory components for react native
Stars: ✭ 2,013 (-56.7%)
Mutual labels:  data-visualization, d3
Anichart.js
Easily create data visualization animation videos
Stars: ✭ 480 (-89.68%)
Mutual labels:  data-visualization, d3
Calendar Heatmap
A d3 heatmap for representing time series data similar to github's contribution chart
Stars: ✭ 1,985 (-57.3%)
Mutual labels:  data-visualization, d3
Logation
Analyse your NGINX access logs and create beautiful maps of the locations from which people access your service.
Stars: ✭ 99 (-97.87%)
Mutual labels:  data-visualization, d3
Plotly Graphing Library For Matlab
Plotly Graphing Library for MATLAB®
Stars: ✭ 234 (-94.97%)
Mutual labels:  data-visualization, d3
Just Dashboard
📊 📋 Dashboards using YAML or JSON files
Stars: ✭ 1,511 (-67.5%)
Mutual labels:  data-visualization, d3
Visx
🐯 visx | visualization components
Stars: ✭ 14,544 (+212.84%)
Mutual labels:  data-visualization, d3
Victory
A collection of composable React components for building interactive data visualizations
Stars: ✭ 9,248 (+98.92%)
Mutual labels:  data-visualization, d3
Reaviz
📊 Data visualization library for React based on D3
Stars: ✭ 215 (-95.38%)
Mutual labels:  data-visualization, d3
Keen Dataviz.js
Data Visualization Charting Library
Stars: ✭ 215 (-95.38%)
Mutual labels:  data-visualization, d3
Py d3
D3 block magic for Jupyter notebook.
Stars: ✭ 428 (-90.79%)
Mutual labels:  data-visualization, d3
Victory Chart
Chart Component for Victory
Stars: ✭ 286 (-93.85%)
Mutual labels:  data-visualization, d3
C3
📊 A D3-based reusable chart library
Stars: ✭ 9,163 (+97.1%)
Mutual labels:  data-visualization, d3
Electricitymap Contrib
A real-time visualisation of the CO2 emissions of electricity consumption
Stars: ✭ 2,138 (-54.01%)
Mutual labels:  data-visualization, d3
D3vue
A D3 Plugin for VueJS
Stars: ✭ 87 (-98.13%)
Mutual labels:  data-visualization, d3
Semiotic
A data visualization framework combining React & D3
Stars: ✭ 2,207 (-52.53%)
Mutual labels:  data-visualization, d3
Ac D3
Javascript Library for building Audiovisual Charts in D3
Stars: ✭ 76 (-98.37%)
Mutual labels:  data-visualization, d3
Dex
Dex : The Data Explorer -- A data visualization tool written in Java/Groovy/JavaFX capable of powerful ETL and publishing web visualizations.
Stars: ✭ 1,238 (-73.37%)
Mutual labels:  data-visualization, d3
Plotly.js
Open-source JavaScript charting library behind Plotly and Dash
Stars: ✭ 14,268 (+206.9%)
Mutual labels:  data-visualization, d3
Floweaver
View flow data as Sankey diagrams
Stars: ✭ 266 (-94.28%)
Mutual labels:  data-visualization, d3

该项目暂停维护

这个项目存在很多历史遗留问题,使用起来也不是非常便利。因此我开了一个新坑,旨在能够更好地制作此类数据可视化视频。

新项目地址:

anichart.js: https://github.com/Jannchie/anichart.js

个人精力有限,此项目基本上不会更新代码了。此项目的代码仍能使用,如果出现问题,也可以发邮件到[email protected],我会予以修复。


动态排名数据可视化

将历史数据排名转化为动态柱状图图表

English

GitHub issues GitHub stars GitHub forks GitHub license

这是一个数据可视化项目,基于D3.js。能够将历史数据排名转化为动态柱状图图表。

这个项目旨在降低此类视频的使用门槛与提高生产效率,使得没有编程经验的用户也能无痛制作排名可视化动画。


一句话用法

只需打开src目录下的bargraph.html。然后点击页面中间的选择文件按钮,接着选择csv格式的数据文件,便可以看到可视化的结果。

数据格式

本项目能够读取csv格式的数据。

具体的格式如下:

name type value date
名称1 类型1 值1 日期1
名称2 类型2 值2 日期2

其中“名称”会出现在柱状图的左侧作为Y轴,而“类型-名称”会作为附加信息出现在柱状图上。

类型与柱状图的颜色相关,建议命名为不包含空格或者特殊符号的中英文字符。

值与柱状图的长度绑定,必须是整数或浮点数。

日期建议使用的格式为"YYYY-MM-DD"。

配置

本项目能够进行一些简单的定制。

使用记事本或者其他文本编辑器,打开config.js的文件即可进行一些参数的修改。


更新日志

2020-03-01

  • 美化了图片的位置
  • 美化了描边

2019-04-16

  • 合并了数个分支。
  • 更新了英文版README,将颜色代码统一为HEX格式。--BY rabbitism
  • 在渐变色模式下,添加了根据类型选择渐变色板的功能。--BY MiracleXYZ
  • 添加always_up属性,用于反向排行榜,条目退出排行榜时都会上浮。--BY MiracleXYZ
  • 控制配置文件篇幅,将imgs和color_ranges移动到其他的文件中,方便进行其他属性的配置。--BY MiracleXYZ
  • 修复了图片模式下一些名字中含有特殊符号(如英文括号和引号)导致图片无法正常显示的问题。--BY MiracleXYZ

2019-03-30

  • 修复了反格式化函数的一些错误。

2019-03-20

  • 添加了反格式化函数。

2019-02-11

  • 修复了没有后缀时数据会从零开始的问题。

2019-02-10

  • 更新了默认编码和example.csv。

2019-02-09

  • 现在可以添加在图表的数值上添加后缀了。
  • 在使用动态颜色时,可以自定义颜色渐变了。

2019-01-14

  • 优化了图像选取算法,在图片极多的情况下也不会卡顿了。

2019-01-13

  • 现在柱状图颜色变化时图片边框颜色也会变化了。

2019-01-11

  • 现在柱状图可以设置为圆角矩形。
  • 现在可以添加图片Logo。
  • 现在可以调整左侧label的显示与位置。
  • 现在可以在config中调整全局背景色。

2018-12-25

  • 为了规避字体版权问题,默认采用思源黑体。

2018-11-29

  • 现在发生错误会弹出对话框,便于定位并描述错误了。

2018-11-26

  • 史诗级更新,更新了动画算法。
  • 现在可以通过选项指定匀速运动。

2018-11-18

  • 修复一些bug
  • 现在使用计数器会自动覆盖掉type标签,而不是直接报错。

2018-10-14

  • 不再使用webpack了。webpack并不适用于如此之小的项目,使用webpack感觉只会增加调试和二次开发的门槛。
  • 不再使用css来控制颜色的选择了。现在可以在config.js中进行设置。
  • 现在默认随机配色,并且可以只指定部分颜色了。
  • 添加了颜色绑定增长率的选项,开启后颜色与增长率有关。越黄越快,越蓝越慢。
  • 添加了barinfo过长时的另一种显示方法,在config.js中用long参数控制。

2018-08-04

  • 美化随机配色。
  • 修改了配置说明。
  • 美化进入退出效果。

2018-07-31

  • 修复了中途修改type不会改变类型的问题。
  • 删除了运行不正常的dividing_line,改为使用allow_up属性,该属性使得高于平均值的条目能够上浮退出。

2018-07-23

  • 添加了数据都很大时的坐标轴策略,如果所有数字都很大,导致拉不开差距则开启此项使得坐标原点变换为(最小值)*2-(最大值)。
  • 添加了当数字量级差距巨大时的坐标轴策略(开启半对数坐标)。
  • 修复了时间的排序方式。
  • 添加了reverse配置,使得使得最短的bar位于最上方。

2018-07-22

  • 修复了自定义颜色时,无法按照名称来上色的BUG。
  • 修复了自定义颜色时,名称和数值没有正确上色的BUG。

2018-07-21

  • 修复了上色机制,并且现在可以选择按照类型还是按照名称上色了。

2018-07-20

  • 现在可以关闭自动排序了。
  • 现在能选择条状图进入时是从零开始还是从当前的数值开始了。

2018-07-19

  • 现在可以在配置文件里控制每日最大的显示条目数了。
  • 现在在配置文件里配置成不显示type能够移除柱状图上的类型了。
  • 现在能够在配置文件中选择自定义颜色了。
  • 使用更加合理的随机颜色。
  • speed属性更名为interval_time。
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].