Git Product home page Git Product logo

rawgraphs-app's Introduction

About

RAWGraphs is an open web tool to create custom vector-based visualizations on top of the amazing d3.js library. It has been developed by DensityDesign Research Lab (Politecnico di Milano), Calibro and INMAGIK.

Primarily conceived as a tool for designers and vis geeks, RAWGraphs aims at providing a missing link between spreadsheet applications (e.g., LibreOffice Calc, Microsoft Excel, Apple Numbers, Google Docs) and vector graphics editors (e.g., Inkscape, Adobe Illustrator).

RAWGraphs works with tabular data (e.g., spreadsheets and comma-separated values) as well as with copied-and-pasted texts from other applications. Based on the SVG format, visualizations can be easily edited with vector graphics applications for further refinements or directly embedded into web pages.

Knowing the need to work with sensitive information, the data injected into RAWGraphs is processed only by the web browser: no server-side operations or storages are performed. No one will see, touch or copy your data!

RAWGraphs is also highly customizable and extensible, accepting new custom layouts defined by users. For more information about adding or editing layouts, see the Developer Guide.

Usage

The easiest way to use RAWGraphs is by accessing the most updated version on the official app page. However, RAWGraphs can also run locally on your machine: see the installation instructions below for know-how.

Installation

If you want to run your instance of RAWGraphs locally on your machine, be sure you have the following requirements installed. The following guide is for intermediate users (you will have to open your console and type some commands, it's better if you know what you are doing).

Requirements

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

Instructions (macOS)

In the terminal, navigate to the folder where you want to install the app and clone the RAWGraphs-app GitHub repository:

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

Browse the folder containing the repository:

cd rawgraphs-app

Install the needed dependencies through Yarn:

yarn install

Now you can run the project locally in development mode with the command:

yarn start

You can also build your own version and upload it on your server by running the command:

yarn build

Contributing

Want to contribute to RAWGraphs's development? You are more than welcome! Start by forking the repository (the "Fork" button at the top-right corner of this page) and follow the instructions above to clone it and install dependencies. Then you can use Github's issues and pull requests to discuss and share your work. You will need to sign a Contributor License Agreement (CLA) before submitting. We adopted CLA to be sure that the project will remain open source. For more information, write us: [email protected].

Publications / Citing RAWGraphs

If you have found RAWGraphs helpful in your research, or if you want to reference it in your work, please consider citing the paper we presented at CHItaly 2017.

you can read the full article in Green Open Access at the following link:

oa icon RAWGraphs: A Visualisation Platform to Create Open Outputs

Cite RAWGraphs:

Mauri, M., Elli, T., Caviglia, G., Uboldi, G., & Azzi, M. (2017). RAWGraphs: A Visualisation Platform to Create Open Outputs. In Proceedings of the 12th Biannual Conference on Italian SIGCHI Chapter (p. 28:1โ€“28:5). New York, NY, USA: ACM. https://doi.org/10.1145/3125571.3125585

Bibtex:

@inproceedings{Mauri:2017:RVP:3125571.3125585,
 author = {Mauri, Michele and Elli, Tommaso and Caviglia, Giorgio and Uboldi, Giorgio and Azzi, Matteo},
 title = {RAWGraphs: A Visualisation Platform to Create Open Outputs},
 booktitle = {Proceedings of the 12th Biannual Conference on Italian SIGCHI Chapter},
 series = {CHItaly '17},
 year = {2017},
 isbn = {978-1-4503-5237-6},
 location = {Cagliari, Italy},
 pages = {28:1--28:5},
 articleno = {28},
 numpages = {5},
 url = {http://doi.acm.org/10.1145/3125571.3125585},
 doi = {10.1145/3125571.3125585},
 acmid = {3125585},
 publisher = {ACM},
 address = {New York, NY, USA},
 keywords = {Visualization tools, data visualization, open output, visual interface},
}

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-app's People

Contributors

beachfires avatar bianchimro avatar btford avatar constanzaur avatar fcurella avatar gffuma avatar giorgiocaviglia avatar giorgiouboldi avatar iosonosempreio avatar lucamattiazzi avatar mikima avatar osioalberto avatar tpluscode avatar uf0 avatar vathsav avatar vladdoster 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

rawgraphs-app's Issues

[Bubble Chart] Cutted axis labels and bubbles

Trial data:
name,x,y,size
A,0.1,0.1,30
B,0.9,0.9,20

Problems:
a) smaller bubble is (practically) not shown (too much in the corner)
b) bubbles with extreme x or y are cutted (not whole bubble is shown)
c) axes' labels are cutted, particularly the y-axis, but the x-axis sometimes, too

test

RAW on localhost

