More Related Content
Similar to Mishimasyk6 iwatobipen (20)
Mishimasyk6 iwatobipen
- 13. 関数部分（一部）
function moldraw( smi ){
var mol = RDKit.Molecule.fromSmiles( smi );
var mol2d = mol.Drawing2D();
var remol = mol2d.replace( /svg:/g, '' );
document.getElementById( 'molstructure' ).innerHTML = remol;
};
分子をSVGで描画
function calc_mw_fsp3( smi ){
var mol = RDKit.Molecule.fromSmiles( smi );
var mw = mol.getMW();
var fr_sp3 = mol.FractionCSP3();
return { mw:mw, fr_sp3: fr_sp3,smi: smi };
};
計算値とsmilesを返す
13
- 14. 描画部分（D3js）
function darwchart( smiles_data ){
d3.select("#scatterplot").remove();
var svg = d3.select("#chart").append("svg")
.attr("id", "scatterplot")
.attr("width", w)
.attr("height", h);
var dataset = calc_smiles_data( smiles_data );
中略
svg.selectAll( "circle" )
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d){
return xScale(d["mw"]);
})
.attr("cy", function(d){
return yScale(d["fr_sp3"]);
})
.attr("r", 5)
.attr("fill", "skyblue")
14
データセット
の配列取得
D3jsにおける散布図のお作法
- 15. HTML部分の構成
<body>
<h1>input smiles</h1>
<form id="smiles_list">
<div>
<textarea id="dataset" cols=40 rows=10>
</textarea>
</div>
<input type="button" value="darw chart"
onclick="darwchart( document.forms.smiles_list.dataset.value )">
</form>
</br></br>
<h1> scatter plot</h1>
</br>
<div style="float:left;" id="chart"></div>
<div style="float:left;" id="molstructure"></div>
</body>
テキストエリアのデータを受け取り
15
