Updated data visualization tab content with Matti's inputs ref numpy#43 numpy#64

Author: shaloo

layouts/partials/tabs.html

@@ -60,12 +60,47 @@ <h3 class="subtitle is-5 is-muted">{{ $subtitle }}</h3>
 
         <ul class="cd-tabs__panels">
         <li id="tab-inbox" class="cd-tabs__panel cd-tabs__panel--selected text-component">
-                <a href="https://demo.bokeh.org/surface3d"><img src="images/content_images/bokeh_visualization.png" alt="visualization figure" align="left" height="300" width="300" style="margin: 10px 25px; border-radius: 6px"></a> 
-                <p><a href="https://www.slideshare.net/Visage/data-visualization-101-how-to-design-chartsandgraphs">Data Visualization</a> makes textual data human-readable, easier to understand and interpret through graphical representation. By exposing patterns, trends and correlations within large amounts of data, <a href="https://medium.com/swlh/effective-visualization-of-multi-dimensional-data-a-hands-on-approach-b48f36a56ee8">visualization</a> highlights areas that need attention and improvement. With these data insights, users can make data-driven decisions by analyzing huge volumes of data through visual elements such as graphs, bar, pie and line charts, maps, infographics, dashboards, geographic maps, heatmaps, interactive images, visual analytics etc. Data Scientists rely upon data visualization to gain useful insights into the data that cannot be otherwise detected in textual form.</p>
-                <p>NumPy is the <a href="https://www.analyticsvidhya.com/blog/2015/04/comprehensive-guide-data-exploration-sas-using-python-numpy-scipy-matplotlib-pandas/">key building block</a> of all heavyweight Python <a href="http://jalammar.github.io/visual-numpy/">data processing</a> and visualization libraries. Python’s native performance with large quantities of data is relatively slow, but NumPy, implemented by low-level libraries written in C and Fortran, performs parallel operations on large arrays all at once, making data-processing and visualization very fast.</p>
-                <p>Python has some of the most popular interactive <a href="https://towardsdatascience.com/data-visualization-with-mathplotlib-using-python-a7bfb4628ee3">data visualisation</a> tools such as <a href="https://matplotlib.org/">Matplotlib</a>. <a href="https://seaborn.pydata.org">Seaborn</a>,based on Matplotlib, is tightly integrated with PyData stack (NumPy, <a href="https://pandas.pydata.org">Pandas</a>) and offers high level interfaces for drawing attractive and informative statistical graphics. <a href="http://vispy.org">Vispy</a> and <a href="https://github.com/napari/napari">Napari</a> provide fast, scalable, interactive multi-dimensional image analytics and scientific visualization. <a href="https://plot.ly">Plotly's</a> Python graphing library makes interactive, publication-quality graphs with its unique contour plots, dendrograms, and 3D charts functionalities. <a href="https://altair-viz.github.io">Altair</a>, based on <a href="http://vega.github.io/vega">Vega</a> and <a href="http://vega.github.io/vega-lite">Vega-Lite</a>, provides declarative statistical visualization library for Python while <a href="https://docs.bokeh.org/en/latest/">Bokeh</a> is known for its dynamic, interactive visualization for web browser-based plotting.</p>
-<hr>
-<p>Image Source: https://demo.bokeh.org/surface3d</p>
+               <div class="grid-container">
+                  <div>
+                    <p>
+                     <div class="image-grid">
+                      
+                       <div><a href="https://www.fusioncharts.com/blog/best-python-data-visualization-libraries/"><img src="images/content_images/v_matplotlib.png" alt="visualization figure" align="middle" style="border-radius: 10px"></a></div>
+                       <div><img src="images/content_images/v_ggpy.png" alt="visualization figure" align="middle" style="border-radius: 10px"></div>
+                       <div><img src="images/content_images/v_plotly.png" alt="visualization figure" align="middle" style="border-radius: 10px"></div>
+                       <div><img src="images/content_images/v_altair.png" alt="visualization figure" align="middle" style="border-radius: 10px"></div>
+                       <div><img src="images/content_images/v_seaborn.png" alt="visualization figure" align="middle" style="border-radius: 10px"></div>
+                       <div><img src="images/content_images/v_bokeh.png" alt="visualization figure" align="middle" style="border-radius: 10px"></div>
+                       <div><img src="images/content_images/v_napari.png" alt="visualization figure" align="middle" style="border-radius: 10px"></div>
+                       <div><img src="images/content_images/v_vispy.png" alt="visualization figure" align="middle" style="border-radius: 10px"></div>
+
+                     </div> 
+                    </p>
+                  </div>
+                  <div>
+                     <p>
+                     </p>
+                     <p>
+                       <a href="https://www.slideshare.net/Visage/data-visualization-101-how-to-design-chartsandgraphs">Data Visualization</a> exposes patterns, trends and correlations in textual-data, making it easier for humans to analyse and interpret large volumes of data. 
+                     </p>
+                     <p>
+                       <a href="https://python-graph-gallery.com">Visualization elements</a> such as bar graphs, pie charts, line charts, maps, infographics, dashboards, geographic maps, heatmaps, and interactive images offer valuable insights for making data-driven decisions.
+                     </p>
+                  </div>
+                  <div>
+                     <p>
+                       NumPy is the key data transformation building block for the burgeoning <a href="https://pyviz.org/overviews/index.html">Python visualization landscape</a> comprising of <a href="https://matplotlib.org">Matplotlib</a>, <a href="https://seaborn.pydata.org">Seaborn</a>, <a href="https://plot.ly">Plotly</a>, <a href="https://altair-viz.github.io">Altair</a>, <a href="https://docs.bokeh.org/en/latest/">Bokeh</a>, <a href="https://github.com/yhat/ggpy">ggplot</a>, <a href="http://vispy.org">Vispy</a> and <a href="https://github.com/napari/napari">Napari</a>, to name a few. 
+                     </p>
+                     <p>
+                       Implemented by low-level libraries written in C and Fortran, NumPy performs parallel operations on large arrays all at once, accelerating data-processing and visualization of large quantities of data and thus supercharging Python's relatively low native performance for data visualization.
+                     </p>
+                  </div>
+                  <div>
+                     <p>
+                       <a href="https://rougier.github.io/python-visualization-landscape/landscape-colors.png"><img src="https://rougier.github.io/python-visualization-landscape/landscape-colors.png" alt="pyviz-visualization" align="left"></a> 
+                     </p>
+                  </div>
+               </div>
         </li>
 
         <li id="tab-new" class="cd-tabs__panel text-component">

static/css/tabs.css

@@ -605,4 +605,29 @@
     100% {
         opacity: 1
     }
-}
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: auto auto ;
+  grid-gap: 20px;
+}
+
+.grid-container > div {
+  background-color: rgba(255, 255, 255, 0.8);
+  text-align: middle;
+}
+
+.image-grid {
+  display: grid;
+  grid-template-columns: auto auto auto auto;
+  grid-gap: 10px;
+}
+
+
+.image-grid > div {
+  background-color: light gray;
+  border: 2px solid #f4f4e9;
+  border-radius: 10px;
+  padding: 10px;
+}