Waffle: Make Waffle (square Pie) Charts in R

waffle

Create Waffle Chart Visualizations

Description

Square pie charts (a.k.a. waffle charts) can be used to communicate parts of a whole for categorical quantities. To emulate the percentage view of a pie chart, a 10x10 grid should be used with each square representing 1% of the total. Modern uses of waffle charts do not necessarily adhere to this rule and can be created with a grid of any rectangular shape. Best practices suggest keeping the number of categories small, just as should be done when creating pie charts. Tools are provided to create waffle charts as well as stitch them together, and to use glyphs for making isotype pictograms.

It uses ggplot2 and returns a ggplot2 object.

What’s Inside the Tin

The following functions are implemented:

• waffle: Make waffle (square pie) charts
• draw_key_pictogram: Legend builder for pictograms
• fa_grep: Search Font Awesome glyph names for a pattern
• fa_list: List all Font Awesome glyphs
• geom_pictogram: Pictogram Geom
• geom_waffle: Waffle (Square pie chart) Geom
• install_fa_fonts: Install Font Awesome 5 Fonts
• iron: Veritical, left-aligned layout for waffle plots
• scale_label_pictogram: Used with geom_pictogram() to map Font Awesome fonts to labels
• theme_enhance_waffle: Waffle chart theme cruft remover that can be used with any other theme

Installation

install.packages("waffle", repos = "https://cinc.rud.is")
# or
devtools::install_git("https://git.rud.is/hrbrmstr/waffle.git")
# or
devtools::install_git("https://git.sr.ht/~hrbrmstr/waffle")
# or
devtools::install_gitlab("hrbrmstr/waffle")
# or
devtools::install_bitbucket("hrbrmstr/waffle")
# or
devtools::install_github("hrbrmstr/waffle")

Usage

library(waffle)
library(magrittr)
library(hrbrthemes)
library(ggplot2)
library(dplyr)
library(waffle)

# current verison
packageVersion("waffle")
## [1] '1.0.1'

Some new bits up first

data.frame(
  parts = factor(rep(month.abb[1:3], 3), levels=month.abb[1:3]),
  vals = c(10, 20, 30, 6, 14, 40, 30, 20, 10),
  col = rep(c("blue", "black", "red"), 3),
  fct = c(rep("Thing 1", 3),
          rep("Thing 2", 3),
          rep("Thing 3", 3))
) -> xdf

xdf %>%
  count(parts, wt = vals) %>%
  ggplot(aes(fill = parts, values = n)) +
  geom_waffle(n_rows = 20, size = 0.33, colour = "white", flip = TRUE) +
  scale_fill_manual(
    name = NULL,
    values = c("#a40000", "#c68958", "#ae6056"),
    labels = c("Fruit", "Sammich", "Pizza")
  ) +
  coord_equal() +
  theme_ipsum_rc(grid="") +
  theme_enhance_waffle()

xdf %>%
  count(parts, wt = vals) %>%
  ggplot(aes(label = parts, values = n)) +
  geom_pictogram(n_rows = 10, aes(colour = parts), flip = TRUE, make_proportional = TRUE) +
  scale_color_manual(
    name = NULL,
    values = c("#a40000", "#c68958", "#ae6056"),
    labels = c("Fruit", "Sammich", "Pizza")
  ) +
  scale_label_pictogram(
    name = NULL,
    values = c("apple-alt", "bread-slice", "pizza-slice"),
    labels = c("Fruit", "Sammich", "Pizza")
  ) +
  coord_equal() +
  theme_ipsum_rc(grid="") +
  theme_enhance_waffle() +
  theme(legend.key.height = unit(2.25, "line")) +
  theme(legend.text = element_text(size = 10, hjust = 0, vjust = 0.75))

xdf %>%
  count(parts, wt = vals) %>%
  ggplot(aes(label = parts, values = n)) +
  geom_pictogram(
    n_rows = 20, size = 6, aes(colour = parts), flip = TRUE,
    family = "FontAwesome5Brands-Regular"
  ) +
  scale_color_manual(
    name = NULL,
    values = c("#073f9c", "black", "#f34323"),
    labels = c("BitBucket", "GitHub", "Other")
  ) +
  scale_label_pictogram(
    name = NULL,
    values = c("bitbucket", "github", "git-alt"),
    labels = c("BitBucket", "GitHub", "Other")
  ) +
  coord_equal() +
  theme_ipsum_rc(grid="") +
  theme_enhance_waffle() +
  theme(legend.text = element_text(hjust = 0, vjust = 1))

Geoms!

library(hrbrthemes)
library(waffle)
library(tidyverse)

tibble(
  parts = factor(rep(month.abb[1:3], 3), levels=month.abb[1:3]),
  values = c(10, 20, 30, 6, 14, 40, 30, 20, 10),
  fct = c(rep("Thing 1", 3), rep("Thing 2", 3), rep("Thing 3", 3))
) -> xdf

ggplot(xdf, aes(fill=parts, values=values)) +
  geom_waffle(color = "white", size=1.125, n_rows = 6) +
  facet_wrap(~fct, ncol=1) +
  scale_x_discrete(expand=c(0,0)) +
  scale_y_discrete(expand=c(0,0)) +
  ggthemes::scale_fill_tableau(name=NULL) +
  coord_equal() +
  labs(
    title = "Faceted Waffle Geoms"
  ) +
  theme_ipsum_rc(grid="") +
  theme_enhance_waffle()

Waffle Bar Charts with scales!

library(dplyr)
library(waffle)

storms %>% 
  filter(year >= 2010) %>% 
  count(year, status) -> storms_df

ggplot(storms_df, aes(fill = status, values = n)) +
  geom_waffle(color = "white", size = .25, n_rows = 10, flip = TRUE) +
  facet_wrap(~year, nrow = 1, strip.position = "bottom") +
  scale_x_discrete() + 
  scale_y_continuous(labels = function(x) x * 10, # make this multiplyer the same as n_rows
                     expand = c(0,0)) +
  ggthemes::scale_fill_tableau(name=NULL) +
  coord_equal() +
  labs(
    title = "Faceted Waffle Bar Chart",
    subtitle = "{dplyr} storms data",
    x = "Year",
    y = "Count"
  ) +
  theme_minimal(base_family = "Roboto Condensed") +
  theme(panel.grid = element_blank(), axis.ticks.y = element_line()) +
  guides(fill = guide_legend(reverse = TRUE))

Basic example

parts <- c(80, 30, 20, 10)
waffle(parts, rows = 8)

Use a data frame

parts <- data.frame(
  names = LETTERS[1:4],
  vals = c(80, 30, 20, 10)
)

waffle(parts, rows = 8)

Slightly more complex example

parts <- c(`Un-breached\nUS Population` = (318 - 11 - 79), `Premera` = 11, `Anthem` = 79)

waffle(
  parts, rows = 8, size = 1, 
  colors = c("#969696", "#1879bf", "#009bda"), legend_pos = "bottom"
)

Health records breaches as fraction of US Population

One square == 1m ppl

