Code Monkey home page Code Monkey logo

icn3d's Issues

Schematics improvements

when a set of residues is selected but is disjoint, we shouls draw the chain even in non selected parts between highlighted/selected residues so that the structure shape/fold/secondary structure is still perceivable.
It is is like showing labels BUT automatically and also using that as a representation (as today) we can start showing INTERACTIONS as lines between interacting residues represented by ONLY they 1letter code

It would be great if that could work with at a minimum CA Trace but possibly also the ribbons
and schematics should be mixable with any other graphical representation.

applyCommandCls.applyCommand() does not redraw

applyCommandCls.applyCommand() does not redraw the 3d view until the window is resized.

Example)
image

image
Commands are run using applyCommand(), but nothing visually changes. The console shows the commands

After changing the window size, the colors are updated:
image

Spectrum coloring

Cn3D has a Rainbow coloring style that colors chains from the 5' end to the 3' end, or the amino end to the carboxyl end with the order ROYGBIV. ( red orange yellow blue indigo violet)

I noticed today that this order is reversed when I use the Spectrum color in iCn3D. Is there a reason why the order has changed? If there isn't a good reason, can this be changed back to ROYGBIV like it was in Cn3D?

Clearing a selection reveals hidden parts of a structure

Goal: I would like students to be able to look at a double-stranded piece of DNA, colored by residue, with the protein part of the structure hidden.

Procedure:

  1. Opened structure 7OZV
  2. Selected both chains of DNA in Summary tab of the Sequences and Annotations window.
  3. Opened Color, chose Residue > Default
  4. Opened View, chose View Selection (in order to hide the protein.
  5. But the sequences in the Sequences and Annotations Details window have a yellow highlight - so opened Select and chose Clear Selection

Expectation - the yellow color will disappear and I should see the DNA without the protein in structure window.
Result: The yellow color disappears but all the objects that were hidden in step 4 reappear.

Label by atom hides everything but the label

I wanted to label each atom in a nucleotide so that students could identify them.

Here's what I did:

  1. Selected a single nucleotide in 7ODF.
  2. Choose View Selection to hide everything else.
  3. Chose Nucleotide > Ball and Stick.
  4. Chose Color > Atom.
  5. Opened the Analysis menu and chose Label per Atom.

The nucleotide disappeared and I got large square labels that aren't attached to any atoms. I put the image below. This is not very useful. I should be able to see both the labels and the atoms. The labels should be on top of the atoms and should be smaller than the atoms.

Screen Shot 2021-10-18 at 3 34 17 PM

Here's what I would like to see (I didn't add the position numbers, just the letters).

labeled_atoms

Share Link issues

Distance calculation

The distance calculation function maybe it is not working correctly. After I made a selection of two residues in a different chain, I clicked on "Analysis," "Distance," and "between two sets." It opened a box, and I choose "selected" in both the first and second set. The result is always 0 angstrom of distance.

Custom track coloring

The custom color via the UI is working great. Is there a way to do that using the js library? I am currently using:

ic.opts['color'] = 'align custom';
ic.setColorCls.setColorByOptions(ic.setColorCls.setColorByOptions(ic.opts, ic.hAtoms));

NFE - Interactions improvements

Interactions

