repo up dateリポジトリ更新

I updated code about mishimasyk6.
URL is following.
https://github.com/iwatobipen/mishimasyk/tree/master/mishimasyk6_1
repo is
https://github.com/iwatobipen/mishimasyk
I added tooltip in the scatterplot.
So, when user mouse over the point, tooltip will draw structure and mw, fr_sp3.
D3js is powerful library for drawing charts.

勉強会でツールチップ実装できなかったって話したんで実装しました。
mishimasyl6_1のコードでは散布図を書いたあとマウスオーバーすると構造とかそれ以外のアノテーションを描画します。
d3.events.pageXでダイレクトにマウスの位置を検出してdivタグ要素にSVGを突っ込めば完了です。
ダイナミックな図ができて面白いと思います。
コードはこんな感じ
もしレポジトリをDLして動かない場合はvar RDKit = rdk()のコメント部分を有効にすると動くと思います。


// var RDKit = rdk();
var padding = 30;
var h = 300;
var w = 500;
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 };
};

function calc_smiles_data( smiles_data ){
var dataset = [];
var smiles_array = smiles_data.split("\n");
var n = smiles_array.length;
for( var i = 0; i < n; i ++)
{
var res = calc_mw_fsp3( smiles_array[i] );
dataset.push( res );
};
return dataset;
};

function moldraw( smi ){
var mol = RDKit.Molecule.fromSmiles( smi );
var mol2d = mol.Drawing2D();
var remol = mol2d.replace( /svg:/g, '' );
document.getElementById( 'molstructure' ).innerHTML = remol;
};

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 );
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d){return d["mw"];})] )
.range([padding,w-padding]);

var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d){return d["fr_sp3"];})] )
.range([h-padding,padding]);

var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);

var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0 )")
.call(yAxis);

var tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);

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")
.on("mouseover", function(d){
var mol = RDKit.Molecule.fromSmiles( d["smi"] );
var mol2d = mol.Drawing2D();
var remol = mol2d.replace( /svg:/g, '' );
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html( "molwt "+d["mw"]+"
"+"fr_sp3 "+d["fr_sp3"]+remol )
.style("left", (d3.event.pageX + 5) + "px")
.style("top", (d3.event.pageY -128) + "px");
//return moldraw(d["smi"]);
})
.on("mouseout", function(d){
tooltip.transition()
.style("opacity", 0)
return document.getElementById( 'molstructure' ).innerHTML = "";
});

};

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中