• Stars
    star
    4,677
  • Rank 9,047 (Top 0.2 %)
  • Language
    JavaScript
  • License
    GNU General Publi...
  • Created over 6 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

[Deprecated!] This is a data visualization project that converts historical data rankings into dynamic bar charts.

该项目暂停维护

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

新项目地址:

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。

More Repositories

1

anichart.js

Easily create data visualization animation videos
TypeScript
1,053
star
2

biliob-frontend

The frontend part of biliob.
Vue
127
star
3

biliob_backend

bilibili data acquisition and analysis.
Java
92
star
4

simpyder

超高速异步协程Python爬虫
Python
77
star
5

ComfyUI-J

Jannchie's ComfyUI custom nodes.
Python
69
star
6

codetime-web-v3

Front-end page of codetime, third version.
TypeScript
28
star
7

BilibiliRankListSpider

一个B站排行榜的爬虫Py程序
Python
26
star
8

roku-ui

又一个组件库,但是很好看。
TypeScript
23
star
9

biliob-spider-public

Publicable crawler part of the BiliOB
23
star
10

pyoxies

Python proxy pool
Python
17
star
11

gazer-system

Gazer system is used to track data.
Go
12
star
12

Software-Design-Pattern-Note

软件设计模式笔记
11
star
13

vue-ios-sheet

Vue
9
star
14

algorithm-c

各种算法的实现(C语言版本)
C
7
star
15

my-open-code-snippet

Some code snippet that opened to public.
Python
6
star
16

SchoolMap

It's a school map of HIT(WH) Based on QT (数据结构大作业,基于QT的校园地图)
C++
6
star
17

codetime-web

TypeScript
6
star
18

anichart-template

anichart template
TypeScript
6
star
19

jannchie.com

My profile, powered by nuxt.
Vue
5
star
20

anichart.io

Vue
4
star
21

Computer-Network-Notes

计算机网络复习笔记
4
star
22

Jannchie

4
star
23

anichart-remotion-template

TypeScript
3
star
24

ZEROROKU-QQ-Bot

QQ Bot
Python
3
star
25

biliob-analytics

Use NodeJS to analyze and sort out Biliob data.
JavaScript
3
star
26

jannchie-workspace-python3-webapp

A python webapp
Python
3
star
27

vuetify-template

This is an out-of-the-box template that uses Vue.js 2.0 and Vuetify.js. Devoting to help users start projects faster.
JavaScript
3
star
28

6tp

6tp is a simple IPv6 transport proxy, specifically designed to generate and assign random IP addresses from a specified subnet for efficient request handling and network traffic distribution.
Go
3
star
29

eslint-config

Jannchie's eslint config.
TypeScript
3
star
30

gitcm

An opinionated git commits message helper.
TypeScript
3
star
31

cake47.art

Cake47's Illustration Studio
Vue
3
star
32

gemini-chat-ui

Gemini Style Web UI, for ChatGPT Services
Vue
3
star
33

roku-charts

TypeScript
2
star
34

Tr.GPT

Translator GPT (https://trgpt.app/)
TypeScript
2
star
35

geoJson-map-data

2
star
36

spider-cookies

Parse and stringify cookies for web spider.
TypeScript
2
star
37

simple-diffusion

Stable Diffusion Web UI without Web UI
Python
2
star
38

zeroroku

TypeScript
2
star
39

word-recite-app-front-end

the front end of an app for memorizing vocabulary. Base on VUE.
Vue
2
star
40

koishi-plugin-openai-chatbot

A plugin for Koishi to integrate with OpenAI's GPT-3 language model as a chatbot.
TypeScript
2
star
41

log

My personal logs.
2
star
42

spying.js

Spy on the data of any website, for a long time.
TypeScript
2
star
43

zrrk

ZRRK is a Zappy live Room Robot toolKit.
Go
1
star
44

AdressListWebSite

A small web application to practise js and HTML skills
HTML
1
star
45

STR

Simple Tag Recommender.
Python
1
star
46

speedo

Go
1
star
47

anichart-remotion

Utility library for generate video from anichart by remotion.
TypeScript
1
star
48

PNCF

Neural collaborative filtering based on pre-trained embedding
Python
1
star
49

blog

Vue
1
star
50

anichart-doc

1
star
51

rank-spider

Crawl the data and calculate the ranklist.
Python
1
star
52

active-time

Automatic recording of time spent using the PC
TypeScript
1
star
53

vue-wf

Vue waterfall layout
Vue
1
star
54

furigana

Vue
1
star
55

anichart-v4

TypeScript
1
star
56

tgit-rs

TGIT is a tool for managing git repositories.
Rust
1
star