Giter VIP home page Giter VIP logo

rawgraphs-charts's Introduction

RAWGraphs Charts

This repository contains a curated selection of charts included in RAWGraphs app. It uses the RAWGraphs core API to define charts behaviours.

If you'd like to contribute, please check the "contributing" section.

The repository contains also a sandbox environment to test directly the charts in development.

Charts are still in beta version, breaking changes may occur.

Installation

If you want to run the repository locally on your machine, be sure you have the following requirements installed.

Requirements

Instructions (Mac OS)

Open the terminal and browse the folder where you want to install the charts and clone the repository from the command line:

git clone https://github.com/rawgraphs/rawgraphs-charts.git

Browse the folder containing the repository:

cd rawgraphs-charts

Install client-side dependencies:

npm install

You can now run the sandbox environment to test your charts:

npm run sandbox

Contributing

This repository cointains only the charts that are used in the public version of RAWGraphs.

This means that we won't add any possible chart, but only the ones we think suits the best the project.

If you want to contribute you're more thank welcome. You will need to sign a Contributor License Agreement (CLA) before making a submission. We adopted CLA to be sure that the project will remain open source. For more information, write us: [email protected].

After doing that, you can:

At the moment, we won't accept usolicited pull request with charts not in the roadmap. In the near future it will be possible to add custom charts on the flight, so if you want to add a very specific, quirk or experimental chart stay tuned with the new updates by following our Twitter account @rawgraphs.

Resources

Before pulling a new request, please check the following resources to comply with the practices we've defined so far. If you plan to add a new chart, check the RAWGraphs API documentation to understaind how to use them.

License

RAWGraphs is provided under the Apache License 2.0:

Copyright (c), 2013-2021 DensityDesign Lab, Calibro, INMAGIK <[email protected]>

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

See the License for the specific language governing permissions and limitations under the License.

rawgraphs-charts's People

Contributors

bianchimro avatar blindguardian50 avatar gffuma avatar giorgiouboldi avatar iosonosempreio avatar mikima avatar osioalberto avatar saarthakmaini avatar tomfevrier avatar uf0 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

rawgraphs-charts's Issues

peerDependencies

should we add rawgraphs-core as peerDependencies (since is already used in the frontend) or just in devDependencies (since it's needed for the sandbox) or keep it in both?

Size issues with heatmap/matrix

Cells of the heatmap have different sizes even if I don't drop anything in "size" - I have 1 record for each cell, they should all be the same. It seems like it displays two records instead of one (i see it by displying the labels)

Screenshot 2020-10-05 at 12 11 06

I attach the data sample. I forced Month and Day as string but the problem persists.
meteo-heatmap.csv.zip

[sunburst] filtering labels on smallest arcs

when there are many small arcs, it become difficult to read labels.
We could expose an option for their filtering.
Should we filter them by:

  • arc size in radians?
  • arc size in degrees?
  • arc size in pixels?
  • arc mapped value?

Screenshot 2020-09-23 at 23 12 23

Clipping mask for series?

due the way d3 works, the margins applies outside the chart, which is defined by the axes. It means that al the textual elements (titles, ticks, labels) are not in the canvas if margin is set to 0.

This is not a great issue when dealing with a single chart, but becomes a mess when dealing with multiple series, since all those elements are appended around the chart, creating a lot of cluttering.

See below image to see the logic:

Screenshot 2020-10-30 at 15 18 49

My suggestion is to use clippaths to avoid overlaps and to help the user in setting margins

Warning on mobile?

What about adding a message on smaller screens that says "RAWGraphs is not intended to work on small screens and mobile devices. Send yourself an email (link) as a reminder to come back here once you are in front of a laptop" or something similar.

[Linechart] X-Axis not working with numbers

It looks like the chart variable "x" (horizontal axis) only accepts dates (numbers break it).

The error occurs with the sample dataset about Music Industry and with the column "year" set as numbers. If I change the data type to dates it works. It is curios that if I change it back to numbers it continues to work.

Add chart dimension metadata: multipleRequired

Add the property multipleRequired to chart dimensions that require more than a single data-header input to work (e.g. Steps in Alluvial Diagram).

{
    id: 'steps',
    name: 'steps',
    validTypes: ['number', 'date', 'string'],
    required: true,
    multiple: true,

    multipleRequired: true

  }

Add "Series" to all charts

I think we should have it for all the charts. Ideally i would put the dimension "Series" always as last, after labels.

How to handle negative values in visualizations that doesn't allow them

This applies to:
[X] Matrix plot throws an error if there are negative values on size
[ ] Bee swarm
[ ] circle packing
[ ] circular dendrogram
[ ] dendrogram
[X] stacked barchart An error is thrown if there are negative values
[X] radar chart An error is thrown if there are negative values

Chart that should not have the issue, to be checked:
[X] scatterplot allows negative values on axes, throws an error if there are negative values on size
[X] line chart allows negative values on axes
[X] barcharts bars are drawn below if values are negative
[X] multi-set barcharts bars are drawn below if values are negative

Label styling option not correct?

All option labels appear as "Labels 1" while we should have an option for each dimension dropped in "label". If I drop only 2 dimension, I will see only two style options.

Screenshot 2020-09-23 at 18 22 37

Charts categories

Specify charts categories. Now all charts have the category "dispersion".

throwing an error in charts

Is it possible to throw an error from the chart to RAWGraphs interface? For example, in radar chart you should drop at minimum three dimensions to see something. Would be nice to tell it to the user

Default artboard settings

I would suggest to have this default settings for all the artobopard:

  • Width(px): 1024
  • Height (px): 720
  • Background: white (to be exported also in the png)
  • Margins: 25px 50px

Some values can change according to the chart (ex: square format charts such as sunburst)

decimal part when numbers are aggregated

When we map numerical dimensions to labels, we could have numbers with a very long decimal part due to the chosen aggregations (see image below). We could hardcode a rounding function, but sometimes users would like to keep the decimal part.

I have no idea on how to solve the issue

Screenshot 2020-09-10 at 17 32 14

[scatterplot] Size has no effect on circles radii

Mapping a value on the "size" dimension does not change the actual circles dimensions.

Using the "movies" sample dataset. Color and Size have the same dataset dimension mapped on.
The aggregation function is not working as well, but it might be a consequence of the above issue.

Screen Shot 2020-09-05 at 12 06 43

viz

[all charts] Mandatory fields first

I think we should move all the mandatory fields at the beggining (for example in line charts we should have X*, Y*, Lines, Series, Color) i think

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.