Skip to content

Commit

Permalink
plotly part almost OKé
Browse files Browse the repository at this point in the history
  • Loading branch information
@holtzy
holtzy committed Jul 8, 2019
1 parent b17e97b commit fd612c6
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 91 deletions.
155 changes: 64 additions & 91 deletions ggplot2-package.html
View file
Expand Up @@ -271,124 +271,97 @@ <h1>ggplot2</h1>

<br><br><br><br>

<div class="mySeryTitle">Interactive version</div>
<hr>
<p>The <code>networkD3</code> package allows to build interactive network diagrams with R. On the chart below, try to hover a node and drag it to see how it works. You can also scroll to zoom in and out. Visit the <a href="network-interactive.html">corresponding post</a> to see how to use this tool on your dataset.</p>
<a class="btn btn-secondary btn-md text-uppercase" href="network-interactive.html">Get code</a>
<br>
<center><iframe src="HtmlWidget/networkInteractive2.html" height="350" width="700" style="border:none;"></iframe></center>


</div>
</section>


<!-- ======================================================================= -->



<div class="mySeryTitle">Marginal plot</div>
<hr>
<p>Marginal plots are not natively supported by <code>ggplot2</code>, but their realisation is straightforward thanks to the <code>ggExtra</code> library as illustrated in <a href="277-marginal-histogram-for-ggplot2.html">graph #277</a>.</p>
<div id="portfolio-items" class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="276-scatterplot-with-rug-ggplot2.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Scatterplot with rug</p>
<hr>
<p class="explanation_portfolio">Add rug on X and Y axis to describe the numeric variable distribution. Show how geom_rug() works.</p>
</div>
</div>
<img class="img-fluid imgOfPortfolio" src="img/graph/276-scatterplot-with-rug-ggplot2.png" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="277-marginal-histogram-for-ggplot2.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Marginal distribution</p>
<hr>
<p class="explanation_portfolio">Add marginal distribution around your scatterplot with ggExtra and the ggMarginal function.</p>
</div>
</div>
<img class="img-fluid imgOfPortfolio" src="img/graph/277-marginal-histogram-for-ggplot2Hist.png" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="277-marginal-histogram-for-ggplot2.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Marginal boxplot</p>
<hr>
<p class="explanation_portfolio">Using boxplots is another way to show the marginal distribution. Find more in this post.</p>
</div>
</div>
<img class="img-fluid imgOfPortfolio" src="img/graph/277-marginal-histogram-for-ggplot23.png" alt="">
</a>
</div>
</div>





<br><br><br><br>


<!-- ============================ MODAL FOR INPUT TYPES ============================ -->

<div class="modal fade" id="modalAdjacency" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content" style="padding-left: 10%; padding-right: 10%; padding-bottom: 10%">
<h1 style="color: #69b3a2; padding-top: 10%">Adjacency matrix</h1>
<div class="row justify-content-center">
<div class="col-6 align-self-center">
<center><img src="img/table/AdjacencySquare.png" width="90%" alt="adjacency matrix"></img></center>
</div>
<div class="mySeryTitle"><code>plotly</code>: turn your <code>ggplot</code> interactive</div>
<hr>
<p>Another awesome feature of <code>ggplot2</code> is its link with the <code>plotly</code> library. If you know how to make a <code>ggplot2</code> chart, you are 10 seconds close to rendering an interactive version. Just call the <code>ggplotly()</code> function, and you’re done. Visit the interactive graphic section of the gallery for more.</p>
<div class="row justify-content-center">
<div class="col-6 align-self-center">
<center><iframe src="HtmlWidget/ggplotlyBubblechart.html" height="700" width="700" style="border:none;"></iframe></center>
</div>
<div class="col-6">
<pre class="bg-light" style="padding-left: 10px; margin-top: 0px"><xmp>#library
library(igraph)

# Create data
set.seed(10)
data <- matrix(sample(0:2, 25, replace=TRUE), nrow=5)
colnames(data) = rownames(data) = LETTERS[1:5]

# build the graph object
network <- graph_from_adjacency_matrix(data)

# plot it
plot(network)</xmp></pre>
<pre class="bg-light" style="padding-left: 10px; margin-top: 0px"><xmp>library(ggplot2)
library(plotly)
library(gapminder)

p <- gapminder %>%
filter(year==1977) %>%
ggplot( aes(gdpPercap, lifeExp, size = pop, color=continent)) +
geom_point() +
scale_x_log10() +
theme_bw()

ggplotly(p)</xmp></pre>
</div>
</div>
<p>An adjacency matrix is a square matrix where entities in rows and columns are the same. <code>igraph</code> reads that kind of input thanks to the <code>graph_from_adjacency_matrix()</code> function.</p>
</div>
</div>
</div>


<div class="modal fade" id="modalEdgeList" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content" style="padding-left: 10%; padding-right: 10%; padding-bottom: 10%">
<h1 style="color: #69b3a2; padding-top: 10%">Edge list</h1>
<div class="row justify-content-center">
<div class="col-4 align-self-center">
<center><img src="img/table/EdgeList.png" width="70%" alt="edge list"></img></center>
</div>
<div class="col-8">
<pre class="bg-light" style="padding-left: 10px; margin-top: 0px"><xmp>#library
library(igraph)

# create data:
links <- data.frame(
    source=c("A","A", "A", "A", "A","F", "B"),
    target=c("B","B", "C", "D", "F","A","E")
    )

# create the network object
network <- graph_from_data_frame(d=links, directed=F)

# plot it
plot(network)</xmp></pre>
</div>
</div>
<p>An edge list has 2 columns. Each row represents a connection between an origin and a destination. Read it with the <code>graph_from_data_frame()</code> function.</p>
</div>
</div>
</div>



</div>
</section>


<div class="modal fade" id="modalIncidence" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content" style="padding-left: 10%; padding-right: 10%; padding-bottom: 10%">
<h1 style="color: #69b3a2; padding-top: 10%">Incidence matrix</h1>
<div class="row justify-content-center">
<div class="col-6 align-self-center">
<center><img src="img/table/AdjacencyRect.png" width="90%" alt="adjacency matrix"></img></center>
</div>
<div class="col-6">
<pre class="bg-light" style="padding-left: 10px; margin-top: 0px"><xmp># lib
library(igraph)
<!-- ======================================================================= -->

# data
set.seed(1)
data <- matrix(sample(0:2, 15, replace=TRUE), nrow=3)
colnames(data) <- letters[1:5]
rownames(data) <- LETTERS[1:3]

# create the network object
network <- graph_from_incidence_matrix(data)

# plot it
plot(network)</xmp></pre>
</div>
</div>
<p>An incidence matrix is not necessarily square and entities provided in rows and columns are not always the same. Read it with <code>graph_from_incidence_matrix()</code>.</p>
</div>
</div>
</div>



Expand Down
Binary file added img/graph/277-marginal-histogram-for-ggplot23.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit fd612c6

Please sign in to comment.