waffle(
  parts / 10, rows = 3,
  colors = c("#969696", "#1879bf", "#009bda")
)

Health records breaches as fraction of US Population

(One square == 10m ppl)

library(extrafont)

waffle(
  parts / 10, rows = 3, colors = c("#969696", "#1879bf", "#009bda"),
  use_glyph = "medkit", size = 8
) + expand_limits(y = c(0, 4))

Replicating an old favourite

Via: https://www.nytimes.com/2008/07/20/business/20debt.html

savings <- c(
  `Mortgage\n($84,911)` = 84911, `Auto and\ntuition loans\n($14,414)` = 14414,
  `Home equity loans\n($10,062)` = 10062, `Credit Cards\n($8,565)` = 8565
)

waffle(
  savings / 392, rows = 7, size = 0.5, legend_pos = "bottom",
  colors = c("#c7d4b6", "#a3aabd", "#a0d0de", "#97b5cf")
)

Average Household Savings Each Year

(1 square == $392)

More replication

Similar to https://eagereyes.org/techniques/square-pie-charts

professional <- c(`Male` = 44, `Female (56%)` = 56)

waffle(
  professional, rows = 10, size = 0.5,
  colors = c("#af9139", "#544616")
)

Keeps factor by default levels now

With:

iron(
  waffle(c(thing1 = 0, thing2 = 100), rows = 5),
  waffle(c(thing1 = 25, thing2 = 75), rows = 5)
)

Without (you can disable this via keep parameter now):

iron(
  waffle(c(thing1 = 0, thing2 = 100), rows = 5, keep = FALSE),
  waffle(c(thing1 = 25, thing2 = 75), rows = 5, keep = FALSE)
)

Professional Workforce Makeup

Iron example (left-align & padding for multiple plots)

pain.adult.1997 <- c(`YOY (406)` = 406, `Adult (24)` = 24)

waffle(
  pain.adult.1997 / 2, rows = 7, size = 0.5,
  colors = c("#c7d4b6", "#a3aabd"),
  title = "Paine Run Brook Trout Abundance (1997)",
  xlab = "1 square = 2 fish", pad = 3
) -> A

pine.adult.1997 <- c(`YOY (221)` = 221, `Adult (143)` = 143)

waffle(
  pine.adult.1997 / 2, rows = 7, size = 0.5,
  colors = c("#c7d4b6", "#a3aabd"),
  title = "Piney River Brook Trout Abundance (1997)",
  xlab = "1 square = 2 fish", pad = 8
) -> B

stan.adult.1997 <- c(`YOY (270)` = 270, `Adult (197)` = 197)

waffle(
  stan.adult.1997 / 2, rows = 7, size = 0.5,
  colors = c("#c7d4b6", "#a3aabd"),
  title = "Staunton River Trout Abundance (1997)",
  xlab = "1 square = 2 fish"
) -> C

iron(A, B, C)

Package Code Metrics

cloc::cloc_pkg_md()

Code of Conduct

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

Download Details:

Author: hrbrmstr
Source Code: https://github.com/hrbrmstr/waffle 

#r #datavisualization #charts 

GoogleCharts.jl: Julia interface to Google Chart Tools

GoogleCharts

Julia interface to Google Chart Tools.

A Google chart involves basically four steps:

• a specification of a Google "DataTable"
• a specification of chart options
• a call to make the type of chart desired.
• a call to draw the chart

This package allows this to be done within julia by

mapping a DataFrame object into a Google DataTable.

mapping a Dict of options into a JSON object of chart options. Many of these options can be specified through keyword arguments.

providing various constructors to make the type of chart

providing a method to see the charts. This is called through Julia's show mechanism. In general, the render method can draw the chart or charts to an IOStream or file.

A basic usage (see the test/ directory for more)

using GoogleCharts, DataFrames

scatter_data = DataFrame(
    Age    = [8,  4,   11, 4, 3,   6.5],
    Weight = [12, 5.5, 14, 5, 3.5, 7  ]
)

options = Dict(:title => "Age vs. Weight comparison",
           :hAxis =>  Dict(:title => "Age", 
                       :minValue => 0, 
                       :maxValue => 15),    
           :vAxis =>  Dict(:title => "Weight", 
                       :minValue => 0, 
                       :maxValue => 15)
)

scatter_chart(scatter_data, options)

For non-nested options, keyword arguments can be given, as opposed to a dictionary:

chart = scatter_chart(scatter_data, title="Age vs. Weight comparison")

There are constructors for the following charts (cf. Charts Gallery)

       area_chart, bar_chart, bubble_chart, candlestick_chart, column_chart, combo_chart,
       gauge_chart, geo_chart, line_chart, pie_chart, scatter_chart, stepped_area_chart,
       table_chart, tree_chart, annotated_time_line, intensity_map, motion_chart, org_chart,
       image_spark_line

The helper function help_on_chart("chart_name") will open Google's documentation for the specified chart in a local browser.

The names of the data frame are used by the various charts. The order of the columns is important to the charting tools. The "Data Format" section of each web page describes this. We don't have a mechanism in place supporting Google's "Column roles".

The options are specified through a Dict which is translated into JSON by JSON.to_json. There are numerous options described in the "Configuration Options" section of each chart's web page. Some useful ones are shown in the example to set labels for the variables and the viewport. Google charts seem to like integer ranges in the viewports by default. Top-level properties, can be set using keyword arguments.

In the tests/ subdirectory is a file with implementations with this package of the basic examples from Google's web pages. Some additional examples of configurations can be found there.

The GoogleCharts.render method can draw a chart to an IOStream, a specified filename, or (when used as above) to a web page that is displayed locally. One can specify more than one chart at a time using a vector of charts.

A Plot function

There is a Plot function for plotting functions with a similar interface as Plot's plot function:

Plot(sin, 0, 2pi)

A vector of functions:

Plot([sin, u -> cos(u) > 0 ? 0 : NaN], 0, 2pi, 
       lineWidth=5, 
       title="A function and where its derivative is positive",
           vAxis=Dict(:minValue => -1.2, :maxValue => 1.2))

The Plot function uses a line_chart. The above example shows that NaN values are handled gracefully, unlike Inf values, which we replace with NaN.

Plot also works for paired vectors:

x = linspace(0, 1., 20)
y = rand(20)
Plot(x, y)                     # dot-to-dot plot
Plot(x, y, curveType="function")         # smooths things out

parametric plots

Passing a tuple of functions will produce a parametric plot:

Plot((x -> sin(2x), cos), 0, 2pi)

scatter plots

The latter shows that Plot assumes your data is a discrete approximation to a function. For scatterplots, the Scatter convenience function is given. A simple use might be:

x = linspace(0, 1., 20)
y = rand(20)
Scatter(x, y)

If the data is in a data frame format we have a interface like:

using RDatasets
mtcars = dataset("datasets", "mtcars")
Scatter(:WT, :MPG, mtcars)

And we can even use with groupby objects:

iris = dataset("datasets", "iris")
d=iris[:, [2,3,6]]          ## in the order  "x, y, grouping factor"
gp = groupby(d, :Species)
Scatter(gp)                 ## in R this would be plot(Sepal.Width ~ Sepal.Length, iris, col=Species)
                            ## or ggplot(iris, aes(x=Sepal.Length, y=Sepal.Width, color=Species)) + geom_point()

Surface plots

Some experimental code is in place for surface plots. It needs work. The basic use is like:

surfaceplot((x,y) -> x^2 + y^2, linspace(0,1,20), linspace(0,2,20))

The above does not seem to work in many browsers and does not work reliably in IJulia (only success has been with Chrome).

TODO

The googleVis package for R does a similar thing, but has more customizability. This package should try and provide similar features. In particular, the following could be worked on:

• Needs a julian like interface,
• some features for interactive usage,
• some integration with local web server.

Author: jverzani
Source Code: https://github.com/jverzani/GoogleCharts.jl 
License: View license

#julia #google #charts 

Nivo: A Rich Set Of Dataviz Components, Built on top Of The Awesome D3

nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3.

Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.

Installation

In order to use nivo, you have to install the @nivo/core package and then choose some of the scoped @nivo packages according to the charts you wish to use:

yarn add @nivo/core @nivo/bar

Features

• Highly Customizable
• Motion/Transitions, powered by react-spring
• Interactive Components Playground
• Exhaustive Documentation
• SVG Charts
• HTML Charts
• Canvas Charts
• Server Side Rendering and HTTP API
• Patterns & Gradients
• Theming
• Responsive Charts

Discussion

Join the nivo discord community.

Packages & components

nivo is comprised of several packages/components, for a full list, please use the Components Explorer.

Guides

• Axes
• Colors
• Legends
• Gradients
• Patterns
• Theming

Author: Plouc
Source Code: https://github.com/plouc/nivo 
License: MIT license

#javascript #react #svg #components #charts 

Plotly.js: Open-source JavaScript Charting Library Behind Plotly, Dash

Plotly.js 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).

Plotly.js 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.

Contact us for Plotly.js consulting, dashboard development, application integration, and feature additions.

Load as a node module

Install a ready-to-use distributed bundle

npm i --save plotly.js-dist-min

and use import or require in node.js

// ES6 module
import Plotly from 'plotly.js-dist-min'

// CommonJS
var Plotly = require('plotly.js-dist-min')

You may also consider using plotly.js-dist if you prefer using an unminified package.

Load via script tag

The script HTML element

In the examples below Plotly object is added to the window scope by script. The newPlot method is then used to draw an interactive figure as described by data and layout into the desired div here named gd. As demonstrated in the example above basic knowledge of html and JSON syntax is enough to get started i.e. with/without JavaScript! To learn and build more with plotly.js please visit plotly.js documentation.

<head>
    <script src="https://cdn.plot.ly/plotly-2.13.1.min.js"></script>
</head>
<body>
    <div id="gd"></div>

    <script>
        Plotly.newPlot("gd", /* JSON object */ {
            "data": [{ "y": [1, 2, 3] }],
            "layout": { "width": 600, "height": 400}
        })
    </script>
</body>

Alternatively you may consider using native ES6 import in the script tag.

<script type="module">
    import "https://cdn.plot.ly/plotly-2.13.1.min.js"
    Plotly.newPlot("gd", [{ y: [1, 2, 3] }])
</script>

Fastly supports Plotly.js with free CDN service. Read more at https://www.fastly.com/open-source.

Un-minified versions are also available on CDN

While non-minified source files may contain characters outside UTF-8, it is recommended that you specify the charset when loading those bundles.

<script src="https://cdn.plot.ly/plotly-2.13.1.js" charset="utf-8"></script>