Hi, I've installed the local version and the python server works fine. The only issue is that the index page does not display the box/form to drop the data. There are links as well but which directs to no-where, for instance http://localhost:4000/#layout.
Is that an installation problem or there is something missing. I'm running Ubuntu Precise 12.04. Many thanks

Layered .svg output

Following our talk of sooner today, having a layered .svg output would be a huge help for working on the result in Illustrator. Cheers!

Tutorial app

Hi there,
Do you mind sharing which app was used to generate the animated tutorials?
Thanks!

[Bubble Chart] Customize axis scale

Hi,

please consider to add axis limits management: if I add a point to (3,5) another one to (10, 10) and finally another to (1000,1000) please let us define we want axis X and Y go from 0 to 15.

Thanks in advance
Bye
Piero

[Bubble Chart] Sizing of Bubbles - autosize fails

Something seems a little odd in sizes of the bubbles in bubble charts. In the example in these screen shots, the value of the largest bubble is 251.1 (Mississipi in the top left corner) while for the smallest it's 119.4 (Minnesota) or an easier one to see, Hawaii at 134.7, but the disparity in bubble size for these values is grossly over-exaggerated. The values should correlate to the area of the circles in my understanding.

screen shot 2014-01-14 at 2 53 38 pm
screen shot 2014-01-14 at 2 54 41 pm

The Data:
State Obesity Rate Physical Activity Heart Disease Death per 100000
Alabama 67.7% 42.4% 236
Alaska 64.8% 58% 151.5
Arizona 62% 52.4% 146.7
Arkansas 68.7% 45.8% 222.5
California 60.3% 58.2% 161.9
Colorado 55.7% 61.9% 132.8
Connecticut 62.3% 52.8% 155.7
Delaware 66% 48.7% 175.7
District of Columbia 51.9% 57.7% 222.4
Florida 62.1% 52.9% 162.3
Georgia 64.6% 50.8% 192.6
Hawaii 56% 58.6% 134.7
Idaho 62.5% 57.3% 159.3
Illinois 64% 51.7% 181.7
Indiana 65.5% 46% 191.8
Iowa 64.7% 47.7% 173.3
Kansas 65.6% 46.8% 164.9
Kentucky 66.9% 46.9% 210.1
Louisiana 69.6% 42.1% 229.4
Maine 64.2% 56.8% 151.1
Maryland 63.8% 48.8% 182.2
Massachusetts 58.8% 56.5% 150
Michigan 65.6% 53.6% 204.2
Minnesota 63% 54.1% 119.4
Mississippi 68.9% 40% 251.1
Missouri 65.7% 49.6% 201.8
Montana 61.3% 55.4% 154.2
Nebraska 65% 49% 154.2
Nevada 62.5% 52.8% 197.3
New Hampshire 62.1% 56.2% 152.7
New Jersey 61.6% 53.4% 182
New Mexico 62.8% 52.3% 151.2
New York 60.6% 51.6% 199.9
North Carolina 65.8% 46.9% 174.9
North Dakota 66.2% 47.5% 158
Ohio 65.3% 51.7% 192.4
Oklahoma 67.8% 44.8% 235.2
Oregon 61.2% 61.2% 137.9
Pennsylvania 64.9% 49.5% 187
Rhode Island 62.9% 48.9% 167.1
South Carolina 66.1% 50.1% 189.9
South Dakota 66.1% 46.2% 155.2
Tennessee 65.4% 39% 217.4
Texas 65.1% 48.3% 181.1
Utah 57.8% 55.9% 143.2
Vermont 60.3% 59.3% 153.6
Virginia 63.6% 52.5% 168.5
Washington 62.3% 54.3% 151.5
West Virginia 68.3% 43.1% 211.2
Wisconsin 66.4% 57.5% 165.1
Wyoming 63.3% 53.3% 169.8

Problem parsing string with date inside

string with date element at the end or at the beginning is parsed as Date

date sample:
label bug_label_1 bug_label_2
this_is_a_label_string this_is_also_a_label_string_2012-02-02 2012-02-02_this_is_also_a_label_string

string_or_date

[Alluvial Diagam (Fineo)] No order

Elements are not ordered by anything.

No alphabetical order, no order by value, not ordered as they are in the dataset... if I re-upload data and try again, they change order but still without any sense.

schermata 2014-01-12 a 18 59 28

"everything seems etc."

Opening the app, without pasting any kind of data, it already says "Ok, everything seems fine with your data. Plese continue".
I know it is correct (no data = no errors) but it should appear only when you paste data.

Don't drop here

As we noticed during the test with the users, the "don't drop here" is not really visible during the operation of mapping. I suggest to make the text red or at least more visible.

