Making Movies With amCharts

In this article, I want to show off the flexibility and real power of amCharts 4. We’re going to learn how to combine multiple charts that run together with animations that form a movie experience. Even if you’re only interested in creating a different kind of animation that has nothing to do with charts, you can still use this library, since it’s more than making charts. The core of amCharts is made to help with everything SVG: creation, layout, … Read article
The post Making Movies With amCharts appeared first on CSS-Tricks.

Link: https://css-tricks.com/making-movies-with-amcharts/

A CSS Venn Diagram

This is pretty wild: Adrian Roselli has made a series of rather complex Venn diagrams using nothing but CSS. With a combination of the Firefox dev inspector, plus a mixture of CSS Grid and the shape-outside property, it’s possible to do this and without a ton of hacks, too.
I also think it’s super cute that Adrian has made the code snippets in this post look like the display from an old monitor, like the one Chris recently broke down.…
The post A CSS Venn Diagram appeared first on CSS-Tricks.

Link: http://adrianroselli.com/2018/12/a-css-venn-diagram.html

Hand roll charts with D3 like you actually know what you’re doing

Charts! My least favorite subject besides Social Studies. But you just won’t get very far in this industry before someone wants you to make a chart. I don’t know what it is with people and charts, but apparently we can’t have a civilization without a bar chart showing Maggie’s sales for last month so by ALL MEANS — let’s make a chart.

Yes, I know this is not how you would display this data. I’m trying to make a point…
The post Hand roll charts with D3 like you actually know what you’re doing appeared first on CSS-Tricks.

Link: https://css-tricks.com/hand-roll-charts-with-d3-like-you-actually-know-what-youre-doing/

Simple Interactive Pie Chart with CSS Variables and Houdini Magic

I got the idea for doing something of the kind when I stumbled across this interactive SVG pie chart. While the SVG code is as compact as it gets (a single element!), using strokes for creating pie chart slices is problematic as we run into rendering issues on Windows for Firefox and Edge. Plus, in 2018, we can accomplish a lot more with a lot less JavaScript!
AI got the following result down to a single HTML element …
The post Simple Interactive Pie Chart with CSS Variables and Houdini Magic appeared first on CSS-Tricks.

Link: https://css-tricks.com/simple-interactive-pie-chart-with-css-variables-and-houdini-magic/

How to make a modern dashboard with NVD3.js

NVD3.js is a JavaScript visualization library that is free to use and open source. It’s derived from the well-known d3.js visualization library. When used the right way, this library can be extremely powerful for everyday tasks and even business operations.
For example, an online dashboard. We can use NVD3.js to compile data into a centralized space that visualizes the information in neat charts and graphs. That’s what we’re going to look at in this post.

Making a dashboard with NVD3.js …
The post How to make a modern dashboard with NVD3.js appeared first on CSS-Tricks.

Link: https://css-tricks.com/how-to-make-a-modern-dashboard-with-nvd3-js/

Creating a Bar Graph with CSS Grid

If you’re looking for more manageable ways to create bar graphs, or in search of use cases to practice CSS Grid layout, I got you!
Before we begin working on the graph, I want to talk about coding the bars, when Grid is a good approach for graphs, and we’ll also cover some code choices you might consider before getting started.

Preface
The bar is a pretty basic shape: you can control its dimensions with CSS width, height, …
The post Creating a Bar Graph with CSS Grid appeared first on CSS-Tricks.

Link: https://css-tricks.com/creating-a-bar-graph-with-css-grid/

How to Create Interactive JavaScript Charts from Custom Data Sets

Charts are a great way of visualizing complex data quickly and effectively. Whether you want to identify a trend, highlight a relationship, or make a comparison, charts help you communicate with your audience in a precise and meaningful manner.
In my previous article — Getting Started with AnyChart: 10 Practical Examples — I introduced the AnyChart library and demonstrated how it is a great fit for your data visualization needs. Today, I want to dig a little deeper and look at AnyChart’s data mapping features which allow you to create beautiful charts from custom data sets with a minimum of fuss.
I also want to look at the many ways you can customize AnyChart to suit your requirements, as well as how you can change the look and feel of AnyChart charts by using themes. There are currently 17 out-of-the-box themes to choose from, or you can create your own. And if you’ve not got the best eye for design, why not buy our book to get a leg up.
As the Head of R&D at AnyChart, I could spend all day talking about this library, but now it’s time to get down to business.
Data Mapping in AnyChart
To facilitate the integration of custom data sources into charting applications, AnyChart has special objects called data sets. These objects act as intermediate containers for data. When data is stored in data sets, AnyChart can track changes to it, analyze it, and work with this data in a more robust and effective manner. In short: interactive JavaScript charts have never been easier!
No matter if you have an array of objects, an array of arrays, or a .csv file, you can use data sets to:

ensure full and explicit control over the series created
define which column is an argument (x-axis)
define which columns hold values for which series
filter data
sort data

Basics of Data Mapping
The best way to learn how data mapping works in AnyChart is to look at an example. Let’s imagine an array with the following custom data set:
var rawData = [
[“A", 5, 4, 5, 8, 1, "bad"],
["B", 7, 1, 7, 9, 2, "good"],
["C", 9, 3, 5, 4, 3, "normal"],
["D", 1, 4, 9, 2, 4, "bad"]
];

There’s nothing too wild going on here — this kind of custom data structure is common in a lot of existing applications. But now you want to use this array in AnyChart. With many other charting libraries you would be forced to transform the data to a format that the library can work with. Well, with AnyChart things are a lot simpler — just look what we can do. First, load the array into a data set:
var rawData = [
["A", 5, 4, 5, 8, 1, "bad"],
["B", 7, 1, 7, 9, 2, "good"],
["C", 9, 3, 5, 4, 3, "normal"],
["D", 1, 4, 9, 2, 4, "bad"]
];

var dataSet = anychart.data.set(rawData);

And then, once the data has been loaded into the data set, the real magic begins: you can now create so called views. These are data sets derived from other data sets.
var rawData = [
["A", 5, 4, 5, 8, 1, "bad"],
["B", 7, 1, 7, 9, 2, "good"],
["C", 9, 3, 5, 4, 3, "normal"],
["D", 1, 4, 9, 2, 4, "bad"]
];

var dataSet = anychart.data.set(rawData);

var view1 = dataSet.mapAs({x: 0, value: 1});
var view2 = dataSet.mapAs({x: 0, value: 2});
var view3 = dataSet.mapAs({x: 0, high: 3, low: 4});
var view4 = dataSet.mapAs({x: 0, value: 5, meta: 6});

You’ll notice that when defining a view, you determine which columns from the original array are included and what names these columns get. You can then use them to create whichever kind of charts you like. For example, here’s how to create a pie chart from the custom data in the 5th column.
Note: AnyChart needs only x and value fields to create a pie chart, but the views also contain a meta field with the data from the 6th column. You can map any number of optional fields and use them as you like. For example, these fields can contain additional data to be shown as labels or as tooltips:
anychart.onDocumentLoad(function() {
var rawData = [
["A", 5, 4, 5, 8, 3, "Bad"],
["B", 7, 1, 7, 9, 5, "Good"],
["C", 9, 3, 5, 4, 4, "Normal"],
["D", 1, 4, 9, 2, 3, "Bad"]
];

var dataSet = anychart.data.set(rawData);
var view4 = dataSet.mapAs({x: 0, value: 5, meta: 6});

// create chart
var chart = anychart.pie(view4);
chart.title("AnyChart: Pie Chart from Custom Data Set");
chart.labels().format("{%meta}: {%Value}");
chart.container("container").draw();
});

And this is what we end up with:
See the Pen AnyChart Pie Chart from Data Set by SitePoint (@SitePoint) on CodePen.

Note: You can find all of the demos in this article as a CodePen collection.

Multi-Series Combination Chart with Custom Data Set
Now, let’s see how we can use the same custom data to create a combination chart with line and range area charts on the same plot. This section is going to be very short since now you know what views are. All you need to do is choose the proper views and create the necessary series explicitly:
anychart.onDocumentLoad(function() {
var rawData = [
["A", 5, 4, 5, 8, 3, "Bad"],
["B", 7, 1, 7, 9, 5, "Good"],
["C", 9, 3, 5, 4, 4, "Normal"],
["D", 1, 4, 9, 2, 3, "Bad"]
];

var dataSet = anychart.data.set(rawData);

var view1 = dataSet.mapAs({x: 0, value: 1});
var view2 = dataSet.mapAs({x: 0, value: 2});
var view3 = dataSet.mapAs({x: 0, high: 3, low: 4});

// create chart
var chart = anychart.line();
// create two line series
chart.line(view1).name("EUR");
chart.line(view2).name("USD");
// create range area series
chart.line(view2).name("Trend");

// set title and draw chart
chart.title("AnyChart: Combined Chart from Data Set");
chart.container("container").draw();
});

This is what it looks like:
See the Pen AnyChart Combined Chart from Data Set by SitePoint (@SitePoint) on CodePen.

Continue reading %How to Create Interactive JavaScript Charts from Custom Data Sets%

Link: https://www.sitepoint.com/javascript-charts-custom-data-sets/