How to make Your Chemistry Research Paper Get Visualized with Javascript and D3 in DigitalOcean-snapshot

The way I learned from DigitalOcean since 2012. Right after you get work done, just make a snapshot. You can destroy any time after the previous steps are gone far. Ok, I saved the last work-d3js, html, css in DG. I looked up D3 video tutorial. It gives an understanding in D3 mechanism of select, append, attr:object, value, name.

Just keep in mind that if you are new at html, and css.

Please go back to this chart tree when you’ve done the first d3 chart.

Ok. Look at what I did in chart.js, focusing on attr(value, name).


You see why I did this >> attr(“value”, “name”) append refers to “tag.” For the beginner, just think select as referring “DOM -<body> <div> <rect>”

Let’s finish the sense of attr. Before that, you might have a question at “rect.” What is this? That makes chart as a rectangular shape. It supposes to be in <body> already!! if you run ‘inspector’ in Chrome.

.attr(….,….)

(“height”, “height_in_pixels”)

(“width”, “width_in_pixels”)

(“x”, “distance_in_pixels”)

(“y”, “distance_in_pixels”)

So, for the rectangular bar graph. Our x is the data (all data) and y is the property-index.

All options in the javascript file. Just quick tips for function. Let’s say d for the data point and i for index, as in function(d, i) -you can use any variable a and b or f and g.


Two things to make sure before the first svg made of d3 runs!

“rect” should get along with a following class that displays your favor design (style) in SVG.

Play the figures with a function that is passed two variables defined by D3 to function().

x value was passing d and i thru “{return 400 — (d*10)}.” Maximum range of x got subtracted by (d*10).

y value was set to be 60 pixels every edge border 15 pixel interval.

Good to go now. If you once ever set this graph by your hand, you could do play anything in D3 project.

I wrote not as a programmer but as a chemist who always struggles with a ton of data to set up nicely.

Hope it helps~ Best wish!