Overview

D3.js

Stacks1.9K

Followers1.7K

Votes653

GitHub Stars111.7K

Forks22.9K

Bokeh

Stacks95

Followers183

Votes12

GitHub Stars20.2K

Forks4.2K

Bokeh vs D3.js: What are the differences?

Introduction

In this article, we will discuss the key differences between Bokeh and D3.js, two popular JavaScript libraries used for data visualization. These libraries provide powerful tools and functionalities for creating interactive visualizations on websites.

Programming Paradigm: Bokeh is primarily a Python library that generates interactive visualizations in JavaScript. It provides a high-level API and follows a declarative approach, allowing users to create visualizations by specifying their properties and interactions in Python code. On the other hand, D3.js is a JavaScript library that focuses on manipulating the Document Object Model (DOM) directly using a functional and event-driven approach. It provides a low-level API, allowing users to have fine-grained control over every aspect of their visualizations.
Data Binding and Manipulation: Bokeh provides a higher level of abstraction for data binding and manipulation. It has built-in tools to handle common tasks such as data transformation, aggregation, and filtering. D3.js, on the other hand, has a lower level of abstraction and requires users to manually manipulate the data using JavaScript. It provides powerful data manipulation capabilities, but requires more code and effort from the user's side.
Interactivity and Animation: Bokeh provides an extensive set of tools and widgets for creating interactive visualizations. It supports various types of interactivity, such as linked panning and brushing, hover tooltips, and interactive selection. Bokeh also has built-in support for animations and transitions. D3.js, being a more low-level library, provides more flexibility in terms of interactivity and animation. Users can create custom interactions and animations using the full power of JavaScript and SVG.
Community and Ecosystem: D3.js has a larger and more active community compared to Bokeh. It has been around for a longer time and has gained popularity for its flexibility and versatility. D3.js has a vast ecosystem of plugins, examples, and tutorials available, making it easier for users to find resources and get help. Bokeh, although not as mature as D3.js, also has a growing community and provides comprehensive documentation and user-friendly interfaces.
Integration with Backend Frameworks: Bokeh has better integration with popular backend frameworks like Flask and Django. It provides server-side functionalities, allowing users to build interactive visualizations that can receive and process data updates from the server. Bokeh also offers various deployment options, including standalone HTML files, embedded components, and server applications. D3.js, being a client-side library, requires additional backend infrastructure to handle data updates and server-side rendering.
Browser Compatibility: Bokeh provides a higher level of compatibility with different web browsers. It abstracts away some of the browser-specific implementation details and provides a consistent experience across different environments. D3.js, being a lower-level library, may require additional effort to ensure compatibility and handle browser-specific quirks.

In summary, Bokeh is a Python-based library that provides a higher level of abstraction for data visualization with built-in interactivity and animation support, while D3.js is a JavaScript library that offers more flexibility and control over data manipulation, interactivity, and animation. Bokeh has better integration with backend frameworks and a more beginner-friendly approach, while D3.js has a larger community, extensive ecosystem, and potential for more customization and fine-grained control.

🔥 Trending in UI Components on StackShare

FastUI UI Components

Build better UIs faster

Try it View Docs Alternatives

Try

0 0

3

Advice on D3.js, Bokeh

Ayaskant

SSE-II at Akamai

Oct 25, 2019

Needs advice

I want to get suggestions on these 2 open source js libraries (D3.js & echarts) that help in creating charts or graphs on the UI. Which one will be better for bar graphs. Which is easy to learn and start with? Which provides better features and community support?

My requirements are 1 - Plot data in X-Y axis graph where x-axis will present time till seconds level and Y-Axis will present the data corresponding to that time.

2 - Zoom-in and zoom out feature.

55.9k views55.9k

Comments

Detailed Comparison

D3.js	Bokeh
It is a JavaScript library for manipulating documents based on data. Emphasises on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework.	Bokeh is an interactive visualization library for modern web browsers. It provides elegant, concise construction of versatile graphics, and affords high-performance interactivity over large or streaming datasets.
Declarative Approach for Individual Nodes Manipulation; Functions Factory; Web Standards; Built-in ELement Inspector to Debug; Uses SVG, Canvas, and HTML; Data-driven approach to DOM Manipulation; Voronoi Diagrams; Maps and topo.	interactive visualization library ; versatile graphics ; open source; https://github.com/bokeh/bokeh
Statistics
GitHub Stars 111.7K	GitHub Stars 20.2K
GitHub Forks 22.9K	GitHub Forks 4.2K
Stacks 1.9K	Stacks 95
Followers 1.7K	Followers 183
Votes 653	Votes 12
Pros & Cons
Pros 195 Beautiful visualizations 103 Svg 92 Data-driven 81 Large set of examples 61 Data-driven documents Cons 11 Beginners cant understand at all 6 Complex syntax	Pros 12 Beautiful Interactive charts in seconds
Integrations
JavaScript React Native AngularJS React Bootstrap	Bootstrap Flask NGINX React Django Python Jupyter Tornado Streamlit

What are some alternatives to D3.js, Bokeh?

Highcharts

Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.

Plotly.js

It is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosystems (referred to as Plotly.py and Plotly.R). It can be used to produce dozens of chart types and visualizations, including statistical charts, 3D graphs, scientific charts, SVG and tile maps, financial charts and more.

Chart.js

Visualize your data in 6 different ways. Each of them animated, with a load of customisation options and interactivity extensions.

Recharts

Quickly build your charts with decoupled, reusable React components. Built on top of SVG elements with a lightweight dependency on D3 submodules.

ECharts

It is an open source visualization library implemented in JavaScript, runs smoothly on PCs and mobile devices, and is compatible with most current browsers.

ZingChart

The most feature-rich, fully customizable JavaScript charting library available used by start-ups and the Fortune 100 alike.

amCharts

amCharts is an advanced charting library that will suit any data visualization need. Our charting solution include Column, Bar, Line, Area, Step, Step without risers, Smoothed line, Candlestick, OHLC, Pie/Donut, Radar/ Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid charts as well as Gauges.

CanvasJS

Lightweight, Beautiful & Responsive Charts that make your dashboards fly even with millions of data points! Self-Hosted, Secure & Scalable charts that render across devices.

AnyChart

AnyChart is a flexible JavaScript (HTML5) based solution that allows you to create interactive and great looking charts. It is a cross-browser and cross-platform charting solution intended for everybody who deals with creation of dashboard, reporting, analytics, statistical, financial or any other data visualization solutions.