DEV Community

Cover image for πŸ“’ #3 Charts πŸ“ˆ 🈸 πŸ“Š in VSCode
dataPixy πŸ§šβ€β™‚οΈ
dataPixy πŸ§šβ€β™‚οΈ

Posted on • Updated on

πŸ“’ #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 ;)

Box Plot

#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.

Data Preview

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

Chart.js Preview

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 Contributions

Chart.js Preview πŸ“Š Commands

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.:

Top comments (3)

Collapse
 
amanhimself profile image
Aman Mittal • Edited

Awesome! 🀩🀯

Collapse
 
tarasnovak profile image
dataPixy πŸ§šβ€β™‚οΈ

quick update on that last chartJS πŸ“Š bit :)

Collapse
 
tarasnovak profile image
dataPixy πŸ§šβ€β™‚οΈ

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

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