Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/Readme.md

Created November 25, 2014 19:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timelyportfolio/97c2256196f6491c860e to your computer and use it in GitHub Desktop.
Save timelyportfolio/97c2256196f6491c860e to your computer and use it in GitHub Desktop.
Download ZIP
R code using rvest + htmltools + pipeR to grab css information from cssstats.com
Raw
Readme.md

Code to accompany blog post Slightly Advanced rvest with Help from htmltools + XML + pipeR

library(pipeR)
library(htmltools)
library(rvest)
library(XML)

# some slightly more advanced exercises
# using rvest, XML, and htmltools

# this one takes all the svg nodes in the section
# with id unique-background-colors from the 
# site cssstats.com run on timelyportfolio.blogspot.com
# 1) removes attributes
# 2) sizes them at 85px x 64px
# 3) add new text node with fill value
# 4) combines them into a single div
# 5) with some meta information
"http://cssstats.com/stats?url=http%3A%2F%2Ftimelyportfolio.blogspot.com" %>>%
  html %>>%
  html_nodes( "#unique-background-colors svg" ) %>>%
  xmlApply( function(x){
    removeAttributes(x)
    addAttributes(x,style="display:inline-block;height:85px;width:64px")
    fillNode = newXMLNode(
      "text"
      ,html_attr(html_node(x,"rect"),"fill")
      ,attrs=c(x=0,y=75,style="font-size:70%")
    )
    addChildren(x,fillNode)
    saveXML(x) %>>% HTML
  } ) %>>%
  (tags$div(
    style="display:inline-block;height:100%;width:100%"
    ,list(
      tags$h3(
        "Colors of TimelyPortfolio from "
        ,tags$a(href="http://cssstats.com","cssstats")
      )
      ,.
    )
  )) %>>%
  tagList %>>%
  html_print
