├── .gitignore ├── src ├── index.html ├── index.ts ├── data.ts └── base.css ├── tsconfig.json ├── package.json └── LICENSE /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .cache 3 | dist 4 | package-lock.json 5 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import * as d3 from "d3"; 2 | 3 | const svg = d3 4 | .select("body") 5 | .append("svg") 6 | .attr("width", 500) 7 | .attr("height", 500); 8 | 9 | svg 10 | .append("text") 11 | .attr("x", 100) 12 | .attr("y", 100) 13 | .text("Hello d3js"); 14 | 15 | svg 16 | .append("circle") 17 | .attr("r", 20) 18 | .attr("cx", 20) 19 | .attr("cy", 20); 20 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es6", 4 | "module": "es6", 5 | "moduleResolution": "node", 6 | "declaration": false, 7 | "noImplicitAny": false, 8 | "sourceMap": true, 9 | "jsx": "react", 10 | "noLib": false, 11 | "allowJs": true, 12 | "suppressImplicitAnyIndexErrors": true, 13 | "skipLibCheck": true, 14 | "esModuleInterop": true, 15 | "baseUrl": "./src/" 16 | }, 17 | "include": ["./src/**/*"] 18 | } 19 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "00-boilerplate", 3 | "version": "1.0.0", 4 | "description": "This is just a simple boiler plate that will let us having a playground for our examples.", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "run-p -l type-check:watch start:dev", 8 | "type-check": "tsc --noEmit", 9 | "type-check:watch": "npm run type-check -- --watch", 10 | "start:dev": "parcel ./src/index.html", 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "keywords": [], 14 | "author": "", 15 | "license": "ISC", 16 | "devDependencies": { 17 | "npm-run-all": "^4.1.5", 18 | "parcel": "^1.12.4", 19 | "rimraf": "^3.0.2", 20 | "typescript": "^3.7.5" 21 | }, 22 | "dependencies": { 23 | "@types/d3": "^5.7.2", 24 | "d3": "^5.15.0" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Lemoncode 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/data.ts: -------------------------------------------------------------------------------- 1 | export interface ResultEntry { 2 | party: string; 3 | seats: number; 4 | } 5 | 6 | // Approx numbers 7 | // https://www.lavanguardia.com/elecciones/elecciones-generales-noviembre-2019 8 | 9 | export const resultCollectionSpainNov19: ResultEntry[] = [ 10 | { 11 | party: "PSOE", 12 | seats: 120 13 | }, 14 | { 15 | party: "PP", 16 | seats: 88 17 | }, 18 | { 19 | party: "VOX", 20 | seats: 52 21 | }, 22 | { 23 | party: "UP", 24 | seats: 35 25 | }, 26 | { 27 | party: "ERC", 28 | seats: 13 29 | }, 30 | { 31 | party: "Cs", 32 | seats: 10 33 | }, 34 | { 35 | party: "JxCat", 36 | seats: 8 37 | }, 38 | { 39 | party: "PNV", 40 | seats: 7 41 | }, 42 | { 43 | party: "Bildu", 44 | seats: 5 45 | }, 46 | { 47 | party: "Más pais", 48 | seats: 4 49 | }, 50 | { 51 | party: "CUP", 52 | seats: 2 53 | }, 54 | { 55 | party: "CC", 56 | seats: 2 57 | }, 58 | { 59 | party: "BNG", 60 | seats: 1 61 | }, 62 | { 63 | party: "Teruel Existe", 64 | seats: 1 65 | } 66 | ]; 67 | 68 | export const resultCollectionSpainApr19: ResultEntry[] = [ 69 | { 70 | party: "PSOE", 71 | seats: 123 72 | }, 73 | { 74 | party: "PP", 75 | seats: 66 76 | }, 77 | { 78 | party: "VOX", 79 | seats: 24 80 | }, 81 | { 82 | party: "UP", 83 | seats: 42 84 | }, 85 | { 86 | party: "ERC", 87 | seats: 15 88 | }, 89 | { 90 | party: "Cs", 91 | seats: 57 92 | }, 93 | { 94 | party: "JxCat", 95 | seats: 7 96 | }, 97 | { 98 | party: "PNV", 99 | seats: 6 100 | }, 101 | { 102 | party: "Bildu", 103 | seats: 4 104 | }, 105 | { 106 | party: "Más pais", 107 | seats: 4 108 | }, 109 | { 110 | party: "CUP", 111 | seats: 2 112 | }, 113 | { 114 | party: "CC", 115 | seats: 2 116 | }, 117 | { 118 | party: "BNG", 119 | seats: 1 120 | }, 121 | { 122 | party: "Compromis", 123 | seats: 1 124 | } 125 | ]; 126 | -------------------------------------------------------------------------------- /src/base.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: ReClean 3 | Theme URI: http://www.codenx.com/ 4 | Theme Version: 1.0 5 | Theme Date: 2013-03-12 6 | Theme Author: CodeNx 7 | Theme Author URI: http://www.codenx.com/ 8 | Theme License: GPLv2 9 | */ 10 | 11 | /*---[ Start: global css ]---*/ 12 | 13 | /* Import Google Web Fonts 14 | @import url(http://fonts.googleapis.com/css?family=Maven+Pro:400); 15 | -------------------------------------------------- @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800); 16 | */ 17 | /** 18 | * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) 19 | * http://cssreset.com 20 | */ 21 | html, 22 | body, 23 | div, 24 | span, 25 | applet, 26 | object, 27 | iframe, 28 | h1, 29 | h2, 30 | h3, 31 | h4, 32 | h5, 33 | h6, 34 | p, 35 | blockquote, 36 | pre, 37 | a, 38 | abbr, 39 | acronym, 40 | address, 41 | big, 42 | cite, 43 | code, 44 | del, 45 | dfn, 46 | em, 47 | img, 48 | ins, 49 | kbd, 50 | q, 51 | s, 52 | samp, 53 | small, 54 | strike, 55 | strong, 56 | sub, 57 | sup, 58 | tt, 59 | var, 60 | b, 61 | u, 62 | i, 63 | center, 64 | dl, 65 | dt, 66 | dd, 67 | ol, 68 | ul, 69 | li, 70 | fieldset, 71 | form, 72 | label, 73 | legend, 74 | table, 75 | caption, 76 | tbody, 77 | tfoot, 78 | thead, 79 | tr, 80 | th, 81 | td, 82 | article, 83 | aside, 84 | canvas, 85 | details, 86 | embed, 87 | figure, 88 | figcaption, 89 | footer, 90 | header, 91 | hgroup, 92 | menu, 93 | nav, 94 | output, 95 | ruby, 96 | section, 97 | summary, 98 | time, 99 | mark, 100 | audio, 101 | video { 102 | margin: 0; 103 | padding: 0; 104 | border: 0; 105 | font-size: 100%; 106 | font: inherit; 107 | vertical-align: baseline; 108 | } 109 | /* HTML5 display-role reset for older browsers */ 110 | article, 111 | aside, 112 | details, 113 | figcaption, 114 | figure, 115 | footer, 116 | header, 117 | hgroup, 118 | menu, 119 | nav, 120 | section { 121 | display: block; 122 | } 123 | body { 124 | line-height: 1; 125 | } 126 | ol, 127 | ul { 128 | list-style: none; 129 | } 130 | blockquote, 131 | q { 132 | quotes: none; 133 | } 134 | blockquote:before, 135 | blockquote:after, 136 | q:before, 137 | q:after { 138 | content: ""; 139 | content: none; 140 | } 141 | table { 142 | border-collapse: collapse; 143 | border-spacing: 0; 144 | } 145 | .clearfix:after { 146 | visibility: hidden; 147 | display: block; 148 | font-size: 0; 149 | content: " "; 150 | clear: both; 151 | height: 0; 152 | } 153 | .clearfix { 154 | display: inline-table; 155 | } 156 | /* Hides from IE-mac \*/ 157 | * html .clearfix { 158 | height: 1%; 159 | } 160 | .clearfix { 161 | display: block; 162 | } 163 | /* End hide from IE-mac */ 164 | 165 | :-moz-placeholder { 166 | color: #aaa !important; 167 | font-style: italic; 168 | line-height: 20px; 169 | } 170 | ::-webkit-input-placeholder { 171 | color: #aaa !important; 172 | font-style: italic; 173 | line-height: 20px; 174 | } 175 | body { 176 | background: none repeat scroll 0% 0% rgb(255, 255, 255); 177 | font: 400 100%/1.625 "Open Sans", "Helvetica Neue", Helvetica, Arial, 178 | sans-serif; 179 | font-size: 13px; 180 | color: #3b3b3b; 181 | } 182 | .fl { 183 | float: left; 184 | } 185 | .fr { 186 | float: right; 187 | } 188 | h1 { 189 | font-weight: 400; 190 | line-height: 1.1em; 191 | border-bottom: 1px dashed #0077bb; 192 | position: relative; 193 | padding: 14px 25px 5px 0; 194 | font-size: 2.5em; 195 | text-transform: uppercase; 196 | line-height: 1.2em; 197 | margin: 0.2em 0px 20px -2px; 198 | color: rgb(0, 170, 238); 199 | text-decoration: none; 200 | } 201 | h2 { 202 | font-size: 16px; 203 | color: #111; 204 | padding: 5px 20px !important; 205 | clear: both; 206 | background: #eee; 207 | font-weight: 700; 208 | } 209 | h3 { 210 | margin: 0 0 10px 0; 211 | color: #111; 212 | } 213 | blockquote { 214 | background: #eee; 215 | padding: 15px; 216 | margin: 30px auto; 217 | border: 1px solid #aaa; 218 | font-size: 16px; 219 | font-style: italic; 220 | color: #000; 221 | position: relative; 222 | } 223 | blockquote p { 224 | margin: 0; 225 | padding: 0; 226 | } 227 | img { 228 | border: none; 229 | } 230 | ul.left { 231 | } 232 | 233 | ul.right { 234 | text-align: right; 235 | } 236 | a:link, 237 | a:visited { 238 | text-decoration: none; 239 | color: #0077bb; 240 | } 241 | a:hover, 242 | a:active { 243 | color: #0099cc; 244 | text-decoration: underline; 245 | } 246 | button::-moz-focus-inner { 247 | border: 0; 248 | padding: 0; 249 | } 250 | form, 251 | fieldset { 252 | padding: 0; 253 | margin: 0; 254 | border: none; 255 | } 256 | .header { 257 | background-color: #fff; 258 | height: 10%; 259 | } 260 | .header-wrapper { 261 | width: 998px; 262 | margin: 0 auto; 263 | background-color: #fff; 264 | } 265 | .logo { 266 | width: 200px; 267 | margin-top: 10px; 268 | } 269 | .search { 270 | margin-top: 10px; 271 | } 272 | .nav { 273 | height: 10%; 274 | background-color: #00aeec; 275 | } 276 | .nav-wrapper { 277 | margin: 0 auto; 278 | width: 998px; 279 | } 280 | .nav ul, 281 | .header ul, 282 | .sidebar ul { 283 | list-style: none; 284 | list-style-type: none; 285 | } 286 | .nav ul li, 287 | .header ul li { 288 | display: inline; 289 | padding: 0px 10px 0px 10px; 290 | } 291 | .nav ul li { 292 | padding: 0 20px; 293 | } 294 | --------------------------------------------------------------------------------