Bioinformatics Resources

Transcription

1 Bioinformatics Resources Lecture & Exercises Prof. B. Rost, Dr. L. Richter, J. Reeb Institut für Informatik I12 Slides by D. Nechaev

2 Recap! Why do we even bother with JavaScript?! Because JavaScript allows us to work with the DOM! I.o.w., it allows us to manipulate content (what is included in a web page) and presentation (how included entities are shown)

3 Extent of Manipulation! Show an alert! Enable/disable form fields! Dynamically load content!! Single Page Applications

4 Single Page Applications! Dynamically change the web page instead of completely reloading it! Example: Gmail! The page stays the same, but the content is added/changed/deleted according to user s actions

5 Not Everybody Needs a SPA! Web-applications with rich UI benefit from a single-page-application approach! Web-sites like Wikipedia do not! Bioinformaticians probably are not going to create another Gmail, so why bother?

6 What Do Bioinformaticians Need?! Develop a new method! Get results! Publish a paper! Create a tool that allows others to utilise the new method

7 Target Audience Defines the Tool! Computer Scientists are target audience can develop a console utility! Biologists are target audience need to develop a tool that is as simple as possible! As simple as possible accessible through a browser, visual

8 Visualizations in a Browser

9 Visualizations in a Browser?! How can we do it?! Render an image with an external tool & show it on a page! What if an image depends on user s choices?! Pass user s choices to an external script, render the image, include it

10 Can We Render a Chart in a Browser?! Yes, we can!! HTML + CSS! Canvas & JavaScript! SVG & JavaScript

11 HTML + CSS! Bar chart <div class="chart"> <div id='bar_1' style="width: 40px;">4</div> <div id='bar_2' style="width: 80px;">8</div> <div id='bar_3' style="width: 150px;">15</div> <div id='bar_4' style="width: 160px;">16</div> <div id='bar_5' style="width: 230px;">23</div> <div id='bar_6' style="width: 420px;">42</div> </div>

12 HTML + CSS! Bar chart.chart div { font: 10px sans-serif; background-color: steelblue; text-align: right; padding: 3px; margin: 1px; color: tan; }.chart div:hover { background-color: darkcyan; }

13 HTML + CSS! Bar chart

14 HTML + CSS! Bar chart! Can we make it interactive?

15 HTML + CSS! Can we make it interactive? <div> <input id="input_1" type="number" value="4" onchange="setvalue(this.value, 'bar_1')"> <input id="input_2" type="number" value="8" onchange="setvalue(this.value, 'bar_2')"> <input id="input_3" type="number" value="15" onchange="setvalue(this.value, 'bar_3')"> <input id="input_4" type="number" value="16" onchange="setvalue(this.value, 'bar_4')"> <input id="input_5" type="number" value="23" onchange="setvalue(this.value, 'bar_5')"> <input id="input_6" type="number" value="42" onchange="setvalue(this.value, 'bar_6')"> </div>

16 HTML + CSS! Can we make it interactive? <script type="text/javascript"> function setvalue(newvalue, barid) { var bar = document.getelementbyid(barid); bar.innerhtml = newvalue; bar.style.width = parseint(newvalue) * 10 + 'px'; } </script>

17 HTML + CSS! An interactive bar chart

18 HTML + CSS! Can we do something other than bar charts?! Let s try pie charts! Example thankfully taken from on

