The code base that powered India in Pixels' YouTube channel for more than 2 years - now open sourced for you to use on your own projects

Overview

India in Pixels Bar Chart Racing

cover

For over two years, this nifty code base powered India in Pixels' YouTube channel with videos fetching over millions of views in cricket, economy and culture.

How to use it?

Download the code base. You only should have to modify data.json in the same format as presented in the example. If you have your data as a google spreadsheet, you can use a website like csv2json to convert it into JSON.

If you wish to delve deeper into customizing color and speed, you can easily experiment changing variables in Timeline.js

The project uses the wonderful p5.js to do most of the visualization.

Why are you doing this?

I feel India in Pixels has received a lot of love and support from its community. It has grown thanks to the open source data that several government and private organisations have made freely available. Now that India in Pixels is no longer making bar chart racing videos (and has shifted to more narration like styles), it feels to give the code base back to the community so that some young creative nerd can make good use of it.

If this codebase helps you in any form, you can support IIP via UPI: indiainpixels@paytm if you are in India or Patreon at Patreon if you are overseas

LICENSE

Open sourced under MIT License

Request for collaborators

The code so far was used for personal use, so it is written in a well, haphazard fashion. If you are interested in improving the code quality, you are most welcome to fork the repo and submit a Pull Request.

Authors

Ashris

You might also like...

Chart.js plugin for more styling options

chartjs-plugin-style Chart.js plugin for more styling options This plugin requires Chart.js 2.6.0 or later. Installation You can download the latest v

Oct 27, 2022

Show page in a more document like look and provide quick exporting.

logseq-plugin-doc 将页面已更加文章化的形式展示,并提供快速导出功能。 Show page in a more document like look and provide quick exporting. 使用展示 (Usage) 关于无序列表 (About bullet list

Dec 22, 2022

Ember Charts 3.5 2.3 L2 JavaScript A powerful and easy to use charting library for Ember.js

Ember Charts A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to

Dec 7, 2022

An experiment to use Polymer based mixins with Lit.

Polylit An experiment to use Polymer based mixins with Lit. Setup npm install Run tests npm test Features The following features are included: ready()

Jul 30, 2022

Simple package to facilitate and automate the use of charts in Laravel 5.x using Chartjs v2 library

laravel-chartjs - Chart.js v2 wrapper for Laravel 5.x Simple package to facilitate and automate the use of charts in Laravel 5.x using the Chart.js v2

Dec 15, 2022

Java library for use with Chart.js javascript library

Chart.java Chart.java enables integration with the excellent Chart.js library from within a Java application. Usage example In Java: BarDataset datase

Dec 16, 2022

This adapter allows the use of Moment.js with Chart.js

chartjs-adapter-moment Overview This adapter allows the use of Moment.js with Chart.js. Moment.js is a very heavy library and thus not recommended for

Dec 27, 2022

The CCF Backstage Plugin is a tool to estimate energy use (kilowatt-hours) and carbon emissions (metric tons CO2e) from public cloud usage that is meant to be consumed as a plugin into a Backstage application

The CCF Backstage Plugin is a tool to estimate energy use (kilowatt-hours) and carbon emissions (metric tons CO2e) from public cloud usage that is meant to be consumed as a plugin into a Backstage application

CCF Backstage Plugin Understand how your cloud usage impacts our environment and what you can do about it. This plugin brings the functionallity of th

Nov 6, 2022

An easy-to-use cross-framework JS charting library

An easy-to-use cross-framework JS charting library

Compact Chart Visualize your data under a minute, in any Javascript framework Table of Contents About How to use it Examples Demo Plain HTML Example w

Jul 28, 2021
Owner
India in Pixels
Visual storytelling for the Indian Subcontinent
India in Pixels
Composable data visualisation library for web with a data-first approach now powered by WebAssembly

What is Muze? Muze is a free data visualization library for creating exploratory data visualizations (like Tableau) in browser, using WebAssembly. It

Charts.com 1.2k Dec 29, 2022
HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

HTML Canvas Gauges v2.1 Installation Documentation Add-Ons Special Thanks License This is tiny implementation of highly configurable gauge using pure

Mykhailo Stadnyk 1.5k Dec 30, 2022
A web app that shows visualizations of the most used graphs algorithms such as BFS, DFS, Dijsktra, Minimum spanning tree, etc. It allows you to draw your own graph.

Graph Visualizer Draw your own graphs and visualize the most common graph algorithms This web application allows you to draw a graph from zero, with p

Gonzalo Pereira 31 Jul 29, 2022
Matteo Bruni 4.7k Jan 4, 2023
danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

Danfojs: powerful javascript data analysis toolkit What is it? Danfo.js is a javascript package that provides fast, flexible, and expressive data stru

JSdata 4k Dec 29, 2022
A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.

freeboard free·board (noun) *\ˈfrē-ˌbȯrd* the distance between the waterline and the main deck or weather deck of a ship or between the level of the w

freeboard 6.3k Dec 28, 2022
3D graph viewer powered by WebGL (three.js)

Graphosaurus A three-dimensional static graph viewer. (click the image to try it out) Demos EVE Online map Add nodes incrementally Documentation JSDoc

Corey Farwell 362 Dec 4, 2022
A r/place clone powered by websockets

canvas A r/place clone powered by websockets That's pretty much it. https://canvas.rto.run To build, run npm install and then node main.js to start th

Chunkybanana 9 Oct 19, 2022
A repostory of samples, which demonstrates, how to use the 'Power Tools' extension for Visual Studio Code.

vscode-powertools-samples A repository of samples, which demonstrates, how to use the Power Tools extension for Visual Studio Code. Apps data-url-conv

e.GO Mobile 7 Feb 3, 2022
A global H3 population dataset optimized for consumption in Helium mapping projects.

H3 Population Helium A global population dataset based on Uber's H3 mapping system and seeded from the open source Kontur Population dataset. Optimize

Arman Dezfuli-Arjomandi 6 Apr 25, 2022