Forem: David B.

Introducing a new version of org-chart lib

David B. — Sat, 14 Aug 2021 17:52:05 +0000

Org chart was first released 3 years ago after one of my clients let me open-source the code. After that many people began using it and feedback started coming in.

Apart from bug reports, there were some very interesting and useful features, which would be really great additions to this library.

Unfortunately, it’s hard to find time to work on your own open-source projects for free, when you are also working to provide for your family, pay substantial mortgage loans e.t.c.

The way I see it, the only sustainable solution is to start making money with your open-source projects.

Fortunately for me and for the project, some of the requested features were very important for one of my clients and they agreed to pay for its development.

Also, I have to mention and appreciate the people, who made donations, for which I am very grateful.

So, the work started 1.5 months ago and now it’s nearly finished. I want to highlight new features which will land on the org chart.

Improved algorithm

Org chart will use d3-flextree, which offers much more customization opportunities, than the standard tree algorithm

Better Programmatic control

Now users can directly pass the function, which will generate each node content.

It will receive the d3 node as an argument, which means you not only directly have access to original data, but you also can take advantage of all d3 helper functions, like accessing parents, depth, width, and the height of node, getting descendants and accessors, looping over children via DFS or BFS e.t.c.

Apart from that, several helper props are added to the data (_expanded, ._centered,_totalSubordinates,_directSubordinates ), which will allow you to conditionally style the node

Here is a high-level overview of the common method signatures

Improved layout

Now users will be able to switch between compact or standard tree layouts and they will also be able to choose 4 different directions (left, top, bottom, right)

Improved UX features

Now you have the possibility to programmatically fit the chart to the screen, center, and highlight any node, and request a full-screen view. You also can zoom in and out programmatically (as well as manually).

In the new version, by default, the active node and branch will get centered, which is a huge win for mobile. It reduces the time for tree exploration drastically.

New features

From now on, you can specify additional connections between any two nodes

Exporting

In the new version, you have the ability to export images in PNG or SVG format. You can pass a callback function to receive the base64 string back, which can be used to generate PDF (Check how it is done here)

New examples

Several new examples were created for you to reuse. They are featuring different designs, layouts, and approaches of how to customize the default node view.

One of the examples shows how to achieve a similar view as in the previous version using the previous data format

Integrations

The updated version fixes some bugs from the previous version. All 3 major library/framework integrations are available. The new version imports only necessary parts from the d3 library, which should provide some optimizations as well.

If you need an org chart in your project, give it a try. I’d love to hear your honest feedback.

Thank you for reading.

Github copilot - thoughts after actually trying it

David B. — Sat, 03 Jul 2021 09:08:07 +0000

After waiting some time, today I was invited to try out Github copilots' visual studio code extension.

After using it some time, I personally feel that it is a next step in the coding .

Simple commands are suggested right away

There are some very practical suggestions as well (they are trivial , but I google them all the time still)

Sometimes it suggests ridiculous solutions

But by clicking control+enter we can check several other possible solutions and choose most efficient one

It can actually generate function body from comments (usually it was other way around)

One other thing I noticed is that, sometimes, when it comes to libraries, it suggests code from old versions.

For example, in the image bellow it tries to draw scatterplot using d3 v3 (v4 was released in Jun 2016 ) and latest version is d3 v7

Aside from the issues mentioned above, I personally think that this is a next step in the AI assisted programming and can't wait to see how it will progress.

If you are eager to try it out, but you are still in waitlist , just comment your uncompleted code piece bellow and I will try respond with copilot suggested snippets.

Thanks for reading :)

Github - create a branch from issue

David B. — Wed, 23 Dec 2020 23:50:50 +0000

Coming from Gitlab to Github, the most wanted and used feature for me was the automatic creation of feature branches from issues.

This was two years ago.

Surprisingly, Github has yet to implement this useful feature. Currently, It's one of the most requested features on Github.

Realizing this, I went ahead and implemented it using the Tampermonkey script.

After installing it, you will see a new blue button on the issues page.
Clicking on it will create a new branch, which will have the same (almost) name as an issue.

Source code and installation instructions are on Github:

bumbeishvili/create-branch-from-issue

Please try it out. I really hope it will be useful for many.

And I would appreciate your feedback

Data-driven range slider introduction

David B. — Sat, 09 May 2020 09:07:37 +0000

Recently, I was working on a project, where I needed a simple and beautiful range slider component with data distribution displayed above.

Surprisingly, the search process finished unsuccessfully. I needed it for a React project, which further narrowed down my search results.

The closest thing I found was kepler.gl 's range slider, which was really beautiful and functional as well

So, I tried extracting it from the project and after 4 hours of trial and error, I surrendered without major success

That's when I decided to build it on my own and make it available for people like me

I assembled several pieces of codes from my past projects and designed a dark version of range-slider

So, there it is

bumbeishvili / data-driven-range-slider

D3.js based data-driven range slider, date time support

key points

Easy to use
Very fast
Filters and outputs data on its own (and does it in a performant way)
Easy libs & frameworks integrations
Intuitive data configuration

Let's review 3 scenarios of the data configuration process

Simple data

data = [1, 2, 3, 4, 4, 4, 4, 5, 6, 7, 8, 9, 10] 
rangeSlider.data(data)

This will give us following result

Custom access

data = ['may 1', 'may 2', 'may 3', 'may 4', 'may 4', 'may 4', 'may 4', 'may 5', 'may 6']
rangeSlider
  .data(data)
  .accessor(d=> new Date(d))

This will give us following result

Custom aggregation
Default aggregation is counting, we can use other aggregation methods as well. For example, let's aggregate sum of numbers

data = [1, 2, 3, 4, 4, 4, 4, 5, 6, 7, 8, 9, 10] 
sumArray = (arr)=> arr.reduce((a,b)=>a+b, 0)
rangeSlider
  .data(data)
  .accessor(d=>d) // we could have skipped this
  .aggregator(group => sumArray(group.values))

This will give us the following result

Brushing of the range slider will result in outputting exact ranges and selected data

It's a good way of adding interactivity to your web applications

Key links

In the case of questions, follow me on Twitter or connect on Linkedin

Thank you for reading this, I would love your feedback

Covid-19 Live Insights - Hard rework

David B. — Tue, 24 Mar 2020 16:49:59 +0000

I want to republish the coronavirus analytics platform

https://coronavirus.davidb.dev/

New features :

Live analytics - data updated in every 15 m. It comes from John Hopkins university repo and Worldometers.

Location-based content - based on your location, the corresponding country will be highlighted and corresponding language will be set.

Predictions - Predictions are made using polynomial regression function. 1,2,3 orders of regressions are applied, with rSquared more than 0.9. It lets you see what will happen in one week.

Mobile-Friendly - 50% of viewers were using mobile phones.

It does have one weak point, which is translation. I translated words in different languages using google translate, so they won't be perfect. Here is the translation file

Translate.csv on Github (Pull requests welcome)

As before, you can again check the country and continent level statistics and travel through time.

I don't usually like to republish things, but I spent so much time on this, I can't just let it go unnoticed.

I would appreciate your feedback

I made coronavirus spread timeline

David B. — Tue, 03 Mar 2020 15:11:33 +0000

coronavirus.davidb.dev

I am not sure where to share it, for the world to see, I personally think it's very useful since you can check current and past stats