Change height of an animated SVG - css

I'm willing to know how to change the height of a svg I'm using in the body of my file.
I'm willing to change the height of this part of this SVG I found on the internet.
How can I do it? I'm linking the code of the SVG so you can help me directly from the code. Thank you very much.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgba(255, 255, 255,0); display: block; z-index: 1; position: relative; shape-rendering: auto;" width="1980" height="300" preserveAspectRatio="xMidYMid" viewBox="0 0 1980 300">
<g transform=""><linearGradient id="lg-0.8589700868456098" x1="0" x2="1" y1="0" y2="0">
<stop stop-color="#e3f1ff" offset="0"></stop>
<stop stop-color="#4b00fd" offset="0"></stop>
<stop stop-color="#1b75be" offset="1"></stop>
</linearGradient><path d="M 0 0 L 0 241.915 Q 165 249.725 330 215.673 T 660 208.18 T 990 199.055 T 1320 208.65 T 1650 230.303 T 1980 211.464 L 1980 0 Z" fill="url(#lg-0.8589700868456098)" opacity="0.4">
<animate attributeName="d" dur="14.285714285714285s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="0s" values="M0 0L 0 243.84212793573954Q 165 244.198481323735 330 214.97043919697492T 660 203.02580743298734T 990 199.82321083516976T 1320 201.96793159645011T 1650 230.24393184683908T 1980 207.67099842439933L 1980 0 Z;M0 0L 0 235.0618328876254Q 165 269.3721943745703 330 218.17211425063454T 660 226.50305342938853T 990 196.3260923575501T 1320 232.4077939064989T 1650 230.51147502836807T 1980 224.94661631212443L 1980 0 Z;M0 0L 0 205.27226479494266Q 165 240.5155728470433 330 212.79915181526675T 660 213.58512293669696T 990 212.32102514981105T 1320 204.89820182351832T 1650 246.2686309045961T 1980 215.49084241837852L 1980 0 Z;M0 0L 0 243.84212793573954Q 165 244.198481323735 330 214.97043919697492T 660 203.02580743298734T 990 199.82321083516976T 1320 201.96793159645011T 1650 230.24393184683908T 1980 207.67099842439933L 1980 0 Z"></animate>
</path><path d="M 0 0 L 0 227.032 Q 165 262.125 330 238.153 T 660 207.735 T 990 220.548 T 1320 228.142 T 1650 211.542 T 1980 236.441 L 1980 0 Z" fill="url(#lg-0.8589700868456098)" opacity="0.4">
<animate attributeName="d" dur="14.285714285714285s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-2.8571428571428568s" values="M0 0L 0 198.91548309391138Q 165 261.3922476818655 330 234.30112068896972T 660 204.3221098374849T 990 197.40719560146192T 1320 210.24404882431836T 1650 221.90110529290098T 1980 229.98865514501918L 1980 0 Z;M0 0L 0 233.19830897370343Q 165 262.28508633762743 330 238.99758623407547T 660 208.4840242477092T 990 225.62292636527536T 1320 232.06758779859936T 1650 209.26990298551567T 1980 237.85581571111973L 1980 0 Z;M0 0L 0 214.6550175761586Q 165 255.77933395353938 330 205.58046331850787T 660 248.3458831575966T 990 222.1831187074748T 1320 230.19035948492177T 1650 228.0683781289646T 1980 201.17251667905413L 1980 0 Z;M0 0L 0 198.91548309391138Q 165 261.3922476818655 330 234.30112068896972T 660 204.3221098374849T 990 197.40719560146192T 1320 210.24404882431836T 1650 221.90110529290098T 1980 229.98865514501918L 1980 0 Z"></animate>
</path><path d="M 0 0 L 0 237.421 Q 165 234.24 330 206.641 T 660 208.817 T 990 212.796 T 1320 203.256 T 1650 207.638 T 1980 231.557 L 1980 0 Z" fill="url(#lg-0.8589700868456098)" opacity="0.4">
<animate attributeName="d" dur="14.285714285714285s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-5.7142857142857135s" values="M0 0L 0 215.16905431144298Q 165 249.14013005538385 330 208.41012606073144T 660 219.40030814888186T 990 211.27085687418423T 1320 192.61204273811109T 1650 197.1885193400654T 1980 194.1286625359876L 1980 0 Z;M0 0L 0 229.8226321403231Q 165 236.19867929760932 330 203.52409441404166T 660 214.7170706299125T 990 198.3572922664371T 1320 205.71937345561807T 1650 212.78814530052776T 1980 239.82308226121222L 1980 0 Z;M0 0L 0 247.9361109368723Q 165 231.5303336771614 330 210.95445598569952T 660 200.65096582892625T 990 232.7786653161789T 1320 199.8474501390285T 1650 200.50986927760832T 1980 220.1168133404018L 1980 0 Z;M0 0L 0 215.16905431144298Q 165 249.14013005538385 330 208.41012606073144T 660 219.40030814888186T 990 211.27085687418423T 1320 192.61204273811109T 1650 197.1885193400654T 1980 194.1286625359876L 1980 0 Z"></animate>
</path><path d="M 0 0 L 0 236.55 Q 165 256.696 330 217.771 T 660 229.085 T 990 199.848 T 1320 234.073 T 1650 227.095 T 1980 237.087 L 1980 0 Z" fill="url(#lg-0.8589700868456098)" opacity="0.4">
<animate attributeName="d" dur="14.285714285714285s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-8.571428571428571s" values="M0 0L 0 224.7037505439761Q 165 272.6930353316019 330 229.55156582258994T 660 236.61065365348014T 990 219.91504503660167T 1320 230.31466475967437T 1650 220.06173038098666T 1980 207.42481352241373L 1980 0 Z;M0 0L 0 208.16910156011605Q 165 259.1249630688156 330 226.47382965111322T 660 228.26470562084018T 990 214.50370306252307T 1320 233.37870660752753T 1650 248.78240193288315T 1980 229.8215346622372L 1980 0 Z;M0 0L 0 236.77128821460013Q 165 256.3974835288876 330 217.5513635828135T 660 228.94425335689596T 990 199.4737517303316T 1320 234.14322206572314T 1650 227.22631676701283T 1980 237.64106680051827L 1980 0 Z;M0 0L 0 224.7037505439761Q 165 272.6930353316019 330 229.55156582258994T 660 236.61065365348014T 990 219.91504503660167T 1320 230.31466475967437T 1650 220.06173038098666T 1980 207.42481352241373L 1980 0 Z"></animate>
</path><path d="M 0 0 L 0 208.515 Q 165 252.623 330 209.4 T 660 212.907 T 990 214.014 T 1320 210.712 T 1650 206.499 T 1980 232.652 L 1980 0 Z" fill="url(#lg-0.8589700868456098)" opacity="0.4">
<animate attributeName="d" dur="14.285714285714285s" repeatCount="indefinite" keyTimes="0;0.333;0.667;1" calcmod="spline" keySplines="0.2 0 0.2 1;0.2 0 0.2 1;0.2 0 0.2 1" begin="-11.428571428571427s" values="M0 0L 0 206.7391959060845Q 165 245.70594371304395 330 203.10592615464478T 660 200.39674383834097T 990 223.5013485428745T 1320 197.11555530025123T 1650 192.20908422829876T 1980 225.460814725169L 1980 0 Z;M0 0L 0 222.47847594882043Q 165 226.43274857890046 330 203.86035526418627T 660 198.8500946506723T 990 246.60167473644773T 1320 194.98517556687025T 1650 247.29227858709245T 1980 200.39555084376045L 1980 0 Z;M0 0L 0 211.39873916492658Q 165 263.85646813786497 330 219.62354308390505T 660 233.22692097790812T 990 198.60435835485188T 1320 232.7961046393257T 1650 229.7087015967473T 1980 244.3330217931673L 1980 0 Z;M0 0L 0 206.7391959060845Q 165 245.70594371304395 330 203.10592615464478T 660 200.39674383834097T 990 223.5013485428745T 1320 197.11555530025123T 1650 192.20908422829876T 1980 225.460814725169L 1980 0 Z"></animate>
</path></g>
</svg>