[Safari] Download not working

Safari 5 on Mac OSX Snow Leopard

Trying to download svg, it downloads the file without name and without extension.

schermata 2013-10-01 a 13 30 19

schermata 2013-10-01 a 13 29 51

FAQ

Write FAQ for end-users

Absolute imports

Hi! I wanted this morning to deploy an instance of Raw on an address like http://mydomain.com/raw, but it did not work because every imports are written with absolute paths (at least here, for instance).

Could it be possible to switch them to relative paths? Thanks in advance!

[Alluvial Diagam (Fineo)] Issue with value "zero" in Link Value column.

Rercords with 0 (zero) as Link Value generate a mismatch between total amounts in different Dimensions.

As you can see in the picture there is a different height between the second step and the third one which is not supposed to be. the second step and the third one are supposed to be identical (padding is set to 0). If, in the records I said, I set the Link Value to 1 (one) instead of 0 (zero) it works perfectly.

schermata 2014-01-12 a 18 43 32

Decimal values with commas

Raw identifies the decimal part only if separated by point "."
When the decimal part is marked by comma, Raw discard it, keeping the integer number.
In my opinion or Raw parses it as float, keeping the decimal, or it stores values as strings.
This is because keeping just the integer part can bring to conceptual errors: the user is sure that values are correctly parsed while they are not.

Sunburst - Size and Labels

Can we map the size of the each element using a value instead of the count?
Can we put labels? I suggest to put them radially like in the circular dendogram aligned towards the center.

Raw library (API)?

Put simply, this is a pretty awesome application. However, it seems like it's power is more in its abilities than as a stand-alone site -- at least that's where my interest lies.

I do realize that since the code is all here, one could pull out whatever's needed and form their own library to work with the code on a programmatic level, but I was curious if there was any intention of this being officially supported? E.g. install the Raw module, call some importData(...) method, apply mappings, set the rendering options, and then saveAs("svg") or similar?

Again, pretty impressive project, regardless!

TYPO: plese

typo in the sentence:
"Ok, everything seems fine with your data. PLESE continue"

Feature: Option to create a graphic title and details

This thing is AWESOME, I've already got it connected to my Neo4j DB and am doing some great stuff with it. It'd be great if you could add a title within the actual visualization, to provide context to the data. Should be fairly straight forward to accomplish.

Trouble installing

When I install locally, requests to many of the non-application files are getting the index.html file as a response.

When going to localhost:4000 -- the index loads, and I see the title "RAW" and a bullet list of "data, layout" etc... None of the css or js is loading. When I inspect the request for /angular-ui/build/angular-ui.min.css with chrome inspector, the response looks just like the one I get from the request to /
(ie~ starting with: <!DOCTYPE html><html ng-app="raw"><head><meta... )

You can reproduce with: docker run carver/raw (assuming you have docker installed)

Which is basically a:

git clone <raw repo> /opt/raw
cd /opt/raw
npm install -g bower
npm install
npm start

Using commit 0ede2ee

Debounce Form Inputs

On larger datasets and visualizations (such as the Titanic sample data + Alluvial Diagram) changes to the form inputs can cause the page to hang, even before the new value shows in the form field.

I think implementing something like Underscore.js's debounce() function [1] on these fields would make this much smoother, and even eliminate a lot of processing entirely when using the step controls or typing a multi-digit number.

[1] http://underscorejs.org/#debounce

Navigation links reset the app

After choosing the data, clicking any of the nav links at the top (Layout, Mapping, etc.) such as demonstrated in the video, jumps the focus to the top of the page and clears the data -- essentially bringing the app back to its initial state.

Tested with http://app.raw.densitydesign.org/ and locally, and with current versions of Chrome and Firefox. Haven't noticed any messages in the console log.

Date parsing

Raw recognizes dates, but when you use them as numbers (like in a scatterplot, or a bubble chart) it returns only the day number in the mont as value, regardless the mont and the year.

date
01/03/2001
02/03/2001
03/03/2001
04/03/2001
05/03/2001
01/04/2011
03/12/2013

schermata 2013-10-03 a 11 54 53

Export as image without Key

Need a key or legend to export when creating a tree diagram.

Want: Input Type and Quantity data and convert into a Tree Diagram
Error: Doesn't automatically use all ten lines of data, uses only 9

Want: Key to reflect the colour and prioritise Quantity data in key (legend)
Error: Can only export Tree diagram as a .png, not the key too

Want: the colours to be different enough so can work with 100 lines or more of data
Error: Not enough differentiation for a non-builder to distinguish between Type categories

Otherwise, easy to use and quick!
: )

Heat map

Awesome tool!! Can we have a heat map visualization?

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.