Please note that as of v2 the "plotly-latest" outputs (e.g. https://cdn.plot.ly/plotly-latest.min.js) will no longer be updated on the CDN, and will stay at the last v1 patch v1.58.5. Therefore, to use the CDN with plotly.js v2 and higher, you must specify an exact plotly.js version.

MathJax

You could load either version two or version three of MathJax files, for example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js"></script>

<script src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-svg.js"></script>

When using MathJax version 3, it is also possible to use chtml output on the other parts of the page in addition to svg output for the plotly graph. Please refer to devtools/test_dashboard/index-mathjax3chtml.html to see an example.

Bundles

There are two kinds of plotly.js bundles:

1. Complete and partial official bundles that are distributed to npm and the CDN, described in the dist README.
2. Custom bundles you can create yourself to optimize the size of bundle depending on your needs. Please visit CUSTOM_BUNDLE for more information.

Alternative ways to load and build plotly.js

If your library needs to bundle or directly load plotly.js/lib/index.js or parts of its modules similar to index-basic in some other way than via an official or a custom bundle, or in case you want to tweak the default build configurations of browserify or webpack, etc. then please visit BUILDING.md.

Documentation

Official plotly.js documentation is hosted at https://plotly.com/javascript.

These pages are generated by the Plotly graphing-library-docs repo built with Jekyll and publicly hosted on GitHub Pages. For more info about contributing to Plotly documentation, please read through contributing guidelines.

Bugs and feature requests

Have a bug or a feature request? Please open a Github issue keeping in mind the issue guidelines. You may also want to read about how changes get made to Plotly.js

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, using plotly.js in your project and notes on development.

Notable contributors

Plotly.js is at the core of a large and dynamic ecosystem with many contributors who file issues, reproduce bugs, suggest improvements, write code in this repo (and other upstream or downstream ones) and help users in the Plotly community forum. The following people deserve special recognition for their outsized contributions to this ecosystem:

Copyright and license

Code and documentation copyright 2021 Plotly, Inc.

Code released under the MIT license.

Versioning

This project is maintained under the Semantic Versioning guidelines.

See the Releases section of our GitHub project for changelogs for each release version of plotly.js.

Community

• Follow @plotlygraphs on Twitter for the latest Plotly news.
• Implementation help may be found on community.plot.com (tagged plotly-js) or on Stack Overflow (tagged plotly).
• Developers should use the keyword plotly on packages which modify or add to the functionality of plotly.js when distributing through npm.

Author: Plotly
Source Code: https://github.com/plotly/plotly.js 
License: MIT license

#javascript #visualization #d3 #charts #webgl 

Financial Lightweight Charts Built with HTML5 Canvas

 Lightweight Charts    

TradingView Lightweight Charts are one of the smallest and fastest financial HTML5 charts.

The Lightweight Charting Library is the best choice for you if you want to display financial data as an interactive chart on your web page without affecting your web page loading speed and performance.

It is the best choice for you if you want to replace static image charts with interactive ones. The size of the library is close to static images but if you have dozens of image charts on a web page then using this library can make the size of your web page smaller.

Installing

es6 via npm

npm install lightweight-charts

import { createChart } from 'lightweight-charts';

const chart = createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addLineSeries();
lineSeries.setData([
    { time: '2019-04-11', value: 80.01 },
    { time: '2019-04-12', value: 96.63 },
    { time: '2019-04-13', value: 76.64 },
    { time: '2019-04-14', value: 81.89 },
    { time: '2019-04-15', value: 74.43 },
    { time: '2019-04-16', value: 80.01 },
    { time: '2019-04-17', value: 96.63 },
    { time: '2019-04-18', value: 76.64 },
    { time: '2019-04-19', value: 81.89 },
    { time: '2019-04-20', value: 74.43 },
]);

CDN

You can use unpkg:

https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js

The standalone version creates window.LightweightCharts object with all exports from esm version:

const chart = LightweightCharts.createChart(document.body, { width: 400, height: 300 });
const lineSeries = chart.addLineSeries();
lineSeries.setData([
    { time: '2019-04-11', value: 80.01 },
    { time: '2019-04-12', value: 96.63 },
    { time: '2019-04-13', value: 76.64 },
    { time: '2019-04-14', value: 81.89 },
    { time: '2019-04-15', value: 74.43 },
    { time: '2019-04-16', value: 80.01 },
    { time: '2019-04-17', value: 96.63 },
    { time: '2019-04-18', value: 76.64 },
    { time: '2019-04-19', value: 81.89 },
    { time: '2019-04-20', value: 74.43 },
]);

Development

See BUILDING.md for instructions on how to build lightweight-charts from source.

Demos | Documentation | Discord community | Reddit

Author: Tradingview
Source Code: https://github.com/tradingview/lightweight-charts 
License: Apache-2.0 license

#javascript #typescript #charts #html5 #canvas 

UPlot: A Small, Fast Chart for Time Series, Lines, Areas, Ohlc & Bars

📈 μPlot

A small (~40 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed)

Introduction

μPlot is a fast, memory-efficient Canvas 2D-based chart for plotting time series, lines, areas, ohlc & bars; from a cold start it can create an interactive chart containing 150,000 data points in 135ms, scaling linearly at ~25,000 pts/ms. In addition to fast initial render, the zooming and cursor performance is by far the best of any similar charting lib; at ~40 KB, it's likely the smallest and fastest time series plotter that doesn't make use of context-limited WebGL shaders or WASM, both of which have much higher startup cost and code size.

166,650 point bench: https://leeoniya.github.io/uPlot/bench/uPlot.html

However, if you need 60fps performance with massive streaming datasets, uPlot can only get you so far. If you decide to venture into this realm with uPlot, make sure to unclog your rendering pipeline. WebGL should still be the tool of choice for applications like realtime signal or waveform visualizations: See danchitnis/webgl-plot, huww98/TimeChart, epezent/implot, or commercial products like LightningChart®.

Features

• Multiple series w/toggle
• Multiple y-axes, scales & grids
• Temporal or numeric x-axis
• Linear, uniform or logarithmic scales
• Line & Area styles (stroke, fill, width, dash)
• Pluggable path renderers linear, spline, stepped, bars
• Zoom with auto-rescale
• Legend with live values
• Support for IANA Time Zone Names & DST
• Support for missing data
• Cursor sync for multiple charts
• Focus closest series
• Data streaming (live update)
• High / Low bands
• A lean, consistent, and powerful API with hooks & plugins

Non-Features

In order to stay lean, fast and focused the following features will not be added:

• No data parsing, aggregation, summation or statistical processing - just do it in advance. e.g. https://simplestatistics.org/, https://www.papaparse.com/
• No transitions or animations - they're always pure distractions.
• No collision avoidance for axis tick labels, so may require manual tweaking of spacing metrics if label customization significiantly increases default label widths.
• No stacked series: see "Stacked Area Graphs Are Not Your Friend" and a horrific demo. While smooth spline interpolation is available, its use is strongly discouraged: Your data is misrepresented!. Both visualizations are terrible at accurately communicating information.
• No built-in drag scrolling/panning due to ambiguous native zoom/selection behavior. However, this can be added externally via the plugin/hooks API: zoom-wheel, zoom-touch.

Documentation (WIP)

The docs are a perpetual work in progress, it seems. Start with /docs/README.md for a conceptual overview. The full API is further documented via comments in /dist/uPlot.d.ts. Additionally, an ever-expanding collection of runnable /demos covers the vast majority of uPlot's API.

Third-party Integrations

• Jupyter widget (Sohail Somani)
• React and Vue.js (Sergey Kalinichev)

Performance

Benchmarks done on this hardware:

• Date: 2021-04-24
• Windows 10 x64, Chrome 90.0.4430.85 (64-bit)
• Core i7-8700 @ 3.2GHz, 16GB RAM
• AMD Radeon RX480, 2560x1440 res

Full size: https://leeoniya.github.io/uPlot/demos/multi-bars.html

Raw data: https://github.com/leeoniya/uPlot/blob/master/bench/results.json

| lib                    | size    | done    | js,rend,paint,sys | heap peak,final | mousemove (10s)     |
| ---------------------- | ------- | ------- | ----------------- | --------------- | ------------------- |
| uPlot v1.6.9           |   39 KB |   58 ms |   70   1   1   38 |  20 MB   3 MB   |   65  159   88  103 |
| ECharts v5.1.0         |  987 KB |   88 ms |   87   1   1   47 |  55 MB   5 MB   | 1463  284   84  521 |
| Chart.js v3.2.0        |  233 KB |   80 ms |  118   1   1   41 |  34 MB  11 MB   |  725   30   57 1467 |
| Flot v3.0.0            |  494 KB |   91 ms |  118   3   1   55 |  46 MB  16 MB   | ---                 |
| LightningChart® v2.2.1 | 1000 KB |  --- ms |  178   2   1   42 |  61 MB  22 MB   | 5310   46   43  180 |
| dygraphs v2.1.0        |  125 KB |  135 ms |  159   2   1   75 |  99 MB  44 MB   | 1087  162   74  205 |
| CanvasJS v3.2.13       |  482 KB |  241 ms |  271   2   1   66 |  52 MB  26 MB   |  961  256   76  195 |
| Highcharts v9.0.1      |  391 KB |  --- ms |  286   4   2   42 | 108 MB  33 MB   |  840  301  132  155 |
| dvxCharts v5.0.0       |  369 KB |  253 ms |  310  18   1   51 |  60 MB  24 MB   |  674  442  148  145 |
| Plotly.js v1.58.4      | 3500 KB |  377 ms |  408   5   1   71 | 199 MB  46 MB   | 1087  114   29   82 |
| Chart.js v2.9.4        |  245 KB |  495 ms |  524   2   1   75 | 103 MB  54 MB   | 8397    5    6 1158 |
| ECharts v4.9.0         |  785 KB |  366 ms |  498   1   1  581 | 224 MB  78 MB   | 2265   64   17 7551 |
| ApexCharts v3.26.1     |  478 KB |  --- ms | 1634  22   1   44 | 332 MB  70 MB   | 8611  646   99  154 |
| ZingChart v2.9.3       |  857 KB | 2081 ms | 2101   5   1   38 | 191 MB 100 MB   | ---                 |
| amCharts v4.10.18      | 1200 KB | 5564 ms | 4925  19   6   67 | 695 MB 237 MB   | 1494  336  164  285 |

Normally, all libs are updated to their latest versions before each benchmark round. However, libraries which show significant performance improvements in latest versions will have prior versions shown to encourage migration; this is especially true for still-widely-deployed libs, such as Chart.js v2.9.4, and ECharts v4.9.0. Deployment prevalence is assessed from public npm and CDN download stats for the prior few months.

• libs are sorted by their initial, cold-start, render performance (excluding network transfer time to download the lib)
• size includes the lib itself plus any dependencies required to render the benchmark, e.g. Moment, jQuery, etc.
• Flot does not make available any minified assets and all their examples use the uncompressed sources; they also use an uncompressed version of jQuery :/

Some libraries provide their own performance demos:

• https://echarts.apache.org/next/examples/en/index.html
• https://github.com/sveinn-steinarsson/flot-downsample/
• https://dygraphs.com/tests/dygraph-many-points-benchmark.html
• https://www.chartjs.org/docs/latest/general/performance.html
• https://dash.plotly.com/performance
• https://www.highcharts.com/docs/advanced-chart-features/boost-module
• https://danchitnis.github.io/webgl-plot-examples/vanilla/
• https://huww98.github.io/TimeChart/docs/performance
• https://www.arction.com/lightningchart-js-performance/

TODO (all of these use SVG, so performance should be similar to Highcharts):

• Chartist.js
• d3-based
  • C3.js
  • dc.js
  • MetricsGraphics
  • rickshaw

Unclog your rendering pipeline

Your browser's performance is highly dependent on your hardware, operating system, and GPU drivers.

If you're using a Chromium-based browser, there are some hidden settings that can unlock significant performance improvements for Canvas2D rendering. Most of these have to do with where and how the rasterization is performed.

Head over to https://leeoniya.github.io/uPlot/demos/sine-stream.html and open up Chrome's DevTools (F12), then toggle the Performance Monitor.

For me:

• On Windows 10 Desktop, Core i7-8700, 16GB RAM, AMD RX480 GPU, 2048 x 1080 resolution = 57% CPU usage
• On Manjaro Laptop (Arch Linux), AMD Ryzen 7 PRO 5850U, 48GB RAM, AMD Radeon RX Vega 8 (integrated GPU), 4K resolution = 99% CPU usage

If your CPU is close to 100%, it may be rasterizing everything in the same CPU process.

Pop open chrome://gpu and see what's orange or red.

Then open chrome://flags and search for "raster" to see what can be force-enabled.

• On my Manjaro/Ryzen/Integrated GPU setup, force-enabling Canvas out-of-process rasterization resulted in a dramatic framerate improvement.
• On my Windows/i7/Dedicated GPU setup, toggling the same flags moved the work to another process (still good), but did not have a significant framerate impact.

YMMV!

Acknowledgements

• Dan Vanderkam's dygraphs was a big inspiration; in fact, my stale pull request #948 was a primary motivator for μPlot's inception.
• Adam Pearce for #15 - remove redundant lineTo commands.

Author: Leeoniya
Source Code: https://github.com/leeoniya/uPlot 
License: MIT license

#javascript #charts #streaming

EJSCharts: Emprise Javascript Charts

EJSChart

100% Powerful, Clean & Functional Javascript Charts

Whether at home, a medium sized or enterprise venture, EJSCharts will seamlessly help you represent your data more clearly and efficiently.

Compatible With:

• IE6+
• Firefox
• Safari
• Chrome

Features

Interactive

Features such as Hints, Mouse Tracking, Mouse Events, Key Tracking, and Events, Zooming, Scrolling, and Crosshairs raise interactivity and user experience in web charting to a new level.

Too much data and not enough screen real estate? Show it all. Let your end users zoom in on the pieces they're most interested in. Axis locking for single axis zoom, scrolling and automatic axis scaling are all included.

Ajax Driven Data

EJSChart supports XML-formatted data and loads data on the fly. New series can be added and data updated in real time without page reloads.

Stackable Series

Multiple chart series can be stacked and combined to fit many charting needs.

Plugin Free

100% pure Javascript Charting solution. No more worries of incompatible plugin versions or confusing security warnings. EJSChart is pure JavaScript and requires no client installation.

Setup

Implementation Instructions

• Download the ZIP file for this EJSCharts repository.
• Create a new directory in your webroot to house the EJSCharts code.
• Unzip the contents of the EJSCharts ZIP file you downloaded into the directory you created.
• Include the EJSChart.min.js file in the HEAD portion of your HTML file using the following code:

<script src="./path-to-your-directory/EJSChart.min.js"></script>

Creating Your First Chart

• Create a DIV elmeent in your HTML page where you want the chart to display and give it an id.

<div id="myChart"></div>

• Add a script block to create the chart.

<script>
var chart = new EJSC.Chart("myChart");
</script>

• Add series to the chart (see the Examples area for examples of adding series).

Author: EmpriseCorporation
Source Code: https://github.com/EmpriseCorporation/EJSCharts 
License: View license

#javascript #charts #functional 

Apache ECharts is A Powerful, interactive Charting, Data Visualization

Apache ECharts 

Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.

Get Apache ECharts

You may choose one of the following methods:

• Download from the official website
• npm install echarts --save
• CDN: jsDelivr CDN

Docs

• Get Started
• API
• Option Manual
• Examples

Get Help

• GitHub Issues for bug report and feature requests
• Email dev@echarts.apache.org for general questions
• Subscribe to the mailing list to get updated with the project

Build

Build echarts source code:

Execute the instructions in the root directory of the echarts: (Node.js is required)

# Install the dependencies from NPM:
npm install

# Rebuild source code immediately in watch mode when changing the source code.
npm run dev

# Check correctness of TypeScript code.
npm run checktype

# If intending to build and get all types of the "production" files:
npm run release

Then the "production" files are generated in the dist directory.

Contribution

If you wish to debug locally or make pull requests, please refer to the contributing document.

Resources

Awesome ECharts

https://github.com/ecomfe/awesome-echarts

Extensions

ECharts GL An extension pack of ECharts, which provides 3D plots, globe visualization, and WebGL acceleration.

Liquidfill 水球图

Wordcloud 字符云

Extension for Baidu Map 百度地图扩展 An extension provides a wrapper of Baidu Map Service SDK.

vue-echarts ECharts component for Vue.js

echarts-stat Statistics tool for ECharts

Code of Conduct

Please refer to Apache Code of Conduct.

Paper

Deqing Li, Honghui Mei, Yi Shen, Shuang Su, Wenli Zhang, Junting Wang, Ming Zu, Wei Chen. ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization. Visual Informatics, 2018.

中文官网 | ENGLISH HOMEPAGE

Author: Apache
Source Code: https://github.com/apache/echarts 
License: Apache-2.0 license

#javascript #typescript #visualization #svg #charts 

Lavacharts: Lavacharts Is A Graphing / Charting Library for PHP 5.4+

Lavacharts 3.1.12    

Lavacharts is a graphing / chart library for PHP5.4+ that wraps the Google Chart API.

Developer Note

Please don't be discouraged if you see that it has been "years" since an update, but rather think that Lavacharts has settled into a "stable" state and requires less tinkering from me. I would love to add new features, but my responsibilities leave little room for my projects. I am happy to field issues, answer questions, debug and help if needed. Lavacharts is not vaporware! :smile:

Package Features

• Updated! Laravel 5.5+ auto-discovery
• Any option for customizing charts that Google supports, Lavacharts should as well. Just use the chart constructor to assign any customization options you wish!
• Visit Google's Chart Gallery for details on available options
• Custom JavaScript module for interacting with charts client-side
  • AJAX data reloading
  • Fetching charts
  • Events integration
• Column Formatters & Roles
• Blade template extensions for Laravel
• Twig template extensions for Symfony
• Carbon support for date/datetime/timeofday columns
• Now supporting 22 Charts!
  • Annotation, Area, Bar, Bubble, Calendar, Candlestick, Column, Combo, Gantt, Gauge, Geo, Histogram, Line, Org, Pie, Sankey, Scatter, SteppedArea, Table, Timeline, TreeMap, and WordTree!

For complete documentation, please visit lavacharts.com

Upgrade guide: Migrating from 2.5.x to 3.0.x

For contributing, a handy guide can be found here

Installing

In your project's main composer.json file, add this line to the requirements:

"khill/lavacharts": "^3.1"

Run Composer to install Lavacharts:

$ composer update

Framework Agnostic

If you are using Lavacharts with Silex, Lumen or your own Composer project, that's no problem! Just make sure to: require 'vendor/autoload.php'; within you project and create an instance of Lavacharts: $lava = new Khill\Lavacharts\Lavacharts;

Laravel

To integrate Lavacharts into Laravel, a ServiceProvider has been included.

Laravel ~5.5

Thanks to the fantastic new Package Auto-Discovery feature added in 5.5, you're ready to go, no registration required :+1:

Configuration

To modify the default configuration of Lavacharts, datetime formats for datatables or adding your maps api key... Publish the configuration with php artisan vendor:publish --tag=lavacharts

Laravel ~5.4

Register Lavacharts in your app by adding these lines to the respective arrays found in config/app.php:

<?php
// config/app.php

// ...
'providers' => [
    // ...

    Khill\Lavacharts\Laravel\LavachartsServiceProvider::class,
],

// ...
'aliases' => [
    // ...

    'Lava' => Khill\Lavacharts\Laravel\LavachartsFacade::class,
]

Configuration

To modify the default configuration of Lavacharts, datetime formats for datatables or adding your maps api key... Publish the configuration with php artisan vendor:publish --tag=lavacharts

Laravel ~4

Register Lavacharts in your app by adding these lines to the respective arrays found in app/config/app.php:

<?php
// app/config/app.php

// ...
'providers' => array(
    // ...

    "Khill\Lavacharts\Laravel\LavachartsServiceProvider",
),

// ...
'aliases' => array(
    // ...

    'Lava' => "Khill\Lavacharts\Laravel\LavachartsFacade",
)

Configuration

To modify the default configuration of Lavacharts, datetime formats for datatables or adding your maps api key... Publish the configuration with php artisan config:publish khill/lavacharts

Symfony

The package also includes a Bundle for Symfony to enable Lavacharts as a service that can be pulled from the Container.

Add Bundle

Add the bundle to the registerBundles method in the AppKernel, found at app/AppKernel.php:

<?php
// app/AppKernel.php

class AppKernel extends Kernel
{
    // ..

    public function registerBundles()
    {
        $bundles = array(
            // ...

            new Khill\Lavacharts\Symfony\Bundle\LavachartsBundle(),
        );
    }
}

Import Config

Add the service definition to the app/config/config.yml file

imports:
  # ...
  - { resource: "@LavachartsBundle/Resources/config/services.yml"

Usage

The creation of charts is separated into two parts: First, within a route or controller, you define the chart, the data table, and the customization of the output.

Second, within a view, you use one line and the library will output all the necessary JavaScript code for you.

Basic Example

Here is an example of the simplest chart you can create: A line chart with one dataset and a title, no configuration.

Controller

Setting up your first chart.

Data

$data = $lava->DataTable();

$data->addDateColumn('Day of Month')
     ->addNumberColumn('Projected')
     ->addNumberColumn('Official');

// Random Data For Example
for ($a = 1; $a < 30; $a++) {
    $rowData = [
      "2017-4-$a", rand(800,1000), rand(800,1000)
    ];

    $data->addRow($rowData);
}

Arrays work for datatables as well...

$data->addColumns([
    ['date', 'Day of Month'],
    ['number', 'Projected'],
    ['number', 'Official']
]);

Or you can use \Khill\Lavacharts\DataTables\DataFactory to create DataTables in another way

Chart Options

Customize your chart, with any options found in Google's documentation. Break objects down into arrays and pass to the chart.

$lava->LineChart('Stocks', $data, [
    'title' => 'Stock Market Trends',
    'animation' => [
        'startup' => true,
        'easing' => 'inAndOut'
    ],
    'colors' => ['blue', '#F4C1D8']
]);

Output ID

The chart will needs to be output into a div on the page, so an html ID for a div is needed. Here is where you want your chart <div id="stocks-div"></div>

• If no options for the chart are set, then the third parameter is the id of the output:

$lava->LineChart('Stocks', $data, 'stocks-div');

• If there are options set for the chart, then the id may be included in the options:

$lava->LineChart('Stocks', $data, [
    'elementId' => 'stocks-div'
    'title' => 'Stock Market Trends'
]);

• The 4th parameter will also work:

$lava->LineChart('Stocks', $data, [
    'title' => 'Stock Market Trends'
], 'stocks-div');

View

Pass the main Lavacharts instance to the view, because all of the defined charts are stored within, and render!

<?= $lava->render('LineChart', 'Stocks', 'stocks-div'); ?>

Or if you have multiple charts, you can condense theh view code withL

<?= $lava->renderAll(); ?>

Changelog

The complete changelog can be found here

Stargazers over time

Author: Kevinkhill
Source Code: https://github.com/kevinkhill/lavacharts 
License: View license

#laravel #charts #php #composer 

Charts: Laravel Charts — Build Charts using Laravel

What is laravel charts?

Charts is a Laravel library used to create Charts using Chartisan. Chartisan does already have a PHP adapter. However, this library attempts to provide more laravel-like features into it by providing support for chart creation using the artisan command, middleware support and routing support. This makes handling charts feel more laravel-like. At the end of the day, this library uses Chartisan and can use all of its potential. Expect to read the Chartisan docs since this library it's just a simple abstraction.

Screenshot

Previous Version

Unfortunately laravel-charts v7 is incompatible with our previous version, v6, because it has involved a heavy rewrite. If you're still stuck on v6, you should use:

• the v6 branch of this repo;
• the v6 version of the documentation;

Please note that we consider v6 unmaintained and unsupported. So you should upgrade to v7 as soon as possible. We're currently working on an upgrade guide. If you can help, please reach out with an issue - we'll take all the help we can get.

Documentation

The documentation for the latest version of charts can be found here by pressing the image below.

Author: Chartisan
Source Code: https://github.com/Chartisan/Charts 
License: MIT license

#laravel #charts #php 

MDCharts: March.dev Charts Library

MDCharts

march.dev charts library. Provides highly customizable and configurable charts.

Getting Started

LineChart

Data

REQUIRED data

• data - set of data with DateTime keys and double values based on which chart will be drawned.

There are 2 general types of the LineChart:

Periodical grid type (only monthly available for now):

Periodical means that if there's not enough data to draw full chart (there's gaps between dates) chart will automatically fulfill lacking data based on LineChartDataType.

For LineChartDataType.bidirectional data type lacking data will be set to 0.

For LineChartDataType.unidirectional data type lacking data will calculated from previous values so, that charts will be looking like ascending (e.g. Progress) or descending (e.g. Burndown) chart.

Undefined grid type:

Undefined means that the chart will be drawned using only provided data.

Note that LineChartDataType is omitted with this type of grid.

Max Value

• predefinedMaxValue - predefined max value for the chart.
• maxValueRoundingMap - rounding map for the maxValue that is used by beautification function of Y axis labels.

Limits

• limit - if provided, will be painted on the chart as a horizontal indication line.
• limitText - custom text to set to the label of the limit line.

Tooltip builders

• titleBuilder - builds title of the tooltip based on DateTime key and/or double value from provided data.
• subtitleBuilder - builds subtitle of the tooltip based on DateTime key and/or double value from provided data.

Label builder

• xAxisLabelBuilder - builds X axis label based on DateTime value from provided data.
• yAxisLabelBuilder - builds Y axis label based on double value from provided data, maxValue specifically.

Settings

• xAxisDivisions - quantity of the X axis divisions, defaults to 3.
• yAxisDivisions - quantity of the Y axis divisions, defaults to 2.
• axisDivisionEdges - axis division edges, defaults to AxisDivisionEdges.none.
• showAxisX - whether to show X axis or not, defaults to true.
• showAxisY - whether to show Y axis or not, defaults to true.
• lineFilling - whether to fill chart between the line and the X axis or not, defaults to true.
• lineShadow - whether to draw shadow beneath the line or not, defaults to true.
• altitudeLine - whether to draw the altitude line or not, defaults to true.
• limitLabelSnapPosition - snap position options of limit label, defaults to LimitLabelSnapPosition.axis.
• showAxisXLabels - whether to show labels on the X axis or not, defaults to true.
• showAxisYLabels - whether to show labels on the Y axis or not, defaults to true.

Styles

• gridStyle - styling options for the grid, for more details please refer to the source code of the LineChartGridStyle.
• axisStyle - styling options for the axis, for more details please refer to the source code of the LineChartAxisStyle.
• lineStyle - styling options for the chart line, for more details please refer to the source code of the LineChartLineStyle.
• limitStyle - styling options for the limit, for more details please refer to the source code of the LineChartLimitStyle.
• pointStyle - styling options for the point and tooltip above point, for more details please refer to the source code of the LineChartPointStyle.

BarChart

Data

REQUIRED data

• data - set of data with DateTime keys and List<double> values based on which chart will be drawned.

Max Value

• predefinedMaxValue - predefined max value for the chart.
• maxValueRoundingMap - rounding map for the maxValue that is used by beautification function of Y axis labels.

Selection

• initialSelectedPeriod - initial selected period of the bar chart, defaults to null.
• onSelectedPeriodChanged - callback that notifies if selected period has changed, defaults to null.

Label builder

• xAxisLabelBuilder - builds X axis label based on DateTime value from provided data.
• yAxisLabelBuilder - builds Y axis label based on double value from provided data, maxValue specifically.

Settings

• yAxisDivisions - quantity of the Y axis divisions, defaults to 2.
• axisDivisionEdges - axis division edges, defaults to AxisDivisionEdges.none.
• showAxisX - whether to show X axis or not, defaults to true.
• showAxisXLabels - whether to show labels on the X axis or not, defaults to true.
• showAxisYLabels - whether to show labels on the Y axis or not, defaults to true.
• barSpacing - spacing between bars in one item, defaults to 0.
• itemSpacing - spacing between group of bars, defaults to 12.
• showSelection - whether to show selection of the items or not, defaults to true.
• duration - the length of time animation should last.
• alignment - alignment of the bars within chart.
• reverse - whether the scroll view scrolls in the reading direction.

Style

• gridStyle - styling options for the grid, for more details please refer to the source code of the BarChartGridStyle.
• axisStyle - styling options for the axis, for more details please refer to the source code of the BarChartAxisStyle.
• barStyle - styling options for the chart line, for more details please refer to the source code of the BarChartBarStyle.

Installing

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add mdcharts

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  mdcharts: ^3.0.0

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:mdcharts/mdcharts.dart';

example/lib/main.dart

// Copyright (c) 2022, the MarchDev Toolkit project authors. Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

import 'src/bar_chart.dart';
import 'src/line_chart.dart';
import 'src/scaffolds/example_scaffold.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const App());
}