Raw
code.R
library(pipeR)
library(htmltools)
library(rvest)
library(XML)
# some slightly more advanced exercises
# using rvest, XML, and htmltools
# this one takes all the svg nodes in the section
# with id unique-background-colors from the
# site cssstats.com run on timelyportfolio.blogspot.com
# 1) removes attributes
# 2) sizes them at 85px x 64px
# 3) add new text node with fill value
# 4) combines them into a single div
# 5) with some meta information
"http://cssstats.com/stats?url=http%3A%2F%2Ftimelyportfolio.blogspot.com" %>>%
html %>>%
html_nodes( "#unique-background-colors svg" ) %>>%
xmlApply( function(x){
removeAttributes(x)
addAttributes(x,style="display:inline-block;height:85px;width:64px")
fillNode = newXMLNode(
"text"
,html_attr(html_node(x,"rect"),"fill")
,attrs=c(x=0,y=75,style="font-size:70%")
)
addChildren(x,fillNode)
saveXML(x) %>>% HTML
} ) %>>%
(tags$div(
style="display:inline-block;height:100%;width:100%"
,list(
tags$h3(
"Colors of TimelyPortfolio from "
,tags$a(href="http://cssstats.com","cssstats")
)
,.
)
)) %>>%
tagList %>>%
html_print
Raw
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div style="display:inline-block;height:100%;width:100%"> <h3> Colors of TimelyPortfolio from <a href="http://cssstats.com">cssstats</a> </h3> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="transparent"/> <text x="0" y="75" style="font-size:70%">transparent</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#fff"/> <text x="0" y="75" style="font-size:70%">#fff</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#ffffff"/> <text x="0" y="75" style="font-size:70%">#ffffff</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#fcfcfc"/> <text x="0" y="75" style="font-size:70%">#fcfcfc</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#eeeeee"/> <text x="0" y="75" style="font-size:70%">#eeeeee</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#fcf8e3"/> <text x="0" y="75" style="font-size:70%">#fcf8e3</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#f2dede"/> <text x="0" y="75" style="font-size:70%">#f2dede</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#dff0d8"/> <text x="0" y="75" style="font-size:70%">#dff0d8</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#d9edf7"/> <text x="0" y="75" style="font-size:70%">#d9edf7</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#f5f5f5"/> <text x="0" y="75" style="font-size:70%">#f5f5f5</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#a9dba9"/> <text x="0" y="75" style="font-size:70%">#a9dba9</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#f9f9f9"/> <text x="0" y="75" style="font-size:70%">#f9f9f9</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#d0e9c6"/> <text x="0" y="75" style="font-size:70%">#d0e9c6</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#ebcccc"/> <text x="0" y="75" style="font-size:70%">#ebcccc</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#faf2cc"/> <text x="0" y="75" style="font-size:70%">#faf2cc</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#c4e3f3"/> <text x="0" y="75" style="font-size:70%">#c4e3f3</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#e5e5e5"/> <text x="0" y="75" style="font-size:70%">#e5e5e5</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#0081c2"/> <text x="0" y="75" style="font-size:70%">#0081c2</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#e6e6e6"/> <text x="0" y="75" style="font-size:70%">#e6e6e6</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#cccccc \9"/> <text x="0" y="75" style="font-size:70%">#cccccc \9</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#006dcc"/> <text x="0" y="75" style="font-size:70%">#006dcc</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#0044cc"/> <text x="0" y="75" style="font-size:70%">#0044cc</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#003399 \9"/> <text x="0" y="75" style="font-size:70%">#003399 \9</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#faa732"/> <text x="0" y="75" style="font-size:70%">#faa732</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#f89406"/> <text x="0" y="75" style="font-size:70%">#f89406</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#c67605 \9"/> <text x="0" y="75" style="font-size:70%">#c67605 \9</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#da4f49"/> <text x="0" y="75" style="font-size:70%">#da4f49</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#bd362f"/> <text x="0" y="75" style="font-size:70%">#bd362f</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#942a25 \9"/> <text x="0" y="75" style="font-size:70%">#942a25 \9</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#5bb75b"/> <text x="0" y="75" style="font-size:70%">#5bb75b</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#51a351"/> <text x="0" y="75" style="font-size:70%">#51a351</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#408140 \9"/> <text x="0" y="75" style="font-size:70%">#408140 \9</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#49afcd"/> <text x="0" y="75" style="font-size:70%">#49afcd</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#2f96b4"/> <text x="0" y="75" style="font-size:70%">#2f96b4</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#24748c \9"/> <text x="0" y="75" style="font-size:70%">#24748c \9</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#363636"/> <text x="0" y="75" style="font-size:70%">#363636</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#222222"/> <text x="0" y="75" style="font-size:70%">#222222</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#080808 \9"/> <text x="0" y="75" style="font-size:70%">#080808 \9</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#0088cc"/> <text x="0" y="75" style="font-size:70%">#0088cc</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#999999"/> <text x="0" y="75" style="font-size:70%">#999999</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#fafafa"/> <text x="0" y="75" style="font-size:70%">#fafafa</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#ededed"/> <text x="0" y="75" style="font-size:70%">#ededed</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#1b1b1b"/> <text x="0" y="75" style="font-size:70%">#1b1b1b</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#111111"/> <text x="0" y="75" style="font-size:70%">#111111</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#515151"/> <text x="0" y="75" style="font-size:70%">#515151</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#0e0e0e"/> <text x="0" y="75" style="font-size:70%">#0e0e0e</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#040404"/> <text x="0" y="75" style="font-size:70%">#040404</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#000000 \9"/> <text x="0" y="75" style="font-size:70%">#000000 \9</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#000000"/> <text x="0" y="75" style="font-size:70%">#000000</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#f7f7f7"/> <text x="0" y="75" style="font-size:70%">#f7f7f7</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#b94a48"/> <text x="0" y="75" style="font-size:70%">#b94a48</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#953b39"/> <text x="0" y="75" style="font-size:70%">#953b39</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#c67605"/> <text x="0" y="75" style="font-size:70%">#c67605</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#468847"/> <text x="0" y="75" style="font-size:70%">#468847</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#356635"/> <text x="0" y="75" style="font-size:70%">#356635</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#3a87ad"/> <text x="0" y="75" style="font-size:70%">#3a87ad</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#2d6987"/> <text x="0" y="75" style="font-size:70%">#2d6987</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#333333"/> <text x="0" y="75" style="font-size:70%">#333333</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#1a1a1a"/> <text x="0" y="75" style="font-size:70%">#1a1a1a</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#0e90d2"/> <text x="0" y="75" style="font-size:70%">#0e90d2</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#149bdf"/> <text x="0" y="75" style="font-size:70%">#149bdf</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#dd514c"/> <text x="0" y="75" style="font-size:70%">#dd514c</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#ee5f5b"/> <text x="0" y="75" style="font-size:70%">#ee5f5b</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#5eb95e"/> <text x="0" y="75" style="font-size:70%">#5eb95e</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#62c462"/> <text x="0" y="75" style="font-size:70%">#62c462</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#4bb1cf"/> <text x="0" y="75" style="font-size:70%">#4bb1cf</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#5bc0de"/> <text x="0" y="75" style="font-size:70%">#5bc0de</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#fbb450"/> <text x="0" y="75" style="font-size:70%">#fbb450</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#ccc"/> <text x="0" y="75" style="font-size:70%">#ccc</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="rgba(255, 255, 255, 0.25)"/> <text x="0" y="75" style="font-size:70%">rgba(255, 255, 255, 0.25)</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#2288bb"/> <text x="0" y="75" style="font-size:70%">#2288bb</text> </svg> <svg style="display:inline-block;height:85px;width:64px"> <rect width="64" height="64" fill="#ffff00"/> <text x="0" y="75" style="font-size:70%">#ffff00</text> </svg> </div>
<code>
<pre>
library(pipeR)
library(htmltools)
library(rvest)
library(XML)
# some slightly more advanced exercises
# using rvest, XML, and htmltools
# this one takes all the svg nodes in the section
# with id unique-background-colors from the
# site cssstats.com run on timelyportfolio.blogspot.com
# 1) removes attributes
# 2) sizes them at 85px x 64px
# 3) add new text node with fill value
# 4) combines them into a single div
# 5) with some meta information
"http://cssstats.com/stats?url=http%3A%2F%2Ftimelyportfolio.blogspot.com" %>>%
html %>>%
html_nodes( "#unique-background-colors svg" ) %>>%
xmlApply( function(x){
removeAttributes(x)
addAttributes(x,style="display:inline-block;height:85px;width:64px")
fillNode = newXMLNode(
"text"
,html_attr(html_node(x,"rect"),"fill")
,attrs=c(x=0,y=75,style="font-size:70%")
)
addChildren(x,fillNode)
saveXML(x) %>>% HTML
} ) %>>%
(tags$div(
style="display:inline-block;height:100%;width:100%"
,list(
tags$h3(
"Colors of TimelyPortfolio from "
,tags$a(href="http://cssstats.com","cssstats")
)
,.
)
)) %>>%
tagList %>>%
html_print
</pre>
<code> </body> </html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment