How to Commit Graphs to E2D3 for Mac Users

Hello there. I am K.Osone, a contributor of E2D3.

I would like to show you the way to commit a chart which you make for the first time.

This article applies to the environment as below.
– Macintosh (version 10.10.2)
– Chrome (version 41.0.*)

Firstly, get git-clone the sources of E2D3 as the link below.
https://github.com/e2d3/e2d3/wiki/Getting-Started/

If you input the instruction “npm start” to the terminal and you open a localhost with browser(http://localhost:8000/index.html), you will reach to the screen as below.

E2D3

 

 

 

 

 

 

 

You can add/commit charts to this local site.

This time, I would like to commit a bubble-chart to E2D3.

When you just only clone the sources, you are in a branch called “master”. You have to make a branch and then move to the branch you made.

As you commit a bubble-chart this time, the branch name shall be changed to “bubble chart”.
The code is as below.

$ git checkout -b bubble-chart

First of all, make a directory named “bubble-chart” in the directory “contrib”.

In that directory, you make files as below.

data.csv

main.css

main.js

README.md

thumbnail.png

* I used the samples of barchart-javascript for this time.

 

files

You make charts by adjusting main.js mainly.

When you make a bubble chart, you will set three metrics and plot them as the x-axis, y-axis and the size of circle.

I made a chart as below.

 

bubblechart

Secondly, let’s make a thumbnail for the chart.
The thing you have to do is that you just put a certain picture to the directory and save the picture as “thumbnail.png”; however, you can also make thumbnails by using “save image”, the function of E2D3.

At the local site you made, you will click the button “save image” and save the image as a png type file.

The setting will be finished if you save the image whose name is thumbnail.png to the bubble-chart directory.

The image will be shown as a list.

 

index

Finally, README shall be edited. As you edit README.md. you can change the images which are shown when you put the pointer over the thumbnail of graphs in Index. This picture is a image of the result of this procedure.

readme

When you finish editing README, you commit the graph with the instruction as below;

$ git commit -m "bubble-chart added"

The all procedures will be done with your Pull Request and being merged by others.

PullRequest