Giter Club home page Giter Club logo

charticulator's Introduction

Build Status

Charticulator

Charticulator is a new charting tool that allows you to design charts by interactively specifying constraints.

Project Team

Build

Follow the following steps to prepare a development environment:

Install node modules:

yarn

Copy the template configuration file and edit its contents:

cp config.template.yml config.yml
# (on windows, use copy instead of cp)

Run the following command to build Charticulator, which will create a self contained bundle in the dist folder:

yarn build

Run a local web server to test Charticulator:

# Serve Charticulator at http://localhost:4000
yarn server

# Serve Charticulator publicly at http://0.0.0.0:4000
# Use this if you want to enable access from another computer
yarn public_server

Development

For a live development environment, keep the following command running:

yarn start

This command watches for any change in src/ and sass/, and recompiles Charticulator automatically. Once this up, open http://localhost:4000/ to launch Charticulator. Now when you change the source code, the app can be updated by simply refreshing the browser page (you may need to disable browser cache).

In development mode, there is a test application for UI components, which can be accessed at http://localhost:4000/test.html.

The watch mode won't update when you change the following:

  • config.yml
  • THIRD_PARTY.yml
  • webpack.config.js

When you update these, please do yarn build again.

Sample Datasets

You can add custom sample datasets that can be used with Charticulator. To do so, create a datasets folder at the root of the repository(if it doesn't exist), add your .csv (or .tsv) to that folder, and finally create a files.json file in the folder with the following contents:

[
    {
        "name": "<Your dataset display name>",
        "description": "<Your dataset desription>",
        "tables": [
            {
                "name": "<Your dataset file name without extension>",
                "type": "<csv || tsv>",
                "url": "<Your dataset file name with extension>"
            }
        ]
    }
]

Testing

Charticulator currently include a rudimentary test code:

yarn test

More test cases are needed.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Documentation

Run yarn typedoc to generate documentation pages. The page will be awailable in ./docs/charticulator

Start point of documentation is index page {@link "index"}

charticulator's People

Contributors

danmarshall avatar darthtrevino avatar deldersveld avatar dependabot[bot] avatar dm-p avatar donghaoren avatar doubleamp avatar duncanhealy avatar matthlee avatar microsoft-github-policy-service[bot] avatar microsoftopensource avatar mrramka avatar msftgits avatar stopyoukid avatar zbritva 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

charticulator's Issues

Help menu

  • "?" icon at the top right corner with the following menu items
    • Getting Started
    • Example Gallery
    • Report an Issue
    • Charticulator Home
    • Contact Us

Firefox compatibility bugs

This issue tracks a few bugs that appears in the Firefox browser (tested on macOS 10.13.6 with Firefox 60.0.2)

  • Dropzone highlights in the attribute panel are not aligned properly

screenshot

  • Slider for input fields are misplaced in the attribute panel.

screenshot

  • Many scroll bars doesn't work

    • In the New/Open/SaveAs/Export panels
    • In the attribute panel, layers panel (may be the cause of #9)
  • The bar under the chart canvas that contains the zoom icons is missing

  • Unwanted auto re-centering of the chart canvas may happen when working in the glyph editor

Sort options over the X and Y axes labels

  • Have a sort option over the X and Y axes labels
  • Match the order in the attributes panel and that in the chart canvas; they are currently reversed as shown below.
    image

when I execute yarn build, I met a problem

I went to the step -- yarn build, but after the code had been executed, I met the problems as follows:
_yarn run v1.10.1
$ node build.js --mode=production
charticulator/build.js:30
async function addHASHToHTMLs() {
^^^^^^^^

SyntaxError: Unexpected token function
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module.load (module.js:438:3)
at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:389:7)
at startup (bootstrap_node.js:149:9)
error Command failed with exit code 1.

I didn't get enough infos, what should I do?

Please provide a sample dataset with examples

Can you please provide a sample dataset with examples. This will help us validate if the error is in the way we are using the software or a bug in the code.

For example, I made a chord diagram when this software was newly released. Since then, I've done a couple of git pulls with slightly different data and can no longer generate any chart with links in it. This may mean that closed tickets (#90) represent bugs which still exist!

I don't know if I'm using the software wrong (there are some very slight differences in the video vs what I see when I follow the steps), perhaps my data is bad (cycles in the graph or misspelled nodes) or there could be a bug introduced.

Having a sample file will help narrow the issue and reproduce bugs more easily.

Link behavior ignores sorted date time order

Add a simple running data set (Date Time and HR BPM):
screenshot 339

Add circle mark to glyph panel. Datetime to X Axis and BPM to Y Axis:
screenshot 343

Add a link to draw a line plot:
screenshot 344

Result:
screenshot 340

The order is correct in regards to the data set as the gyphs plot correctly. But the links do not acknowledge the correct order. I have tried with different date time format variations and still get the same result. Perhaps I am missing something?

Data sample below:
Morning.txt

Floating panels

Make it possible to float the Glyph editor, Layers, and Attributes panels; similar to Chrome Developer Tools (only the left most one)

image

This will address the issue #9.

Immediate drag of a text mark on the chart canvas

Immediate drag of a text mark on the chart canvas: currently, I need to select a text mark (with a mouse click) before I start dragging the text mark on a chart canvas.

A line or text mark is not automatically selected right after I add it to the canvas.

Add tutorial to show how to add error bars/confidence intervals

I read the paper Charticulator: Interactive Construction of Bespoke Chart Layouts and Figure 9 states it was created in Charticulator. I can't reproduce it.
Would it be possible to add a tutorial to show how to do this? Being able to add error bars to a simple bar or line graph is a missing element of PowerBi and limits its use for statistical visulisation. Using Charticulator to create a custom visual to do this would be great!

PBI Tooltip Formatting is broken

The tool tip for a charticulator viz needs to be corrected to show values with correct formatting. Decimal rounding and actual Date.

screenshot 5 _li

More expressive marks

  • Image mark (svg/png/jpg)
    • image source (url) data binding
  • Additional shapes
    • oval
    • triangle
  • Text mark formatting
    • simple: add a prefix (e.g., '$') or postfix (e.g., '%')
    • more sophisticated formatting (e.g., '${countryname}: ${birthrate}%')

Unify the code for chart and glyph editor

They are very similar in functionality. However, for legacy reasons, they are implemented by two different classes, which makes it difficult to keep them consistent.

Relevant issues:

  • #24: The drag-and-drop action is not implemented in the chart editor
  • The drag-and-drop action could be smarter. For example, when dragging a circle, we can decide the drop place based on where the mouse is
  • Contextual widgets like below are not available for glyph editor, so nothing currently use it
    image

Data Axis Formatting

I have a Data Axis with decimal data. I want to display it as a percent...not sure how to adjust formatting on the data axis (see pic). Would I apply formatting in the "Tick Data" area? I have not been able to find any info on the "Tick Data" feature, how does this work?

screenshot 469

Weird scaling bug for object size vs text size

In the below examples I have a circle glyph with field "sum of records lost" to adjust the size. I also have a text object which uses field "sum of records lost" for size as well. When i try to change the circle domain and range the text adjusts MUCH more than the circle. I would expect the text remains the size that was set and only the circle adjusts. I did notice that they share the same scale based on the aggregation..not sure if this is desired.

screenshot 7

screenshot 8

Add error reporting

It would be good to have an error reporting mechanism:

  • Toast messages for

    • Error parsing CSV
    • Error loading chart
    • etc.
  • Issues view for

    • Unhandled invalid/null values in the data
    • Missing references for source_id, target_id
    • etc.

Conditional visibility for text labels break PBIVIZ export

When using exported chart in Power BI the visibility condition breaks the visual and nothing loads in PowerBI. If you untick the Auto scale/domain upon exporting, the visual works in PBI, but the conditional tooltip doesn't work.

screenshot 504

No ability to scroll within the larger application window

You can't scroll within the application, so if you're screen is smaller than the default size, you'll not see options like changing the style of marks in the attributes menu.

This was experienced on a 2016 macbook pro 15 inch screen.

Control over Data type

It would be beneficial to have the ability to change the data type for each field in Charticulator. Right now it seems like Charticulator automatically detects and assigns a data type which dictates how its handled within. For example if i wanted a field with "year" to be treated as numerical instead of categorical or vice versa. Another example is binning a "revenue" field to create a histogram. My X-axis should display the revenue bin as a categorical but Charticulator converts to numerical automatically.

screenshot 523

support export to HTML

it will be very handy if we can export the results as an HTML file, as an example plotly can do that

regards

Links are not drawn

The link object is added to the layer but links are not drawn on the canvas.

image

Unexpected behavior of PBI Viz when linking two plot segments.

to Reproduce:

  1. In Charticulator add 2 parallel plot lines.
  2. Add dimesnion to one (OS) and another to the second line plot (Date).
  3. Link both plot segments and export as PBI viz.
    screenshot 333

Using the same data set in PBI the plot gets very skewed and is un-usable:
screenshot 335

Keep up the great work guys! This is a seriously powerful tool.

option to add a filter

it will be great if we can add a filter on the visual, so when we export to HTML, the user can filter the chart, it will open all kind of interesting scenarios.

thanks for the great works so far

open template from other users

add the option to open a template created by other users, right some users are creating some amazing charts, it would be nice to be able to use their template

Add ISO8601 Date Parsing

Datasets can contain ISO8601 formatted dates, and it would be nice if Charticulator supported that.

Nested Charts Y Axis Doesn't Scale Appropriately (Small Multiples)

The Y axis for each nested chart in a small multiples example doesn't scale to accommodate the largest value.

Reproduction steps.

Data set:
screenshot 346

Add nested chart:
screenshot 347

Group plot by Business Source:
screenshot 348

Edit nested chart by adding Year to X axis and Revenue scale to Y axis. Also add circle symbol to glyph and link to create line:
screenshot 350

Save nested chart and navigate back to original Charticulator page (Plot):
screenshot 351

You can see that the max Revenue is much higher than the 20,000,000 in some charts and is not changing dynamically.
Also it seems like the sort is off in some plots (top right for example).

Please provide non-video instructions for examples

The authors clearly put in lots of work in creating the examples and recording short videos showing how to reproduce the charts. However, as small changes start to accumulate, the videos will become more and more outdated.

Negative values

Dear Sirs,
I can not re-create a chart like "Microsoft Stock Price 1987 - 2018".
The chart do not show the negatives as negative.

image

I here send my data:

mes,Incremento,Reduccion,Neto,Valor
1,32,-20,12,512
2,50,-10,40,552
3,100,-12,88,640
4,65,-15,50,690
5,32,-8,24,714
6,67,-21,46,760
7,87,-60,27,787
8,54,-32,22,809
9,20,-60,-40,769
10,23,-76,-53,716
11,55,-98,-43,673
12,33,12,45,718

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.