class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MDCharts Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return const ExampleScaffold(
      tabs: {
        'Line Chart': LineChartExample(),
        'Bar Chart': BarChartExample(),
      },
    );
  }
}

Examples

To see usage example navigate to the Example section.

Feature requests and Bug reports

Feel free to post a feature requests or report a bug here.

Author: Marchdev-tk
Source Code: https://github.com/marchdev-tk/mdcharts 
License: BSD-3-Clause license

#flutter #dart #charts #android #plugin 

D3-exploder: Explode D3 Maps to Create New Charts!

d3-exploder

Make your d3 maps explode

A tiny d3 extension which lets you turn your maps into other types of charts!

Installation

d3-exploder can be installed via npm

npm install d3-exploder

Note:

d3-exploder >= 2.0.0 supports d3 v4. For use with d3 v3, install version 1 of d3-exploder.

Usage

import * as d3 from 'd3';
import { exploder } from 'd3-exploder';



// Create an exploder function
var exploder = exploder()
                .projection(d3.geoAlbersUsa().scale(width))
                .size(function(d, i) {
                  // function new size of features in pixels
                })
                .position(function(d, index) {
                  // function returning array [x, y]
                  // which specifies the position of
                  // the features in the svg
                });

// Call exploder, optionally in a transition

var width = 960,
    height = 500,
    centered;