19 HTML + CSS! Pie chart <style>.pie { width: 100px; height: 100px; border-radius: 50%; background: yellowgreen; background-image: linear-gradient(to right, transparent 50%, #655 0); } </style> <div class="pie"></div>

20 HTML + CSS! Pie chart! Now we will use a rotating pseudo-element to uncover the percentage we want.

21 HTML + CSS! Pie chart.pie::before { content: ''; display: block; margin-left: 50%; height: 100%; border-radius: 0 100% 100% 0 / 50%; background: #655; transform-origin: left; transform: rotate(.1turn); }

22 HTML + CSS! Pie chart! Not semantic at all

23 HTML + CSS! Yes, we can create charts using HTML and CSS! However, using HTML and CSS for this task isn t really straightforward! What other alternatives do we have?

24 Alternatives! Canvas element (raster-based)! SVG (vector-based)

25 Canvas! HTML5 element! Allows to create raster images! Uses primitive shapes, such as lines, arcs, rectangles, etc.

26 Canvas <head> <meta charset="utf-8"> <title>canvas</title> <script type="text/javascript"> function showchart() { var canvas = document.getelementbyid('main'); var context = canvas.getcontext('2d'); draw(context); } function draw(ctx) { } </script> </head> <body onload="showchart();"> <canvas id="main" width="400" height="400"></canvas> </body>

27 Canvas! Draw some lines: function draw(ctx) { ctx.beginpath(); ctx.moveto(10, 200); ctx.lineto(35, 175); ctx.lineto(55, 125); ctx.lineto(75, 205); ctx.stroke(); }

28 Canvas! Draw some lines: function draw(ctx) { ctx.beginpath(); ctx.moveto(10, 200); ctx.lineto(35, 175); ctx.lineto(55, 125); ctx.lineto(75, 205); ctx.fill(); }

29 Canvas! Draw a rectangle: function draw(ctx) { ctx.beginpath(); ctx.fillrect(10, 10, 40, 390); }

30 Canvas! How about a bar chart?: function draw(ctx) { ctx.beginpath(); ctx.fillrect(10, 200, 40, 390); ctx.fillrect(60, 150, 40, 390); ctx.fillrect(110, 100, 40, 390); ctx.fillrect(160, 120, 40, 390); ctx.fillrect(210, 210, 40, 390); }

31 Canvas! How about a bar chart?:

32 Canvas! How about a colorful bar chart?: function draw(ctx) { ctx.beginpath(); ctx.fillstyle = 'aqua'; ctx.fillrect(10, 200, 40, 390); ctx.fillstyle = 'aquamarine'; ctx.fillrect(60, 150, 40, 390); ctx.fillstyle = 'cadetblue'; ctx.fillrect(110, 100, 40, 390); ctx.fillstyle = 'cornflowerblue'; ctx.fillrect(160, 120, 40, 390); ctx.fillstyle = 'steelblue'; ctx.fillrect(210, 210, 40, 390); }

33 Canvas! How about a colorful bar chart?:

34 Canvas! Can we draw a pie chart now?! Yes, we can!! Use `arc()`

35 Canvas! Pie chart! function draw(ctx) { ctx.beginpath(); ctx.moveto(200, 200); ctx.fillstyle = 'aqua'; ctx.arc(200, 200, 200, 0, 0.2 * Math.PI, false ); ctx.fill();

36 Canvas! Pie chart! ctx.beginpath(); ctx.moveto(200, 200); ctx.fillstyle = 'aquamarine'; ctx.arc(200, 200, 200, 0.2 * Math.PI, 0.4 * Math.PI, false ); ctx.fill();

37 Canvas! Pie chart! ctx.beginpath(); ctx.moveto(200, 200); ctx.fillstyle = 'cadetblue'; ctx.arc(200, 200, 200, 0.4 * Math.PI, 0.8 * Math.PI, false ); ctx.fill();

38 Canvas! Pie chart! ctx.beginpath(); ctx.moveto(200, 200); ctx.fillstyle = 'cornflowerblue'; ctx.arc(200, 200, 200, 0.8 * Math.PI, 1.2 * Math.PI, false ); ctx.fill();

39 Canvas! Pie chart! } ctx.beginpath(); ctx.moveto(200, 200); ctx.fillstyle = 'steelblue'; ctx.arc(200, 200, 200, 1.2 * Math.PI, 2.0 * Math.PI, false ); ctx.fill();

40 Canvas! A colorful pie chart!:

41 Canvas! So far, so good! Can we make it interactive?

42 Canvas! Interactive pie chart: <div> <input id="i_1" type="number" value="10" onchange="redrawpiechart();"> <input id="i_2" type="number" value="10" onchange="redrawpiechart();"> <input id="i_3" type="number" value="20" onchange="redrawpiechart();"> <input id="i_4" type="number" value="20" onchange="redrawpiechart();"> <input id="i_5" type="number" value="40" onchange="redrawpiechart();"> </div>

43 Canvas! Interactive pie chart: function draw(ctx) { drawpies(ctx, [0.1, 0.1, 0.2, 0.2, 0.4]) }

44 Canvas! Interactive pie chart: function drawpies(ctx, values) { var colors = ['aqua', 'aquamarine', 'cadetblue', 'cornflowerblue', 'steelblue']; var cumulative = 0; for (var i = 0; i < 5; i++) { var value = values[i]; var color = colors[i]; drawpie(ctx, color, 200, 200, 200, cumulative * 2 * Math.PI, (cumulative + value) * 2 * Math.PI) cumulative += value; } }

45 Canvas! Interactive pie chart: function drawpie(ctx, color, centerx, centery, radius, startangle, endangle) { ctx.beginpath(); ctx.moveto(centerx, centery); ctx.fillstyle = color; ctx.arc(centerx, centery, radius, startangle, endangle, false ); ctx.fill(); }

46 Canvas! Interactive pie chart: function redrawpiechart() { var canvas = document.getelementbyid('main'); var context = canvas.getcontext('2d'); var raw_values = []; var ids = ['i_1', 'i_2', 'i_3', 'i_4', 'i_5']; for (var id of ids) { raw_values.push(parseint(document.getelementbyid(id).value)); } var sum = raw_values.reduce(function(acc, val) { return acc + val; }, 0); var values = []; for (var raw_value of raw_values) { values.push(raw_value / sum); } drawpies(context, values); }

47 Canvas! Here is what it looks like

48 SVG! SVG uses vector graphics unlike canvas! SVG allows to create separate objects and manipulate them after their creation unlike canvas! On one hand, SVG allows to work with such primitives as rect, circle, ellipse, etc.! On the other hand, SVG allows to change fill and outline color via CSS

49 SVG! Final bar chart! <svg class="chart" width="420" height="150" role="img"> <rect class="bar" width="40" height="19"></rect> <rect class="bar" width="40" height="19" y="20"></rect> <rect class="bar" width="80" height="19" y="40"></rect> <rect class="bar" width="80" height="19" y="60"></rect> <rect class="bar" width="160" height="19" y="80"></rect> </svg>

50 SVG! Final bar chart! <style>.bar { fill: cornflowerblue; height: 21px; cursor: pointer; font-family: Helvetica, sans-serif; }.bar:hover,.bar:focus { fill: aquamarine; } </style>

51 SVG! Final bar chart!

52 Conclusions! We can make charts with HTML & CSS! If we are tricky enough, we can do a lot of plots with them! Still, the process isn t straightforward

53 Conclusions! We can use canvas element to create raster images with JavaScript! Still, it would be better if we could use bar charts, pie charts, etc., and not just lines and rectangles as our building blocks! Declarative style is also preferable

54 Conclusions! We can use SVG to create vector images! Still, it would be better to have more complex building blocks! It would have been even better if we could bound data to charts

55 Libraries! Canvas.js, Chart.js, D3.js, etc.! Some are built on top of the canvas element, others use SVG! D3.js will be covered in the next lecture!

56 THANK YOU! Questions?