body {
background-image: linear-gradient(to right, #e3f1ff, #4b00fd, #1b75be);
background-size: 100% 100px;
padding-top: 100px;
}
The padding top matches the background block size and is intended to push the svg down the page, the linear gradient is drawing the same as the svg linear gradient hopefully. You may need to pull you top nav up over the padding with a margin: -100px;

Related

How to align SVG path or increase the size of the element?

Background:
I am making an icon loader with two letters and an outer layer. I want to align them correctly
<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="30%" height="30%" viewBox="-4 -4 120 150">
<title>Loader Logo</title>
<g>
<path
stroke="currentColor"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
d="M 50, 5
L 11, 27
L 11, 72
L 50, 95
L 89, 73
L 89, 28 z"
/>
<path
stroke="currentColor"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
d="M 45.2 0 L 54.9 0 L 32.7 70 L 22.2 70 L 0 0 L 9.8 0 L 27.5 58.3 L 45.2 0 Z"
/>
<path
transform="translate(65 0)"
stroke="currentColor"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
d="M 0 70.001 L 0 0.001 L 18 0.001 A 35.716 35.716 0 0 1 24.843 0.616 Q 28.805 1.39 31.9 3.138 A 18.895 18.895 0 0 1 35.15 5.451 Q 41.012 10.645 41.286 20.428 A 34.665 34.665 0 0 1 41.3 21.401 Q 41.3 27.401 38.45 32.251 Q 35.6 37.101 30.5 39.901 L 44.5 70.001 L 33.7 70.001 L 21.2 42.601 Q 19.6 42.801 17.9 42.801 L 9.1 42.801 L 9.1 70.001 L 0 70.001 Z M 9.1 34.401 L 17.2 34.401 A 27.803 27.803 0 0 0 21.151 34.14 Q 23.178 33.848 24.8 33.23 A 10.46 10.46 0 0 0 28.3 31.101 A 10.525 10.525 0 0 0 31.154 26.328 Q 31.8 24.151 31.8 21.401 A 19.246 19.246 0 0 0 31.458 17.651 Q 31.023 15.465 30.036 13.784 A 9.824 9.824 0 0 0 28.3 11.601 Q 25.761 9.207 21.066 8.55 A 27.955 27.955 0 0 0 17.2 8.301 L 9.1 8.301 L 9.1 34.401 Z"
/>
</g>
</svg>
How it looks now:
Question:
How can I align the outer element so that it covers the VR properly?
I am wrapping the paths for the VR logo in a <symbol> and using the symbol with <use>.
Please observe that the <symbol> has a viewBox. If a <symbol> has a viewBox attribute, the <use> element can have a width and a height. I'm using the width and the height of the <use> element to resize the group. I'm using the x and y attributes to position the <use> element. Please observe that x="11" y="27" corresponding with the second pair of coordinates for the hexagon d="M 50, 5 L 11, 27 L 11, 72 L 50, 95 L 89, 73 L 89, 28 z".
Initially viewBox="0 0 110 70" where the values used are the same as the values for x y width and height of the bounding box of the group of letters VR. Later I've changed the viewBox to viewBox="-10 -10 130 90" because I wanted a "padding" of 10 units around the group of letters.
Also please observe thet you don't need to declare the stroke="currentColor" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" for every path. You can declare those only once for the group.
<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="30%" height="30%" viewBox="-4 -4 120 150">
<!--<symbol id="vr" viewBox="0 0 110 70">-->
<symbol id="vr" viewBox="-10 -10 130 90">
<path
d="M 45.2 0 L 54.9 0 L 32.7 70 L 22.2 70 L 0 0 L 9.8 0 L 27.5 58.3 L 45.2 0 Z"
/>
<path
transform="translate(65 0)"
d="M 0 70.001 L 0 0.001 L 18 0.001 A 35.716 35.716 0 0 1 24.843 0.616 Q 28.805 1.39 31.9 3.138 A 18.895 18.895 0 0 1 35.15 5.451 Q 41.012 10.645 41.286 20.428 A 34.665 34.665 0 0 1 41.3 21.401 Q 41.3 27.401 38.45 32.251 Q 35.6 37.101 30.5 39.901 L 44.5 70.001 L 33.7 70.001 L 21.2 42.601 Q 19.6 42.801 17.9 42.801 L 9.1 42.801 L 9.1 70.001 L 0 70.001 Z M 9.1 34.401 L 17.2 34.401 A 27.803 27.803 0 0 0 21.151 34.14 Q 23.178 33.848 24.8 33.23 A 10.46 10.46 0 0 0 28.3 31.101 A 10.525 10.525 0 0 0 31.154 26.328 Q 31.8 24.151 31.8 21.401 A 19.246 19.246 0 0 0 31.458 17.651 Q 31.023 15.465 30.036 13.784 A 9.824 9.824 0 0 0 28.3 11.601 Q 25.761 9.207 21.066 8.55 A 27.955 27.955 0 0 0 17.2 8.301 L 9.1 8.301 L 9.1 34.401 Z"
/>
</symbol>
<title>Loader Logo</title>
<g fill="none"
stroke="currentColor"
stroke-width="5"
stroke-linecap="round"
stroke-linejoin="round">
<path id="hex"
d="M 50, 5
L 11, 27
L 11, 72
L 50, 95
L 89, 73
L 89, 28 z"
/>
<use xlink:href="#vr" x="11" y="27" width="78" height="47.5" />
</g>
</svg>
You will either have to redraw the SVG itself or reposition and resize the paths using CSS.
Here I've used an online editor to load your path, edit it and export it.
html, body {
background: #000;
}
path {
stroke: #f00;
}
<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="30%" height="30%" viewBox="-4 -4 120 150">
<title>Loader Logo</title>
<g>
<path
stroke="currentColor"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
d="m50,5l-39,22l0,45l39,23l39,-22l0,-45l-39,-23z"
/>
<path
stroke="currentColor"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
d="m43.56731,31.44373l5.61742,0l-12.85636,38.55627l-6.08071,0l-12.85636,-38.55627l5.67533,0l10.25034,32.11186l10.25034,-32.11186z"
/>
<path
stroke="currentColor"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
d="m55.03379,70.00055l0,-38.55627l10.42407,0a20.68368,19.67251 0 0 1 3.96289,0.33874q2.29445,0.42632 4.08682,1.38913a10.94238,10.40744 0 0 1 1.88212,1.27401q3.39477,2.86088 3.55345,8.24939a20.07503,19.09361 0 0 1 0.00811,0.53593q0,3.30482 -1.65048,5.97622q-1.65048,2.6714 -4.60397,4.21365l8.10761,16.57919l-6.25444,0l-7.23894,-15.09202q-0.92658,0.11016 -1.91108,0.11016l-5.09621,0l0,14.98186l-5.26995,0zm5.26995,-19.60862l4.69083,0a16.10114,15.314 0 0 0 2.28808,-0.14376q1.17387,-0.16083 2.11319,-0.50123a6.05755,5.76141 0 0 0 2.0269,-1.17266a6.09519,5.79721 0 0 0 1.65279,-2.62899q0.37411,-1.1991 0.37411,-2.71381a11.14565,10.60077 0 0 0 -0.19806,-2.06551q-0.25192,-1.20406 -0.8235,-2.12996a5.68923,5.4111 0 0 0 -1.00534,-1.2024q-1.47037,-1.31862 -4.18932,-1.6805a16.18917,15.39772 0 0 0 -2.23886,-0.13715l-4.69083,0l0,14.37598z"
/>
</g>
</svg>
...and here is an example using your original SVG but with modified transform attributes:
html, body {
background: #000;
}
path {
stroke: #f00;
}
<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="30%" height="30%" viewBox="-4 -4 120 150">
<title>Loader Logo</title>
<g>
<path
stroke="currentColor"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
d="M 50, 5
L 11, 27
L 11, 72
L 50, 95
L 89, 73
L 89, 28 z"
/>
<path
transform="translate(18 30) scale(.60)"
stroke="currentColor"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
d="M 45.2 0 L 54.9 0 L 32.7 70 L 22.2 70 L 0 0 L 9.8 0 L 27.5 58.3 L 45.2 0 Z"
/>
<path
transform="translate(55 30) scale(.60)"
stroke="currentColor"
strokeWidth="5"
strokeLinecap="round"
strokeLinejoin="round"
d="M 0 70.001 L 0 0.001 L 18 0.001 A 35.716 35.716 0 0 1 24.843 0.616 Q 28.805 1.39 31.9 3.138 A 18.895 18.895 0 0 1 35.15 5.451 Q 41.012 10.645 41.286 20.428 A 34.665 34.665 0 0 1 41.3 21.401 Q 41.3 27.401 38.45 32.251 Q 35.6 37.101 30.5 39.901 L 44.5 70.001 L 33.7 70.001 L 21.2 42.601 Q 19.6 42.801 17.9 42.801 L 9.1 42.801 L 9.1 70.001 L 0 70.001 Z M 9.1 34.401 L 17.2 34.401 A 27.803 27.803 0 0 0 21.151 34.14 Q 23.178 33.848 24.8 33.23 A 10.46 10.46 0 0 0 28.3 31.101 A 10.525 10.525 0 0 0 31.154 26.328 Q 31.8 24.151 31.8 21.401 A 19.246 19.246 0 0 0 31.458 17.651 Q 31.023 15.465 30.036 13.784 A 9.824 9.824 0 0 0 28.3 11.601 Q 25.761 9.207 21.066 8.55 A 27.955 27.955 0 0 0 17.2 8.301 L 9.1 8.301 L 9.1 34.401 Z"
/>
</g>
</svg>

Creating multi-layered SVG waves in CSS

I am trying to create a wave effect on a website like this where there is a main color wave (dark purple) and then lighter colored waves along the edge. I have tried positioning multiple paths with CSS position and top but cannot get them to work.
Here's my basic wave:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path class="green" fill="#0b5b41" fill-opacity="1" d="M0,224L60,213.3C120,203,240,181,360,186.7C480,192,600,224,720,245.3C840,267,960,277,1080,250.7C1200,224,1320,160,1380,128L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
</svg>
Mybe so
Three separate waves. The color of each wave can be selected to your liking.
The app is responsive and looks the same in all modern browsers
.w1 {
fill:#0E7452;
opacity:0.4;
}
.w2 {
fill:#0E7452;
opacity:0.7;
}
.w3 {
fill:#0B5B41;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1440 320" version="1.1">
<path class="w1" d="m-1.2 155.9c0 0 45.8-1.8 68.7-0.8 96.9 4.3 213.1 15.7 289.6 28.9 120 19 241.7 41.5 361.7 62.8 120 21.7 269.8 29.2 389.8 2.9C1228.6 222.9 1320 108 1380 76l60-32v224l-60 52-293-1.1H734L363.5 317.2 75.8 322.4 0 268c0 0-1.2-81.2-1.2-112.1z"/>
<path class="w2" d="m-1.2 186.8c0 0 45-1.1 67.5-2 190.8-7.9 184.4-4 297.5 2 120 5.3 241.2 42.3 361.2 63.6 120 21.7 245 23 365-3.3 120-26.7 194-95.4 290.1-145.1 20.1-10.4 60-32 60-32V294H1380 1080 720 360 60 0Z" />
<path class="w3" d="M0 224 60 213.3C120 203 228.9 182.5 348.9 188.2 468.9 193.5 600 224 720 245.3 840 267 960 277 1080 250.7 1200 224 1320 160 1380 128l60-32V320H1380 1080 720 360 60 0Z" />
</svg>

Organizing three dimensional data from table into matrix/array form using R

I have a table that looks similar to this
MUNI YEAR ENTE SALE
D101 1995 F001 1000
D101 1995 F002 1200
D101 1995 F003 1300
D101 1996 F001 1000
D101 1996 F003 1250
D101 1996 F004 1300
D101 1997 F001 1000
D101 1998 F002 1400
D101 1998 F003 1500
D102 1995 F001 1000
D102 1995 F003 1200
D102 1995 F006 1300
D102 1996 F001 1050
D102 1996 F002 1320
D102 1996 F003 1250
D102 1996 F006 1350
D102 1996 F002 1320
...
It is a sales table where MUNI stands for markets and ENTE stands for firms. The data consists of 7 years, 1200 markets and 200 firms. I would like to reorganize this table into a matrix form such that the dimensions are (rows = MUNI X YEAR, Cols = ENTE) and in each cell there is the value of sale, something like this
MUNIxYEAR\ENTE F001 F002 F003 F004 ...
D101x1995 1000 1200 1300 NA ...
D101x1996 1000 NA 1250 1300 ...
...
I am not sure how to this or the best way to proceed so I get the above-mentioned data organization. I have checked other posts and I believe the way of doing this is to use the command sparseMatrix. However, I don't know how to use it when (1) you have multiple criteria (i.e., two conditions for the rows) and (2) the dimensions of the matrix are string IDs (change them into factors and the get the levels?).
Thanks in advance for any help and guidance.
Many ways and packages to do that. I'm using a "tidyr" package method:
library(tidyr)
df = data.frame(MUNI = rep(paste0("D10", c(1,1,2,2,3,4)), each = 2),
YEAR = rep(1999:2000,3),
ENTE = paste0("F00", c(1,2,3,3,4,5)),
SALE = sample(1000:2000, 6, replace = T))
df
# MUNI YEAR ENTE SALE
# 1 D101 1999 F001 1670
# 2 D101 2000 F002 1420
# 3 D101 1999 F003 1985
# 4 D101 2000 F003 1914
# 5 D102 1999 F004 1727
# 6 D102 2000 F005 1195
# 7 D102 1999 F001 1670
# 8 D102 2000 F002 1420
# 9 D103 1999 F003 1985
# 10 D103 2000 F003 1914
# 11 D104 1999 F004 1727
# 12 D104 2000 F005 1195
spread(df,ENTE,SALE, fill=0) # in case you decide to have each column separately for querying or further grouping in the future
# MUNI YEAR F001 F002 F003 F004 F005
# 1 D101 1999 1716 0 1516 0 0
# 2 D101 2000 0 1917 1155 0 0
# 3 D102 1999 1716 0 0 1259 0
# 4 D102 2000 0 1917 0 0 1291
# 5 D103 1999 0 0 1516 0 0
# 6 D103 2000 0 0 1155 0 0
# 7 D104 1999 0 0 0 1259 0
# 8 D104 2000 0 0 0 0 1291
df2 = spread(df,ENTE,SALE, fill=0)
unite(df2, "MUNIxYEAR", MUNI,YEAR, sep = " x ") # if you want to combine columns
# MUNIxYEAR F001 F002 F003 F004 F005
# 1 D101 x 1999 1716 0 1516 0 0
# 2 D101 x 2000 0 1917 1155 0 0
# 3 D102 x 1999 1716 0 0 1259 0
# 4 D102 x 2000 0 1917 0 0 1291
# 5 D103 x 1999 0 0 1516 0 0
# 6 D103 x 2000 0 0 1155 0 0
# 7 D104 x 1999 0 0 0 1259 0
# 8 D104 x 2000 0 0 0 0 1291
You can use xtabs
For instance:
# Set random seed for reproducibility
set.seed(12345)
# Generate 500 rows of random data
my.data = data.frame(MUNI = rep(paste0("D", 101:110), each = 50),
YEAR = sample(1990:2000, 500, replace = TRUE),
ENTE = sample(paste0("F00", 1:9), 500, replace = T),
SALE = sample(1000:2000, 500, replace = T)
)
# Create a new column with the string "MUNIxYEAR"
my.data$MUNIxYEAR = paste(my.data$MUNI, my.data$YEAR, sep = "x")
# Call xtabs to get the table!
res <- xtabs(SALE ~ MUNIxYEAR + ENTE, my.data)
First lines of the output:
ENTE
MUNIxYEAR F001 F002 F003 F004 F005 F006 F007 F008 F009
D101x1990 1339 0 0 1693 0 2831 2779 0 0
D101x1991 0 1407 0 3619 0 0 0 1254 0
D101x1992 0 0 0 0 1807 0 1766 0 1657
D101x1993 1174 1154 0 0 1794 0 0 1218 0
D101x1994 0 1015 6636 0 0 0 2126 0 0
D101x1995 0 0 0 0 0 3478 3228 1517 0
D101x1996 0 0 1304 0 0 0 1505 0 0
D101x1997 0 1077 1481 1802 0 2494 0 0 0
D101x1998 0 0 1660 5366 1844 0 0 1006 0
D101x1999 0 1437 0 0 0 0 1844 0 2394
D101x2000 0 0 1714 0 0 0 1950 1758 1108
D102x1990 3761 0 3307 1182 0 0 0 0 0
D102x1991 0 0 0 1539 2716 0 1716 0 0
D102x1992 1980 0 1056 1458 0 0 0 0 1641
D102x1993 0 0 1429 0 1784 0 1114 0 0
D102x1994 0 0 0 0 1377 0 1038 1000 0
D102x1995 0 0 1088 0 0 1031 4205 1764 0
D102x1996 0 0 0 0 1658 0 3559 0 0
D102x1997 0 1048 2453 0 0 1741 0 0 0
D102x1998 1427 5139 0 1336 0 0 1372 0 1395
D102x1999 0 0 0 3957 0 1972 0 0 0
D102x2000 0 3258 0 0 0 3780 0 3299 1360
D103x1990 0 0 0 1247 1526 0 0 0 1234
D103x1991 0 1919 0 0 0 0 0 1704 0
D103x1992 0 1489 0 0 4428 0 1371 0 0
D103x1993 0 1477 0 0 0 0 1319 0 1211
D103x1994 0 2649 0 0 1488 0 0 0 0
The xtabs function can help reformat your data into a 3 dimensional array and then the ftable function can flatten it to the 2 dimensional table.
Other options would be the reshape2 or plyr packages (and probably others as well).

Difficulties applying pca

I am experimenting pca with R. I have the following data:
V2 V3 V4 V5 V6 V7 V8 V9 V10 V11
2454 0 168 290 45 1715 61 551 245 30 91
222 188 94 105 60 3374 615 7 294 0 169
552 0 0 465 0 3040 0 0 771 0 0
2872 0 0 0 0 3380 0 289 0 0 0
2938 0 56 56 0 2039 538 311 113 0 254
2849 0 0 332 0 2548 0 332 0 0 221
3102 0 0 0 0 2690 0 0 0 807 807
3134 0 0 0 0 2897 289 144 144 144 0
558 0 0 0 0 3453 0 0 0 0 0
2893 0 262 175 0 2452 350 1138 262 87 175
552 0 0 351 0 3114 0 0 678 0 0
2874 0 109 54 0 2565 272 1037 109 0 0
1396 0 0 407 0 1730 0 0 305 0 0
2866 0 71 179 0 2403 358 753 35 107 143
449 0 0 0 0 2825 0 0 0 0 0
2888 0 0 523 0 2615 104 627 209 0 0
2537 0 57 0 0 1854 0 0 463 0 0
2873 0 0 342 0 3196 0 114 0 0 114
720 0 0 365 4 2704 0 4 643 4 0
218 125 31 94 219 2479 722 0 219 0 94
to which I apply the following code:
fit <- prcomp(data)
ev <- fit$rotation # pc loadings
In order to make some tests, I tried to see the data matrix I retrieve when I do keep all the components I can keep:
numberComponentsKept = 10
featureVector = ev[,1:numberComponentsKept]
newData <- as.matrix(data)%*%as.matrix(featureVector)
The newData matrix should be the same as the original one, but instead, I get a very different result:
PC1 PC2 PC3 PC4 PC5 PC6 PC7 PC8 PC9 PC10
2454 1424.447 867.5986 514.0592 -155.4783720 -574.7425 85.38724 -86.71887 90.872507 4.305168 92.08284
222 3139.681 1020.4150 376.3165 471.8718398 -796.9549 142.14301 -119.86945 32.919950 -31.269467 32.55846
552 2851.544 539.6075 883.3969 -93.3579153 -908.6689 68.34030 -40.97052 -13.856931 23.133566 89.00851
2872 3111.317 1210.0187 433.0382 -144.4065362 -381.2305 -20.08927 -49.03447 9.569258 44.201571 70.13113
2938 1788.334 945.8162 189.6526 308.7703509 -593.5577 124.88484 -109.67276 -115.127348 14.170615 99.19492
2849 2291.839 978.1819 374.7567 -243.6739292 -496.8707 287.01065 -126.22501 -18.747873 54.080763 62.80605
3102 2530.989 814.7548 -510.5978 -410.6295894 -1015.3228 46.85727 -21.20662 14.696831 23.687923 72.37691
3134 2679.430 970.1323 311.8627 124.2884480 -536.4490 -26.23858 83.86768 -17.808390 -28.802387 92.09583
558 3268.599 988.2515 353.6538 -82.9155988 -342.5729 12.96219 -60.94886 18.537087 7.291126 96.14917
2893 1921.761 1664.0084 631.0800 -55.6321469 -864.9628 -28.11045 -104.78931 37.797727 -12.078535 104.88374
552 2927.108 607.6489 799.9602 -79.5494412 -827.6994 14.14625 -50.12209 -14.020936 29.996639 86.72887
2874 2084.285 1636.7999 621.6383 -49.2934502 -577.4815 -67.27198 -11.06071 -7.167577 47.395309 51.02962
1396 1618.171 337.4320 488.2717 -100.1663625 -469.8857 212.37199 -1.19409 13.531485 -23.332701 64.58806
2866 2007.261 1387.6890 395.1586 0.8640971 -636.1243 133.41074 12.34794 -26.969634 5.506828 74.13767
449 2674.136 808.5174 289.3345 -67.8356695 -280.2689 10.60475 -49.86404 15.165731 5.965083 78.66244
2888 2254.171 1162.4988 749.7230 -206.0215007 -652.2364 302.36320 40.76341 -1.079259 17.635956 57.86999
2537 1747.098 371.8884 429.1309 9.3761544 -480.7130 -196.25019 -81.31580 2.819608 24.089379 56.91885
2873 2973.872 974.3854 433.7282 -197.0601947 -478.3647 301.96576 -81.81105 14.516646 -1.191972 100.79057
720 2537.535 504.4124 744.5909 -78.1162036 -771.1396 38.17725 -36.61446 -9.079443 25.488688 78.21597
218 2292.718 800.5257 260.6641 603.3295960 -641.9296 187.38913 11.71382 70.011487 78.047216 96.10967
What did I do wrong?
I think the problem is rather a PCA problem than an R problem. You multiply the original data with the rotation matrix and you wonder then why newData!=data. This would be only the case if the rotation matrix would be the identity matrix.
What you probably were planning to do is the following:
# Run PCA:
fit <- prcomp(USArrests)
ev <- fit$rotation # pc loadings
# Reversed PCA:
head(fit$x%*% t(as.matrix(ev)))
# Centered Original data:
head(t(apply(USArrests,1,'-',colMeans(USArrests))))
In the last step you have to center the data, because the function prcomp centers them by default.

create matrices from directed dyadic data

I have a directed dyadic data frame that looks like this.
ccode.a ccode.b year mindist int.a2b
167603 220 570 1976 8.985324 0
624316 781 770 1976 7.914206 0
593896 740 620 1976 9.128673 0
669443 900 660 1976 9.235735 1
323404 434 20 1976 8.764419 0
353101 451 432 1976 5.390160 0
37109 53 700 1976 9.373724 0
624853 790 2 1976 8.949047 0
242472 355 53 1976 9.030233 0
35129 53 350 1976 9.006963 0
481129 600 140 1976 8.377329 0
621802 781 310 1976 8.885368 0
236655 350 600 1976 7.587584 0
192503 290 950 1976 9.636472 1
464722 580 94 1976 9.551535 0
550661 694 42 1976 9.377167 0
585022 712 625 1976 8.586424 0
637007 812 2 1976 8.902645 0
539818 678 572 1976 8.402542 0
690214 950 900 1976 7.859377 1
135804 160 135 1976 6.314121 0
554291 694 811 1976 8.603649 0
496453 620 680 1976 7.565657 0
68160 90 220 1976 9.003781 0
605932 770 482 1976 8.355514 0
509185 640 660 1976 4.873909 0
24928 42 830 1976 9.774045 0
454705 570 666 1976 8.740049 0
92800 100 51 1976 6.631003 1
492025 616 651 1976 7.140152 0
598335 750 663 1976 7.997375 0
485329 615 130 1976 8.951390 0
330093 435 520 1976 8.560956 0
74135 91 570 1976 9.453192 0
465351 580 235 1976 8.989404 1
227129 345 165 1976 9.296795 0
488046 615 696 1976 8.298939 0
381548 483 375 1976 8.325534 0
237750 350 840 1976 9.103709 0
402138 510 265 1976 8.688151 0
372394 475 950 1976 9.798338 0
216445 338 570 1976 8.890926 1
598308 750 660 1976 8.082419 0
613237 775 235 1976 9.100852 0
310790 420 42 1976 8.617836 0
611272 771 696 1976 8.065013 0
183450 235 551 1976 8.739090 0
659939 840 590 1976 8.879307 0
506308 640 70 1976 9.232063 0
188756 290 91 1976 9.120557 1
I want to create a matrix of all of the pairs of ccode.a and ccode.b,
d.sender <- matrix(0, nrow = 192, ncol = 192, dimnames = list(unique(dyad$ccode.a), unique(dyad$ccode.a)))
And then assign the value of int.a2b (I'll have to do this for a bunch of variables) to the appropriate cell in the matrix. This will be done separately for each year in the data set. Since the data frame is directed dyadic I'll also have a receiver matrix of the same dimension that that mirrors the sender matrix I'm trying to create now.
If I am correct in understanding what you want, here is one way:
x <- data.frame(a=(1:3),b=(4:6),val=c(8,3,7))
library(reshape2)
acast(x, a~b, value.var="val")
# 4 5 6
#1 8 NA NA
#2 NA 3 NA
#3 NA NA 7

Resources