var projection = d3.geoAlbersUsa().scale(width);

var path = d3.geoPath()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

var g = svg.append("g");


d3.json("us.json", function(error, us) {

  var state_features = topojson.feature(us, us.objects.states).features;

  var scale = d3.scaleLinear()
                .domain([0, state_features.length])
                .range([0, 360]);

  var states = g.append("g")
      .attr("id", "states")
    .selectAll("path")
      .data(state_features)
    .enter().append("path")
      .attr("d", path);

  var exploder = d3.exploder()
                  .projection(projection)
                  .size(function(d, i) { return 40; });

  d3.select("#shuffle").on('click', function() {
    var rand = d3.shuffle(d3.range(state_features.length));
    states.transition()
          .duration(500)
          .call(
            exploder.position(function(d, index) {
              var i = rand[index];
              return [120 + (i%10)*60, 40 + Math.floor(i/10)*60];
            })
          );
  });

});

See examples here

Another example brought up by a user

Author: bsouthga
Source Code: https://github.com/bsouthga/d3-exploder 
License: 

#javascript #3d #charts 

Ngx-charts: Declarative Charting Framework for Angular

ngx-charts   

Declarative Charting Framework for Angular!

ngx-charts is unique because we don't merely wrap d3, nor any other chart engine for that matter. It is using Angular to render and animate the SVG elements with all of its binding and speed goodness, and uses d3 for the excellent math functions, scales, axis and shape generators. By having Angular do all of the rendering it opens us up to endless possibilities the Angular platform provides such as AoT, SSR, etc.

