I was experimenting with Svg graphics and I came across this challenge. Haven't been able to
figure out the reason why this image crops and does not scale.
The svg code is
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g><path class="st0" d="M143.5 69c-2.6-1-5.5 0.2-6.5 2.7 -2.2 5.4-1.7 10.4-1 13.4l-42.4 51.1 -53.2-15.8c-1-0.5-6.2-3.6-6.2-11.6 0-2.5 0.4-5.8 2.3-7.3 2.2-1.7 6-0.9 6-0.9 0.2 0.1 0.5 0.1 0.7 0.1l47.3 13.5c0.4 0.1 0.9 0.2 1.3 0.2 1.5 0 2.9-0.7 3.8-1.8l50.1-57.7c1.1-1.3 1.4-3.1 0.8-4.8 -0.6-1.6-1.9-2.8-3.6-3.2L84.2 33.8c-1.8-0.4-3.6 0.2-4.8 1.6L30.5 89.8c-0.9 1.1-3.3 4.8-4.6 9.8 -1.1 2.6-1.7 5.7-1.7 9.3 0 15.3 12 20.6 12.5 20.8 0.2 0.1 0.4 0.1 0.5 0.2L94 146.8c0.5 0.1 0.9 0.2 1.4 0.2 1.5 0 2.9-0.6 3.8-1.8l46.3-55.7c1.2-1.5 1.5-3.5 0.7-5.3 0 0-1.7-4.2 0.1-8.7C147.3 72.9 146.1 70 143.5 69zM73.8 58.4l3.8-4.5c1-1.2 3.5-1.8 5.4-1.4l35.1 8.5c1.9 0.5 2.7 1.9 1.6 3.1l-3.8 4.5c-1 1.2-3.5 1.9-5.4 1.4l-35.1-8.6C73.5 61 72.8 59.7 73.8 58.4z"/></svg>
The file construction is
<div id="bigBook" >
</div>
<div id="bigBook" class="smallBook">
</div>
CSS is
.st0{fill: #333333;}
.smallBook{ transform: scale(0);}
#bigBook{
height: 175px; width: 175px;
background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgo8Zz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTQzLjUgNjljLTIuNi0xLTUuNSAwLjItNi41IDIuNyAtMi4yIDUuNC0xLjcgMTAuNC0xIDEzLjRsLTQyLjQgNTEuMSAtNTMuMi0xNS44Yy0xLTAuNS02LjItMy42LTYuMi0xMS42IDAtMi41IDAuNC01LjggMi4zLTcuMyAyLjItMS43IDYtMC45IDYtMC45IDAuMiAwLjEgMC41IDAuMSAwLjcgMC4xbDQ3LjMgMTMuNWMwLjQgMC4xIDAuOSAwLjIgMS4zIDAuMiAxLjUgMCAyLjktMC43IDMuOC0xLjhsNTAuMS01Ny43YzEuMS0xLjMgMS40LTMuMSAwLjgtNC44IC0wLjYtMS42LTEuOS0yLjgtMy42LTMuMkw4NC4yIDMzLjhjLTEuOC0wLjQtMy42IDAuMi00LjggMS42TDMwLjUgODkuOGMtMC45IDEuMS0zLjMgNC44LTQuNiA5LjggLTEuMSAyLjYtMS43IDUuNy0xLjcgOS4zIDAgMTUuMyAxMiAyMC42IDEyLjUgMjAuOCAwLjIgMC4xIDAuNCAwLjEgMC41IDAuMkw5NCAxNDYuOGMwLjUgMC4xIDAuOSAwLjIgMS40IDAuMiAxLjUgMCAyLjktMC42IDMuOC0xLjhsNDYuMy01NS43YzEuMi0xLjUgMS41LTMuNSAwLjctNS4zIDAgMC0xLjctNC4yIDAuMS04LjdDMTQ3LjMgNzIuOSAxNDYuMSA3MCAxNDMuNSA2OXpNNzMuOCA1OC40bDMuOC00LjVjMS0xLjIgMy41LTEuOCA1LjQtMS40bDM1LjEgOC41YzEuOSAwLjUgMi43IDEuOSAxLjYgMy4xbC0zLjggNC41Yy0xIDEuMi0zLjUgMS45LTUuNCAxLjRsLTM1LjEtOC42QzczLjUgNjEgNzIuOCA1OS43IDczLjggNTguNHoiLz48L2c+Cjwvc3ZnPg==) no-repeat center center;
}
Related
I'd like to have the output of an R command shown in a horizontally scrolling box. Reprex:
library(ggplot2movies)
head(movies)
# title year length budget rating votes r1 r2 r3 r4 r5 r6 r7 r8 r9 r10 mpaa Action Animation Comedy Drama Documentary Romance Short
# 1 $ 1971 121 NA 6.4 348 4.5 4.5 4.5 4.5 14.5 24.5 24.5 14.5 4.5 4.5 0 0 1 1 0 0 0
# 2 $1000 a Touchdown 1939 71 NA 6.0 20 0.0 14.5 4.5 24.5 14.5 14.5 14.5 4.5 4.5 14.5 0 0 1 0 0 0 0
# 3 $21 a Day Once a Month 1941 7 NA 8.2 5 0.0 0.0 0.0 0.0 0.0 24.5 0.0 44.5 24.5 24.5 0 1 0 0 0 0 1
# 4 $40,000 1996 70 NA 8.2 6 14.5 0.0 0.0 0.0 0.0 0.0 0.0 0.0 34.5 45.5 0 0 1 0 0 0 0
# 5 $50,000 Climax Show, The 1975 71 NA 3.4 17 24.5 4.5 0.0 14.5 14.5 4.5 0.0 0.0 0.0 24.5 0 0 0 0 0 0 0
# 6 $pent 2000 91 NA 4.3 45 4.5 4.5 4.5 14.5 14.5 14.5 4.5 4.5 14.5 14.5 0 0 0 1 0 0 0
How do I make the output horizontally scrollable on a xaringan slide?
#Yihui Xie has pretty much provided the answer on Github. I'm just making it into a working example here. Things to note are:
1) One can specify css as code chunks in Rmarkdown, or one can write his or her own css file following these guidelines: https://github.com/yihui/xaringan/wiki. I'm assuming this is a one-off thing so for simplicity I'm including the css in the Rmd file.
2) After setting attributes for the pre element, one also need to set the width option or R to a large value, otherwise head will wrap the output for you.
---
title: "Horizontal scroll for wide output"
output:
xaringan::moon_reader:
css: ["default"]
nature:
highlightLines: true
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
```
```{css, echo=FALSE}
pre {
background: #FFBB33;
max-width: 100%;
overflow-x: scroll;
}
```
```{r}
library(ggplot2movies)
op <- options("width"=250) # large number to trick head, otherwise see next slide
head(movies)
options(op) # set options back to default
```
---
```{r}
head(movies) # head with default width, note text gets wrapped. Though you can still scroll horizontally, as an effect of setting `pre`
```
I'm using CSS keyframes and SVG to animate my company logo, which should be a fairly straight forward process but I must have missed something because as you can see in the JS Fiddle below it has a thin inside fill within the white line. I want the characters to be a single white line only.
I've set the fill to none and the font which the logo is based is outlined into one single path, so not sure what can be causing this?
https://jsfiddle.net/nzz970aL/1/
Markup
<div class="placeholder">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="35.6 317.2 863.3 110.8" enable-background="new 35.6 317.2 863.3 110.8" xml:space="preserve">
<path class="logo" fill="none" stroke="#ffffff" stroke-width="3" stroke-miterlimit="4" d="M86.8 349.2c0-12.2-9.7-21.9-21.9-21.9s-22.3 9.9-22.3 21.9c0 12.2 10.7 18.8 22.1 22.1 15.1 4.3 27.5 12.2 27.5 27.5 0 15.1-12.2 27.7-27.5 27.7s-27.5-12.6-27.5-27.7c0.2-1.6 1.2-2.5 2.9-2.5 1.4 0 2.7 0.8 2.7 2.3 -0.2 12.2 9.7 22.3 21.9 22.3s21.9-10.1 21.9-22.1c0-12.2-10.5-19.2-21.9-21.9 -14.5-3.7-27.5-12.2-27.5-27.7 0-14.9 12.4-27.5 27.7-27.5s27.3 12.4 27.3 27.5c-0.2 1.9-1.4 2.7-2.7 2.7C87.7 351.9 86.8 350.9 86.8 349.2L86.8 349.2zM227.3 422.3v0.8c0 1.7-1 2.7-2.7 2.7 -1.2 0-1.7-0.4-2.3-1.2l-46.5-91.9 -45 87.6h43.4c1.7 0 2.9 1 2.9 2.7s-1 2.7-2.7 2.7h-52.7l54.1-105.2L227.3 422.3zM281.7 328.1h-37.6c-1.7 0-2.5-1-2.5-2.7s1-2.7 2.7-2.7h77.9c1.7 0 2.7 1.2 2.7 2.7 0 1.7-1 2.7-2.7 2.7h-34.9v94.6c0 1.9-1 3.1-2.7 3.1s-2.7-1-2.7-2.7v-95H281.7zM361 325.2c0-1.7 1-2.7 2.7-2.7s2.7 1 2.7 2.7v57.2c0 20.7 17.4 38.2 38.2 38.2 21.1 0 38.2-17.2 38.2-38.2v-56.8c0-1.7 1-2.9 2.7-2.9 1.7 0 2.7 1 2.7 2.7v57.2c0 24-19.6 43.6-43.6 43.6S361 406.6 361 382.5L361 325.2 361 325.2zM490.3 322.7h35.5c19.8 0 35.3 15.7 35.3 35.3 0 17.6-12.6 32.2-29.3 34.9l27.9 28.1h-0.2c0.8 0.6 1.2 1.6 1.2 2.1 0 1.7-1 2.7-2.7 2.7 -1.2 0-1.6-0.2-2.1-1L524 393.2h-28.3v29.7c0 2.1-1 3.3-2.7 3.3s-2.7-1-2.7-2.7L490.3 322.7 490.3 322.7zM495.7 387.8h30c16.3 0 29.7-13.6 29.7-29.8s-13.4-29.8-29.7-29.8h-30L495.7 387.8 495.7 387.8zM701.7 422.3v0.8c0 1.7-1 2.7-2.7 2.7 -1.2 0-1.7-0.4-2.3-1.2l-46.3-91.9 -45 87.6h43.4c1.7 0 2.9 1 2.9 2.7s-1 2.7-2.7 2.7h-52.7l54.1-105.2L701.7 422.3zM756.2 328.1h-37.6c-1.7 0-2.5-1-2.5-2.7s1-2.7 2.7-2.7h77.9c1.7 0 2.7 1.2 2.7 2.7 0 1.7-1 2.7-2.7 2.7h-34.9v94.6c0 1.9-1 3.1-2.7 3.1 -1.7 0-2.7-1-2.7-2.7v-95H756.2zM840.9 376.1v44.2h53.7c1.7 0 2.9 1 2.9 2.7s-1 2.7-2.7 2.7h-59.5V322.7h59.1c1.9 0 3.1 1 3.1 2.7s-1 2.7-2.7 2.7h-53.9c0 7.4-0.2 14.1-0.2 21.3v21.1h8.7c2.1 0 3.1 1 3.1 2.7s-0.8 2.7-2.7 2.7h-8.9V376.1z"/>
</svg>
</div>
CSS
* {
margin: 0;
border: 0;
}
body {
background: #000;
}
.placeholder {
position: absolute;
top: 50%;
text-align: center;
z-index: 99;
width: 100%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
svg {
max-width: 480px;
}
.logo {
stroke-dasharray:1000;
stroke-dashoffset: 1000;
-webkit-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
I have some statistic data about process quality presented in table form (result >> % of all cases)
# (df <- read.csv(...)
detection_quality_algo1_pupil <- table(df$pupeuclid1)
detection_quality_algo1_pupil_percent = round(
detection_quality_algo1_pupil[names(detection_quality_algo1_pupil)]
/ nrow(df)
* 100
, digits = 1)
0 - 16.4%
1 - 50.6%
2 - 12.0%
3 - 2.4%
etc.
> detection_quality_algo1_pupil_percent
0 1 2 3 4 5 10 11 12 13 16 17 20 21 22 23 24 25 27 29 30 31 32 33
16.4 50.6 12.0 2.4 0.5 0.6 0.9 0.6 0.3 0.1 0.3 0.1 0.1 0.1 0.1 0.3 0.3 0.1 0.1 0.3 0.1 0.3 0.1 0.1
37 40 43 45 50 53 54 55 56 59 102 104 106 107 112 114 131 132 134 136 138 139 141 142
0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.1 0.4 0.1 0.3 0.1 0.1 0.3 0.1 0.1
145 149 150 151 152 153 154 155 156 157 158 160 161 164 166 167 168 169 170 171 173 175 187 191
0.3 0.6 0.1 0.3 0.1 0.5 0.3 0.1 0.1 0.4 0.1 0.1 0.4 0.1 0.1 0.3 0.3 0.3 0.1 0.3 0.1 0.1 0.1 0.1
194 208
0.1 0.1
> pie(detection_quality_algo1_pupil_percent)
my goal is grouping results with value > 3 into one big group named "> 3" and show results on pie chart.
I think it's about applying some filters on source table...
How can i do this?
Try:
x <- rep(0:5,c(20,50,20,4,4,2))
pie(table(x)) # 3 small groups
pie(table(cut(x, c(-Inf,0:2,Inf),labels=0:3))) # 1 group representing the 3 small groups
And, as #sebpardo notes, pie charts are terrible. Use a barplot instead:
barplot(table(cut(x, c(-Inf,0:2,Inf),labels=0:3)))
You could try adding a new 'collapsed' column to your dataframe using mutate, e.g.
library(dplyr)
df <- mutate(df, new_group = ifelse(group > 3, ">3", group)
I agree with #sebpardo's suggestion in the comment above that there's a better way to visualize data than pie charts. Even the help page advises against them (see ?pie):
"Pie charts are a very bad way of displaying information. [...]"
How would I center these elements horizontally?
Fiddle: http://jsfiddle.net/qfbszLt1/
#icon-link-wrap {
float: left;
height: 30px;
margin-right: 15px;
width: 30px;
}
<div id="icon-full-wrap">
<div id="icon-link-wrap">
<svg xmlns="http://www.w3.org/2000/svg" id="icon-link" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<g>
<path d="M85.868 85.869c1.599-1.6 3.732-2.48 6.005-2.48c2.273 0 4.4 0.9 6 2.48l16.253 16.3 c0.563 0.6 1.3 0.9 2.1 0.879s1.559-0.316 2.121-0.879l16.253-16.253c0.563-0.562 0.879-1.326 0.879-2.121 s-0.316-1.559-0.879-2.121l-16.253-16.253c-7.081-7.079-16.493-10.977-26.501-10.977c-10.008 0-19.42 3.898-26.501 11 l-48.761 48.761c-7.081 7.081-10.981 16.494-10.981 26.505c0 10 3.9 19.4 11 26.498l16.252 16.3 c7.075 7.1 16.5 11 26.5 10.981c10.011 0 19.424-3.9 26.506-10.981l27.478-27.478c0.884-0.884 1.127-2.223 0.611-3.361 c-0.489-1.077-1.561-1.76-2.731-1.76c-0.067 0-0.133 0.002-0.201 0.007c-0.967 0.065-1.947 0.097-2.914 0.1 c-7.632 0-15.138-2.029-21.705-5.868c-0.472-0.276-0.994-0.41-1.513-0.41c-0.776 0-1.544 0.301-2.122 0.879l-17.398 17.4 c-1.602 1.602-3.734 2.485-6.004 2.485c-2.271 0-4.405-0.882-6.007-2.485l-16.253-16.253c-1.604-1.6-2.487-3.729-2.489-5.996 c-0.001-2.272 0.882-4.408 2.489-6.015L85.868 85.869z"></path>
<path d="M183.388 32.86l-16.253-16.253C160.059 9.5 150.6 5.6 140.6 5.63c-10.011 0-19.424 3.898-26.505 11 l-27.479 27.49c-0.884 0.884-1.127 2.224-0.61 3.362c0.489 1.1 1.6 1.8 2.7 1.759c0.067 0 0.135-0.002 0.203-0.007 c0.976-0.066 1.965-0.099 2.941-0.099c7.647 0 15.1 2 21.7 5.865c0.474 0.3 1 0.4 1.5 0.4 c0.776 0 1.544-0.301 2.122-0.879l17.41-17.41c1.599-1.6 3.732-2.48 6.005-2.48s4.406 0.9 6 2.48l16.253 16.3 c3.308 3.3 3.3 8.704-0.001 12.018l-48.759 48.759c-1.599 1.603-3.728 2.485-5.996 2.485c-2.273 0-4.41-0.883-6.018-2.487 L85.868 97.879c-0.563-0.562-1.326-0.879-2.121-0.879s-1.559 0.316-2.121 0.879l-16.253 16.253c-1.172 1.172-1.172 3.1 0 4.2 l16.253 16.253c7.081 7.1 16.5 11 26.5 10.981c10.008 0 19.42-3.9 26.501-10.981l48.76-48.76 c7.081-7.078 10.981-16.491 10.981-26.504C194.369 49.4 190.5 39.9 183.4 32.86z"></path>
</g>
</svg>
</div>
www.example.com
</div>
Instead of using float: left use display: inline-block and apply text-align: center to the parent div (#icon-full-wrap).
#icon-link-wrap {
display: inline-block;
vertical-align: middle;
height: 30px;
margin-right: 15px;
width: 30px;
}
#icon-full-wrap {
text-align: center;
}
<div id="icon-full-wrap">
<div id="icon-link-wrap">
<svg xmlns="http://www.w3.org/2000/svg" id="icon-link" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<g>
<path d="M85.868 85.869c1.599-1.6 3.732-2.48 6.005-2.48c2.273 0 4.4 0.9 6 2.48l16.253 16.3 c0.563 0.6 1.3 0.9 2.1 0.879s1.559-0.316 2.121-0.879l16.253-16.253c0.563-0.562 0.879-1.326 0.879-2.121 s-0.316-1.559-0.879-2.121l-16.253-16.253c-7.081-7.079-16.493-10.977-26.501-10.977c-10.008 0-19.42 3.898-26.501 11 l-48.761 48.761c-7.081 7.081-10.981 16.494-10.981 26.505c0 10 3.9 19.4 11 26.498l16.252 16.3 c7.075 7.1 16.5 11 26.5 10.981c10.011 0 19.424-3.9 26.506-10.981l27.478-27.478c0.884-0.884 1.127-2.223 0.611-3.361 c-0.489-1.077-1.561-1.76-2.731-1.76c-0.067 0-0.133 0.002-0.201 0.007c-0.967 0.065-1.947 0.097-2.914 0.1 c-7.632 0-15.138-2.029-21.705-5.868c-0.472-0.276-0.994-0.41-1.513-0.41c-0.776 0-1.544 0.301-2.122 0.879l-17.398 17.4 c-1.602 1.602-3.734 2.485-6.004 2.485c-2.271 0-4.405-0.882-6.007-2.485l-16.253-16.253c-1.604-1.6-2.487-3.729-2.489-5.996 c-0.001-2.272 0.882-4.408 2.489-6.015L85.868 85.869z"></path>
<path d="M183.388 32.86l-16.253-16.253C160.059 9.5 150.6 5.6 140.6 5.63c-10.011 0-19.424 3.898-26.505 11 l-27.479 27.49c-0.884 0.884-1.127 2.224-0.61 3.362c0.489 1.1 1.6 1.8 2.7 1.759c0.067 0 0.135-0.002 0.203-0.007 c0.976-0.066 1.965-0.099 2.941-0.099c7.647 0 15.1 2 21.7 5.865c0.474 0.3 1 0.4 1.5 0.4 c0.776 0 1.544-0.301 2.122-0.879l17.41-17.41c1.599-1.6 3.732-2.48 6.005-2.48s4.406 0.9 6 2.48l16.253 16.3 c3.308 3.3 3.3 8.704-0.001 12.018l-48.759 48.759c-1.599 1.603-3.728 2.485-5.996 2.485c-2.273 0-4.41-0.883-6.018-2.487 L85.868 97.879c-0.563-0.562-1.326-0.879-2.121-0.879s-1.559 0.316-2.121 0.879l-16.253 16.253c-1.172 1.172-1.172 3.1 0 4.2 l16.253 16.253c7.081 7.1 16.5 11 26.5 10.981c10.008 0 19.42-3.9 26.501-10.981l48.76-48.76 c7.081-7.078 10.981-16.491 10.981-26.504C194.369 49.4 190.5 39.9 183.4 32.86z"></path>
</g>
</svg>
</div>
www.example.com
</div>
I do it for myself
CSS
#icon-link-wrap {
height: 30px;
margin-right: 15px;
width: 30px;
margin-left: 50%;
transform: translateX(-50%);
}
I hope that I helped you.
Hi
i have a 10 year, 5 minutes resolution data set of dust concentration
and i have seperetly a 15 year data set with a day resolution of the synoptic clasification
how can i combine these two datasets they are not the same length or resolution
here is a sample of the data
> head(synoptic)
date synoptic
1 01/01/1995 8
2 02/01/1995 7
3 03/01/1995 7
4 04/01/1995 20
5 05/01/1995 1
6 06/01/1995 1
>
head(beit.shemesh)
X........................ StWd SHT PRE GSR RH Temp WD WS PM10 CO O3
1 NA 64 19.8 0 -2.9 37 15.2 61 2.2 241 0.9 40.6
2 NA 37 20.1 0 1.1 38 15.2 344 2.1 241 0.9 40.3
3 NA 36 20.2 0 0.7 39 15.1 32 1.9 241 0.9 39.4
4 NA 52 20.1 0 0.9 40 14.9 20 2.1 241 0.9 38.7
5 NA 42 19.0 0 0.9 40 14.6 11 2.0 241 0.9 38.7
6 NA 75 19.9 0 0.2 40 14.5 341 1.3 241 0.9 39.1
No2 Nox No SO2 date
1 1.4 2.9 1.5 1.6 31/12/2000 24:00
2 1.7 3.1 1.4 0.9 01/01/2001 00:05
3 2.1 3.5 1.4 1.2 01/01/2001 00:10
4 2.7 4.2 1.5 1.3 01/01/2001 00:15
5 2.3 3.8 1.5 1.4 01/01/2001 00:20
6 2.8 4.3 1.5 1.3 01/01/2001 00:25
any idea's
Make an extra column for calculating the dates, and then merge. To do this, you have to generate a variable in each dataframe bearing the same name, hence you first need some renaming. Also make sure that the merge column you use has the same type in both dataframes :
beit.shemesh$datetime <- beit.shemesh$date
beit.shemesh$date <- as.Date(beith.shemesh$datetime,format="%d/%m/%Y")
synoptic$date <- as.Date(synoptic$date,format="%d/%m/%Y")
merge(synoptic, beit.shemesh,by="date",all.y=TRUE)
Using all.y=TRUE keeps the beit.shemesh dataset intact. If you also want empty rows for all non-matching rows in synoptic, you could use all=TRUE instead.