Highlights - need to be able to select a set of interactions [with Command-click-highlight not just one at a time. Then we eventually want to name that set
[we need to have something general]

Simplified highlights - CA to CA or centered to centroid summing up the atom level contacts between 2 residues using section proportional to sum ... or something along these lines. We could estimate energies on non bonds and hbonds ... and have section proportional, although we are not minimizing structures ... that may be an issue

We need carbohydrate links as in Cn3D example N4/N168 and we may need to handle them together, not separately. Not sure how it is best to achieve this
Glycosylation is important ... so connecting carbohydrates to the right N (or O- eventually) is important - it must be in the PDB as CONNECT statement

We need highlights of H-bonds and non bonds. There are 2 types sets to envision

  • sets of residues
  • sets of [interacting] pairs
    And a relationship between the two

Also on the stats about interactions - precisely - the number of residues and residue pairs is useful in addition to the total number reported

load url syntax

hello, i was able to quickly display the icn3d viewer on my own web server. however, i have not been able to load a "local" pdb file into the viewer using either the command prompt OR coding the path into the html page that initializes the viewer. yes i was able to load the pdb file using the popup menu. i believe the file type info was missing the very first time. so what should be the [???] below?

(1) use command prompt: > load url [???] // manual list only the path inside [???] no type info
(2) within a generated html: var cfg = {..., url: [???], ...};

PS: i learned that once i used the popup menu one time, the file type was "remembered". so from then on i could simply type > load url [local server path to pdb file] and it would work and type not needed. thanks much.

Save to PNG

When I tried to save the current canvas scene using the "iCn3D PNG Image", it generates two separate files (one .HTML and one .PNG). I read in the Readme that the function works that way. Unfortunately, google chrome has some issues with saving two files simultaneously because it asks for permission to download multiple files concurrently, and some users can have a problem seeing that. Lastly, when I opened the .html file and clicked on the link available in the image, it opened a new iCn3D tab and started loading the data, but it gets stuck.

PDB, MMDB, Water, Interactions in iCn3D

This is a pending issue but it reveals a number of related issues on data and software.

  • We do not have water molecules in iCn3D when using MMDB
    If I switch to PDB it is OK as I can have waters BUT, if using PDB directly:

  • I lose 2D Interactions window

  • I also do not have Secondary Structure

  • "Structural Water:
    Also on 1D waters are in sequence (O.) attached to a chain (as in PDB) that is definitely a PDB issue and may not be that bad actually as it is linked to structure. It is an issue though to deal with it specifically in interactions (meaning drilling down).

It would be good to discuss some harmonization between PDB and MMDB and/or have MMDB have ALL data from PDB including water and the “alternate” but "official" secondary structure definition. The secondary structure is a broader issue than water – certainly it should be available when using PDB

Whether PDB or MMDB we need both the data and functionality to work identically.

Interactions – including water – are needed more and more as it becomes obvious with modern data that crystallographic water is part of the structure NOT ONLY inside a protein but mediating molecular interactions with ligands
As in the example used here 5IH2
https://www.ncbi.nlm.nih.gov/Structure/icn3d/full.html?showseq=1&pdbid=5ih2&buidx=1
(check the paper for the water story).

In the past we used to discard metal atoms while they are crucial in enzymes for example. Today we still discard water. I think a critical eye is needed.

Cheers!
Philippe

Inconsistent selection behavior Sequences & Annotations window

  1. I open 7OZV.
  2. I open the Analysis window and choose Seq & Annotations.
  3. If the Summary Tab is selected in the Sequences and Annotations window, I can select a nucleotide chain by clicking the name.
  4. If the Details Tab is selection, clicking the name of a nucleotide chain (or protein chain) doesn't do anything.

Result: Clicking the name of a chain only selects the chain when the Summary tab is selected.

But here's how I think it should behave:

Expectation: Clicking the name of a chain will select the chain when either the Summary or Details tab is selected.

NPM Gulp does not deliver ready state ICn3D

When downloading and compiling the project from scratch, NPM Gulp does not produce a product ready for use. The following three files are afflicted or affecting the overall product in use:

  • icn3d_x.x.x.min.js (not compiled correctly - text comparison tested)
  • three_0.128.0.min.js (not compiled correctly - text comparison tested))
  • ui-bg_gloss-wave_55_5c9ccc_500x100.png (file not found)

image
image
image
image

Simple example

Hi,

icn3d is great, nice work, but I am missing a simple example like this:

  1. load pdb from my server
  2. make a scene and
  3. visualize this pdb in a simple scene (without any other tools loaded).

Even in the simple examples provided, the scenes already inherit too many things (toolboxes).

I was thinking to load multiple proteins in one scene, display it with VR glasses, and let the users wonder around. The pdb files are already in my server and I do not want any ajax to load them from a remote server.

Best,
Dimitrios

High usage of memory Ram and Problem with the Share link feature

Some of us from the IEDB team have been using iCn3D for a while, and we ran into a few issues that we thought might require your immediate attention. When we attempt to select individual residues multiple times, each time changing their style and color, the webpage crashes often. We used Google Chrome and Firefox, each on both Windows 10 and Ubuntu/Mac. On the windows 10 machine, when I try to select a few residues, around four residues selection and change their style and color, Google Chrome memory RAM usage goes up to 4 Gb. On Ubuntu, repeating the same steps using Google Chrome resulted in many crashes, making it impossible to continue. Using Firefox, I managed to finish the process, but the process is very slow, and the webpage freezes for a few seconds and the memory usage goes up to 5 Gb.

Another issue that we would like to raise is the 'Share link' feature. In continuing with the issue mentioned earlier, we saved the steps of selecting residues and changing their style/color into a state file. When we open a new iCn3D window and open the state file, it loads the structure in the desired representation and color. With the structure loaded, now when we click on 'Share Link', a link is created. However, when we open this link, we find that the custom representation is lost, and the structure is loaded in the original state. For example, the desired representation shows the structure as a surface. Still, on opening the link, the structure is no longer shown as a surface but as a cartoon/ribbon representation.

Choosing "view selection" causes the structure to disappear

Goal: Display a single amino acid residue.

Here's what I did:

  1. Opened 1TUP.
  2. Opened the Sequences & Annotations window.
  3. Selected an amino acid in the sequence (Q100).
  4. Opened the View menu and chose View Selection.

Result: everything disappeared!

The result I expected: Everything else would disappear except the amino acid that I selected.

Additional tests:

  1. Tested the 1TUP MMDB file and the 1TUP PDB. Result: everything disappeared!

  2. Tested other chains in 1TUP and got the same result. Result: everything disappeared!

  3. Tested 1NAJ (a DNA structure) and selected a nucleotide. Result: View Selection works as expected.

  4. Tested a different structure (5F9R) Result: View Selection works as expected with the protein chain and with the nucleotide chains.

Unable to select single nucleotide

I would like to select a single nucleotide in 7OZV from the sequence view.

  1. Opened Sequences & Annotations.
  2. Opened the Details tab.
  3. Chose the two nucleotide chains
  4. Chose View Selection in order to hide the protein.
  5. Clicked Toggle Highlights to remove the highlights.
  6. Used cursor to click the second X (X9) but when I click the chain, the whole sequence is highlighted. I can deselect a few bases by clicking and dragging but I'm not able to select a single base.

Expected behavior - I thought I should be able to click the cursor inside the sequence and select a single base. I also expected that I should be able to select additional bases by clicking and dragging.

Color legend for alphafold confidence

Hello,

Thank you very much for releasing iCn3D. I am checking the 3D protein structure predicted with alphafold2. I am evaluating the alphafold confidence color of the structure. Would you please let me know where I can find the color legend for the confidence?

With best wishes,

Timothy Ng

View RNA pdb files

I have few pdb files generated for RNA using rnacomposer (http://rnacomposer.cs.put.poznan.pl/)

When I try to load these files in the viewer, 3D structure is not available

Thus, wanted to understand icn3d can visualize PDB files of proteins only ?

Following is the first of few lines of pdb file obtained through above site for input RNA sequence
MODEL 1
ATOM 1 HO5' G A 1 -0.154 -0.520 0.011 1.00 0.00 H
ATOM 2 O5' G A 1 0.395 -0.651 -0.766 1.00 0.00 O
ATOM 3 C5' G A 1 1.734 -0.303 -0.401 1.00 0.00 C
ATOM 4 H5' G A 1 1.995 0.660 -0.843 1.00 0.00 H
ATOM 5 H5'' G A 1 2.423 -1.059 -0.773 1.00 0.00 H
ATOM 6 C4' G A 1 1.874 -0.213 1.100 1.00 0.00 C
ATOM 7 H4' G A 1 2.937 -0.120 1.327 1.00 0.00 H
ATOM 8 O4' G A 1 1.077 0.908 1.575 1.00 0.00 O
ATOM 9 C1' G A 1 0.348 0.524 2.727 1.00 0.00 C
ATOM 10 H1' G A 1 0.480 1.314 3.467 1.00 0.00 H
ATOM 11 N9 G A 1 -1.067 0.463 2.376 1.00 0.00 N
ATOM 12 C4 G A 1 -2.077 -0.059 3.147 1.00 0.00 C
ATOM 13 N3 G A 1 -1.937 -0.607 4.371 1.00 0.00 N
ATOM 14 C2 G A 1 -3.090 -1.019 4.862 1.00 0.00 C
ATOM 15 N2 G A 1 -3.129 -1.581 6.073 1.00 0.00 N
ATOM 16 H21 G A 1 -2.267 -1.680 6.592 1.00 0.00 H
ATOM 17 H22 G A 1 -4.003 -1.883 6.471 1.00 0.00 H
ATOM 18 N1 G A 1 -4.289 -0.910 4.205 1.00 0.00 N
ATOM 19 H1 G A 1 -5.118 -1.258 4.659 1.00 0.00 H
ATOM 20 C6 G A 1 -4.459 -0.350 2.944 1.00 0.00 C
ATOM 21 O6 G A 1 -5.587 -0.299 2.442 1.00 0.00 O
ATOM 22 C5 G A 1 -3.227 0.103 2.403 1.00 0.00 C
ATOM 23 N7 G A 1 -2.946 0.716 1.189 1.00 0.00 N
ATOM 24 C8 G A 1 -1.657 0.910 1.218 1.00 0.00 C
ATOM 25 H8 G A 1 -1.107 1.376 0.414 1.00 0.00 H
ATOM 26 C2' G A 1 0.924 -0.809 3.199 1.00 0.00 C
ATOM 27 H2' G A 1 0.164 -1.430 3.679 1.00 0.00 H
ATOM 28 O2' G A 1 2.033 -0.551 4.040 1.00 0.00 O
ATOM 29 HO2' G A 1 2.677 -1.238 3.870 1.00 0.00 H
ATOM 30 C3' G A 1 1.362 -1.422 1.875 1.00 0.00 C

Help with embedding

Hello,

First off -- what an awesome tool, thanks for making this!

Disclaimer: I'm rather new to JS.

  1. the options of %width/height doesn't seem to work; any value blows up the embedding to full width
  2. I'm struggling to customize the options for embedding a 3D view of simple molecules. For example, trying to turn off hydrogens and I can't seem to get it to work. I'll appreciate a pointer to what I'm doing wrong.
<h1>Not Aspirin</h1>
<p>Blah blah</p>
<div style="width:600px; height:300px; border:5px; border-color:#333;">
  <span>qwerty</span>
  <div id="icn3dwrap"></div>
</div>

<script type="text/javascript">
  $( document ).ready(function() {
        var options = {};
        options['surface'] = 'molecular surface';
        // setStyle(hideHydrogens);

        //Options are available at: https://www.ncbi.nlm.nih.gov/Structure/icn3d/icn3d.html#DisplayOptions
        //options['proteins'] = 'sphere';

        var cfg = {
            divid: 'icn3dwrap',
            width: '50%',
            height: '50%',
            resize: true,
            rotate: 'right',
            mobilemenu: true,
            showcommand: true,
//            showtitle: true,
        };
        cfg['cid'] = '6106';
        if(Object.keys(options).length > 0) cfg['options'] = options;

        var icn3dui = new iCn3DUI(cfg);

        //communicate with the 3D viewer with chained functions
        $.when(icn3dui.show3DStructure()).then(function() {
          icn3dui.setOption('background','white');
          // icn3dui.setOption('opacity','0.2');
          icn3dui.setStyle('hideHydrogens')
          // icn3dui.addLabel('abcdef',0,0,0,50)
             // icn3dui.setOption('color', 'cyan');
        });
  });
</script>
  </body>

surfacing multiple objects

AN issue in surfacing superimposed molecules:
it creates a composite surface for both molecules the when you "alternate" between the two you alternate only the backbone representation, not the surfae representation.
The surface should be linked to each molecule and one could see alternatively the surface of one vcs the surfave of the other.
This feature may also be useful in "alternating" viewing surfaces of 2 molecules/chains forming an interface (or any set in generalizing the concept)

Bug on display selection with labels applied to another selection

This concerns label per residue, have not checked all options
(may be as designed - yet change design)

using label as opposed to Schematic
all labels of a selection appear even if another selection is displayed This does not happen with schematics
yet schematics cannot mix with other representations currently

See also the issue of colring of labels on a residue basis (unlike schematics that adopt the residue color)

issue with state files

Hi all -
First I want to thank everyone for this great tool. I teach college organic chemistry and use this to show protein-drug interactions. I love PyMol but for teaching, this is much more very ideal for teaching purposes and something students can use at home.

I noticed an issue with "state files" not saving all the key details of the state, sort of like how a PyMol project file works. Here are three attachments
(a) a PNG that was created showing biotin-streptavidin and its key interactions
(b) the statefile that was saved after step (a)
(c) after I re-loaded the statefile, I create a new PNG. I would imagine it should be the same as (a) but it is different in color, and the key residues are not shown.

It appears that not all aspects of the "state" are being saved.
Thanks!!!! -marc anderson (SFSU Department of Chemistry)

1STP-initial

1STP_statefile.txt

1STP-later

Selection file documentation

Is there any documentation on the selection file from the menus? I would like to be able to load a file with predefined groups of residues via the api or commands. I would also like to be able to alternate between different selection.

Is that the intended use case for that feature?

RAINBOW coloring

does not seem to go over the full color spectrum from N>C

Also default should be by chain - right now it takes the assembly which does not really make the point

Domains Information in iCn3D

Both Structural and CDD domain info should be available as an attribute of a domain but also within chains with multiple domains
Onegood use of that would be of course coloring, labeling ....

A place where it would be very useful would be in a table for a large system (as avalaible today as a selection table - with only chains names and # res in chain) we should/could have CDDs as a column and also structural domains [we may need to work on naming VAST domains to make it great, we may also enable nomenclaures to be added such as SCOP, maybe through a user interface - domain definitions as possibly sets that we can read in as well as save)

The info is pretty much available in MMDB pages ...

Defined set color doesn't update when changing colors

For example:
image
chain 7DDD_C is colored in white

I load the selection through defined set and perform Color > Unicolor > ... > Cyan. The 3d model does not update the first time and will only recolor the second time I pick cyan.

After that, I expect the text to change to cyan as well, but it remains the old color

image

7DDD_C is above AY.1 in white

Custom tooltip information

Is it possible to append data to the tooltips when hovering over a residue?
image
For example, if I add custom coloring (similar to the b factor coloring), is there a built in function to display the values assigned to each residue in the tooltip?

Licenses

I want to ask about the licensed software, e.g., Delphi. How did you get these licenses? If I intend to use iCn3D in my server, do I need to require permission to use them?

Epitope align

Hi team,

I have an epitope, and I want to match that sequence in my structure. I am using align -> sequence to align for doing that. But, it requires the chain ID. Is it possible to match the epitope into the entire structure? Because some of those structures are homodimers and homotrimers, it would be interesting to highlight the same epitope in all chains simultaneously.

Many thanks

The Rainbow coloring in iCn3D isn't behaving correctly

The Rainbow coloring style should work in the following way - the amino terminus of each protein chain (or the 5' end of each nucleic acid chain) should be red and the carboxyl terminus (or 3' end) should be violet.

When colored correctly, a structure like 1IGY will show the amino ends of all four chains in red.

Each chain needs to be colored independently because each chain is a separate molecule.

Instead it looks like the coloring is treating the four chains as part of a single concatenated molecule.

Problem with representation of amino acid sequence when there is incomplete data

The structure 1IGY has a two regions where a portion of the structure is missing. That part is fine.

The problem is that the sequence that corresponds to the missing regions is not shown correctly. The last amino acid at one end is D229. I highlighted this in the attached structure image and the attached sequence image. In the sequence, D229 is shown as if it is adjacent to C235. Instead of showing the D229 next to C235 there should be something to indicate that these amino acids are missing.

Cn3D used to handle this problem by inserting lower case n's to show that part of the sequence was missing. iCn3D is ignoring the missing 6 amino acids and displaying the sequence like they're still there.

PyMol handles this problem by putting dashes in the sequence where amino acids are missing. This image is attached also.

I liked the way Cn3D did this because the letters showed that there was something located at that position. In either case, it would be good to have iCn3D show the sequence correctly by including either n's or dashes to represent the missing residues.

I think the way PyMol handles this part of the sequence display well. It's important to show where the amino acids are missing because then we would show where the data are uncertain.

D229_structure

sequence

PyMol_sequence_view

2D representations of Secondary structures and topologies

Having selected for example 1 or 2 domains/chains one may want to drill down at the SSEs level
If showing interactions then a Schematics 3D representation can be highligted as in the sequence window but also in the 2D window as a topological representation

Highlights disappear when I choose View selection - but molecule is still selected

I did the following:

  1. Selected a single chain of 7ODF. Result: the chain is selected and has a yellow highlight.
  2. Changed the drawing style to Ball and Stick. Result: Each atom has a yellow highlight.
  3. Change the coloring style to Atom. Result: Each atom has a yellow highlight.
  4. Chose View Selected.

Result: Other molecules are hidden. The yellow highlight disappears from the structure window, but the sequence is still highlighted.

Problem: I think both the structure and the sequence should stay highlighted until I either toggle highlights or clear the selection.

load mmdb 7ODF | parameters &mmdbid=7ODF
set pk atom
view annotations
set annotation cdd
select chain 7ODF_A
style proteins ball and stick
color atom
show selection

The colors of chains and individual residues are not changing color in the sequence view

Expectation: The colors of residues in the sequence will match color in the structure.

With Cn3D and iCn3D (last year), I could select a color and see that coloring style reflected in both the structure and sequence.

First test: entire structure

  1. Structure 1NAJ (DNA)
  2. Opened the color menu.
  3. Pick charge

Result: This works correctly. Both the structure and the sequence turn red.

Second test: one chain

  1. Structure 1NAJ (DNA)
  2. Select chain A
  3. Opened the color menu.
  4. Pick charge

Result: This did not work correctly. The chain turned red in the structure but the sequence did not change color.

Third test: a single nucleotide

  1. Structure 1NAJ (DNA)
  2. Selected a single nucleotide (G16 chain B).
  3. Opened the color menu.
  4. Pick charge

Result: This did not work correctly. The nucleotide turned red in the structure but the sequence did not change color.

Feature request: make carbon a different color than hydrogen

When I use the atom coloring style, carbons and hydrogens are the same color. I attached an image that shows how they appear to be the same color.

It would really help my students if they could distinguish between the carbons and the hydrogens.

I think the carbons might be a grey color, but it would help if they were a couple of shades darker than the hydrogens.

nucleotide

.

load pdb from URL - icn3d-3.2.1

Hi team,

I am interested in visualising PDB files by loading them from URL and have downloaded icn3d-3.2.1 for the same

When I open example.html (Embed Multiple iCn3D Viewers in One Page) in browser, all pdb structures are visible except the one being fetched by url.

div0 to div3 and div5 display respective pdb structures , however div4 (which uses url to fetch PDB) displays a empty black box.

Could you help me understand why loading PDB from url is not working ?
Are there any settings or configurations to be taken care of to have loading PDB from url functional ?

2D Interactions Representations

Suggestion: IMPORTANT
in 2D (Interactions window) we need to make use of the molecular (assembly) symmetry
to have a nice and meaningful 2D drawing that can be understood

Align Sequence to Structure is not working

I tried several things:

  1. Started with a FASTA sequence and single chain structure, when load is clicked I get a blank (black) viewer window.
  2. Next tried the default query (NP_001108451.1 to 1TSR_A) as a test. Same result as above - blank viewer window.
  3. Tried variants on 1. remove spaces - remove fasta header, add _A to 1AZI - no luck.
    The other alignment options - structure to structure, multiple chains - do work.

Screen Shot 2021-04-24 at 1 13 45 PM

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.