Data visualization is a science but that doesn't mean it has to be ugly. One of the big efforts we've made while creating this project is to make the charts aesthetically pleasing. The styles are also completely customizable through CSS, so you can override them as you please.

Also, constructing custom charts is possible by leveraging the various ngx-charts components that are exposed through the ngx-charts module.

Features

Chart Types

• Horizontal & Vertical Bar Charts (Standard, Grouped, Stacked, Normalized)
• Line
• Area (Standard, Stacked, Normalized)
• Pie (Explodable, Grid, Custom legends)
• Bubble
• Donut
• Gauge (Linear & Radial)
• Heatmap
• Treemap
• Number Cards

Customization

• Autoscaling
• Timeline Filtering
• Line Interpolation
• Configurable Axis Labels
• Legends (Labels & Gradient)
• Advanced Label Positioning
• Real-time data support
• Advanced Tooltips
• Data point Event Handlers
• Works with ngUpgrade

Install

To use ngx-charts in your project install it via npm:

npm i @swimlane/ngx-charts --save

Custom Charts

To learn how to use the ngx-charts components to build custom charts and find examples, please refer to our Custom Charts Page.

Release

• Checkout master (git checkout master)
• Pull master (git pull)
• Refresh node modules (npm ci)
• Run tests (npm test)
• Examine log to determine next version (X.Y.Z)
• Run git checkout -b release/X.Y.Z
• Update version in projects/swimlane/ngx-charts/package.json.
• Update changelog in projects/docs/changelog.md
• Run git commit -am "(release): X.Y.Z"
• Run git tag X.Y.Z
• Run git push origin HEAD --tags
• Run npm run publish:lib
• Submit PR

