📢 #3 Charts 📈 🈸 📊 in VSCode

Encouraged by the 40+ reactions & over 1k views on my first two posts on this dev site overnight, I'd like to share with you another VSCode extension I started working on recently to gauge devs interest in viewing and prototyping charts in vscode.

Back Story

First, I should probably provide some background info why I created #1 Vega Viewer 📈 & #2 Data Preview 🈸 vscode dataViz dev tools this year.

I've been doing a lot of custom dataViz dev work through my indy co. Random Fractals Inc. for years, mostly using d3 & Py libraries. They are great tools to visualize data. However, diving into raw d3 and even Jupyter notebooks require years of practice and experience.

You can explore my OSS #jsNotebooks 📚 on ObservableHQ: https://observablehq.com/@randomfractals

& Py notebooks I've done on Chicago crimes here :(
https://www.linkedin.com/pulse/chicago-crimes-2017-taras-novak

#1 Hello, Vega! :)

Lately, a lot of great charting libraries came on the scene to alleviate the raw d3.js pain.

Vega library is one of them. Vega provides simple JSON visualization grammar with great support for JavaScript, TypeScript & Python language libraries.

See Vega-Lite Ecosystem page for tools, plugins & language bindings you can use for Vega charts 📊, maps 🗺️ & graphs 📈.

I started off this year by creating Vega Viewer 📈 extension for VSCode since it's the IDE I use for all of my JS, TS, C#, Py & Java dev work.

While Vega provides a great online Vega Editor I found it somewhat lacking for my daily dataViz dev workflow since I often prototype charts with local data snapshots and commit those revs to github for the custom dashboards I work on.

So, I created Vega Viewer 📈 extension for vscode that allows me to prototype Vega graphs fast locally ;)

#2 Data Preview 🈸

Shortly after, I also discovered that VSCode doesn't really have a good extension for previewing raw data for exploratory data analysis if you don't count the recent Jupyter notebooks support Microsoft added this year.

So, I created Data Preview 🈸 extension with pluggable data providers for different data formats, including all the Excel files and the popular Apache Arrow data format used by most dataViz geeks and data scientists today.

I picked Perspecive library for that extension Data View part due to built-in Arrow data support, fast canvas-based grid rendering, some basic built-in charts features, and extremely fast data transformations via webAssembly.

I jotted some ideas to make Data Preview 🈸 better in the future revs here: https://github.com/RandomFractals/vscode-data-preview/issues if you'd like to peruse that list & 👍 the features you'd like to see there next.

#3 Chart.js 📊 Preview

Because all good things come in 3's as Nikola Tesla used to say, I recently published this Chart.js Preview MVP extension.

Chart.js Preview 📊 for VSCcode

Features

Chart.js Preivew 📊 of json5 .chart config files.

See ./samples for chart config examples.

Note: more Chart.js Samples will be added in the next v. update!

Usage

1. Use Chart: Chart Samples command from View -> Command Pallette... menu
   for a quick list of built-in chart config examples.

2. Run Chart: Preview Chart command on an open .chart.json5 chart config document to Preview 📊

Chart.js Preview 📊 VSCode Contributions

Chart.js Preview 📊 Commands

Dev Log

See #ChartJS 📊 tag on Twitter for the latest & greatest updates on this vscode extension & what's in store next.

Next

I did reach out to the chart.js library maintainers via github & in their Slack. However, I have not received a single response from that OSS charting library team expressing interest in this vscode extension, even tho it seems to be very popular with JS devs from all walks of life :)

So, I'm just gonna leave this here for now in case vscode devs using this site are interested in having such an extension for quick chart.js prototypes. I can add more .chart.json5 config examples for the curious minds ...

Post your comments on that || the other 2 dataViz dev tools I've built for vscode below.

Cheers!

P.S.:

Comments

[Aman Mittal]

Awesome! 🤩🤯

[dataPixy 🧚‍♂️]

quick update on that last chartJS 📊 bit :)

dataPixy

@tarasnovak

as they say, if you build it, they will come! :)
Adding #chartJS examples to my 3rd #codeGraphs #extension today. Here is what #lineStyles #chart #config looks like in that ext. More info here:
dev.to/tarasnovak/3-c…
Stay tuned for updates!
#dataPixy🧚‍♂️ #dataViz 📊 #devTools 🔬

12:15 PM - 11 Nov 2019

0 0

[dataPixy 🧚‍♂️]

fyi, Chart.js Preview ext. v1.2.0 is out now:

dataPixy

@tarasnovak

#chartJS #preview @code #extension v1.2.0 is out with a few built-in #barChart📊 & #lineChart📈 samples:
📥 marketplace.visualstudio.com/items...
👀 github.com/RandomFractals…
more to come soon! stay tuned! ;)
#dataPixy 🧚‍♂️ #dataViz 📊📈📉 #devTools 🔬 ...

12:51 PM - 13 Nov 2019

0 1

Give it a whirl! It's got a few bar chart and line chart config samples to play with :)