In this series of articles, we’ll deepen our knowledge of the principal statistical concepts. This time we’re going to bring our attention to the measures of central tendency. Plus, we’ll learn how to calculate them in WebDataRocks.
The last update of WebDataRocks pivot table brought a lot of new tweaks that improved reporting a lot. It didn’t take long for us to prepare a new stack of features for flawless data visualization and analysis.
All along we’ve been working on extending our product’s integration opportunities, thus you will find new advancements to match new libraries and technologies. Being more specific, we made new integrations with Django, Jupyter Notebook & amCharts.
Get ready to learn more.??
We couldn’t overlook Python developers, as this language is so widely used for developing different web apps and software. It’s also the core for scientific reporting, statistical analysis, and far more. Thus, we made it possible to work with our web reporting tool.
We provide you with the two most common scenarios where we think the pivot table could be perfectly used.
It’s well-known how the Django framework is loved for its wide range of features and ease of programming. With this in mind we made the way to integrate the pivot table with Django as simple as the framework requires.
Our team prepared a guide and a ready-to-use sample on GitHub that can be run with a few code lines.
Now you can easily create configurable and interactive reports with pivot based on your business data and share it with users directly from your Django application.
The Jupyter Notebook, a spin-off project from the IPython, is used for creating visualizations, calculations and analytics. Well, it sounds like a perfect match for WebDataRocks. Why don’t we use them both (WebdataRocks and Jupiter) to empower the visualization process and somehow to save your time for data aggregation? We offer a totally new but effective approach to render WebDataRocks Pivot Table in the Notebook’s cell to get the immediate result. No need for new code lines to manipulate data.
Yes, it’s that simple.
All you need is just go with the GitHub project we prepared and follow some steps. Then play with your data the way you want, results are on you.
This charting library has caught our attention because of its stylish design and variety of charts it offers that could spice up nicely any report.
The other value that should be stressed out is that as input, some charts need to accept already aggregated data, here is where our component will especially come in handy. It works as follows: you take your dataset, then pivot, calculate it the way you need with WebDataRocks, and after – send prepared data to charts. All is done on the fly. It’s undoubtedly а win-win process.
Our JavaScript Pivot tool could be integrated with any charts but for the most used ones, we support our users with connectors to make the integration effortless. For integration with amCharts, we do the same. Now you can easily use both our libraries to create interactive and insightful reports, set up elegant dynamic dashboards, and visualize your data the way you see it.
We prepared the connector and detailed tutorial.
But first, let’s take a look at the demo:
See the Pen Dashboard with amCharts & WebDataRocks Pivot Table by WebDataRocks (@webdatarocks) on CodePen.
In hope, you will find it useful and these new features will cheer you up these days.
Stay tuned for further updates!
? All you need to start using the latest version:
The value of data visualization can’t be overestimated. With it, you can make data expressive and insightful, which was raw and dry in the first place. Provided that it approached right, visualization makes complicated things appear more understandable and graspable to the audience. By depicting data in graphs, maps, or pivot tables, you can deliver the same information more effectively. Sure, we could infinitely list the benefits of data visualization. But let’s get straight to the purpose of this blog post.
This time we suggest you become closer to competence in the data visualization field. We believe it’s a crucial skill not only in the labor market but also in daily life. It teaches you to communicate results in constructive and creative ways.
To help you get on the right path from the very beginning, we hand-picked the best courses for data visualization using JavaScript.
All of these courses differ in content but have one common purpose: to teach you how to visualize data with a universal and low-level library, which D3.js is.
And there’s a reason behind that. D3.js is an acknowledged standard in the data visualization world. From a developer standpoint, it’s simply a low-level JavaScript library. Most often, it works under the hood of modern high-level data visualization libraries because it’s highly flexible, responsive, and fast when it comes to interaction and animation. This is why understanding the basics of D3 is a must-have if you want to become an expert in the data visualization domain and build unique projects from scratch.
We hope you’ll pick one or two courses that fit your learning manner best and, step-by-step, grow from a beginner to a professional.
Let’s dive into the courses’ highlights!
This 13-hour video course is one-of-a-kind. Not only is it free but also high-quality and incredibly comprehensive. With all his enthusiasm and a great sense of humor, Beau Carnes shares knowledge on how to ask the right questions about data visualization goals, what story to tell, and which problem to solve – the things that are important at the outset of every data visualization project.
After learning about data visualization objectives, you’re going to get familiar with the world of JavaScript, HTML, CSS, and SVG. So, if you’re a newbie in web development, that’s totally fine.
Then you’ll dive into D3.js: build all kinds of visualizations, customize them, and a lot more. You’ll even learn how all these fancy interactive maps on the web are built and develop your own one.
And all of this at a comfortable pace.
Use the timecodes under the video to jump from one topic to another. But if you prefer a more classical Coursera-like approach, where the content is divided by weeks, I recommend visiting this page, prepared by Curran Kelleher. It contains the same content but split into categories. Under each topic, you can see the aggregated compilation of relevant resources.
Have fun!
This course is a part of the Information Visualization Specialization by New York University Tandon School of Engineering.
Prerequisites: basic programming experience is required.
In general, the specialization focuses on the importance of data visualization. In particular, the course itself brings a strong focus on programming visualizations using the D3.js library. After learning the basics of HTML, CSS, and JavaScript, you’ll develop a basic understanding of D3.js and its main aspects. With it, you’ll learn how to:
Other topics include drawing lines, arcs, different kinds of charts, including maps. Finally, you’ll learn how to visualize networks and hierarchical data.
Your charts will be interactive since you’ll learn how to listen to events and update data.
After each week, you’ll pass programming assignments to put your knowledge into practice and stress test yourself with quizzes. I can’t think of a better way to learn new things.
Prerequisites: basic knowledge of JavaScript objects and its fundamentals. Strong understanding of the DOM.
This course is an introduction to D3. It takes 2 hours to complete the course. During this time, you’ll understand the basics of D3.js: Selection, data-element relationship, the “d” parameter, data styling, entering & appending data, chaining syntax, and adding interactivity with events.
As a final project, you’ll create a data visualization related to climate change.
Note that this course is available only by Codecademy subscription.
Prerequisites: basic skills in JavaScript
This course gives you a fascinating introduction into D3.js and walks you through from a beginner level to building advanced custom data visualizations.
It’s created by front-end and data visualization experts who can share knowledge of real-world cases. Every video keeps you inspired to become better at data visualization. The content is balanced both with theoretical knowledge and code practice. During watching, you can try building visualizations by yourself and see how the data livens up.
If you’re a React developer, you may be interested in the D3.js for React course.
This course is available through a paid membership.
Prerequisites: confident knowledge of D3.js and JavaScript
If you want to focus on creating geospatial visualizations only, this course is the right choice. You’ll learn how to use the D3.js library as an excellent instrument for rendering maps and making them beautiful with visualizations.
Start your journey by learning about GeoJSON and master making maps interactive. In the advanced part of the course, you’ll learn how to add zooming, cities, and panning to the maps.
It takes 1 hour 14 minutes to complete the course. Available through Pluralsight subscription.
After completion of some of these courses, you will:
The gained knowledge will be relevant for a long time, regardless of the technology trends changes. You’ll be able to apply these skills in a lot of areas and, at the same time, not be limited to using proprietary libraries.
⌨️ Feel the need to improve your web development skills before starting to work with D3.js? We know where it’s best to do. Surf GitConnected – there you’ll find the courses and tutorials that will teach you JavaScript, HTML, CSS, and much more.
We all had to write reports at some point in our lives. In school, we were asked to write essays about the human anatomy, parts of a flower, our thoughts about a particular movie, and the like.
As we progressed to working for companies, we were tasked to write reports about sales, the company’s accomplishments, etc. It’s a task placed on our to-do list every now and then.
Hey there!
Missed practical tutorials?
Let’s get to know the API events of WebDataRocks better. This time we’ll cover the purposes and use cases of the most popular ones.
You might have noticed the trend of sharing with you WebDataRocks demos based on interesting datasets, mainly from Kaggle.
And there’s a strong reason for that.
Recently we’ve talked about the top frameworks in 2020. Let’s take a closer look at Vue – one of the youngest and most progressive client-side frameworks nowadays.
While React stays the most dominant of all frameworks, Vue is not far behind.
Over the last years, the community and ecosystem of Vue grew at a rapid pace. You can make sure of it by looking at the number of its uses, contributions, and stars on GitHub.
Besides, according to the recent State of JS 2019 front-end frameworks results, Vue is among top three front-end frameworks with which web developers are most satisfied.
Being a completely free-to-use project, it relies mostly on crowdfunding and sponsors. It’s supported by Standard Library, Bit, Vue School, NativeScript, Vehikl, CircleCI, and other patrons.
As well as React, Vue supports the Virtual DOM, component–based approach, keeps the logic of routing and state management separated, and allows building mobile applications.
Under the hood, it unites the best features of React, Angular, and Ember and adds its own approaches.
You can use Vue’s official packages for state management, routing, server-side rendering.
The reasons to learn Vue.js in 2020 are:
Vue is considered to be a nice fit for enterprise applications. Based on feedback from software developers, you can integrate Vue into the project incrementally.
IBM, GitLab, Alibaba, Adobe, Xiaomi, Netflix (for internal apps), Behance, WizzAir, and Grammarly – all these companies trust Vue. They have successful examples of adopting Vue as a front-end technology.
Yes. As well as all great frameworks, this library is open-source and licensed under MIT.
Choosing the right framework for your web application is a real piece of work since diverse aspects should be taken into in-depth consideration. We hope this overview will encourage you to try Vue and decide whether it matches your project’s needs.
Searching for a reporting tool for your Vue.js project? We’ve prepared a nicely working wrapper for you ?
The choice of a JavaScript framework always depends on project-specific requirements.
You should take into consideration various aspects: its footprint, performance, reusability, and, not of the least, community support.
Knowing how difficult it’s to always keep up with the trend, we’ve decided to make a list of the best front-end frameworks based on the personal experience and opinion of the developer’s community.
Let’s put a spotlight on these top five frameworks and libraries:
Whether you are a beginner or an experienced front-end developer, you would have definitely heard of React.
Created by Facebook developers with the initial intention to make their code more efficient, currently React is a leading front-end framework and the fastest growing technology. This is not surprising as it greatly simplifies the process of building rich and interactive UIs for web applications.
The results of the State of JavaScript 2018 show that during 2016-2018 years the popularity of React kept growing gradually.
What is great is that it’s backed up by the large community of developers from all around the world.
Moreover, the framework is completely user-friendly for newcomers – the guides help to cope with any difficulties that occur during the learning. Therefore, you can learn the basics of React in a few hours and master its advanced aspects with detailed documentation further.
Alongside React, developers tend to use ES6, Redux state management library, Express, Jest and React Native for a seamless mobile experience.
Developers love React for these features:
On top of that, it’s a good choice if you have to deal with real-time data in your application.
We’ve picked articles that will help you get started with React and learn more about it from a developer’s perspective:
Despite being a young framework, Vue continues to get more and more attention every month from developer’s community. It has become more stable years after the initial launch and succeeded in bringing value to a lot of startups and enterprise companies. Yes, React and Angular still win Vue in terms of overall popularity and try to put the latter in the shade, but Vue becomes gradually adopted by software developers. According to the State of JS 2018, around 50% of respondents would like to learn this framework and not without a reason.
Vue is appreciated mainly for its gentle learning curve and reduced complexity thanks to which building simple web applications takes little time. It makes the components reactive, meaning any changes applied to the state object are visible in the rendered HTML in a flash.
Good news for React and Angular developers: switching to Vue is easy as it shares concepts of both frameworks.
Other Vue’s strengths are:
The last but not the least is the comprehensive documentation that covers pretty much all the features of Vue and its ecosystem. An active and ever-growing community that contributes to the development of the framework is its undeniable strength.
All in all, if you are looking for a lightweight and progressive framework which is easy to start with, Vue is a great option to try.
To dive deeper into aspects of development with Vue, we recommend reading the following articles:
Angular is an open-source platform for building user interfaces. It’s essential for large enterprise-scale projects and holds the top positions among front-end frameworks.
Initially, it was developed by Google engineers in 2009 and was known as AngularJS.
Later, in 2016, the framework was rewritten and started to fit the requirements of modern web development. The development team keeps releasing new versions again and again. The current version is Angular 7.0. Angular is a part of the MEAN stack that covers four major software development pillars: MongoDB, Express, Angular, and Node.js
But one should take into account that Angular more suitable for building complex long-term apps rather than SPAs as it requires a steep learning curve.
In the heart of Angular is TypeScript – a language that makes the code easier to maintain as it provides with a type system and reliable type checking. As TypeScript is updated independently from browsers, you don’t need to rely on the browser and can use all new features of the language.
Alongside the framework itself, developers use such tools as RxJS for handling asynchronous data and Angular CLI for easy creating projects, debugging and deployment.
Features for which you will love Angular are:
All in all, Angular is an awesome front-end technology for your project if you are building complex systems but not so convenient for creating fast-changing user interfaces. For the latter case, it’s better to use React and Vue which are more lightweight and have an easier learning curve. However, Angular’s steep learning curve is compensated by the reliability of the resulting software.
To get a better understanding of Angular, we recommend diving into these articles:
Google Trends gives a good idea of how the popularity of Angular, React and Vue has been changing over the last five years:
To help you choose between these three frameworks, we recommend reading the following articles:
Backbone.js is an open-source JavaScript library initially released in 2010. It’s acknowledged remarkably lightweight as it ships at 7.5KB and depends only on two other JS libraries – Underscore.js and jQuery. It’s licensed under MIT and everyone can contribute to its development.
Although it has been really trendy right after release, its popularity started to decline with the growth of React, Vue.js, and Angular. The results of the State of JS Survey show that it’s not among the top three most popular frameworks but nevertheless, it’s appreciated by many developers as it gives a structure to web applications. Trello, Soundcloud, Airbnb, and many other companies choose to use Backbone as a front-end technology.
Why use Backbone
As an intensive use of JavaScript makes the code difficult to organize and maintain, Backbone helps to overcome this problem by keeping business logic apart from the user interface and makes applications well-structured. In other words, it maintains the backbone of your application.
Models, Views, Collections, Events, Routers, and Sync are the basic components of the framework. It abstracts the DOM into views, data into models and binds them using events. Thankfully to communication via events, the entire code becomes easy to read and maintain.
Other fundamental features are:
One more advantage is that you can use a template engine of your choice with Backbone.
Though Backbone is not so actively updated these days, the bugs are fixed and the documentation is updated systematically.
All things considered, Backbone is a great choice for building both single page applications (SPAs) and complex client-side applications.
Want to learn more about Backbone? Here is a list of articles that are worth your attention:
Ever heard about Ember?
Your favorite Apple Music is built with Ember. Netflix, LinkedIn, and Microsoft and many other popular websites use Ember.
Ember.js is a free JavaScript client-side framework released in 2011.
Being designed for creating scalable SPAs, desktop, and mobile apps, it comes together with a set of tools that make up a complete development stack. With Ember’s conventions and out-of-the-box features, developers can focus more on the functionality of their apps rather than sorting out how to configure them.
Here’s the list of Ember.js strengths:
Ember is built with productivity in mind and proves to be one of the most flexible frameworks nowadays. Try Ember to see whether it’s suitable for your app.
Learn more about Ember:
It can be easily noticed that Ember overtakes Backbone in popularity:
If you’re eager to know which frameworks are the best in terms of speed and performance, we recommend digging deeper into the detailed performance benchmark results.
As developers, we know how overwhelming and challenging the process of choosing the JS framework can be.
When comparing multiple frameworks, you need to figure out how steep/gentle the learning curve is, what the nucleus of its ecosystem is, what kind of performance it provides, and more.
All the above-mentioned frameworks and libraries widen opportunities in creating outstanding UI-first applications. Now it’s your turn to decide which one is perfect for your project.
You can find more tutorials & courses for all these frameworks on GitConnected.
There are countless reasons to enjoy winter.
Christmas lights, hot cocoa, warm sweaters, presents, and more time for visiting friends and family.
But there’s one more reason to love this magical time of the year.
And it’s the WebDataRocks new release.
In anticipation of the coming winter holidays, we’re happy to present a new milestone in WebDataRocks roadmap.
And with all the new features you’ve been waiting for, we’ve launched on Product Hunt?:
https://www.producthunt.com/posts/webdatarocks-pivot-table
Please support us and share your thoughts about WebDataRocks – it will help more people discover our web reporting solution.
So, eager to know what a new release brings? Let’s dive deep into its highlights!
While Thanksgiving is a perfect time to express gratitude to people you appreciate, Giving Tuesday is a great chance to celebrate kindness and humanity. It’s an initiative that began in 2012, with a purpose to promote acting more kindly and generously.
And with this international day of charitable just around the corner, we’ve prepared a thematic tutorial for you.
Let’s take a Kaggle’s dataset about the charities in the USA and turn it into something meaningful. To explore hidden trends in the data, our helping hand will be WebDataRocks – a universal tool for reporting and data analysis.
Can’t wait to see the results? Jump right to the demo. Otherwise, let’s get hands dirty with practice!
No data analysis starts without data preparation. Take a look at your data first – does everything suit you? If not, let’s put it in good shape.
Firstly, we recommend converting CSV data to JSON since this format opens up more opportunities for customization of the way fields are displayed on the grid.
Next, define the first object in the JSON array that will be responsible for setting data types and captions for the fields. Using a separate object in the data source for defining the view and properties of the fields helps avoid manual renaming fields. You can learn more details about its structure in the Data types in JSON guide.
It’s time to pick the hierarchies you want to see on the grid. With the Field List, place them into rows, columns, and measures. Next, apply filtering to display only those hierarchies that satisfy your goals. To see the most relevant records first, sort them in ascending or descending order.
Don’t worry – you can easily arrange the fields differently with the drag-and-drop feature and look at the data from another angle at any time.
When averaging values, the numbers will likely have a lot of digits after the comma. And this is where number formatting comes in handy. Simply select the measure of interest and set needed options to beautify it:
You can also add the currency symbol and arrange its position.
In addition to sorting, you can emphasize values that speak most. Apply conditional formatting for this:
Now it’s easy to see in which cities animal charities have the highest revenue.
Voila! The report is ready to be presented to the audience. You can save it in JSON to restore work later or export to Excel, PDF, PNG, or HTML and share it with your colleagues.
Interact with a ready-to-use reporting solution on CodePen.
You can experience the full flexibility of the pivot table tool due to the dynamic nature of reports. Slice and dice your data to gain new insights about the data related to activities of charitable organizations across the USA.
WebDataRocks is available at no cost for any kind of web project.
To dive deeper into its functionality, check out the UI Guide – it covers every feature you have access through the interface.
You can also find more information on interacting with the component via API and integrating with frameworks in the API Reference and the Available Tutorials section.
If you’d like to try creating a dashboard with a pivot table, graphs, maps, and charts, we have something for you as well – a list of guides on integration with charting libraries.