Credits

ngx-charts is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.

SecOps Hub is an open, product-agnostic, online community for security professionals to share ideas, use cases, best practices, and incident response strategies.

For more info, check out the documentation and the demos.

Author: Swimlane
Source Code: https://github.com/swimlane/ngx-charts 
License: MIT license

#charts #javascript #3d #svg #angular 

Nivo: Dataviz Components for React with Isomorphic Ability

nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3.

Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.

Installation

In order to use nivo, you have to install the @nivo/core package and then choose some of the scoped @nivo packages according to the charts you wish to use:

yarn add @nivo/core @nivo/bar

Features

• Highly Customizable
• Motion/Transitions, powered by react-spring
• Interactive Components Playground
• Exhaustive Documentation
• SVG Charts
• HTML Charts
• Canvas Charts
• Server Side Rendering and HTTP API
• Patterns & Gradients
• Theming
• Responsive Charts

Discussion

Join the nivo discord community.

Packages & components

nivo is comprised of several packages/components, for a full list, please use the Components Explorer.

Guides

• Axes
• Colors
• Legends
• Gradients
• Patterns
• Theming

Author: Plouc
Source Code: https://github.com/plouc/nivo 
License: MIT license

#javascript #3d #react #svg #charts 

A Charting Library Built with The Ember.js & D3.js Frameworks

Ember Charts 

A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to extend and modify. The out-of-the-box behavior these chart components represents our thoughts on best practices in chart interactivity and presentation.

Getting Started

JS Bin Starter Kit

https://emberjs.jsbin.com/rekawobugu/1/edit

Unfortunately, this version of Ember Charts is out of date, and the current maintainers of Ember Charts at Addepar have not been able to update it recently.

Installation with Ember CLI (Recommended)

Ember Charts is an Ember CLI addon published to the public NPM repository at https://www.npmjs.com/package/ember-charts , so it can be installed like so:

# ember-cli >= 0.2.0
ember install:addon ember-charts

# ember-cli >= 0.2.3
ember install ember-charts

Once it's installed, you can customize the look of Ember Charts with CSS.

Installation with Bower (Globals-Based Version)

npm install -g bower      # install Bower
bower install ember-charts --save

Using Ember Charts with bower is deprecated and will eventually be removed. We recommend that you migrate your apps to Ember CLI! Documentation has been updated to show Ember CLI usage. If you need documentation for globals-based use, please check out version 0.5.0 of Ember Charts and follow the setup instructions under "Running Old Versions" to display the old guides.

Developing or Testing

After cloning this repo, install dependencies and run the demo application:

yarn
bower install
ember serve

Now you can:

• View the demos and read the documentation: http://localhost:4200
• Run tests: http://localhost:4200/tests

Dependencies

• ember
• lodash
• d3
• jquery-ui

Browser Support

We aim to support the last two major versions of every common browser.

If you need to support further browsers, we welcome pull requests with fixes.

Touch support may work but has not been tested.

Contributing

Got something to add? Great! Bug reports, feature ideas, and (especially) pull requests are extremely helpful, and this project wouldn't be where it is today without lots of help from the community.

Please read the contribution guidelines for directions on opening issues and working on the project.

Versioning

Ember Charts uses Semantic Versioning to keep track of releases using the following format:

<major>.<minor>.<patch>

In a nutshell, this means:

• Breaking changes to the API or behavior increases the major version
• Adding functionality in a backwards-compatible way increases the minor version
• Making backwards-compatible bug fixes increases the patch version

Releasing a New Version (For Maintainers)

Prior to releasing, ensure that the CHANGELOG.md is updated to track any changes that have been made since the prior release.

We increment version numbers and release using release-it:

npm run release -- <options>

The local configuration file for release-it is named .release-it.json, found in the root directory of the repository.

By default, release-it without options will increment the version number (X.Y.Z --> X.Y.(Z+1)) in the VERSION file and package.json file, and then commit the resulting changes to the ember-charts git repository.

If you want to control the version number, use these options:

npm run release -- major # 1.2.3 -> 2.0.0
npm run release -- minor # 1.2.3 -> 1.3.0
npm run release -- X.Y.Z # 1.2.3 -> X.Y.Z

Ember Charts has also configured release-it to automatically update the gh-pages branch (from which the demo and documentation website is published). This is done by pushing the /ember-dist/ directory after constructing it with ember build. These commands can be seen in the .release-it.json file.

release-it is also configured to automatically publish the updated version to npm.

Lastly, the new version should be released on Github, which can be done via the Github UI after the steps above are complete.

Demo and Documentation

https://opensource.addepar.com/ember-charts/

Author: Addepar
Source Code: https://github.com/Addepar/ember-charts/ 
License: View license

#javascript #3d #ember #charts