From f08b6a9eb480ba9b5f5cbf05b997ffe7413a1494 Mon Sep 17 00:00:00 2001 From: "Nicholas Carrigan (he/him)" Date: Wed, 20 Oct 2021 13:27:12 -0700 Subject: [PATCH] chore: remove accidental challenges (#43948) --- .../d3-dashboard/part-001.md | 33 -- .../d3-dashboard/part-002.md | 43 -- .../d3-dashboard/part-003.md | 51 -- .../d3-dashboard/part-004.md | 55 -- .../d3-dashboard/part-005.md | 55 -- .../d3-dashboard/part-006.md | 55 -- .../d3-dashboard/part-007.md | 66 --- .../d3-dashboard/part-008.md | 73 --- .../d3-dashboard/part-009.md | 73 --- .../d3-dashboard/part-010.md | 75 --- .../d3-dashboard/part-011.md | 81 --- .../d3-dashboard/part-012.md | 79 --- .../d3-dashboard/part-013.md | 96 ---- .../d3-dashboard/part-014.md | 95 ---- .../d3-dashboard/part-015.md | 103 ---- .../d3-dashboard/part-016.md | 108 ---- .../d3-dashboard/part-017.md | 113 ---- .../d3-dashboard/part-018.md | 117 ----- .../d3-dashboard/part-019.md | 124 ----- .../d3-dashboard/part-020.md | 116 ---- .../d3-dashboard/part-021.md | 123 ----- .../d3-dashboard/part-022.md | 123 ----- .../d3-dashboard/part-023.md | 129 ----- .../d3-dashboard/part-024.md | 129 ----- .../d3-dashboard/part-025.md | 131 ----- .../d3-dashboard/part-026.md | 133 ----- .../d3-dashboard/part-027.md | 138 ----- .../d3-dashboard/part-028.md | 142 ----- .../d3-dashboard/part-029.md | 143 ----- .../d3-dashboard/part-030.md | 147 ------ .../d3-dashboard/part-031.md | 151 ------ .../d3-dashboard/part-032.md | 150 ------ .../d3-dashboard/part-033.md | 153 ------ .../d3-dashboard/part-034.md | 156 ------ .../d3-dashboard/part-035.md | 158 ------ .../d3-dashboard/part-036.md | 168 ------ .../d3-dashboard/part-037.md | 168 ------ .../d3-dashboard/part-038.md | 168 ------ .../d3-dashboard/part-039.md | 173 ------ .../d3-dashboard/part-040.md | 178 ------- .../d3-dashboard/part-041.md | 171 ------ .../d3-dashboard/part-042.md | 178 ------- .../d3-dashboard/part-043.md | 178 ------- .../d3-dashboard/part-044.md | 192 ------- .../d3-dashboard/part-045.md | 183 ------- .../d3-dashboard/part-046.md | 189 ------- .../d3-dashboard/part-047.md | 189 ------- .../d3-dashboard/part-048.md | 193 ------- .../d3-dashboard/part-049.md | 199 ------- .../d3-dashboard/part-050.md | 198 ------- .../d3-dashboard/part-051.md | 204 -------- .../d3-dashboard/part-052.md | 207 -------- .../d3-dashboard/part-053.md | 209 -------- .../d3-dashboard/part-054.md | 209 -------- .../d3-dashboard/part-055.md | 218 -------- .../d3-dashboard/part-056.md | 218 -------- .../d3-dashboard/part-057.md | 226 -------- .../d3-dashboard/part-058.md | 229 -------- .../d3-dashboard/part-059.md | 231 -------- .../d3-dashboard/part-060.md | 230 -------- .../d3-dashboard/part-061.md | 239 --------- .../d3-dashboard/part-062.md | 247 --------- .../d3-dashboard/part-063.md | 246 --------- .../d3-dashboard/part-064.md | 248 --------- .../d3-dashboard/part-065.md | 246 --------- .../d3-dashboard/part-066.md | 250 --------- .../d3-dashboard/part-067.md | 252 --------- .../d3-dashboard/part-068.md | 252 --------- .../d3-dashboard/part-069.md | 258 --------- .../d3-dashboard/part-070.md | 258 --------- .../d3-dashboard/part-071.md | 263 ---------- .../d3-dashboard/part-072.md | 268 ---------- .../d3-dashboard/part-073.md | 274 ---------- .../d3-dashboard/part-074.md | 280 ---------- .../d3-dashboard/part-075.md | 280 ---------- .../d3-dashboard/part-076.md | 287 ---------- .../d3-dashboard/part-077.md | 288 ---------- .../d3-dashboard/part-078.md | 296 ----------- .../d3-dashboard/part-079.md | 302 ----------- .../d3-dashboard/part-080.md | 302 ----------- .../d3-dashboard/part-081.md | 309 ----------- .../d3-dashboard/part-082.md | 312 ----------- .../d3-dashboard/part-083.md | 315 ----------- .../d3-dashboard/part-084.md | 318 ----------- .../d3-dashboard/part-085.md | 319 ----------- .../d3-dashboard/part-086.md | 324 ------------ .../d3-dashboard/part-087.md | 328 ------------ .../d3-dashboard/part-088.md | 329 ------------ .../d3-dashboard/part-089.md | 334 ------------ .../d3-dashboard/part-090.md | 336 ------------ .../d3-dashboard/part-091.md | 335 ------------ .../d3-dashboard/part-092.md | 344 ------------ .../d3-dashboard/part-093.md | 345 ------------ .../d3-dashboard/part-094.md | 348 ------------ .../d3-dashboard/part-095.md | 367 ------------- .../d3-dashboard/part-096.md | 350 ------------- .../d3-dashboard/part-097.md | 348 ------------ .../d3-dashboard/part-098.md | 351 ------------- .../d3-dashboard/part-099.md | 352 ------------- .../d3-dashboard/part-100.md | 372 ------------- .../d3-dashboard/part-101.md | 377 ------------- .../d3-dashboard/part-102.md | 364 ------------- .../d3-dashboard/part-103.md | 365 ------------- .../d3-dashboard/part-104.md | 381 -------------- .../d3-dashboard/part-105.md | 383 -------------- .../d3-dashboard/part-106.md | 372 ------------- .../d3-dashboard/part-107.md | 376 ------------- .../d3-dashboard/part-108.md | 388 -------------- .../d3-dashboard/part-109.md | 388 -------------- .../d3-dashboard/part-110.md | 389 -------------- .../d3-dashboard/part-111.md | 391 -------------- .../d3-dashboard/part-112.md | 394 -------------- .../d3-dashboard/part-113.md | 396 -------------- .../d3-dashboard/part-114.md | 401 -------------- .../d3-dashboard/part-115.md | 401 -------------- .../d3-dashboard/part-116.md | 404 -------------- .../d3-dashboard/part-117.md | 406 -------------- .../d3-dashboard/part-118.md | 412 --------------- .../d3-dashboard/part-119.md | 417 --------------- .../d3-dashboard/part-120.md | 417 --------------- .../d3-dashboard/part-121.md | 418 --------------- .../d3-dashboard/part-122.md | 422 --------------- .../d3-dashboard/part-123.md | 426 --------------- .../d3-dashboard/part-124.md | 431 --------------- .../d3-dashboard/part-125.md | 430 --------------- .../d3-dashboard/part-126.md | 437 ---------------- .../d3-dashboard/part-127.md | 435 --------------- .../d3-dashboard/part-128.md | 438 ---------------- .../d3-dashboard/part-129.md | 443 ---------------- .../d3-dashboard/part-130.md | 443 ---------------- .../d3-dashboard/part-131.md | 446 ---------------- .../d3-dashboard/part-132.md | 450 ---------------- .../d3-dashboard/part-133.md | 448 ---------------- .../d3-dashboard/part-134.md | 453 ---------------- .../d3-dashboard/part-135.md | 464 ---------------- .../d3-dashboard/part-136.md | 476 ----------------- .../d3-dashboard/part-137.md | 484 ----------------- .../d3-dashboard/part-138.md | 479 ----------------- .../d3-dashboard/part-139.md | 485 ----------------- .../d3-dashboard/part-140.md | 478 ----------------- .../d3-dashboard/part-141.md | 489 ----------------- .../d3-dashboard/part-142.md | 481 ----------------- .../d3-dashboard/part-143.md | 483 ----------------- .../d3-dashboard/part-144.md | 490 ----------------- .../d3-dashboard/part-145.md | 494 ------------------ .../d3-dashboard/part-146.md | 483 ----------------- .../d3-dashboard/part-001.md | 33 -- .../d3-dashboard/part-002.md | 43 -- .../d3-dashboard/part-003.md | 51 -- .../d3-dashboard/part-004.md | 55 -- .../d3-dashboard/part-005.md | 55 -- .../d3-dashboard/part-006.md | 55 -- .../d3-dashboard/part-007.md | 66 --- .../d3-dashboard/part-008.md | 73 --- .../d3-dashboard/part-009.md | 73 --- .../d3-dashboard/part-010.md | 75 --- .../d3-dashboard/part-011.md | 81 --- .../d3-dashboard/part-012.md | 79 --- .../d3-dashboard/part-013.md | 96 ---- .../d3-dashboard/part-014.md | 95 ---- .../d3-dashboard/part-015.md | 103 ---- .../d3-dashboard/part-016.md | 108 ---- .../d3-dashboard/part-017.md | 113 ---- .../d3-dashboard/part-018.md | 117 ----- .../d3-dashboard/part-019.md | 124 ----- .../d3-dashboard/part-020.md | 116 ---- .../d3-dashboard/part-021.md | 123 ----- .../d3-dashboard/part-022.md | 123 ----- .../d3-dashboard/part-023.md | 129 ----- .../d3-dashboard/part-024.md | 129 ----- .../d3-dashboard/part-025.md | 131 ----- .../d3-dashboard/part-026.md | 133 ----- .../d3-dashboard/part-027.md | 138 ----- .../d3-dashboard/part-028.md | 142 ----- .../d3-dashboard/part-029.md | 143 ----- .../d3-dashboard/part-030.md | 147 ------ .../d3-dashboard/part-031.md | 151 ------ .../d3-dashboard/part-032.md | 150 ------ .../d3-dashboard/part-033.md | 153 ------ .../d3-dashboard/part-034.md | 156 ------ .../d3-dashboard/part-035.md | 158 ------ .../d3-dashboard/part-036.md | 168 ------ .../d3-dashboard/part-037.md | 168 ------ .../d3-dashboard/part-038.md | 168 ------ .../d3-dashboard/part-039.md | 173 ------ .../d3-dashboard/part-040.md | 178 ------- .../d3-dashboard/part-041.md | 171 ------ .../d3-dashboard/part-042.md | 178 ------- .../d3-dashboard/part-043.md | 178 ------- .../d3-dashboard/part-044.md | 192 ------- .../d3-dashboard/part-045.md | 183 ------- .../d3-dashboard/part-046.md | 189 ------- .../d3-dashboard/part-047.md | 189 ------- .../d3-dashboard/part-048.md | 193 ------- .../d3-dashboard/part-049.md | 199 ------- .../d3-dashboard/part-050.md | 198 ------- .../d3-dashboard/part-051.md | 204 -------- .../d3-dashboard/part-052.md | 207 -------- .../d3-dashboard/part-053.md | 209 -------- .../d3-dashboard/part-054.md | 209 -------- .../d3-dashboard/part-055.md | 218 -------- .../d3-dashboard/part-056.md | 218 -------- .../d3-dashboard/part-057.md | 226 -------- .../d3-dashboard/part-058.md | 229 -------- .../d3-dashboard/part-059.md | 231 -------- .../d3-dashboard/part-060.md | 230 -------- .../d3-dashboard/part-061.md | 239 --------- .../d3-dashboard/part-062.md | 247 --------- .../d3-dashboard/part-063.md | 246 --------- .../d3-dashboard/part-064.md | 248 --------- .../d3-dashboard/part-065.md | 246 --------- .../d3-dashboard/part-066.md | 250 --------- .../d3-dashboard/part-067.md | 252 --------- .../d3-dashboard/part-068.md | 252 --------- .../d3-dashboard/part-069.md | 258 --------- .../d3-dashboard/part-070.md | 258 --------- .../d3-dashboard/part-071.md | 263 ---------- .../d3-dashboard/part-072.md | 268 ---------- .../d3-dashboard/part-073.md | 274 ---------- .../d3-dashboard/part-074.md | 280 ---------- .../d3-dashboard/part-075.md | 280 ---------- .../d3-dashboard/part-076.md | 287 ---------- .../d3-dashboard/part-077.md | 288 ---------- .../d3-dashboard/part-078.md | 296 ----------- .../d3-dashboard/part-079.md | 302 ----------- .../d3-dashboard/part-080.md | 302 ----------- .../d3-dashboard/part-081.md | 309 ----------- .../d3-dashboard/part-082.md | 312 ----------- .../d3-dashboard/part-083.md | 315 ----------- .../d3-dashboard/part-084.md | 318 ----------- .../d3-dashboard/part-085.md | 319 ----------- .../d3-dashboard/part-086.md | 324 ------------ .../d3-dashboard/part-087.md | 328 ------------ .../d3-dashboard/part-088.md | 329 ------------ .../d3-dashboard/part-089.md | 334 ------------ .../d3-dashboard/part-090.md | 336 ------------ .../d3-dashboard/part-091.md | 335 ------------ .../d3-dashboard/part-092.md | 344 ------------ .../d3-dashboard/part-093.md | 345 ------------ .../d3-dashboard/part-094.md | 348 ------------ .../d3-dashboard/part-095.md | 367 ------------- .../d3-dashboard/part-096.md | 350 ------------- .../d3-dashboard/part-097.md | 348 ------------ .../d3-dashboard/part-098.md | 351 ------------- .../d3-dashboard/part-099.md | 352 ------------- .../d3-dashboard/part-100.md | 372 ------------- .../d3-dashboard/part-101.md | 377 ------------- .../d3-dashboard/part-102.md | 364 ------------- .../d3-dashboard/part-103.md | 365 ------------- .../d3-dashboard/part-104.md | 381 -------------- .../d3-dashboard/part-105.md | 383 -------------- .../d3-dashboard/part-106.md | 372 ------------- .../d3-dashboard/part-107.md | 376 ------------- .../d3-dashboard/part-108.md | 388 -------------- .../d3-dashboard/part-109.md | 388 -------------- .../d3-dashboard/part-110.md | 389 -------------- .../d3-dashboard/part-111.md | 391 -------------- .../d3-dashboard/part-112.md | 394 -------------- .../d3-dashboard/part-113.md | 396 -------------- .../d3-dashboard/part-114.md | 401 -------------- .../d3-dashboard/part-115.md | 401 -------------- .../d3-dashboard/part-116.md | 404 -------------- .../d3-dashboard/part-117.md | 406 -------------- .../d3-dashboard/part-118.md | 412 --------------- .../d3-dashboard/part-119.md | 417 --------------- .../d3-dashboard/part-120.md | 417 --------------- .../d3-dashboard/part-121.md | 418 --------------- .../d3-dashboard/part-122.md | 422 --------------- .../d3-dashboard/part-123.md | 426 --------------- .../d3-dashboard/part-124.md | 431 --------------- .../d3-dashboard/part-125.md | 430 --------------- .../d3-dashboard/part-126.md | 437 ---------------- .../d3-dashboard/part-127.md | 435 --------------- .../d3-dashboard/part-128.md | 438 ---------------- .../d3-dashboard/part-129.md | 443 ---------------- .../d3-dashboard/part-130.md | 443 ---------------- .../d3-dashboard/part-131.md | 446 ---------------- .../d3-dashboard/part-132.md | 450 ---------------- .../d3-dashboard/part-133.md | 448 ---------------- .../d3-dashboard/part-134.md | 453 ---------------- .../d3-dashboard/part-135.md | 464 ---------------- .../d3-dashboard/part-136.md | 476 ----------------- .../d3-dashboard/part-137.md | 484 ----------------- .../d3-dashboard/part-138.md | 479 ----------------- .../d3-dashboard/part-139.md | 485 ----------------- .../d3-dashboard/part-140.md | 478 ----------------- .../d3-dashboard/part-141.md | 489 ----------------- .../d3-dashboard/part-142.md | 481 ----------------- .../d3-dashboard/part-143.md | 483 ----------------- .../d3-dashboard/part-144.md | 490 ----------------- .../d3-dashboard/part-145.md | 494 ------------------ .../d3-dashboard/part-146.md | 483 ----------------- 292 files changed, 80846 deletions(-) delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-001.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-002.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-003.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-004.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-005.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-006.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-007.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-008.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-009.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-010.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-011.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-012.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-013.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-014.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-015.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-016.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-017.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-018.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-019.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-020.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-021.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-022.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-023.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-024.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-025.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-026.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-027.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-028.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-029.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-030.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-031.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-032.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-033.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-034.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-035.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-036.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-037.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-038.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-039.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-040.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-041.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-042.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-043.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-044.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-045.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-046.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-047.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-048.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-049.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-050.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-051.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-052.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-053.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-054.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-055.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-056.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-057.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-058.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-059.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-060.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-061.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-062.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-063.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-064.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-065.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-066.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-067.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-068.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-069.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-070.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-071.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-072.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-073.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-074.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-075.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-076.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-077.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-078.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-079.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-080.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-081.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-082.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-083.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-084.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-085.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-086.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-087.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-088.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-089.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-090.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-091.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-092.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-093.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-094.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-095.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-096.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-097.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-098.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-099.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-100.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-101.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-102.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-103.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-104.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-105.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-106.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-107.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-108.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-109.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-110.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-111.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-112.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-113.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-114.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-115.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-116.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-117.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-118.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-119.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-120.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-121.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-122.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-123.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-124.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-125.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-126.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-127.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-128.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-129.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-130.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-131.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-132.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-133.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-134.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-135.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-136.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-137.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-138.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-139.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-140.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-141.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-142.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-143.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-144.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-145.md delete mode 100644 curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-146.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-001.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-002.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-003.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-004.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-005.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-006.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-007.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-008.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-009.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-010.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-011.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-012.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-013.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-014.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-015.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-016.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-017.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-018.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-019.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-020.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-021.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-022.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-023.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-024.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-025.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-026.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-027.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-028.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-029.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-030.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-031.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-032.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-033.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-034.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-035.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-036.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-037.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-038.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-039.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-040.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-041.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-042.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-043.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-044.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-045.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-046.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-047.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-048.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-049.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-050.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-051.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-052.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-053.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-054.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-055.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-056.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-057.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-058.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-059.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-060.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-061.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-062.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-063.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-064.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-065.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-066.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-067.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-068.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-069.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-070.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-071.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-072.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-073.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-074.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-075.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-076.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-077.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-078.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-079.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-080.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-081.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-082.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-083.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-084.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-085.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-086.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-087.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-088.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-089.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-090.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-091.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-092.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-093.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-094.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-095.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-096.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-097.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-098.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-099.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-100.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-101.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-102.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-103.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-104.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-105.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-106.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-107.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-108.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-109.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-110.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-111.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-112.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-113.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-114.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-115.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-116.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-117.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-118.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-119.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-120.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-121.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-122.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-123.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-124.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-125.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-126.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-127.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-128.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-129.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-130.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-131.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-132.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-133.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-134.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-135.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-136.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-137.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-138.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-139.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-140.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-141.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-142.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-143.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-144.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-145.md delete mode 100644 curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-146.md diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-001.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-001.md deleted file mode 100644 index 63cbcbf8a5..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-001.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9de -title: Part 1 -challengeType: 0 -dashedName: part-1 ---- - -# --description-- - -Welcome to the dashboard project! You will be using the JavaScript data visualization library, D3, to build a visualization of your social media followers. It will consist of a line graph, a pie chart, and a legend. - -First, you need to create the HTML file. Start by adding the `` declaration at the top of the file to tell the browser what type of document it's reading. - -# --hints-- - -test-text - -```js -assert(//gi.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```html -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-002.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-002.md deleted file mode 100644 index 8217f0cb0b..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-002.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9df -title: Part 2 -challengeType: 0 -dashedName: part-2 ---- - -# --description-- - -Next, add opening and closing `html`, `head` and `body` tags below the doctype. Be sure to nest them properly. - -# --hints-- - -test-text - -```js -assert( - /\s*\s*\s*<\/head\s*>\s*\s*<\/body\s*>\s*<\/html\s*>/gi.test( - code - ) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - - - - - - - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-003.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-003.md deleted file mode 100644 index 17dd77aaba..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-003.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e0 -title: Part 3 -challengeType: 0 -dashedName: part-3 ---- - -# --description-- - -In the head, add a `title` of `D3 Dashboard`. - -# --hints-- - -test-text - -```js -assert( - /\s*D3 Dashboard<\/title\s*>\s*<\/head\s*>/g.test(code) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - - - - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-004.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-004.md deleted file mode 100644 index c4df481a13..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-004.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e1 -title: Part 4 -challengeType: 0 -dashedName: part-4 ---- - -# --description-- - -Below the title, link to your external stylesheet by adding a `link` element with a `rel` attribute of `stylesheet` and an `href` attribute of `./dashboard.css`. Remember that link elements do not need a closing tag. You will be adding some styles to this file shortly. - -# --hints-- - -test-text - -```js -const link = code.match(/]>/gi)[0]; -assert( - /rel\s*=\s*('|")\s*stylesheet\s*\1/gi.test(link) && - /href\s*=\s*('|")\s*(.\/)?dashboard\.css\s*\1/gi.test(link) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - D3 Dashboard - - - - - - - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-005.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-005.md deleted file mode 100644 index cb9d694707..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-005.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e2 -title: Part 5 -challengeType: 0 -dashedName: part-5 ---- - -# --description-- - -Next, add a container for the dashboard. Put an empty `div` element in the body with class of `dashboard`. You will be appending all the dashboard elements to this div. - -# --hints-- - -test-text - -```js -assert($('div.dashboard').length === 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - D3 Dashboard - - - - - - - - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - - -
- - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-006.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-006.md deleted file mode 100644 index a3528d92d1..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-006.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e3 -title: Part 6 -challengeType: 0 -dashedName: part-6 ---- - -# --description-- - -You are now looking at the stylesheet that you linked to earlier. At the top of this file, target the `body` of the HTML document and give it a `background-color` of `#ccc`. - -# --hints-- - -test-text - -```js -const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; -assert(/background-color\s*:\s*#ccc\s*(;|})/gi.test(body)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-007.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-007.md deleted file mode 100644 index 2268fc1bd6..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-007.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e4 -title: Part 7 -challengeType: 0 -dashedName: part-7 ---- - -# --description-- - -Next, target the `dashboard` class you created and give it a `width` of `980px` and a `height` of `500px`. - -# --hints-- - -test-text - -```js -const dashboard = $('.dashboard'); -assert( - dashboard.css('width') === '980px' && dashboard.css('height') === '500px' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-008.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-008.md deleted file mode 100644 index 6b8e174e01..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-008.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e5 -title: Part 8 -challengeType: 0 -dashedName: part-8 ---- - -# --description-- - -Give the dashboard a `background-color` of `white` and a `box-shadow` of `5px 5px 5px 5px #888` to give it a little depth. - -# --hints-- - -test-text - -```js -const dashboard = $('.dashboard'); -assert( - dashboard.css('background-color') === 'rgb(255, 255, 255)' && - dashboard.css('box-shadow') === 'rgb(136, 136, 136) 5px 5px 5px 5px' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-009.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-009.md deleted file mode 100644 index 210943e452..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-009.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e6 -title: Part 9 -challengeType: 0 -dashedName: part-9 ---- - -# --description-- - -Now you can see your dashboard element. Center it by adding a `margin` of `auto` to it. - -# --hints-- - -test-text - -```js -const dashboard = code.match(/.dashboard\s*{[\s\S]+?[^}]}/g)[0]; -assert(/margin\s*:\s*auto\s*(;|})/g.test(dashboard)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-010.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-010.md deleted file mode 100644 index 2144211195..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-010.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e7 -title: Part 10 -challengeType: 0 -dashedName: part-10 ---- - -# --description-- - -Give the container some space by adding a `padding` of `100px 10px` to the `body` element. - -# --hints-- - -test-text - -```js -const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; -assert(/padding\s*:\s*100px\s*10px\s*(;|})/g.test(body)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-011.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-011.md deleted file mode 100644 index 511106ee13..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-011.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e8 -title: Part 11 -challengeType: 0 -dashedName: part-11 ---- - -# --description-- - -Later on, you will be adding more elements to the dashboard container. Set the `display` to `flex` and the `align-items` to `center` so those items will be vertically centered. - -# --hints-- - -test-text - -```js -const dashboard = $('.dashboard'); -assert( - dashboard.css('display') === 'flex' && - dashboard.css('align-items') === 'center' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-012.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-012.md deleted file mode 100644 index 18c1bd58cf..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-012.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e9 -title: Part 12 -challengeType: 0 -dashedName: part-12 ---- - -# --description-- - -Back in the HTML file, add a `script` tag at the bottom of the head element and give it a `src` attribute of `./d3-5.9.2.min.js`. Don't forget the closing tag. This will add the D3 library to your project from a downloaded copy. - -# --hints-- - -test-text - -```js -const script = code.match(/]>\s*<\/script\s*>/gi)[0]; -assert(/src\s*=\s*('|")\s*(\.\/)?d3-5.9.2.min.js\s*\1/gi.test(script)); -``` - -# --seed-- - -## --before-user-code-- - -```html - -``` - -## --seed-contents-- - -```html - - - - D3 Dashboard - - - - - - -
- - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - - - -
- - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-013.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-013.md deleted file mode 100644 index d37a6a0bd4..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-013.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ea -title: Part 13 -challengeType: 0 -dashedName: part-13 ---- - -# --description-- - -Add another `script` below the one you just added. Give it a `src` attribute of `./data.js`. - -This adds a `data` variable to your project that contains your number of social media followers, it is an array of objects. Each object has the year and your followers for three different platforms. You will see what it looks like shortly. - -# --hints-- - -test-text - -```js -const script = code.match(/]>\s*<\/script\s*>/gi)[1]; -assert(/src\s*=\s*('|")\s*(\.\/)?data.js\s*\1/gi.test(script)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - - - - D3 Dashboard - - - - - - - -
- - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - - -
- - - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-014.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-014.md deleted file mode 100644 index 97d9c04dfa..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-014.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9eb -title: Part 14 -challengeType: 0 -dashedName: part-14 ---- - -# --description-- - -Add a third script just before the closing body tag. It will be the JavaScript file you will use to create the rest of the dashboard. Give the script a `src` of `./dashboard.js`. - -# --hints-- - -test-text - -```js -const script = code.match(/]>\s*<\/script\s*>/gi)[2]; -assert(/src\s*=\s*('|")\s*(\.\/)?dashboard.js\s*\1/gi.test(script)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - - - - D3 Dashboard - - - - - - -
- - - - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - - -
- - - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-015.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-015.md deleted file mode 100644 index fe6efc7f29..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-015.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ec -title: Part 15 -challengeType: 0 -dashedName: part-15 ---- - -# --description-- - -The script at the top is the `data.js` file you added. I have placed it here so you can see the data and recommend taking a look at it. The second script is the one you just added and where you will build the rest of the project. - -In the second script, create three `const` variables; `svgMargin` with a value of `70`, `svgWidth` with a value of `700`, and `svgHeight` equal to `500`. The first part of the dashboard will be a line graph. It will use these variables as its dimensions. - -The line graph will have the years from your data variable across the bottom, and a scale on the left to show the numbers of followers. Each platform will have a line going across the graph that shows how many followers you had for each year. - -# --hints-- - -test-text - -```js -assert(svgMargin === 70 && svgWidth === 700 && svgHeight === 500); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-016.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-016.md deleted file mode 100644 index 6926b11aee..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-016.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ed -title: Part 16 -challengeType: 0 -dashedName: part-16 ---- - -# --description-- - -Add three more variables; `twitterColor` with a value of `#7cd9d1`, `tumblrColor` equal to `#f6dd71`, and `instagramColor` at `#fd9b98`. Make sure those Hex values are strings. These will be colors used to represent the different platforms throughout the project. - -# --hints-- - -test-text - -```js -assert( - twitterColor === '#7cd9d1' && - tumblrColor === '#f6dd71' && - instagramColor === '#fd9b98' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-017.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-017.md deleted file mode 100644 index 82a2efd50c..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-017.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ee -title: Part 17 -challengeType: 0 -dashedName: part-17 ---- - -# --description-- - -When you added the D3 library earlier, it put an object named `d3` in your project with a bunch of functions. One of them is `select`; you can use dot notation to access this and the other functions from the object. Create a new variable named `lineGraph` and use `d3.select` to select the `.dashboard` element. Here's an example of something similar: - -```js -const variableName = d3.select('.className') -``` - -# --hints-- - -test-text - -```js -assert(lineGraph._groups[0][0] === $('.dashboard')[0]); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-018.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-018.md deleted file mode 100644 index d358d508c9..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-018.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ef -title: Part 18 -challengeType: 0 -dashedName: part-18 ---- - -# --description-- - -Your dashboard element is now "selected". D3 has a number of functions for working with a selection; one of them is `append`. It is used to add an element. Chain the `append` function to your selection and use it to add an `svg` element. Here's an example of how that might be done: - -```js -const variableName = d3.select('selectedElement') - .append('elementToAdd') -``` - -# --hints-- - -test-text - -```js -assert(lineGraph._groups[0][0] === $('svg')[0]); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-019.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-019.md deleted file mode 100644 index d55cc0b777..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-019.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f0 -title: Part 19 -challengeType: 0 -dashedName: part-19 ---- - -# --description-- - -You can't see it, but there is now an `svg` element nested in your dashboard container. When you appended it, it became the "selection" for this area of code. Any functions you chain after it will be used on this selection. - -`attr` is a function to set attributes. You need to pass it the attribute you want to set, and the value you want to give it. Here's an example of how to chain `attr` to a selection: - -```js -const variableName = d3.select('element') - .append('element') - .attr('attribute', 'value') -``` - -Chain an `attr` function to the selection that sets the `width` as the `svgWidth` variable you created earlier. When using a variable as a value, you do not need to put it in any kind of quotations. - -# --hints-- - -test-text - -```js -assert($('svg')[0].attributes.width.value === '700'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-020.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-020.md deleted file mode 100644 index 73034422e9..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-020.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f1 -title: Part 20 -challengeType: 0 -dashedName: part-20 ---- - -# --description-- - -Chain another `attr` function that sets the `height` as the `svgHeight` variable you created. - -# --hints-- - -test-text - -```js -assert($('svg')[0].attributes.height.value === '500'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-021.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-021.md deleted file mode 100644 index ad1b8a3e0a..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-021.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f2 -title: Part 21 -challengeType: 0 -dashedName: part-21 ---- - -# --description-- - -Your line graph needs some scales so it knows how to translate the data into visual distances. The first one is the scale for the y-axis. It will be to show the number of followers. D3 has many utilities for creating scales. You want to use it's `scaleLinear` method for this scale. - -Create a new `const` named `yScale`, and set it equal to `d3.scaleLinear()`. - -# --hints-- - -test-text - -```js -assert( - typeof yScale === 'function' && /yScale\s*=\s*d3\.scaleLinear/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-022.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-022.md deleted file mode 100644 index 65b5d9a684..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-022.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f3 -title: Part 22 -challengeType: 0 -dashedName: part-22 ---- - -# --description-- - -D3 has a bunch of functions for working with scales as well. One of them is `domain`. It takes an array that is used to describe the highest and lowest values of the data for this scale. After a quick look at the data, the values of the "followers" go from about 0 to 5000. Chain the `domain` function to the `yScale` and pass it the array `[0, 5000]`. - -# --hints-- - -test-text - -```js -const domain = yScale.domain(); -assert(domain.length === 2 && domain[0] === 0 && domain[1] === 5000); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-023.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-023.md deleted file mode 100644 index fef2d72f1b..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-023.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f4 -title: Part 23 -challengeType: 0 -dashedName: part-23 ---- - -# --description-- - -The `range` function describes how to map the domain values for display on the graph. For example, a value of 5000 followers can't use 5000 as it y-coordinate on the SVG or it would be off the graph. You need to tell the range where the top and bottom of the graph is so the scale can give appropriate values for the y-coordinate. - -Chain the `range` function below the `domain` and pass it an array with `svgHeight - svgMargin` and `svgMargin` as the values. That will translate to `[430, 70]`. This is where the top and bottom of the graph are. So a data point of 5000 followers will map to a value of 430 to use as its y-coordinate and 0 followers will use 70 as its y-coordinate. Any value in between will scale linearly. - -Your graph will have a margin around it for things like axes and labels. The actual line data will display on the inside of this margin area, which is why you use those values. This will become more clear as you progress through the project. - -# --hints-- - -test-text - -```js -const range = yScale.range(); -assert(range.length === 2 && range[0] === 430 && range[1] === 70); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-024.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-024.md deleted file mode 100644 index 1cbbe6313f..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-024.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f5 -title: Part 24 -challengeType: 0 -dashedName: part-24 ---- - -# --description-- - -Create a new `const` named `xScale`. Use it to create another linear scale like you did for the y-scale. This will be the horizontal or "x" axis. - -# --hints-- - -test-text - -```js -assert( - typeof xScale === 'function' && /xScale\s*=\s*d3\.scaleLinear/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-025.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-025.md deleted file mode 100644 index 3d66e7f8c2..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-025.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f6 -title: Part 25 -challengeType: 0 -dashedName: part-25 ---- - -# --description-- - -The `year` values of your data will be used for the x-scale. Chain the `domain` function to `xScale` and pass it an array with the first and last years of your data. - -# --hints-- - -test-text - -```js -const domain = xScale.domain(); -assert(domain.length === 2 && domain[0] === 2012 && domain[1] === 2020); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-026.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-026.md deleted file mode 100644 index 339cb6906b..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-026.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f7 -title: Part 26 -challengeType: 0 -dashedName: part-26 ---- - -# --description-- - -The range for this scale will go from the left of your graph to the right, with 2012 on the left and 2020 on the right. Add the `range` function to the `xScale` and pass it an array with the values: `svgMargin` and `svgWidth - svgMargin`. This will translate to `[70, 630]`. So 2012 will use 70 as is x-coordinate and 2020 will use 630 as its x-coordinate. - -# --hints-- - -test-text - -```js -const range = xScale.range(); -assert(range.length === 2 && range[0] === 70 && range[1] === 630); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-027.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-027.md deleted file mode 100644 index 022abdca4b..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-027.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f8 -title: Part 27 -challengeType: 0 -dashedName: part-27 ---- - -# --description-- - -The two scales you defined will be used to create the axes and lines. First is the y-axis, it will be a line with some labels on the left of the graph. Create a new `const` named `yAxis` and set it equal to `d3.axisLeft(yScale)`. This will use the information from the `yScale` variable to build the axis. - -# --hints-- - -test-text - -```js -assert( - typeof yAxis === 'function' && - /yAxis\s*=\s*d3\.axisLeft\(\s*yScale\)/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-028.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-028.md deleted file mode 100644 index 4fbb726a6e..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-028.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f9 -title: Part 28 -challengeType: 0 -dashedName: part-28 ---- - -# --description-- - -Create a new `const` named `xAxis` and set the value equal to `d3.axisBottom(xScale)`. This will create another axis for the bottom of the graph using the information from `xScale`. Although the axes do not display yet, they have the information they need to display correctly. - -# --hints-- - -test-text - -```js -assert( - typeof xAxis === 'function' && - /xAxis\s*=\s*d3\.axisBottom\(\s*xScale\)/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-029.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-029.md deleted file mode 100644 index cf95b345c5..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-029.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9fa -title: Part 29 -challengeType: 0 -dashedName: part-29 ---- - -# --description-- - -On a new line, append a new `g` element to your `lineGraph` variable. `lineGraph.append('g')` will do that for you. This will add a `g` to your SVG and be for displaying the y-axis. `g` is an SVG element that stands for "group". - -# --hints-- - -test-text - -```js -assert($('svg')[0].children[0] === $('g')[0] && $('g').length === 1); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-030.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-030.md deleted file mode 100644 index 2ff020ff1a..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-030.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9fb -title: Part 30 -challengeType: 0 -dashedName: part-30 ---- - -# --description-- - -`call` is another function to use with selections. Chain a `call` function to the selection and pass your `yAxis` variable to it. This will draw your y-axis on the SVG. - -# --hints-- - -test-text - -```js -assert($('.tick').length === 11 && /\.call\(\s*yAxis\s*\)/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-031.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-031.md deleted file mode 100644 index d5d5ea704c..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-031.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9fc -title: Part 31 -challengeType: 0 -dashedName: part-31 ---- - -# --description-- - -After all that work, something is finally displayed on the graph. It's the y-axis and all the numbers are hidden on the left. - -Move the axis your `svgMargin` to the right by chaining an `attr` function to the selection. Use it to set the `transform` to `translate(${svgMargin}, 0)`. Use a template literal (backticks) to set the value so you can put your variable in there. - -# --hints-- - -test-text - -```js -assert($('g')[0].attributes.transform.nodeValue === 'translate(70, 0)'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-032.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-032.md deleted file mode 100644 index 75ba3f4f93..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-032.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9fd -title: Part 32 -challengeType: 0 -dashedName: part-32 ---- - -# --description-- - -`style` is a function similar to `attr`, but is more for manipulating CSS styles rather than element attributes. Add a `style` function to the selection that sets the `font` to `10px verdana`. - -# --hints-- - -test-text - -```js -assert($('g')[0].attributes.style.nodeValue === 'font: 10px verdana;'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-033.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-033.md deleted file mode 100644 index acb146f6fd..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-033.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9fe -title: Part 33 -challengeType: 0 -dashedName: part-33 ---- - -# --description-- - -On a new line, append another `g` element to your `lineGraph` variable like you did before. This one will be for the x-axis. - -# --hints-- - -test-text - -```js -assert($('g').length === 13); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-034.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-034.md deleted file mode 100644 index 16484edb39..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-034.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ff -title: Part 34 -challengeType: 0 -dashedName: part-34 ---- - -# --description-- - -Use the `call` function to draw the x-axis onto the SVG like you did for the y-axis. - -# --hints-- - -test-text - -```js -assert($('g').length === 22); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-035.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-035.md deleted file mode 100644 index 9bf085e53a..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-035.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca00 -title: Part 35 -challengeType: 0 -dashedName: part-35 ---- - -# --description-- - -The axis has the right size and labels, but needs to be moved down. Use the `attr` function to set the `transform` like you did before. This time move it down your `svgHeight` minus the `svgMargin`. - -# --hints-- - -test-text - -```js -assert($('svg > g')[1].attributes.transform.nodeValue === 'translate(0, 430)'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-036.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-036.md deleted file mode 100644 index 195a51db40..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-036.md +++ /dev/null @@ -1,168 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca01 -title: Part 36 -challengeType: 0 -dashedName: part-36 ---- - -# --description-- - -The axis labels are `text` elements within the `g`, you can use the `selectAll` function to select them. Chain the `selectAll` function to select the `text` elements in this group. You can do that like this: - -```js -.selectAll('element') -``` - -# --hints-- - -test-text - -```js -assert( - /\.attr\('transform', `translate\(0, \$\{svgHeight - svgMargin\}\)`\)\s*\.selectAll\s*\(\s*('|"|`)text\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-037.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-037.md deleted file mode 100644 index 0b758f6fc0..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-037.md +++ /dev/null @@ -1,168 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca02 -title: Part 37 -challengeType: 0 -dashedName: part-37 ---- - -# --description-- - -I want the text elements to be rotated slightly. Chain the `style` function to set the `transform` to `translate(-12px, 0) rotate(-50deg)`. This will put them at an angle. - -# --hints-- - -test-text - -```js -assert( - $('.tick > text').filter( - (node, index) => - index.style.transform === 'translate(-12px) rotate(-50deg)' || - index.style.transform === 'translate(-12px, 0px) rotate(-50deg)' - ).length === 9 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-038.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-038.md deleted file mode 100644 index 5322ee5fe7..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-038.md +++ /dev/null @@ -1,168 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca03 -title: Part 38 -challengeType: 0 -dashedName: part-38 ---- - -# --description-- - -Add another `style` function to set the `text-anchor` to `end`. This will change the spot that each text element rotates around to the `end` of the element so they will align better. - -# --hints-- - -test-text - -```js -assert( - $('.tick > text').filter( - (node, index) => index.style['text-anchor'] === 'end' - ).length === 9 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-039.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-039.md deleted file mode 100644 index 93a1681382..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-039.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca04 -title: Part 39 -challengeType: 0 -dashedName: part-39 ---- - -# --description-- - -Add two more `style` functions; one to set the `cursor` to `pointer`, and another to set the `font` to `10px verdana`. - -You will add some hover effects later, so the pointer will make for a better experience. - -# --hints-- - -test-text - -```js -assert( - $('.tick > text').filter( - (node, index) => - index.style.cursor === 'pointer' && index.style.font === '10px verdana' - ).length === 9 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-040.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-040.md deleted file mode 100644 index ff7ddccaef..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-040.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca05 -title: Part 40 -challengeType: 0 -dashedName: part-40 ---- - -# --description-- - -There are a number of D3 functions to work with how the "ticks" or your axis labels are displayed; one of them is `ticks`. Go back to where you defined the `yAxis` variable and chain a `ticks` function to it and pass it these two arguments: `6, '~s'`. - -The `6` will set the number of ticks used to 6, and the `~s` will make the labels display the number of thousands followed by a `k`. For example, `4000` will become `4k`. - -# --hints-- - -test-text - -```js -const ticks = $('.tick > text'); -assert( - ticks[0].innerHTML === '0k' && - ticks[1].innerHTML === '1k' && - ticks[2].innerHTML === '2k' && - ticks[3].innerHTML === '3k' && - ticks[4].innerHTML === '4k' && - ticks[5].innerHTML === '5k' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-041.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-041.md deleted file mode 100644 index a0d2f25c86..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-041.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca06 -title: Part 41 -challengeType: 0 -dashedName: part-41 ---- - -# --description-- - -Go back to where you defined your `xAis` variable and chain the `tickFormat` function to it. Pass it `d3.format('')`. This will remove the commas in the year labels of the x-axis. - -# --hints-- - -test-text - -```js -const ticks = $('.tick > text'); -assert(ticks[6].innerHTML === '2012' && ticks[14].innerHTML === '2020'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-042.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-042.md deleted file mode 100644 index 0c55ad53c2..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-042.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca07 -title: Part 42 -challengeType: 0 -dashedName: part-42 ---- - -# --description-- - -In the same spot, chain the `tickPadding` function to the `xAxis` and pass it `10`. This will add a little padding to the ticks so the labels are better aligned. - -# --hints-- - -test-text - -```js -assert( - /\.tickFormat\(d3\.format\((''\)\)\s*\.tickPadding\s*\(\s*10\s*\))/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-043.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-043.md deleted file mode 100644 index 383f6dd20f..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-043.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca08 -title: Part 43 -challengeType: 0 -dashedName: part-43 ---- - -# --description-- - -The axes and labels are looking good. Next, you will start to add some of the lines for the data. First is the line for the Twitter data. On a new line, create a new `const` named `twitterLine` and set it equal to `d3.line()`. `line` is a D3 function for creating a line. - -# --hints-- - -test-text - -```js -assert(/const\s*twitterLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-044.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-044.md deleted file mode 100644 index d72f1948ae..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-044.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca09 -title: Part 44 -challengeType: 0 -dashedName: part-44 ---- - -# --description-- - -The line needs x and y values for each point of data. Chain `x` to the line and pass it a "d function". Here's how that will look: - -```js -.x(d => d.year) -``` - -You will be passing your `data` array to this line function, where it will go through each item in the array(`d`) and create an x value based on the year(`d.year`). - -This is the first place you have seen a "d function". These are common in D3 and that is how I will refer to them throughout this project. - -# --hints-- - -test-text - -```js -assert( - /const twitterLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*d\.year\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-045.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-045.md deleted file mode 100644 index 260d37d795..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-045.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0a -title: Part 45 -challengeType: 0 -dashedName: part-45 ---- - -# --description-- - -Instead of simply using the year(`d.year`) for the x-coordinate, you need to pass each year to the `xScale` so it can set the appropriate coordinate based on your scale. - -In the "d function" you created, return `xScale(d.year)` instead of `d.year`. - -# --hints-- - -test-text - -```js -assert(/\.x\s*\(d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-046.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-046.md deleted file mode 100644 index 89137d7597..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-046.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0b -title: Part 46 -challengeType: 0 -dashedName: part-46 ---- - -# --description-- - -Chain the `y` function to the line and pass it a "d function" that returns your `yScale` with `d.followers.twitter` as its argument. - -This is similar to how you set the x values. It will use the values of your Twitter followers and your `yScale` to set the y coordinate for each item. - -These "d functions" use implicit returns. But if you add curly brackets and a return statement, you can put any JavaScript in there that you want. Including `console.log` statements that can be useful for debugging. - -# --hints-- - -test-text - -```js -assert( - /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.twitter\s*\)\s*\)/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-047.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-047.md deleted file mode 100644 index 07e8df9e86..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-047.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0c -title: Part 47 -challengeType: 0 -dashedName: part-47 ---- - -# --description-- - -The first line is created and ready to be displayed, which will take a couple steps. On a new line, `append` a `path` element to your `lineGraph` variable. This is similar to how you appended the `g` before. - -# --hints-- - -test-text - -```js -assert( - $('svg path').length === 3 && - /lineGraph\.append\((`|'|")path\1\)/gi.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-048.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-048.md deleted file mode 100644 index ec0cb07a7c..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-048.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0d -title: Part 48 -challengeType: 0 -dashedName: part-48 ---- - -# --description-- - -Tell the path what data to use. Add an `attr` function and set the `d` to `twitterLine(data)`. This will the build the path using the `twitterLine` function you created and your data variable. - -Note that the `d` in this case is a path attribute for drawing a line and is different from a "d function". - -After you have added your code, take a look at the data flow to help understand what is happening. You pass the data array to your `twitterLine` function where it sets the x and y values using your "d functions". The "d functions" go through each item in the array, passing part of the item to each scale to find the appropriate coordinates. When it's done, the value you are setting here is created and sent back. The result ends up being a confusing string of numbers and coordinates to tell the path how to be drawn. - -# --hints-- - -test-text - -```js -assert($('svg path')[2].getAttribute('d').length === 151); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-049.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-049.md deleted file mode 100644 index 780407ba26..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-049.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0e -title: Part 49 -challengeType: 0 -dashedName: part-49 ---- - -# --description-- - -Add three more `attr` functions to the path; one to set the `stroke` to your `twitterColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`. - -# --hints-- - -test-text - -```js -const twitterPath = $('svg path')[2]; -assert( - twitterPath.getAttribute('stroke') === '#7cd9d1' && - twitterPath.getAttribute('stroke-width') == '3' && - twitterPath.getAttribute('fill') === 'transparent' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-050.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-050.md deleted file mode 100644 index 48465e56c8..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-050.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0f -title: Part 50 -challengeType: 0 -dashedName: part-50 ---- - -# --description-- - -On a new line, create a new `const` named `tumblrLine` and set it equal to `d3.line()`. - -# --hints-- - -test-text - -```js -assert(/const\s*tumblrLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-051.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-051.md deleted file mode 100644 index f648e20fdc..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-051.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca10 -title: Part 51 -challengeType: 0 -dashedName: part-51 ---- - -# --description-- - -Set the `x` values for `tumblrLine` using another "d function". Use your `xScale` and the `d.year` to calculcate their values just like you did for the Twitter line. - -# --hints-- - -test-text - -```js -assert( - /const tumblrLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-052.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-052.md deleted file mode 100644 index 10547d63c1..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-052.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca11 -title: Part 52 -challengeType: 0 -dashedName: part-52 ---- - -# --description-- - -Set the `y` values for `tumblrLine` using a "d function" again. Use your `yScale` and `d.followers.tumblr` to calculcate their values just like you did for the Twitter line. - -The x values for each line will be the same, but the y values will use the data from the different platforms. - -# --hints-- - -test-text - -```js -assert( - /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.tumblr\s*\)\s*\)/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-053.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-053.md deleted file mode 100644 index 88f5b9b4ce..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-053.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca12 -title: Part 53 -challengeType: 0 -dashedName: part-53 ---- - -# --description-- - -On a new line, `append` a `path` element to the `lineGraph` variable. This one will be for displaying the `tumblrLine`. - -# --hints-- - -test-text - -```js -assert( - $('svg path').length === 4 && - code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 2 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-054.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-054.md deleted file mode 100644 index 5e0ecb4239..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-054.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca13 -title: Part 54 -challengeType: 0 -dashedName: part-54 ---- - -# --description-- - -Tell the new path how to be drawn by setting the `d` attribute to `tumblrLine(data)` using the `attr` function. - -# --hints-- - -test-text - -```js -assert($('svg path')[3].getAttribute('d').length === 115); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-055.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-055.md deleted file mode 100644 index 69e492e771..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-055.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca14 -title: Part 55 -challengeType: 0 -dashedName: part-55 ---- - -# --description-- - -Add three `attr` functions to the selection; one to set the `stroke` to your `tumblrColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`. - -# --hints-- - -test-text - -```js -const tumblrPath = $('svg path')[3]; -assert( - tumblrPath.getAttribute('stroke') === '#f6dd71' && - tumblrPath.getAttribute('stroke-width') == '3' && - tumblrPath.getAttribute('fill') === 'transparent' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-056.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-056.md deleted file mode 100644 index 49da077e90..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-056.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca15 -title: Part 56 -challengeType: 0 -dashedName: part-56 ---- - -# --description-- - -Two lines down, only one more to add for the Instagram followers. On a new line, create a new `const` named `instagramLine` and use the D3 `line` function to create another line like you did for the other two. - -# --hints-- - -test-text - -```js -assert(/const\s*instagramLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-057.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-057.md deleted file mode 100644 index 5a0a51555b..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-057.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca16 -title: Part 57 -challengeType: 0 -dashedName: part-57 ---- - -# --description-- - -Appropriately set the `x` values for `instagramLine` like you did for the other two lines. - -# --hints-- - -test-text - -```js -assert( - /const instagramLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-058.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-058.md deleted file mode 100644 index 66f4ae49a3..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-058.md +++ /dev/null @@ -1,229 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca17 -title: Part 58 -challengeType: 0 -dashedName: part-58 ---- - -# --description-- - -Appropriately set the `y` values for `instagramLine` like you did for the other two lines. Use the Instagram followers data this time. - -# --hints-- - -test-text - -```js -assert( - /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.instagram\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-059.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-059.md deleted file mode 100644 index b30967efed..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-059.md +++ /dev/null @@ -1,231 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca18 -title: Part 59 -challengeType: 0 -dashedName: part-59 ---- - -# --description-- - -On a new line, `append` a new `path` for the Instagram line like you did for the other two lines. - -# --hints-- - -test-text - -```js -assert( - $('svg path').length === 5 && - code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 3 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-060.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-060.md deleted file mode 100644 index 1d1a2461c9..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-060.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca19 -title: Part 60 -challengeType: 0 -dashedName: part-60 ---- - -# --description-- - -Use your `instagramLine` variable and your data to set the `d` attribute for this path like you did for the other two. - -# --hints-- - -test-text - -```js -assert($('svg path')[4].getAttribute('d').length === 171); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-061.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-061.md deleted file mode 100644 index 78de28a793..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-061.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1a -title: Part 61 -challengeType: 0 -dashedName: part-61 ---- - -# --description-- - -Set the `stroke`, `stroke-width`, and `fill` attributes to their appropriate values for this line. The `stroke-width` and `fill` are the same as the other two. - -# --hints-- - -test-text - -```js -const instagramPath = $('svg path')[4]; -assert( - instagramPath.getAttribute('stroke') === '#fd9b98' && - instagramPath.getAttribute('stroke-width') == '3' && - instagramPath.getAttribute('fill') === 'transparent' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-062.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-062.md deleted file mode 100644 index 72e1323994..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-062.md +++ /dev/null @@ -1,247 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1b -title: Part 62 -challengeType: 0 -dashedName: part-62 ---- - -# --description-- - -Okay, your graph is coming along. All the lines are drawn, but they look a little plain. The next series of code additions will add circles to each point on each line. First is the Twitter line. On a new line, use the `selectAll` function on your `lineGraph` variable and pass it the string `twitter-circles`. It will look like this: - -```js -lineGraph.selectAll('twitter-circles') -``` - -`twitter-circles` don't exist and this selection will be an empty array, but it's needed. For now, you can just think of this string as a reference, similar to a variable name, so you know what elements you are working with. - -# --hints-- - -test-text - -```js -assert( - /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*twitter-circles\1\s*\)/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-063.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-063.md deleted file mode 100644 index c09620b08b..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-063.md +++ /dev/null @@ -1,246 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1c -title: Part 63 -challengeType: 0 -dashedName: part-63 ---- - -# --description-- - -Add the D3 `data` function to your selection and pass it the data array like this: - -```js -.data(data) -``` - -# --hints-- - -test-text - -```js -assert(/\.data\s*\(\s*data\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-064.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-064.md deleted file mode 100644 index ec2fac2892..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-064.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1d -title: Part 64 -challengeType: 0 -dashedName: part-64 ---- - -# --description-- - -Next, chain the `enter()` function to the selection. - -The enter function identifies elements that need to be added when the data array is longer than the selection array. This is why you wanted the `selectAll` to be an empty array before. - -In this case, the `twitter-circles` selection has a length of 0, and the data array has a length of 9. So nine elements will be added when you use `append` in the next step. - -# --hints-- - -test-text - -```js -assert(/\.data\(data\)\s*\.enter\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-065.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-065.md deleted file mode 100644 index 8edf0ab0b8..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-065.md +++ /dev/null @@ -1,246 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1e -title: Part 65 -challengeType: 0 -dashedName: part-65 ---- - -# --description-- - -Add the `append` function to the selection, and use it to add `circle` elements. This will add the nine `circle` elements for your Twitter circles. They will be invisible to start, but the elements are there. - -# --hints-- - -test-text - -```js -assert($('svg circle').length === 9); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-066.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-066.md deleted file mode 100644 index 81dd24789e..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-066.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1f -title: Part 66 -challengeType: 0 -dashedName: part-66 ---- - -# --description-- - -Each circle needs a `cx` and `cy` attribute so it knows where to display on the SVG. These are similar to the x and y coordinates for the lines and will be calculated in the same way. The difference is that, for circles, the `cx` and `cy` are attributes, so you need to use the `attr` function. - -Use the `attr` function to set the `cx` to `d => xScale(d.year)`. - -# --hints-- - -test-text - -```js -assert($('svg circle')[0].getAttribute('cx') == '70'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-067.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-067.md deleted file mode 100644 index c3828efd81..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-067.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca20 -title: Part 67 -challengeType: 0 -dashedName: part-67 ---- - -# --description-- - -Next, set the `cy` attribute to `d => xScale(d.followers.twitter)`. - -As a reminder, this will pass each value of your Twitter followers to the `xScale` function where it will determine the y coordinate to use. - -# --hints-- - -test-text - -```js -assert($('svg circle')[0].getAttribute('cy') == '243.232'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-068.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-068.md deleted file mode 100644 index 3d5c6c2bc9..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-068.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca21 -title: Part 68 -challengeType: 0 -dashedName: part-68 ---- - -# --description-- - -Circles also need an `r` (radius) attribute so they know how big to be. Use the `attr` function to set the `r` to `6`. - -# --hints-- - -test-text - -```js -assert($('svg circle')[0].getAttribute('r') == '6'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-069.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-069.md deleted file mode 100644 index 20564296fd..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-069.md +++ /dev/null @@ -1,258 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca22 -title: Part 69 -challengeType: 0 -dashedName: part-69 ---- - -# --description-- - -The circles are now visible, but I don't like the color. Use the appropriate function to set the `fill` to `white` and the `stroke` to your `twitterColor` variable. - -# --hints-- - -test-text - -```js -assert( - $('svg circle')[0].getAttribute('fill') === 'white' && - $('svg circle')[0].getAttribute('stroke') === '#7cd9d1' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-070.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-070.md deleted file mode 100644 index 42f78cc15b..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-070.md +++ /dev/null @@ -1,258 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca23 -title: Part 70 -challengeType: 0 -dashedName: part-70 ---- - -# --description-- - -Use the `style` function to set the `cursor` to `pointer`. Like your year labels, this will be an indicator for a hover effect you will add later. - -# --hints-- - -test-text - -```js -assert($('svg circle')[0].style.cursor === 'pointer'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-071.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-071.md deleted file mode 100644 index 56f09feeba..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-071.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca24 -title: Part 71 -challengeType: 0 -dashedName: part-71 ---- - -# --description-- - -On a new line, use the `selectAll` function on your `lineGraph` variable again and pass it the string `tumblr-circles` this time. The next few steps will be for adding circles to the Tumblr line. - -# --hints-- - -test-text - -```js -assert( - /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*tumblr-circles\1\s*\)/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-072.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-072.md deleted file mode 100644 index 3161f8adfb..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-072.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca25 -title: Part 72 -challengeType: 0 -dashedName: part-72 ---- - -# --description-- - -Add the same `data`, `enter`, and `append` functions here that you added for the `twitter-circles`, passing in the same arguments. Make sure they are in the same order. - -Remember that this will take the difference in length between the `tumblr-circles` selection(0) and the data array(9) and append that many circle elements. - -# --hints-- - -test-text - -```js -assert($('svg circle').length === 18); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-073.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-073.md deleted file mode 100644 index 1f860b9f0f..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-073.md +++ /dev/null @@ -1,274 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca26 -title: Part 73 -challengeType: 0 -dashedName: part-73 ---- - -# --description-- - -Set the `cx` and `cy` attributes for the Tumblr circles to their appropriate values. - -# --hints-- - -test-text - -```js -assert( - $('svg circle')[9].getAttribute('cx') == '70' && - $('svg circle')[9].getAttribute('cy') == '401.128' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-074.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-074.md deleted file mode 100644 index c84eb37bed..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-074.md +++ /dev/null @@ -1,280 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca27 -title: Part 74 -challengeType: 0 -dashedName: part-74 ---- - -# --description-- - -Use the `attr` function to set the `r` to `6`, the `fill` to `white`, and the `stroke` to your `tumblrColor` variable. - -# --hints-- - -test-text - -```js -assert( - $('svg circle')[9].getAttribute('r') == '6' && - $('svg circle')[9].getAttribute('fill') === 'white' && - $('svg circle')[9].getAttribute('stroke') === '#f6dd71' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-075.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-075.md deleted file mode 100644 index 72c22fb688..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-075.md +++ /dev/null @@ -1,280 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca28 -title: Part 75 -challengeType: 0 -dashedName: part-75 ---- - -# --description-- - -Set the `cursor` to `pointer` using the `style` function. - -# --hints-- - -test-text - -```js -assert($('svg circle')[9].style.cursor === 'pointer'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-076.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-076.md deleted file mode 100644 index 5840013fba..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-076.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca29 -title: Part 76 -challengeType: 0 -dashedName: part-76 ---- - -# --description-- - -The circles have been added to two of the lines and look good, on to the last one. On a new line, create another empty selection like you did before. Use the string: `instagram-circles` this time. - -# --hints-- - -test-text - -```js -assert( - /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*instagram-circles\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-077.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-077.md deleted file mode 100644 index 038b25fe6f..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-077.md +++ /dev/null @@ -1,288 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2a -title: Part 77 -challengeType: 0 -dashedName: part-77 ---- - -# --description-- - -Add the three functions necessary to append the new circle elements. Remember that they won't actually be visible yet. - -# --hints-- - -test-text - -```js -assert($('svg circle').length === 27); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-078.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-078.md deleted file mode 100644 index 37dfd3a218..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-078.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2b -title: Part 78 -challengeType: 0 -dashedName: part-78 ---- - -# --description-- - -Appropriately set the `cx` and `cy` attributes for the Instagram circles. - -# --hints-- - -test-text - -```js -assert( - $('svg circle')[18].getAttribute('cx') == '70' && - $('svg circle')[18].getAttribute('cy') == '424.024' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-079.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-079.md deleted file mode 100644 index 050c462974..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-079.md +++ /dev/null @@ -1,302 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2c -title: Part 79 -challengeType: 0 -dashedName: part-79 ---- - -# --description-- - -Appropriately set the radius (`r`), `fill`, and `stroke` for these circles. - -# --hints-- - -test-text - -```js -assert( - $('svg circle')[18].getAttribute('r') == '6' && - $('svg circle')[18].getAttribute('fill') === 'white' && - $('svg circle')[18].getAttribute('stroke') === '#fd9b98' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-080.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-080.md deleted file mode 100644 index a5d57e2bdc..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-080.md +++ /dev/null @@ -1,302 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2d -title: Part 80 -challengeType: 0 -dashedName: part-80 ---- - -# --description-- - -Apply the appropriate `cursor` style for these circles. - -# --hints-- - -test-text - -```js -assert($('svg circle')[18].style.cursor === 'pointer'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-081.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-081.md deleted file mode 100644 index 58692f5eb8..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-081.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2e -title: Part 81 -challengeType: 0 -dashedName: part-81 ---- - -# --description-- - -The line graph is looking good. All the empty space to the right will be for the pie graph and legend. Create a new `const` named `rightDashboard` and set equal to `d3.select('.dashboard')`. This will select your dashboard container again which currently only has the SVG element as a child. - -# --hints-- - -test-text - -```js -assert( - /const\s*rightDashboard\s*=\s*d3\.select\s*\((`|'|")\.dashboard\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-082.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-082.md deleted file mode 100644 index 189c7e257e..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-082.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2f -title: Part 82 -challengeType: 0 -dashedName: part-82 ---- - -# --description-- - -Use `append` to add a `div` element to the selection. This will put a div as another child of the dashboard container to hold the pie graph and legend. - -# --hints-- - -test-text - -```js -assert( - /const rightDashboard = d3\.select\((`|'|")\.dashboard\1\)\s*\.append\s*\(\s*(`|'|")div\2\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-083.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-083.md deleted file mode 100644 index 06544d55f4..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-083.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca30 -title: Part 83 -challengeType: 0 -dashedName: part-83 ---- - -# --description-- - -Create a new `const` named `pieGraph` and set it equal to `rightDashboard.append('svg')`. This will add an SVG element for the pie graph as a child of the div you just added. The pie graph will have three slices, one for each platform. It will display a percentage of how many followers each platform has for the displayed year. - -# --hints-- - -test-text - -```js -assert( - /const\s*pieGraph\s*=\s*rightDashboard\s*\.\s*append\s*\((`|'|")svg\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-084.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-084.md deleted file mode 100644 index ff5d59d875..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-084.md +++ /dev/null @@ -1,318 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca31 -title: Part 84 -challengeType: 0 -dashedName: part-84 ---- - -# --description-- - -Add two `attr` functions that set the `width` and `height` of the new SVG to `200`. - -# --hints-- - -test-text - -```js -assert( - $('svg')[1].getAttribute('width') == '200' && - $('svg')[1].getAttribute('height') == '200' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-085.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-085.md deleted file mode 100644 index 254821537e..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-085.md +++ /dev/null @@ -1,319 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca32 -title: Part 85 -challengeType: 0 -dashedName: part-85 ---- - -# --description-- - -Create a new `const` named `pieArc` and set it equal to `d3.arc()`. This will be used to create the angles for the lines of the pie chart using the D3 arc generator. - -# --hints-- - -test-text - -```js -assert(/const\s*pieArc\s*=\s*d3\s*\.\s*arc\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-086.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-086.md deleted file mode 100644 index 24d2528df9..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-086.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca33 -title: Part 86 -challengeType: 0 -dashedName: part-86 ---- - -# --description-- - -Chain the function `outerRadius(100)` to the arc. This will set the outer radius of the pie chart to 100. - -# --hints-- - -test-text - -```js -assert( - /const pieArc = d3\.arc\(\)\s*\.\s*outerRadius\s*\(\s*100\s*\)/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-087.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-087.md deleted file mode 100644 index 158785f17c..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-087.md +++ /dev/null @@ -1,328 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca34 -title: Part 87 -challengeType: 0 -dashedName: part-87 ---- - -# --description-- - -Chain `innerRadius` to the arc and pass it `0` (zero). This is set to zero to make a traditional pie chart, you would use a larger inner radius to create a doughnut chart. - -# --hints-- - -test-text - -```js -assert( - /const pieArc = d3\.arc\(\)\s*\.outerRadius\(100\)\s*\.\s*innerRadius\s*\(\s*0\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-088.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-088.md deleted file mode 100644 index 0374b5d205..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-088.md +++ /dev/null @@ -1,329 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca35 -title: Part 88 -challengeType: 0 -dashedName: part-88 ---- - -# --description-- - -The pie chart needs a new scale to set the colors. Create a new `const` named `pieColors` and set it equal to `d3.scaleOrdinal()`. An ordinal scale is for a set of data that will have exactly one item in the range specifically for it. - -In this case, each platform of followers you have will map directly to a single color with nothing in between. - -# --hints-- - -test-text - -```js -assert(/const\s*pieColors\s*=\s*d3\s*\.\s*scaleOrdinal\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-089.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-089.md deleted file mode 100644 index d370af97db..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-089.md +++ /dev/null @@ -1,334 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca36 -title: Part 89 -challengeType: 0 -dashedName: part-89 ---- - -# --description-- - -Set the `domain` of the scale to `data[8].followers`. This will be three items, one for each platform. - -# --hints-- - -test-text - -```js -assert( - /const pieColors = d3\.scaleOrdinal\(\)\s*\.\s*domain\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-090.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-090.md deleted file mode 100644 index 2ab27a1292..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-090.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca37 -title: Part 90 -challengeType: 0 -dashedName: part-90 ---- - -# --description-- - -Since the domain has three items, the range also needs to have three items. If it had less, the values would repeat, putting the same color on the pie chart multiple times. Add the `range` function to the scale and pass it an array with your three color variables. Put them in the same order in which they are defined. - -# --hints-- - -test-text - -```js -assert( - /\.domain\(data\[8\]\.followers\)\s*\.\s*range\s*\(\s*\[\s*twitterColor\s*,\s*tumblrColor\s*,\s*instagramColor\s*\]\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-091.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-091.md deleted file mode 100644 index ca30c57807..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-091.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca38 -title: Part 91 -challengeType: 0 -dashedName: part-91 ---- - -# --description-- - -Create a new `const` named `pie` and set it equal to `d3.pie()`. This is the D3 pie chart generator. - -# --hints-- - -test-text - -```js -assert(/const\s*pie\s*=\s*d3\s*\.\s*pie\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-092.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-092.md deleted file mode 100644 index 78810ee7c2..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-092.md +++ /dev/null @@ -1,344 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca39 -title: Part 92 -challengeType: 0 -dashedName: part-92 ---- - -# --description-- - -Chain a `value` function to `pie` and pass it `d => d.value`. Each piece of data(`d`) will have a `key`(platform) and a `value`(number of followers), you want to return the number of followers here. The pie function will create an array of objects from these values that describe the angles and sizes the pie chart needs. - -In a few steps, you will make an array out of your data variable that will be passed to this function. - -# --hints-- - -test-text - -```js -assert( - /const pie = d3\.pie\(\)\s*\.\s*value\s*\(\s*d\s*=>\s*d\.value\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-093.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-093.md deleted file mode 100644 index d04e9e9cd4..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-093.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3a -title: Part 93 -challengeType: 0 -dashedName: part-93 ---- - -# --description-- - -Create a new `const` named `pieGraphData` and set the value equal to `pieGraph.selectAll('pieSlices')`. This is an empty selection similar circles you created earlier. - -# --hints-- - -test-text - -```js -assert( - /const\s*pieGraphData\s*=\s*pieGraph\s*\.\s*selectAll\s*\(\s*(`|'|")pieSlices\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-094.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-094.md deleted file mode 100644 index 2f7ab8d169..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-094.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3b -title: Part 94 -challengeType: 0 -dashedName: part-94 ---- - -# --description-- - -Add the `data` function to the selection. Pass it your `pie` function with an empty array as its argument for now. The next step will get the correct array to put there. - -# --hints-- - -test-text - -```js -assert( - /const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*\[\s*\]\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-095.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-095.md deleted file mode 100644 index aa0739df56..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-095.md +++ /dev/null @@ -1,367 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3c -title: Part 95 -challengeType: 0 -dashedName: part-95 ---- - -# --description-- - -You want the array passed to `pie` to be an array of key/value objects for the 2020 followers. `d3.entries` will build that array for you. Here's how that looks: - -```js -d3.entries(data[8].followers)) -``` - -The array it builds looks like this: - -```js -[ - { key: 'twitter', value: 2845 }, - { key: 'tumblr', value: 2040 }, - { key: 'instagram', value: 4801 } -] -``` - -This is where the `value` comes from in your `pie` variable. - -Add the `d3.entries` function as your `pie` argument. Use it to create the above array. - -# --hints-- - -test-text - -```js -assert( - /const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-096.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-096.md deleted file mode 100644 index 9360d253ba..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-096.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3d -title: Part 96 -challengeType: 0 -dashedName: part-96 ---- - -# --description-- - -Add the `enter` function to the current selection. Just like before, the initial selection here has a length of zero and the data has a length of three. So when you append elements in the next step, three will be created; one for each slice of the pie. - -# --hints-- - -test-text - -```js -assert( - /\.data\(pie\(d3\.entries\(data\[8\]\.followers\)\)\)\s*\.\s*enter\s*\(\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-097.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-097.md deleted file mode 100644 index 951024b7ea..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-097.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3e -title: Part 97 -challengeType: 0 -dashedName: part-97 ---- - -# --description-- - -Use `append` to add three `g` elements for the pie. - -# --hints-- - -test-text - -```js -assert($('svg g').length === 20); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-098.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-098.md deleted file mode 100644 index 50c6cb583e..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-098.md +++ /dev/null @@ -1,351 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3f -title: Part 98 -challengeType: 0 -dashedName: part-98 ---- - -# --description-- - -On a new line, `append` a `path` element to your `pieGraphData` variable. This is where you will start to draw the pie chart. - -# --hints-- - -test-text - -```js -assert(/pieGraphData\s*\.\s*append\s*\((`|'|")path\1\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-099.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-099.md deleted file mode 100644 index 8955c72ecd..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-099.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca40 -title: Part 99 -challengeType: 0 -dashedName: part-99 ---- - -# --description-- - -Set the `d` attribute to your `pieArc` variable. Just like the `d` in your lines, this is an SVG attribute for path elements that describes how to draw things. Your `pieArc` variable will determine what this value is for you. - -# --hints-- - -test-text - -```js -assert($('.dashboard div svg path')[0].getAttribute('d').length === 94); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-100.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-100.md deleted file mode 100644 index db5e69b6b2..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-100.md +++ /dev/null @@ -1,372 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca41 -title: Part 100 -challengeType: 0 -dashedName: part-100 ---- - -# --description-- - -The pie graph is being drawn at the `0, 0` coordinates of the SVG. Back on your `pieGraphData` variable, add an attribute that changes the `transform` to `translate(100, 100)`. - -Since the pie chart has a radius of 100, and the SVG is 200 by 200, this will move it so it is centered. - -# --hints-- - -test-text - -```js -const transform = $('.dashboard div svg g')[0].getAttribute('transform'); -assert(/translate\s*\(\s*100\s*,\s*100\s*\)/g.test(transform)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-101.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-101.md deleted file mode 100644 index 016740db33..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-101.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca42 -title: Part 101 -challengeType: 0 -dashedName: part-101 ---- - -# --description-- - -Back at the bottom, where you draw the chart. Use the `attr` function to set the `fill` to a "d function". In the "d function", use your `pieColors` scale to get the color value for the platform(`d.data.key`). So when each platform is passed to your scale, is will get the appropriate color to use as the fill from the scales range. - -# --hints-- - -test-text - -```js -const pathsArr = $('.dashboard div svg g path'); -assert( - pathsArr[0].getAttribute('fill') === '#7cd9d1' && - pathsArr[1].getAttribute('fill') === '#f6dd71' && - pathsArr[2].getAttribute('fill') === '#fd9b98' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-102.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-102.md deleted file mode 100644 index e7d9c7423c..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-102.md +++ /dev/null @@ -1,364 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca43 -title: Part 102 -challengeType: 0 -dashedName: part-102 ---- - -# --description-- - -Next, set the `stroke` to `white` and the `stroke-width` to `2`. - -# --hints-- - -test-text - -```js -const pathsArr = $('.dashboard div svg g path'); -assert( - pathsArr[0].getAttribute('stroke') === 'white' && - pathsArr[0].getAttribute('stroke-width') == 2 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-103.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-103.md deleted file mode 100644 index 2e7f2196cf..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-103.md +++ /dev/null @@ -1,365 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca44 -title: Part 103 -challengeType: 0 -dashedName: part-103 ---- - -# --description-- - -Your chart needs some labels in each slice. On a new line, append `text` elements to your `pieGraphData` variable. - -# --hints-- - -test-text - -```js -assert(/pieGraphData\s*\.\s*append\s*\((`|'|")text\1\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-104.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-104.md deleted file mode 100644 index 0cb9c6cda4..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-104.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca47 -title: Part 104 -challengeType: 0 -dashedName: part-104 ---- - -# --description-- - -Chain a `text` function to set the text of each pie slice to a percentage. Set the value to a "d function" with curly brackets and leave the function empty for now. It should look like this: - -```js -.text(d => { - -}) -``` - -The method for getting the percent of each slice will take a few steps: - -1. Find the total number of followers for the displayed year -2. Divide the followers of a single platform by that total -3. Turn it into a string to display - -# --hints-- - -test-text - -```js -assert(/\.append\('text'\)\s*\.text\s*\(\s*d\s*=>\s*\{\s*\}\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-105.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-105.md deleted file mode 100644 index 9fe69b81a2..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-105.md +++ /dev/null @@ -1,383 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca48 -title: Part 105 -challengeType: 0 -dashedName: part-105 ---- - -# --description-- - -In the function you just created, create a `const` named `values`. Use the `d3.values` function to get the values of the 2020 followers and set the result to your `values` variable. Here's how to get the values: - -```js -d3.values(data[8].followers) -``` - -It will be an array with the values of the followers for the three platforms in 2020. - -Note that this "d function" has curly brackets. So you could `console.log(values)` in there to see it's value. - -# --hints-- - -test-text - -```js -assert( - /const\s*values\s*=\s*d3\s*\.\s*values\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\);?/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-106.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-106.md deleted file mode 100644 index 0de087f1cc..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-106.md +++ /dev/null @@ -1,372 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca49 -title: Part 106 -challengeType: 0 -dashedName: part-106 ---- - -# --description-- - -Since you want to find what percent each of those `values` is, you first need to add them all up. `d3.sum` will do that for you. Create a new `const` named `sum` and set it equal to `d3.sum(values)`. - -# --hints-- - -test-text - -```js -assert(/const\s*sum\s*=\s*d3\s*\.\s*sum\s*\(\s*values\s*\)\s*;?/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-107.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-107.md deleted file mode 100644 index 9663f711d9..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-107.md +++ /dev/null @@ -1,376 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4a -title: Part 107 -challengeType: 0 -dashedName: part-107 ---- - -# --description-- - -Create another variable named `percent` and set it equal to `d.data.value` divided by your `sum` variable. - -# --hints-- - -test-text - -```js -assert( - /const\s*percent\s*=\s*d\s*\.\s*data\s*\.\s*value\s*\/\s*sum;?/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-108.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-108.md deleted file mode 100644 index 2997d10be6..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-108.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4b -title: Part 108 -challengeType: 0 -dashedName: part-108 ---- - -# --description-- - -Your percent values are numbers less than one. You will need to multiply it by 100, round of the decimals, and add a `%` sign. Use a template literal to return this to the `text` function: - -```js -${Math.round(percent * 100)}% -``` - -Don't forget that you need a `return` statement here since you aren't using an implicit return. - -# --hints-- - -test-text - -```js -assert( - /return\s*`\$\{\s*Math\s*\.\s*round\s*\(\s*percent\s*\*\s*100\s*\)\s*\}%`;?\s*\}\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-109.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-109.md deleted file mode 100644 index 194c4a19ab..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-109.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4c -title: Part 109 -challengeType: 0 -dashedName: part-109 ---- - -# --description-- - -The text elements are at the center of the pie graph, you need to use the `centroid` from the D3 arc API to tell them where to go. Add an `attr` function to set the `transform` to a `d` function that returns this template literal: `translate(${ pieArc.centroid(d) })` - -The `centroid` function will find the midpoint of each slice for each text element. - -# --hints-- - -test-text - -```js -const transform = $('.dashboard div svg g text')[0] - .getAttribute('transform') - .replace('translate(', '') - .replace(')', '') - .split(','); -assert(transform[0] < 39 && transform[1] > 31); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-110.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-110.md deleted file mode 100644 index 731a5184b1..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-110.md +++ /dev/null @@ -1,389 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4d -title: Part 110 -challengeType: 0 -dashedName: part-110 ---- - -# --description-- - -The function you just added, placed the start of the text at the midpoint of each slice. Change the `style` of the text to give it a `text-anchor` of `middle` so the middle of the text is in the middle of the slice. - -After that, set the `font` to `10px verdana`. - -# --hints-- - -test-text - -```js -const text = $('.dashboard div svg g text')[0]; -assert( - text.style.textAnchor === 'middle' && - text.style.font.toLowerCase() === '10px verdana' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-111.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-111.md deleted file mode 100644 index e191bb7684..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-111.md +++ /dev/null @@ -1,391 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4e -title: Part 111 -challengeType: 0 -dashedName: part-111 ---- - -# --description-- - -The last component you are going to add is a legend to display the name of each platform and the number of followers for the year. Create a new `const` named `legend` and use it to `append` a `table` to your `rightDashboard` variable. This looks similar to the code where you created your `pieGraph` variable. - -# --hints-- - -test-text - -```js -assert( - /const\s*legend\s*=\s*rightDashboard\s*\.\s*append\s*\(\s*('|"|`)\s*table\s*\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-112.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-112.md deleted file mode 100644 index 680c56e08b..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-112.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4f -title: Part 112 -challengeType: 0 -dashedName: part-112 ---- - -# --description-- - -Give the table a `width` of `200` and a `height` of `120` using `attr`. - -# --hints-- - -test-text - -```js -const table = $('.dashboard div table')[0]; -assert( - table.getAttribute('width') == 200 && table.getAttribute('height') == 120 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-113.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-113.md deleted file mode 100644 index c0c7b38cef..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-113.md +++ /dev/null @@ -1,396 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca50 -title: Part 113 -challengeType: 0 -dashedName: part-113 ---- - -# --description-- - -Set the `font` to `12px verdana` using the `style` function. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table')[0].style.font.toLowerCase() === '12px verdana' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-114.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-114.md deleted file mode 100644 index 0492d13020..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-114.md +++ /dev/null @@ -1,401 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca51 -title: Part 114 -challengeType: 0 -dashedName: part-114 ---- - -# --description-- - -Create a new `const` named `legendTitle` and use it to `append` a `thead` to your `legend` variable. `thead` is used with the HTML table element and is for the top row of the table. - -# --hints-- - -test-text - -```js -assert( - /const\s*legendTitle\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*thead\s*\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-115.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-115.md deleted file mode 100644 index 4d4098f707..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-115.md +++ /dev/null @@ -1,401 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca52 -title: Part 115 -challengeType: 0 -dashedName: part-115 ---- - -# --description-- - -`append` a `tr` element to the selection and then append a `th` element right after it. `tr` is for defining a row of the table, and `th` is for defining the header cells of the table. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table thead tr th').length === 1); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-116.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-116.md deleted file mode 100644 index 39ced1543d..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-116.md +++ /dev/null @@ -1,404 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca53 -title: Part 116 -challengeType: 0 -dashedName: part-116 ---- - -# --description-- - -Use the `text` function to set the text of the selection to `2020 followers`. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table thead tr th').text() === '2020 followers'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-117.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-117.md deleted file mode 100644 index bf9e34eda4..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-117.md +++ /dev/null @@ -1,406 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca54 -title: Part 117 -challengeType: 0 -dashedName: part-117 ---- - -# --description-- - -Your table is going to have three columns, one for the platform name, one for the color it is using on your dashboard, and a third to display the number of followers. So you want the title to take up all three columns. Set the `colspan` attribute of the `th` to `3` so it spans all three of these columns. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table thead tr th')[0].getAttribute('colspan') == 3); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-118.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-118.md deleted file mode 100644 index 0c3e750347..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-118.md +++ /dev/null @@ -1,412 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca55 -title: Part 118 -challengeType: 0 -dashedName: part-118 ---- - -# --description-- - -Create a new `const` named `legendRows` and use it to `append` a `tbody` element to your `legend` variable similar to how you added the `thead`. `tbody` is for the main content of an HTML table. - -# --hints-- - -test-text - -```js -assert( - /const\s*legendRows\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*tbody\s*\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-119.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-119.md deleted file mode 100644 index 68b03ce851..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-119.md +++ /dev/null @@ -1,417 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca56 -title: Part 119 -challengeType: 0 -dashedName: part-119 ---- - -# --description-- - -Add a `selectAll` function to the selection and pass it the string `tr`. - -# --hints-- - -test-text - -```js -assert( - /const legendRows = legend\.append\('tbody\s*'\)\s*\.\s*selectAll\s*\(\s*('|"|`)\s*tr\s*\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-120.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-120.md deleted file mode 100644 index aa30807012..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-120.md +++ /dev/null @@ -1,417 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca57 -title: Part 120 -challengeType: 0 -dashedName: part-120 ---- - -# --description-- - -Use the `data` function to set the data for the rows to an array of your 2020 followers. To get the array use `d3.entries(data[8].followers)`. Remember, this will create an array of key/value pairs of your followers for that year. - -# --hints-- - -test-text - -```js -assert( - /\.selectAll\('tr'\)\s*\.\s*data\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-121.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-121.md deleted file mode 100644 index ee08e49dda..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-121.md +++ /dev/null @@ -1,418 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca58 -title: Part 121 -challengeType: 0 -dashedName: part-121 ---- - -# --description-- - -Add the `enter` and `append` functions to the selection. Pass the string `tr` to the append function to add three table row elements. These elements will be for displaying each platform's name. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr').length === 3); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-122.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-122.md deleted file mode 100644 index 777a09d553..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-122.md +++ /dev/null @@ -1,422 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca59 -title: Part 122 -challengeType: 0 -dashedName: part-122 ---- - -# --description-- - -On a new line, `append` a `td` to your `legendRows` variable. `td` is for an individual cell in the row of the table. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr td').length === 3); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-123.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-123.md deleted file mode 100644 index 562a3d4fd0..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-123.md +++ /dev/null @@ -1,426 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5a -title: Part 123 -challengeType: 0 -dashedName: part-123 ---- - -# --description-- - -Use the `text` function to set the text of each `td` to the `key` of each data point by using a "d function" to return `d.key`. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table tbody tr td').text() === 'twittertumblrinstagram' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-124.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-124.md deleted file mode 100644 index 0e33d97bc6..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-124.md +++ /dev/null @@ -1,431 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5b -title: Part 124 -challengeType: 0 -dashedName: part-124 ---- - -# --description-- - -This is the first column of your table. Set the `align` attribute to `right` to align the text to the right of each cell. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table tbody tr td')[0] - .getAttribute('align') - .toLowerCase() === 'right' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-125.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-125.md deleted file mode 100644 index 915e877e04..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-125.md +++ /dev/null @@ -1,430 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5c -title: Part 125 -challengeType: 0 -dashedName: part-125 ---- - -# --description-- - -On a new line, append another `td` element to your `legendRows` variable. This will be for colored squares in the center column. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr td').length === 6); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-126.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-126.md deleted file mode 100644 index 1acfc7b1f6..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-126.md +++ /dev/null @@ -1,437 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5d -title: Part 126 -challengeType: 0 -dashedName: part-126 ---- - -# --description-- - -Set the `align` attribute to `center`. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table tbody tr td')[1] - .getAttribute('align') - .toLowerCase() === 'center' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-127.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-127.md deleted file mode 100644 index c2d8ad27c4..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-127.md +++ /dev/null @@ -1,435 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5e -title: Part 127 -challengeType: 0 -dashedName: part-127 ---- - -# --description-- - -Append a `div` element to the selection. Each `div` will be a small square for each color. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr td div').length === 3); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-128.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-128.md deleted file mode 100644 index 7a09ef3ed3..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-128.md +++ /dev/null @@ -1,438 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5f -title: Part 128 -challengeType: 0 -dashedName: part-128 ---- - -# --description-- - -Set the `width` to `16px` and the `height` to `16px` using the `style` function. - -# --hints-- - -test-text - -```js -const div = $('.dashboard div table tbody tr td div')[0]; -assert(div.style.width == '16px' && div.style.height === '16px'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-129.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-129.md deleted file mode 100644 index 992537b3e6..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-129.md +++ /dev/null @@ -1,443 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca60 -title: Part 129 -challengeType: 0 -dashedName: part-129 ---- - -# --description-- - -Using the `style` function again, set the `background-color` of each div to a "d function". Using the "d function", pass the key(`d.key`) of each data point to your `pieColors` scale so it knows what color to use. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table tbody tr td div')[0].style.backgroundColor === - 'rgb(124, 217, 209)' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-130.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-130.md deleted file mode 100644 index 2cb143184e..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-130.md +++ /dev/null @@ -1,443 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca61 -title: Part 130 -challengeType: 0 -dashedName: part-130 ---- - -# --description-- - -On a new line, append another `td` to the `legendRows` variable for the last group of items. It will display the number of followers for each platform. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr td').length === 9); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-131.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-131.md deleted file mode 100644 index 470b5a68e2..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-131.md +++ /dev/null @@ -1,446 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca62 -title: Part 131 -challengeType: 0 -dashedName: part-131 ---- - -# --description-- - -Set the `text` to a "d function" that returns the value(`d.value`) for each data point. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr td')[2].innerHTML === '2845'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-132.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-132.md deleted file mode 100644 index cb3e63813d..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-132.md +++ /dev/null @@ -1,450 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca63 -title: Part 132 -challengeType: 0 -dashedName: part-132 ---- - -# --description-- - -Set the `align` attribute to `left` for this selection. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table tbody tr td')[2] - .getAttribute('align') - .toLowerCase() === 'left' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-133.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-133.md deleted file mode 100644 index 0aa86bfb00..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-133.md +++ /dev/null @@ -1,448 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca64 -title: Part 133 -challengeType: 0 -dashedName: part-133 ---- - -# --description-- - -The legend has all the information is needs, but the title looks a little misaligned. Go to where you created your `legendTitle` variable and set the `position` to `relative` and the `left` to `20px` using `style` functions. - -# --hints-- - -test-text - -```js -const th = $('.dashboard div table thead tr th')[0]; -assert(th.style.position === 'relative' && th.style.left === '20px'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-134.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-134.md deleted file mode 100644 index 1daa93dc49..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-134.md +++ /dev/null @@ -1,453 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca65 -title: Part 134 -challengeType: 0 -dashedName: part-134 ---- - -# --description-- - -The legend and pie graph look a little off as well. Go to where you created your `legend` variable and add a `position` of `relative` and a `top` of `30px` using `style` functions. - -# --hints-- - -test-text - -```js -const table = $('.dashboard div table')[0]; -assert(table.style.position === 'relative' && table.style.top === '30px'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-135.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-135.md deleted file mode 100644 index 3acf263d2b..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-135.md +++ /dev/null @@ -1,464 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca66 -title: Part 135 -challengeType: 0 -dashedName: part-135 ---- - -# --description-- - -Lastly, where you created your `pieGraph` variable, add a `position` of `relative` and a `left` of `20px` using `style` functions. - -# --hints-- - -test-text - -```js -const pieGraph = $('.dashboard div svg')[0]; -assert( - pieGraph.style.position === 'relative' && pieGraph.style.left === '20px' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-136.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-136.md deleted file mode 100644 index 6ab6c4a6be..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-136.md +++ /dev/null @@ -1,476 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca67 -title: Part 136 -challengeType: 0 -dashedName: part-136 ---- - -# --description-- - -Finally! You have all the elements displayed and they look good. The last thing you will do is make it so you can see the data from whatever year you want. - -Wrap all the code in the script you've been working with in a function named `drawDashboard` and give it a parameter named `year`. Then, at the bottom of the script, call the function you created and pass it the number `2020`. - -# --hints-- - -test-text - -```js -assert( - typeof drawDashboard === 'function' && - /<\/script>\s* - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-137.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-137.md deleted file mode 100644 index 736bc47dd7..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-137.md +++ /dev/null @@ -1,484 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca68 -title: Part 137 -challengeType: 0 -dashedName: part-137 ---- - -# --description-- - -At the top of the function create a new `const` named `index`. You are going to use it to find the item in the `data` array with the year that is passed to the function. - -Use JavaScript's `findIndex` function to set your `index` variable to the index of the item in the `data` array where the year is the same as the year passed to your `drawDashboard` function. Here's an example: - -```js -array.findIndex(d => - // find the index where the year passed to - // drawDashboard equals the year of the array -) -``` - -After this, you will be able to use `data[index]` to get that item in the array. - -# --hints-- - -test-text - -```js -const script = $('.dashboard').siblings('script')[1].innerHTML; -assert( - /var index = data.findIndex\(function \(d\) \{\s*return (year === d\.year|d.year === year);\s*\}\);/g.test( - script - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-138.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-138.md deleted file mode 100644 index 763f870eeb..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-138.md +++ /dev/null @@ -1,479 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6a -title: Part 138 -challengeType: 0 -dashedName: part-138 ---- - -# --description-- - -There are four places in the file where you used `data[8]` to set data to the year 2020. Change all five of them to `data[index]` so you can pass in any year to the function to display the data from that year. - -The five spots are: - -1. The `domain` for `pieColors`. -2. The `data` for `pieGraphData`. -3. The `text` for your pie slice text. -4. The `data` for your `legendRows`. - -# --hints-- - -test-text - -```js -assert( - !/data\[8\]/g.test(code) && code.match(/data\s*\[\s*index\s*\]/g).length === 4 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-139.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-139.md deleted file mode 100644 index fa2774a18d..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-139.md +++ /dev/null @@ -1,485 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6b -title: Part 139 -challengeType: 0 -dashedName: part-139 ---- - -# --description-- - -Go to where you `call` the `xAxis` and create a `mouseover` event for the labels. Chain the `on` function to them, pass it the string `mouseover`, and give it a value of a "d function" that calls `drawDashboard` with `d` as the argument. It will look like this: - -```js -.on('mouseover', d => drawDashboard(d)) -``` - -So now, when you hover a label, the function will be called with the year that is being hovered. - -# --hints-- - -test-text - -```js -const script = $('.dashboard').siblings('script')[1].innerHTML; -assert( - /\.on\(('|"|`)mouseover\1, function \(d\) \{\s*return drawDashboard\(d\);\s*\}\)/g.test( - script - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-140.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-140.md deleted file mode 100644 index de5fea91df..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-140.md +++ /dev/null @@ -1,478 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6c -title: Part 140 -challengeType: 0 -dashedName: part-140 ---- - -# --description-- - -There's a problem, each time you hover a label it adds all the elements to the container again. If you empty the container at the top of the function, it will redraw them where they need to be. - -Go back to the top of the function and use `d3.select` to select the `.dashboard` element and chain the `html` function to it with an empty string as it parameter. Empty means no spaces. - -# --hints-- - -test-text - -```js -const script = $('.dashboard').siblings('script')[1].innerHTML; -assert(/d3\.select\(('|"|`)\.dashboard\1\)\.html\(('|"|`)\2\)/g.test(script)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-141.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-141.md deleted file mode 100644 index 0e35de8505..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-141.md +++ /dev/null @@ -1,489 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6d -title: Part 141 -challengeType: 0 -dashedName: part-141 ---- - -# --description-- - -Now when you hover a label, you can see the data for the different years. - -Where you created the `text` elements for the x-axis labels, change the `font` to `bold 10px verdana` for the currently displayed year. - -To do this, create a "d function" in the `font` value area and return the above sting if `d` equals `year`. Otherwise, return the string that is currently there (`10px verdana`). It's easiest to use a ternary operator for this. - -Here's a hint: - -```js -.style('font', d => d === year ? ) -``` - -# --hints-- - -test-text - -```js -assert( - Object.values($('.dashboard svg g text')).filter( - (el) => el.style && el.style.font.toLowerCase() === 'bold 10px verdana' - ).length === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-142.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-142.md deleted file mode 100644 index ca70f946f0..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-142.md +++ /dev/null @@ -1,481 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6e -title: Part 142 -challengeType: 0 -dashedName: part-142 ---- - -# --description-- - -Create another `mouseover` event for when you hover one of the `twitter-circles`. It will look like the other `mouseover` event you created except the `drawDashboard` function will take `d.year` instead of `d`. - -# --hints-- - -test-text - -```js -const script = $('.dashboard').siblings('script')[1].innerHTML; -assert( - /\.on\(('|"|`)mouseover\1, function \(d\) \{\s*return drawDashboard\(d\.year\);\s*\}\)/g.test( - script - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-143.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-143.md deleted file mode 100644 index adb5ee8ab4..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-143.md +++ /dev/null @@ -1,483 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6f -title: Part 143 -challengeType: 0 -dashedName: part-143 ---- - -# --description-- - -Similar to how you made the text bold for the label of the displayed year; change the `fill` of the `twitter-circles` to your `twitterColor` for the currently displayed year. To do this, use a "d function" that returns the `twitterColor` when `d.year` equals `year`, and leave it `white` if it doesn't. - -# --hints-- - -test-text - -```js -assert( - Object.values($('.dashboard svg circle')).filter( - (el) => el.getAttribute && el.getAttribute('fill') === '#7cd9d1' - ).length === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-144.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-144.md deleted file mode 100644 index 26ea98aa97..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-144.md +++ /dev/null @@ -1,490 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca70 -title: Part 144 -challengeType: 0 -dashedName: part-144 ---- - -# --description-- - -Add a `mouseover` event to the `tumblr-circles` and `instagram-circles` in the same way that you did for the `twitter-circles`. - -After that, you will be able hover any of the circles or year labels to get the information for that year. - -# --hints-- - -test-text - -```js -const script = $('.dashboard').siblings('script')[1].innerHTML; -assert( - script.match( - /\.on\(('|"|`)mouseover\1, function \(d\) \{\s*return drawDashboard\(d\.year\);\s*\}\)/g - ).length === 3 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-145.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-145.md deleted file mode 100644 index 52d84a5440..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-145.md +++ /dev/null @@ -1,494 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca71 -title: Part 145 -challengeType: 0 -dashedName: part-145 ---- - -# --description-- - -Change the `fill` of the `tumblr-circles` and `instagram-circles` to use a "d function" that returns their respective color variables when `d.year` equals `year`, leave it `white` when they don't. This is similar to how you set the fill of the Twitter circles. - -Then, all of the circles will get filled in for the currently displayed year. - -# --hints-- - -test-text - -```js -const circles = Object.values($('.dashboard svg circle')); -assert( - circles.filter( - (el) => - el.getAttribute && - (el.getAttribute('fill') === '#7cd9d1' || - el.getAttribute('fill') === '#f6dd71' || - el.getAttribute('fill') === '#fd9b98') - ).length === 3 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-146.md b/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-146.md deleted file mode 100644 index 421629433d..0000000000 --- a/curriculum/challenges/italian/04-data-visualization/d3-dashboard/part-146.md +++ /dev/null @@ -1,483 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca72 -title: Part 146 -challengeType: 0 -dashedName: part-146 ---- - -# --description-- - -The last thing is that the legend title always shows 2020. Change the `text` of the `legendTitle` to a template literal that shows the currently displayed year followed by a space and `followers`. - -That's it, your dashboard is finished! Don't forget to admire your hard work. - -# --hints-- - -test-text - -```js -assert(/\.text\s*\(\s*`\s*\$\{\s*year\s*\} followers`\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-001.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-001.md deleted file mode 100644 index 63cbcbf8a5..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-001.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9de -title: Part 1 -challengeType: 0 -dashedName: part-1 ---- - -# --description-- - -Welcome to the dashboard project! You will be using the JavaScript data visualization library, D3, to build a visualization of your social media followers. It will consist of a line graph, a pie chart, and a legend. - -First, you need to create the HTML file. Start by adding the `` declaration at the top of the file to tell the browser what type of document it's reading. - -# --hints-- - -test-text - -```js -assert(//gi.test(code)); -``` - -# --seed-- - -## --seed-contents-- - -```html -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-002.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-002.md deleted file mode 100644 index 8217f0cb0b..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-002.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9df -title: Part 2 -challengeType: 0 -dashedName: part-2 ---- - -# --description-- - -Next, add opening and closing `html`, `head` and `body` tags below the doctype. Be sure to nest them properly. - -# --hints-- - -test-text - -```js -assert( - /\s*\s*\s*<\/head\s*>\s*\s*<\/body\s*>\s*<\/html\s*>/gi.test( - code - ) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - - - - - - - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-003.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-003.md deleted file mode 100644 index 17dd77aaba..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-003.md +++ /dev/null @@ -1,51 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e0 -title: Part 3 -challengeType: 0 -dashedName: part-3 ---- - -# --description-- - -In the head, add a `title` of `D3 Dashboard`. - -# --hints-- - -test-text - -```js -assert( - /\s*D3 Dashboard<\/title\s*>\s*<\/head\s*>/g.test(code) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - - - - - - - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-004.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-004.md deleted file mode 100644 index c4df481a13..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-004.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e1 -title: Part 4 -challengeType: 0 -dashedName: part-4 ---- - -# --description-- - -Below the title, link to your external stylesheet by adding a `link` element with a `rel` attribute of `stylesheet` and an `href` attribute of `./dashboard.css`. Remember that link elements do not need a closing tag. You will be adding some styles to this file shortly. - -# --hints-- - -test-text - -```js -const link = code.match(/]>/gi)[0]; -assert( - /rel\s*=\s*('|")\s*stylesheet\s*\1/gi.test(link) && - /href\s*=\s*('|")\s*(.\/)?dashboard\.css\s*\1/gi.test(link) -); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - D3 Dashboard - - - - - - - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-005.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-005.md deleted file mode 100644 index cb9d694707..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-005.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e2 -title: Part 5 -challengeType: 0 -dashedName: part-5 ---- - -# --description-- - -Next, add a container for the dashboard. Put an empty `div` element in the body with class of `dashboard`. You will be appending all the dashboard elements to this div. - -# --hints-- - -test-text - -```js -assert($('div.dashboard').length === 1); -``` - -# --seed-- - -## --seed-contents-- - -```html - - - - D3 Dashboard - - - - - - - - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - - -
- - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-006.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-006.md deleted file mode 100644 index a3528d92d1..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-006.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e3 -title: Part 6 -challengeType: 0 -dashedName: part-6 ---- - -# --description-- - -You are now looking at the stylesheet that you linked to earlier. At the top of this file, target the `body` of the HTML document and give it a `background-color` of `#ccc`. - -# --hints-- - -test-text - -```js -const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; -assert(/background-color\s*:\s*#ccc\s*(;|})/gi.test(body)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-007.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-007.md deleted file mode 100644 index 2268fc1bd6..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-007.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e4 -title: Part 7 -challengeType: 0 -dashedName: part-7 ---- - -# --description-- - -Next, target the `dashboard` class you created and give it a `width` of `980px` and a `height` of `500px`. - -# --hints-- - -test-text - -```js -const dashboard = $('.dashboard'); -assert( - dashboard.css('width') === '980px' && dashboard.css('height') === '500px' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-008.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-008.md deleted file mode 100644 index 6b8e174e01..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-008.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e5 -title: Part 8 -challengeType: 0 -dashedName: part-8 ---- - -# --description-- - -Give the dashboard a `background-color` of `white` and a `box-shadow` of `5px 5px 5px 5px #888` to give it a little depth. - -# --hints-- - -test-text - -```js -const dashboard = $('.dashboard'); -assert( - dashboard.css('background-color') === 'rgb(255, 255, 255)' && - dashboard.css('box-shadow') === 'rgb(136, 136, 136) 5px 5px 5px 5px' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-009.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-009.md deleted file mode 100644 index 210943e452..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-009.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e6 -title: Part 9 -challengeType: 0 -dashedName: part-9 ---- - -# --description-- - -Now you can see your dashboard element. Center it by adding a `margin` of `auto` to it. - -# --hints-- - -test-text - -```js -const dashboard = code.match(/.dashboard\s*{[\s\S]+?[^}]}/g)[0]; -assert(/margin\s*:\s*auto\s*(;|})/g.test(dashboard)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-010.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-010.md deleted file mode 100644 index 2144211195..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-010.md +++ /dev/null @@ -1,75 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e7 -title: Part 10 -challengeType: 0 -dashedName: part-10 ---- - -# --description-- - -Give the container some space by adding a `padding` of `100px 10px` to the `body` element. - -# --hints-- - -test-text - -```js -const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; -assert(/padding\s*:\s*100px\s*10px\s*(;|})/g.test(body)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-011.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-011.md deleted file mode 100644 index 511106ee13..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-011.md +++ /dev/null @@ -1,81 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e8 -title: Part 11 -challengeType: 0 -dashedName: part-11 ---- - -# --description-- - -Later on, you will be adding more elements to the dashboard container. Set the `display` to `flex` and the `align-items` to `center` so those items will be vertically centered. - -# --hints-- - -test-text - -```js -const dashboard = $('.dashboard'); -assert( - dashboard.css('display') === 'flex' && - dashboard.css('align-items') === 'center' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - -
- - -``` - -## --seed-contents-- - -```html - -``` - -# --solutions-- - -```html - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-012.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-012.md deleted file mode 100644 index 18c1bd58cf..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-012.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9e9 -title: Part 12 -challengeType: 0 -dashedName: part-12 ---- - -# --description-- - -Back in the HTML file, add a `script` tag at the bottom of the head element and give it a `src` attribute of `./d3-5.9.2.min.js`. Don't forget the closing tag. This will add the D3 library to your project from a downloaded copy. - -# --hints-- - -test-text - -```js -const script = code.match(/]>\s*<\/script\s*>/gi)[0]; -assert(/src\s*=\s*('|")\s*(\.\/)?d3-5.9.2.min.js\s*\1/gi.test(script)); -``` - -# --seed-- - -## --before-user-code-- - -```html - -``` - -## --seed-contents-- - -```html - - - - D3 Dashboard - - - - - - -
- - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - - - -
- - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-013.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-013.md deleted file mode 100644 index d37a6a0bd4..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-013.md +++ /dev/null @@ -1,96 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ea -title: Part 13 -challengeType: 0 -dashedName: part-13 ---- - -# --description-- - -Add another `script` below the one you just added. Give it a `src` attribute of `./data.js`. - -This adds a `data` variable to your project that contains your number of social media followers, it is an array of objects. Each object has the year and your followers for three different platforms. You will see what it looks like shortly. - -# --hints-- - -test-text - -```js -const script = code.match(/]>\s*<\/script\s*>/gi)[1]; -assert(/src\s*=\s*('|")\s*(\.\/)?data.js\s*\1/gi.test(script)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - - - - D3 Dashboard - - - - - - - -
- - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - - -
- - - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-014.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-014.md deleted file mode 100644 index 97d9c04dfa..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-014.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9eb -title: Part 14 -challengeType: 0 -dashedName: part-14 ---- - -# --description-- - -Add a third script just before the closing body tag. It will be the JavaScript file you will use to create the rest of the dashboard. Give the script a `src` of `./dashboard.js`. - -# --hints-- - -test-text - -```js -const script = code.match(/]>\s*<\/script\s*>/gi)[2]; -assert(/src\s*=\s*('|")\s*(\.\/)?dashboard.js\s*\1/gi.test(script)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - -``` - -## --seed-contents-- - -```html - - - - D3 Dashboard - - - - - - -
- - - - -``` - -# --solutions-- - -```html - - - - D3 Dashboard - - - - - - -
- - - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-015.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-015.md deleted file mode 100644 index fe6efc7f29..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-015.md +++ /dev/null @@ -1,103 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ec -title: Part 15 -challengeType: 0 -dashedName: part-15 ---- - -# --description-- - -The script at the top is the `data.js` file you added. I have placed it here so you can see the data and recommend taking a look at it. The second script is the one you just added and where you will build the rest of the project. - -In the second script, create three `const` variables; `svgMargin` with a value of `70`, `svgWidth` with a value of `700`, and `svgHeight` equal to `500`. The first part of the dashboard will be a line graph. It will use these variables as its dimensions. - -The line graph will have the years from your data variable across the bottom, and a scale on the left to show the numbers of followers. Each platform will have a line going across the graph that shows how many followers you had for each year. - -# --hints-- - -test-text - -```js -assert(svgMargin === 70 && svgWidth === 700 && svgHeight === 500); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-016.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-016.md deleted file mode 100644 index 6926b11aee..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-016.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ed -title: Part 16 -challengeType: 0 -dashedName: part-16 ---- - -# --description-- - -Add three more variables; `twitterColor` with a value of `#7cd9d1`, `tumblrColor` equal to `#f6dd71`, and `instagramColor` at `#fd9b98`. Make sure those Hex values are strings. These will be colors used to represent the different platforms throughout the project. - -# --hints-- - -test-text - -```js -assert( - twitterColor === '#7cd9d1' && - tumblrColor === '#f6dd71' && - instagramColor === '#fd9b98' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-017.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-017.md deleted file mode 100644 index 82a2efd50c..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-017.md +++ /dev/null @@ -1,113 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ee -title: Part 17 -challengeType: 0 -dashedName: part-17 ---- - -# --description-- - -When you added the D3 library earlier, it put an object named `d3` in your project with a bunch of functions. One of them is `select`; you can use dot notation to access this and the other functions from the object. Create a new variable named `lineGraph` and use `d3.select` to select the `.dashboard` element. Here's an example of something similar: - -```js -const variableName = d3.select('.className') -``` - -# --hints-- - -test-text - -```js -assert(lineGraph._groups[0][0] === $('.dashboard')[0]); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-018.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-018.md deleted file mode 100644 index d358d508c9..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-018.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ef -title: Part 18 -challengeType: 0 -dashedName: part-18 ---- - -# --description-- - -Your dashboard element is now "selected". D3 has a number of functions for working with a selection; one of them is `append`. It is used to add an element. Chain the `append` function to your selection and use it to add an `svg` element. Here's an example of how that might be done: - -```js -const variableName = d3.select('selectedElement') - .append('elementToAdd') -``` - -# --hints-- - -test-text - -```js -assert(lineGraph._groups[0][0] === $('svg')[0]); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-019.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-019.md deleted file mode 100644 index d55cc0b777..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-019.md +++ /dev/null @@ -1,124 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f0 -title: Part 19 -challengeType: 0 -dashedName: part-19 ---- - -# --description-- - -You can't see it, but there is now an `svg` element nested in your dashboard container. When you appended it, it became the "selection" for this area of code. Any functions you chain after it will be used on this selection. - -`attr` is a function to set attributes. You need to pass it the attribute you want to set, and the value you want to give it. Here's an example of how to chain `attr` to a selection: - -```js -const variableName = d3.select('element') - .append('element') - .attr('attribute', 'value') -``` - -Chain an `attr` function to the selection that sets the `width` as the `svgWidth` variable you created earlier. When using a variable as a value, you do not need to put it in any kind of quotations. - -# --hints-- - -test-text - -```js -assert($('svg')[0].attributes.width.value === '700'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-020.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-020.md deleted file mode 100644 index 73034422e9..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-020.md +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f1 -title: Part 20 -challengeType: 0 -dashedName: part-20 ---- - -# --description-- - -Chain another `attr` function that sets the `height` as the `svgHeight` variable you created. - -# --hints-- - -test-text - -```js -assert($('svg')[0].attributes.height.value === '500'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-021.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-021.md deleted file mode 100644 index ad1b8a3e0a..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-021.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f2 -title: Part 21 -challengeType: 0 -dashedName: part-21 ---- - -# --description-- - -Your line graph needs some scales so it knows how to translate the data into visual distances. The first one is the scale for the y-axis. It will be to show the number of followers. D3 has many utilities for creating scales. You want to use it's `scaleLinear` method for this scale. - -Create a new `const` named `yScale`, and set it equal to `d3.scaleLinear()`. - -# --hints-- - -test-text - -```js -assert( - typeof yScale === 'function' && /yScale\s*=\s*d3\.scaleLinear/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-022.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-022.md deleted file mode 100644 index 65b5d9a684..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-022.md +++ /dev/null @@ -1,123 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f3 -title: Part 22 -challengeType: 0 -dashedName: part-22 ---- - -# --description-- - -D3 has a bunch of functions for working with scales as well. One of them is `domain`. It takes an array that is used to describe the highest and lowest values of the data for this scale. After a quick look at the data, the values of the "followers" go from about 0 to 5000. Chain the `domain` function to the `yScale` and pass it the array `[0, 5000]`. - -# --hints-- - -test-text - -```js -const domain = yScale.domain(); -assert(domain.length === 2 && domain[0] === 0 && domain[1] === 5000); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-023.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-023.md deleted file mode 100644 index fef2d72f1b..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-023.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f4 -title: Part 23 -challengeType: 0 -dashedName: part-23 ---- - -# --description-- - -The `range` function describes how to map the domain values for display on the graph. For example, a value of 5000 followers can't use 5000 as it y-coordinate on the SVG or it would be off the graph. You need to tell the range where the top and bottom of the graph is so the scale can give appropriate values for the y-coordinate. - -Chain the `range` function below the `domain` and pass it an array with `svgHeight - svgMargin` and `svgMargin` as the values. That will translate to `[430, 70]`. This is where the top and bottom of the graph are. So a data point of 5000 followers will map to a value of 430 to use as its y-coordinate and 0 followers will use 70 as its y-coordinate. Any value in between will scale linearly. - -Your graph will have a margin around it for things like axes and labels. The actual line data will display on the inside of this margin area, which is why you use those values. This will become more clear as you progress through the project. - -# --hints-- - -test-text - -```js -const range = yScale.range(); -assert(range.length === 2 && range[0] === 430 && range[1] === 70); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-024.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-024.md deleted file mode 100644 index 1cbbe6313f..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-024.md +++ /dev/null @@ -1,129 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f5 -title: Part 24 -challengeType: 0 -dashedName: part-24 ---- - -# --description-- - -Create a new `const` named `xScale`. Use it to create another linear scale like you did for the y-scale. This will be the horizontal or "x" axis. - -# --hints-- - -test-text - -```js -assert( - typeof xScale === 'function' && /xScale\s*=\s*d3\.scaleLinear/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-025.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-025.md deleted file mode 100644 index 3d66e7f8c2..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-025.md +++ /dev/null @@ -1,131 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f6 -title: Part 25 -challengeType: 0 -dashedName: part-25 ---- - -# --description-- - -The `year` values of your data will be used for the x-scale. Chain the `domain` function to `xScale` and pass it an array with the first and last years of your data. - -# --hints-- - -test-text - -```js -const domain = xScale.domain(); -assert(domain.length === 2 && domain[0] === 2012 && domain[1] === 2020); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-026.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-026.md deleted file mode 100644 index 339cb6906b..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-026.md +++ /dev/null @@ -1,133 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f7 -title: Part 26 -challengeType: 0 -dashedName: part-26 ---- - -# --description-- - -The range for this scale will go from the left of your graph to the right, with 2012 on the left and 2020 on the right. Add the `range` function to the `xScale` and pass it an array with the values: `svgMargin` and `svgWidth - svgMargin`. This will translate to `[70, 630]`. So 2012 will use 70 as is x-coordinate and 2020 will use 630 as its x-coordinate. - -# --hints-- - -test-text - -```js -const range = xScale.range(); -assert(range.length === 2 && range[0] === 70 && range[1] === 630); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-027.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-027.md deleted file mode 100644 index 022abdca4b..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-027.md +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f8 -title: Part 27 -challengeType: 0 -dashedName: part-27 ---- - -# --description-- - -The two scales you defined will be used to create the axes and lines. First is the y-axis, it will be a line with some labels on the left of the graph. Create a new `const` named `yAxis` and set it equal to `d3.axisLeft(yScale)`. This will use the information from the `yScale` variable to build the axis. - -# --hints-- - -test-text - -```js -assert( - typeof yAxis === 'function' && - /yAxis\s*=\s*d3\.axisLeft\(\s*yScale\)/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-028.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-028.md deleted file mode 100644 index 4fbb726a6e..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-028.md +++ /dev/null @@ -1,142 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9f9 -title: Part 28 -challengeType: 0 -dashedName: part-28 ---- - -# --description-- - -Create a new `const` named `xAxis` and set the value equal to `d3.axisBottom(xScale)`. This will create another axis for the bottom of the graph using the information from `xScale`. Although the axes do not display yet, they have the information they need to display correctly. - -# --hints-- - -test-text - -```js -assert( - typeof xAxis === 'function' && - /xAxis\s*=\s*d3\.axisBottom\(\s*xScale\)/.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-029.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-029.md deleted file mode 100644 index cf95b345c5..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-029.md +++ /dev/null @@ -1,143 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9fa -title: Part 29 -challengeType: 0 -dashedName: part-29 ---- - -# --description-- - -On a new line, append a new `g` element to your `lineGraph` variable. `lineGraph.append('g')` will do that for you. This will add a `g` to your SVG and be for displaying the y-axis. `g` is an SVG element that stands for "group". - -# --hints-- - -test-text - -```js -assert($('svg')[0].children[0] === $('g')[0] && $('g').length === 1); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-030.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-030.md deleted file mode 100644 index 2ff020ff1a..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-030.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9fb -title: Part 30 -challengeType: 0 -dashedName: part-30 ---- - -# --description-- - -`call` is another function to use with selections. Chain a `call` function to the selection and pass your `yAxis` variable to it. This will draw your y-axis on the SVG. - -# --hints-- - -test-text - -```js -assert($('.tick').length === 11 && /\.call\(\s*yAxis\s*\)/.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-031.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-031.md deleted file mode 100644 index d5d5ea704c..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-031.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9fc -title: Part 31 -challengeType: 0 -dashedName: part-31 ---- - -# --description-- - -After all that work, something is finally displayed on the graph. It's the y-axis and all the numbers are hidden on the left. - -Move the axis your `svgMargin` to the right by chaining an `attr` function to the selection. Use it to set the `transform` to `translate(${svgMargin}, 0)`. Use a template literal (backticks) to set the value so you can put your variable in there. - -# --hints-- - -test-text - -```js -assert($('g')[0].attributes.transform.nodeValue === 'translate(70, 0)'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-032.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-032.md deleted file mode 100644 index 75ba3f4f93..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-032.md +++ /dev/null @@ -1,150 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9fd -title: Part 32 -challengeType: 0 -dashedName: part-32 ---- - -# --description-- - -`style` is a function similar to `attr`, but is more for manipulating CSS styles rather than element attributes. Add a `style` function to the selection that sets the `font` to `10px verdana`. - -# --hints-- - -test-text - -```js -assert($('g')[0].attributes.style.nodeValue === 'font: 10px verdana;'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-033.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-033.md deleted file mode 100644 index acb146f6fd..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-033.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9fe -title: Part 33 -challengeType: 0 -dashedName: part-33 ---- - -# --description-- - -On a new line, append another `g` element to your `lineGraph` variable like you did before. This one will be for the x-axis. - -# --hints-- - -test-text - -```js -assert($('g').length === 13); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-034.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-034.md deleted file mode 100644 index 16484edb39..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-034.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1c9ff -title: Part 34 -challengeType: 0 -dashedName: part-34 ---- - -# --description-- - -Use the `call` function to draw the x-axis onto the SVG like you did for the y-axis. - -# --hints-- - -test-text - -```js -assert($('g').length === 22); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-035.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-035.md deleted file mode 100644 index 9bf085e53a..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-035.md +++ /dev/null @@ -1,158 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca00 -title: Part 35 -challengeType: 0 -dashedName: part-35 ---- - -# --description-- - -The axis has the right size and labels, but needs to be moved down. Use the `attr` function to set the `transform` like you did before. This time move it down your `svgHeight` minus the `svgMargin`. - -# --hints-- - -test-text - -```js -assert($('svg > g')[1].attributes.transform.nodeValue === 'translate(0, 430)'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-036.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-036.md deleted file mode 100644 index 195a51db40..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-036.md +++ /dev/null @@ -1,168 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca01 -title: Part 36 -challengeType: 0 -dashedName: part-36 ---- - -# --description-- - -The axis labels are `text` elements within the `g`, you can use the `selectAll` function to select them. Chain the `selectAll` function to select the `text` elements in this group. You can do that like this: - -```js -.selectAll('element') -``` - -# --hints-- - -test-text - -```js -assert( - /\.attr\('transform', `translate\(0, \$\{svgHeight - svgMargin\}\)`\)\s*\.selectAll\s*\(\s*('|"|`)text\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-037.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-037.md deleted file mode 100644 index 0b758f6fc0..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-037.md +++ /dev/null @@ -1,168 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca02 -title: Part 37 -challengeType: 0 -dashedName: part-37 ---- - -# --description-- - -I want the text elements to be rotated slightly. Chain the `style` function to set the `transform` to `translate(-12px, 0) rotate(-50deg)`. This will put them at an angle. - -# --hints-- - -test-text - -```js -assert( - $('.tick > text').filter( - (node, index) => - index.style.transform === 'translate(-12px) rotate(-50deg)' || - index.style.transform === 'translate(-12px, 0px) rotate(-50deg)' - ).length === 9 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-038.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-038.md deleted file mode 100644 index 5322ee5fe7..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-038.md +++ /dev/null @@ -1,168 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca03 -title: Part 38 -challengeType: 0 -dashedName: part-38 ---- - -# --description-- - -Add another `style` function to set the `text-anchor` to `end`. This will change the spot that each text element rotates around to the `end` of the element so they will align better. - -# --hints-- - -test-text - -```js -assert( - $('.tick > text').filter( - (node, index) => index.style['text-anchor'] === 'end' - ).length === 9 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-039.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-039.md deleted file mode 100644 index 93a1681382..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-039.md +++ /dev/null @@ -1,173 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca04 -title: Part 39 -challengeType: 0 -dashedName: part-39 ---- - -# --description-- - -Add two more `style` functions; one to set the `cursor` to `pointer`, and another to set the `font` to `10px verdana`. - -You will add some hover effects later, so the pointer will make for a better experience. - -# --hints-- - -test-text - -```js -assert( - $('.tick > text').filter( - (node, index) => - index.style.cursor === 'pointer' && index.style.font === '10px verdana' - ).length === 9 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-040.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-040.md deleted file mode 100644 index ff7ddccaef..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-040.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca05 -title: Part 40 -challengeType: 0 -dashedName: part-40 ---- - -# --description-- - -There are a number of D3 functions to work with how the "ticks" or your axis labels are displayed; one of them is `ticks`. Go back to where you defined the `yAxis` variable and chain a `ticks` function to it and pass it these two arguments: `6, '~s'`. - -The `6` will set the number of ticks used to 6, and the `~s` will make the labels display the number of thousands followed by a `k`. For example, `4000` will become `4k`. - -# --hints-- - -test-text - -```js -const ticks = $('.tick > text'); -assert( - ticks[0].innerHTML === '0k' && - ticks[1].innerHTML === '1k' && - ticks[2].innerHTML === '2k' && - ticks[3].innerHTML === '3k' && - ticks[4].innerHTML === '4k' && - ticks[5].innerHTML === '5k' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-041.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-041.md deleted file mode 100644 index a0d2f25c86..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-041.md +++ /dev/null @@ -1,171 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca06 -title: Part 41 -challengeType: 0 -dashedName: part-41 ---- - -# --description-- - -Go back to where you defined your `xAis` variable and chain the `tickFormat` function to it. Pass it `d3.format('')`. This will remove the commas in the year labels of the x-axis. - -# --hints-- - -test-text - -```js -const ticks = $('.tick > text'); -assert(ticks[6].innerHTML === '2012' && ticks[14].innerHTML === '2020'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-042.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-042.md deleted file mode 100644 index 0c55ad53c2..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-042.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca07 -title: Part 42 -challengeType: 0 -dashedName: part-42 ---- - -# --description-- - -In the same spot, chain the `tickPadding` function to the `xAxis` and pass it `10`. This will add a little padding to the ticks so the labels are better aligned. - -# --hints-- - -test-text - -```js -assert( - /\.tickFormat\(d3\.format\((''\)\)\s*\.tickPadding\s*\(\s*10\s*\))/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-043.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-043.md deleted file mode 100644 index 383f6dd20f..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-043.md +++ /dev/null @@ -1,178 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca08 -title: Part 43 -challengeType: 0 -dashedName: part-43 ---- - -# --description-- - -The axes and labels are looking good. Next, you will start to add some of the lines for the data. First is the line for the Twitter data. On a new line, create a new `const` named `twitterLine` and set it equal to `d3.line()`. `line` is a D3 function for creating a line. - -# --hints-- - -test-text - -```js -assert(/const\s*twitterLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-044.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-044.md deleted file mode 100644 index d72f1948ae..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-044.md +++ /dev/null @@ -1,192 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca09 -title: Part 44 -challengeType: 0 -dashedName: part-44 ---- - -# --description-- - -The line needs x and y values for each point of data. Chain `x` to the line and pass it a "d function". Here's how that will look: - -```js -.x(d => d.year) -``` - -You will be passing your `data` array to this line function, where it will go through each item in the array(`d`) and create an x value based on the year(`d.year`). - -This is the first place you have seen a "d function". These are common in D3 and that is how I will refer to them throughout this project. - -# --hints-- - -test-text - -```js -assert( - /const twitterLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*d\.year\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-045.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-045.md deleted file mode 100644 index 260d37d795..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-045.md +++ /dev/null @@ -1,183 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0a -title: Part 45 -challengeType: 0 -dashedName: part-45 ---- - -# --description-- - -Instead of simply using the year(`d.year`) for the x-coordinate, you need to pass each year to the `xScale` so it can set the appropriate coordinate based on your scale. - -In the "d function" you created, return `xScale(d.year)` instead of `d.year`. - -# --hints-- - -test-text - -```js -assert(/\.x\s*\(d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-046.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-046.md deleted file mode 100644 index 89137d7597..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-046.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0b -title: Part 46 -challengeType: 0 -dashedName: part-46 ---- - -# --description-- - -Chain the `y` function to the line and pass it a "d function" that returns your `yScale` with `d.followers.twitter` as its argument. - -This is similar to how you set the x values. It will use the values of your Twitter followers and your `yScale` to set the y coordinate for each item. - -These "d functions" use implicit returns. But if you add curly brackets and a return statement, you can put any JavaScript in there that you want. Including `console.log` statements that can be useful for debugging. - -# --hints-- - -test-text - -```js -assert( - /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.twitter\s*\)\s*\)/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-047.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-047.md deleted file mode 100644 index 07e8df9e86..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-047.md +++ /dev/null @@ -1,189 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0c -title: Part 47 -challengeType: 0 -dashedName: part-47 ---- - -# --description-- - -The first line is created and ready to be displayed, which will take a couple steps. On a new line, `append` a `path` element to your `lineGraph` variable. This is similar to how you appended the `g` before. - -# --hints-- - -test-text - -```js -assert( - $('svg path').length === 3 && - /lineGraph\.append\((`|'|")path\1\)/gi.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-048.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-048.md deleted file mode 100644 index ec0cb07a7c..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-048.md +++ /dev/null @@ -1,193 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0d -title: Part 48 -challengeType: 0 -dashedName: part-48 ---- - -# --description-- - -Tell the path what data to use. Add an `attr` function and set the `d` to `twitterLine(data)`. This will the build the path using the `twitterLine` function you created and your data variable. - -Note that the `d` in this case is a path attribute for drawing a line and is different from a "d function". - -After you have added your code, take a look at the data flow to help understand what is happening. You pass the data array to your `twitterLine` function where it sets the x and y values using your "d functions". The "d functions" go through each item in the array, passing part of the item to each scale to find the appropriate coordinates. When it's done, the value you are setting here is created and sent back. The result ends up being a confusing string of numbers and coordinates to tell the path how to be drawn. - -# --hints-- - -test-text - -```js -assert($('svg path')[2].getAttribute('d').length === 151); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-049.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-049.md deleted file mode 100644 index 780407ba26..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-049.md +++ /dev/null @@ -1,199 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0e -title: Part 49 -challengeType: 0 -dashedName: part-49 ---- - -# --description-- - -Add three more `attr` functions to the path; one to set the `stroke` to your `twitterColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`. - -# --hints-- - -test-text - -```js -const twitterPath = $('svg path')[2]; -assert( - twitterPath.getAttribute('stroke') === '#7cd9d1' && - twitterPath.getAttribute('stroke-width') == '3' && - twitterPath.getAttribute('fill') === 'transparent' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-050.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-050.md deleted file mode 100644 index 48465e56c8..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-050.md +++ /dev/null @@ -1,198 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca0f -title: Part 50 -challengeType: 0 -dashedName: part-50 ---- - -# --description-- - -On a new line, create a new `const` named `tumblrLine` and set it equal to `d3.line()`. - -# --hints-- - -test-text - -```js -assert(/const\s*tumblrLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-051.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-051.md deleted file mode 100644 index f648e20fdc..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-051.md +++ /dev/null @@ -1,204 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca10 -title: Part 51 -challengeType: 0 -dashedName: part-51 ---- - -# --description-- - -Set the `x` values for `tumblrLine` using another "d function". Use your `xScale` and the `d.year` to calculcate their values just like you did for the Twitter line. - -# --hints-- - -test-text - -```js -assert( - /const tumblrLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-052.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-052.md deleted file mode 100644 index 10547d63c1..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-052.md +++ /dev/null @@ -1,207 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca11 -title: Part 52 -challengeType: 0 -dashedName: part-52 ---- - -# --description-- - -Set the `y` values for `tumblrLine` using a "d function" again. Use your `yScale` and `d.followers.tumblr` to calculcate their values just like you did for the Twitter line. - -The x values for each line will be the same, but the y values will use the data from the different platforms. - -# --hints-- - -test-text - -```js -assert( - /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.tumblr\s*\)\s*\)/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-053.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-053.md deleted file mode 100644 index 88f5b9b4ce..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-053.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca12 -title: Part 53 -challengeType: 0 -dashedName: part-53 ---- - -# --description-- - -On a new line, `append` a `path` element to the `lineGraph` variable. This one will be for displaying the `tumblrLine`. - -# --hints-- - -test-text - -```js -assert( - $('svg path').length === 4 && - code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 2 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-054.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-054.md deleted file mode 100644 index 5e0ecb4239..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-054.md +++ /dev/null @@ -1,209 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca13 -title: Part 54 -challengeType: 0 -dashedName: part-54 ---- - -# --description-- - -Tell the new path how to be drawn by setting the `d` attribute to `tumblrLine(data)` using the `attr` function. - -# --hints-- - -test-text - -```js -assert($('svg path')[3].getAttribute('d').length === 115); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-055.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-055.md deleted file mode 100644 index 69e492e771..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-055.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca14 -title: Part 55 -challengeType: 0 -dashedName: part-55 ---- - -# --description-- - -Add three `attr` functions to the selection; one to set the `stroke` to your `tumblrColor` variable, another to set the `stroke-width` to `3`, and a third to set the `fill` to `transparent`. - -# --hints-- - -test-text - -```js -const tumblrPath = $('svg path')[3]; -assert( - tumblrPath.getAttribute('stroke') === '#f6dd71' && - tumblrPath.getAttribute('stroke-width') == '3' && - tumblrPath.getAttribute('fill') === 'transparent' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-056.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-056.md deleted file mode 100644 index 49da077e90..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-056.md +++ /dev/null @@ -1,218 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca15 -title: Part 56 -challengeType: 0 -dashedName: part-56 ---- - -# --description-- - -Two lines down, only one more to add for the Instagram followers. On a new line, create a new `const` named `instagramLine` and use the D3 `line` function to create another line like you did for the other two. - -# --hints-- - -test-text - -```js -assert(/const\s*instagramLine\s*=\s*d3\s*\.\s*line\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-057.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-057.md deleted file mode 100644 index 5a0a51555b..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-057.md +++ /dev/null @@ -1,226 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca16 -title: Part 57 -challengeType: 0 -dashedName: part-57 ---- - -# --description-- - -Appropriately set the `x` values for `instagramLine` like you did for the other two lines. - -# --hints-- - -test-text - -```js -assert( - /const instagramLine = d3\.line\(\)\s*\.x\s*\(\s*d\s*=>\s*xScale\s*\(\s*d\.year\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-058.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-058.md deleted file mode 100644 index 66f4ae49a3..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-058.md +++ /dev/null @@ -1,229 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca17 -title: Part 58 -challengeType: 0 -dashedName: part-58 ---- - -# --description-- - -Appropriately set the `y` values for `instagramLine` like you did for the other two lines. Use the Instagram followers data this time. - -# --hints-- - -test-text - -```js -assert( - /\.y\s*\(\s*d\s*=>\s*yScale\s*\(\s*d\.followers.instagram\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-059.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-059.md deleted file mode 100644 index b30967efed..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-059.md +++ /dev/null @@ -1,231 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca18 -title: Part 59 -challengeType: 0 -dashedName: part-59 ---- - -# --description-- - -On a new line, `append` a new `path` for the Instagram line like you did for the other two lines. - -# --hints-- - -test-text - -```js -assert( - $('svg path').length === 5 && - code.match(/lineGraph\.append\((`|'|")path\1\)/gi).length === 3 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-060.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-060.md deleted file mode 100644 index 1d1a2461c9..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-060.md +++ /dev/null @@ -1,230 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca19 -title: Part 60 -challengeType: 0 -dashedName: part-60 ---- - -# --description-- - -Use your `instagramLine` variable and your data to set the `d` attribute for this path like you did for the other two. - -# --hints-- - -test-text - -```js -assert($('svg path')[4].getAttribute('d').length === 171); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-061.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-061.md deleted file mode 100644 index 78de28a793..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-061.md +++ /dev/null @@ -1,239 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1a -title: Part 61 -challengeType: 0 -dashedName: part-61 ---- - -# --description-- - -Set the `stroke`, `stroke-width`, and `fill` attributes to their appropriate values for this line. The `stroke-width` and `fill` are the same as the other two. - -# --hints-- - -test-text - -```js -const instagramPath = $('svg path')[4]; -assert( - instagramPath.getAttribute('stroke') === '#fd9b98' && - instagramPath.getAttribute('stroke-width') == '3' && - instagramPath.getAttribute('fill') === 'transparent' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-062.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-062.md deleted file mode 100644 index 72e1323994..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-062.md +++ /dev/null @@ -1,247 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1b -title: Part 62 -challengeType: 0 -dashedName: part-62 ---- - -# --description-- - -Okay, your graph is coming along. All the lines are drawn, but they look a little plain. The next series of code additions will add circles to each point on each line. First is the Twitter line. On a new line, use the `selectAll` function on your `lineGraph` variable and pass it the string `twitter-circles`. It will look like this: - -```js -lineGraph.selectAll('twitter-circles') -``` - -`twitter-circles` don't exist and this selection will be an empty array, but it's needed. For now, you can just think of this string as a reference, similar to a variable name, so you know what elements you are working with. - -# --hints-- - -test-text - -```js -assert( - /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*twitter-circles\1\s*\)/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-063.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-063.md deleted file mode 100644 index c09620b08b..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-063.md +++ /dev/null @@ -1,246 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1c -title: Part 63 -challengeType: 0 -dashedName: part-63 ---- - -# --description-- - -Add the D3 `data` function to your selection and pass it the data array like this: - -```js -.data(data) -``` - -# --hints-- - -test-text - -```js -assert(/\.data\s*\(\s*data\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-064.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-064.md deleted file mode 100644 index ec2fac2892..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-064.md +++ /dev/null @@ -1,248 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1d -title: Part 64 -challengeType: 0 -dashedName: part-64 ---- - -# --description-- - -Next, chain the `enter()` function to the selection. - -The enter function identifies elements that need to be added when the data array is longer than the selection array. This is why you wanted the `selectAll` to be an empty array before. - -In this case, the `twitter-circles` selection has a length of 0, and the data array has a length of 9. So nine elements will be added when you use `append` in the next step. - -# --hints-- - -test-text - -```js -assert(/\.data\(data\)\s*\.enter\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-065.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-065.md deleted file mode 100644 index 8edf0ab0b8..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-065.md +++ /dev/null @@ -1,246 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1e -title: Part 65 -challengeType: 0 -dashedName: part-65 ---- - -# --description-- - -Add the `append` function to the selection, and use it to add `circle` elements. This will add the nine `circle` elements for your Twitter circles. They will be invisible to start, but the elements are there. - -# --hints-- - -test-text - -```js -assert($('svg circle').length === 9); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-066.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-066.md deleted file mode 100644 index 81dd24789e..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-066.md +++ /dev/null @@ -1,250 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca1f -title: Part 66 -challengeType: 0 -dashedName: part-66 ---- - -# --description-- - -Each circle needs a `cx` and `cy` attribute so it knows where to display on the SVG. These are similar to the x and y coordinates for the lines and will be calculated in the same way. The difference is that, for circles, the `cx` and `cy` are attributes, so you need to use the `attr` function. - -Use the `attr` function to set the `cx` to `d => xScale(d.year)`. - -# --hints-- - -test-text - -```js -assert($('svg circle')[0].getAttribute('cx') == '70'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-067.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-067.md deleted file mode 100644 index c3828efd81..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-067.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca20 -title: Part 67 -challengeType: 0 -dashedName: part-67 ---- - -# --description-- - -Next, set the `cy` attribute to `d => xScale(d.followers.twitter)`. - -As a reminder, this will pass each value of your Twitter followers to the `xScale` function where it will determine the y coordinate to use. - -# --hints-- - -test-text - -```js -assert($('svg circle')[0].getAttribute('cy') == '243.232'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-068.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-068.md deleted file mode 100644 index 3d5c6c2bc9..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-068.md +++ /dev/null @@ -1,252 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca21 -title: Part 68 -challengeType: 0 -dashedName: part-68 ---- - -# --description-- - -Circles also need an `r` (radius) attribute so they know how big to be. Use the `attr` function to set the `r` to `6`. - -# --hints-- - -test-text - -```js -assert($('svg circle')[0].getAttribute('r') == '6'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-069.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-069.md deleted file mode 100644 index 20564296fd..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-069.md +++ /dev/null @@ -1,258 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca22 -title: Part 69 -challengeType: 0 -dashedName: part-69 ---- - -# --description-- - -The circles are now visible, but I don't like the color. Use the appropriate function to set the `fill` to `white` and the `stroke` to your `twitterColor` variable. - -# --hints-- - -test-text - -```js -assert( - $('svg circle')[0].getAttribute('fill') === 'white' && - $('svg circle')[0].getAttribute('stroke') === '#7cd9d1' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-070.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-070.md deleted file mode 100644 index 42f78cc15b..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-070.md +++ /dev/null @@ -1,258 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca23 -title: Part 70 -challengeType: 0 -dashedName: part-70 ---- - -# --description-- - -Use the `style` function to set the `cursor` to `pointer`. Like your year labels, this will be an indicator for a hover effect you will add later. - -# --hints-- - -test-text - -```js -assert($('svg circle')[0].style.cursor === 'pointer'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-071.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-071.md deleted file mode 100644 index 56f09feeba..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-071.md +++ /dev/null @@ -1,263 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca24 -title: Part 71 -challengeType: 0 -dashedName: part-71 ---- - -# --description-- - -On a new line, use the `selectAll` function on your `lineGraph` variable again and pass it the string `tumblr-circles` this time. The next few steps will be for adding circles to the Tumblr line. - -# --hints-- - -test-text - -```js -assert( - /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*tumblr-circles\1\s*\)/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-072.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-072.md deleted file mode 100644 index 3161f8adfb..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-072.md +++ /dev/null @@ -1,268 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca25 -title: Part 72 -challengeType: 0 -dashedName: part-72 ---- - -# --description-- - -Add the same `data`, `enter`, and `append` functions here that you added for the `twitter-circles`, passing in the same arguments. Make sure they are in the same order. - -Remember that this will take the difference in length between the `tumblr-circles` selection(0) and the data array(9) and append that many circle elements. - -# --hints-- - -test-text - -```js -assert($('svg circle').length === 18); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-073.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-073.md deleted file mode 100644 index 1f860b9f0f..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-073.md +++ /dev/null @@ -1,274 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca26 -title: Part 73 -challengeType: 0 -dashedName: part-73 ---- - -# --description-- - -Set the `cx` and `cy` attributes for the Tumblr circles to their appropriate values. - -# --hints-- - -test-text - -```js -assert( - $('svg circle')[9].getAttribute('cx') == '70' && - $('svg circle')[9].getAttribute('cy') == '401.128' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-074.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-074.md deleted file mode 100644 index c84eb37bed..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-074.md +++ /dev/null @@ -1,280 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca27 -title: Part 74 -challengeType: 0 -dashedName: part-74 ---- - -# --description-- - -Use the `attr` function to set the `r` to `6`, the `fill` to `white`, and the `stroke` to your `tumblrColor` variable. - -# --hints-- - -test-text - -```js -assert( - $('svg circle')[9].getAttribute('r') == '6' && - $('svg circle')[9].getAttribute('fill') === 'white' && - $('svg circle')[9].getAttribute('stroke') === '#f6dd71' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-075.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-075.md deleted file mode 100644 index 72c22fb688..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-075.md +++ /dev/null @@ -1,280 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca28 -title: Part 75 -challengeType: 0 -dashedName: part-75 ---- - -# --description-- - -Set the `cursor` to `pointer` using the `style` function. - -# --hints-- - -test-text - -```js -assert($('svg circle')[9].style.cursor === 'pointer'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-076.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-076.md deleted file mode 100644 index 5840013fba..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-076.md +++ /dev/null @@ -1,287 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca29 -title: Part 76 -challengeType: 0 -dashedName: part-76 ---- - -# --description-- - -The circles have been added to two of the lines and look good, on to the last one. On a new line, create another empty selection like you did before. Use the string: `instagram-circles` this time. - -# --hints-- - -test-text - -```js -assert( - /lineGraph\s*\.\s*selectAll\s*\((`|'|")\s*instagram-circles\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-077.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-077.md deleted file mode 100644 index 038b25fe6f..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-077.md +++ /dev/null @@ -1,288 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2a -title: Part 77 -challengeType: 0 -dashedName: part-77 ---- - -# --description-- - -Add the three functions necessary to append the new circle elements. Remember that they won't actually be visible yet. - -# --hints-- - -test-text - -```js -assert($('svg circle').length === 27); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-078.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-078.md deleted file mode 100644 index 37dfd3a218..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-078.md +++ /dev/null @@ -1,296 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2b -title: Part 78 -challengeType: 0 -dashedName: part-78 ---- - -# --description-- - -Appropriately set the `cx` and `cy` attributes for the Instagram circles. - -# --hints-- - -test-text - -```js -assert( - $('svg circle')[18].getAttribute('cx') == '70' && - $('svg circle')[18].getAttribute('cy') == '424.024' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-079.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-079.md deleted file mode 100644 index 050c462974..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-079.md +++ /dev/null @@ -1,302 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2c -title: Part 79 -challengeType: 0 -dashedName: part-79 ---- - -# --description-- - -Appropriately set the radius (`r`), `fill`, and `stroke` for these circles. - -# --hints-- - -test-text - -```js -assert( - $('svg circle')[18].getAttribute('r') == '6' && - $('svg circle')[18].getAttribute('fill') === 'white' && - $('svg circle')[18].getAttribute('stroke') === '#fd9b98' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-080.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-080.md deleted file mode 100644 index a5d57e2bdc..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-080.md +++ /dev/null @@ -1,302 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2d -title: Part 80 -challengeType: 0 -dashedName: part-80 ---- - -# --description-- - -Apply the appropriate `cursor` style for these circles. - -# --hints-- - -test-text - -```js -assert($('svg circle')[18].style.cursor === 'pointer'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-081.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-081.md deleted file mode 100644 index 58692f5eb8..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-081.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2e -title: Part 81 -challengeType: 0 -dashedName: part-81 ---- - -# --description-- - -The line graph is looking good. All the empty space to the right will be for the pie graph and legend. Create a new `const` named `rightDashboard` and set equal to `d3.select('.dashboard')`. This will select your dashboard container again which currently only has the SVG element as a child. - -# --hints-- - -test-text - -```js -assert( - /const\s*rightDashboard\s*=\s*d3\.select\s*\((`|'|")\.dashboard\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-082.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-082.md deleted file mode 100644 index 189c7e257e..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-082.md +++ /dev/null @@ -1,312 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca2f -title: Part 82 -challengeType: 0 -dashedName: part-82 ---- - -# --description-- - -Use `append` to add a `div` element to the selection. This will put a div as another child of the dashboard container to hold the pie graph and legend. - -# --hints-- - -test-text - -```js -assert( - /const rightDashboard = d3\.select\((`|'|")\.dashboard\1\)\s*\.append\s*\(\s*(`|'|")div\2\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-083.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-083.md deleted file mode 100644 index 06544d55f4..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-083.md +++ /dev/null @@ -1,315 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca30 -title: Part 83 -challengeType: 0 -dashedName: part-83 ---- - -# --description-- - -Create a new `const` named `pieGraph` and set it equal to `rightDashboard.append('svg')`. This will add an SVG element for the pie graph as a child of the div you just added. The pie graph will have three slices, one for each platform. It will display a percentage of how many followers each platform has for the displayed year. - -# --hints-- - -test-text - -```js -assert( - /const\s*pieGraph\s*=\s*rightDashboard\s*\.\s*append\s*\((`|'|")svg\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-084.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-084.md deleted file mode 100644 index ff5d59d875..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-084.md +++ /dev/null @@ -1,318 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca31 -title: Part 84 -challengeType: 0 -dashedName: part-84 ---- - -# --description-- - -Add two `attr` functions that set the `width` and `height` of the new SVG to `200`. - -# --hints-- - -test-text - -```js -assert( - $('svg')[1].getAttribute('width') == '200' && - $('svg')[1].getAttribute('height') == '200' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-085.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-085.md deleted file mode 100644 index 254821537e..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-085.md +++ /dev/null @@ -1,319 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca32 -title: Part 85 -challengeType: 0 -dashedName: part-85 ---- - -# --description-- - -Create a new `const` named `pieArc` and set it equal to `d3.arc()`. This will be used to create the angles for the lines of the pie chart using the D3 arc generator. - -# --hints-- - -test-text - -```js -assert(/const\s*pieArc\s*=\s*d3\s*\.\s*arc\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-086.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-086.md deleted file mode 100644 index 24d2528df9..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-086.md +++ /dev/null @@ -1,324 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca33 -title: Part 86 -challengeType: 0 -dashedName: part-86 ---- - -# --description-- - -Chain the function `outerRadius(100)` to the arc. This will set the outer radius of the pie chart to 100. - -# --hints-- - -test-text - -```js -assert( - /const pieArc = d3\.arc\(\)\s*\.\s*outerRadius\s*\(\s*100\s*\)/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-087.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-087.md deleted file mode 100644 index 158785f17c..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-087.md +++ /dev/null @@ -1,328 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca34 -title: Part 87 -challengeType: 0 -dashedName: part-87 ---- - -# --description-- - -Chain `innerRadius` to the arc and pass it `0` (zero). This is set to zero to make a traditional pie chart, you would use a larger inner radius to create a doughnut chart. - -# --hints-- - -test-text - -```js -assert( - /const pieArc = d3\.arc\(\)\s*\.outerRadius\(100\)\s*\.\s*innerRadius\s*\(\s*0\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-088.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-088.md deleted file mode 100644 index 0374b5d205..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-088.md +++ /dev/null @@ -1,329 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca35 -title: Part 88 -challengeType: 0 -dashedName: part-88 ---- - -# --description-- - -The pie chart needs a new scale to set the colors. Create a new `const` named `pieColors` and set it equal to `d3.scaleOrdinal()`. An ordinal scale is for a set of data that will have exactly one item in the range specifically for it. - -In this case, each platform of followers you have will map directly to a single color with nothing in between. - -# --hints-- - -test-text - -```js -assert(/const\s*pieColors\s*=\s*d3\s*\.\s*scaleOrdinal\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-089.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-089.md deleted file mode 100644 index d370af97db..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-089.md +++ /dev/null @@ -1,334 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca36 -title: Part 89 -challengeType: 0 -dashedName: part-89 ---- - -# --description-- - -Set the `domain` of the scale to `data[8].followers`. This will be three items, one for each platform. - -# --hints-- - -test-text - -```js -assert( - /const pieColors = d3\.scaleOrdinal\(\)\s*\.\s*domain\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-090.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-090.md deleted file mode 100644 index 2ab27a1292..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-090.md +++ /dev/null @@ -1,336 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca37 -title: Part 90 -challengeType: 0 -dashedName: part-90 ---- - -# --description-- - -Since the domain has three items, the range also needs to have three items. If it had less, the values would repeat, putting the same color on the pie chart multiple times. Add the `range` function to the scale and pass it an array with your three color variables. Put them in the same order in which they are defined. - -# --hints-- - -test-text - -```js -assert( - /\.domain\(data\[8\]\.followers\)\s*\.\s*range\s*\(\s*\[\s*twitterColor\s*,\s*tumblrColor\s*,\s*instagramColor\s*\]\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-091.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-091.md deleted file mode 100644 index ca30c57807..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-091.md +++ /dev/null @@ -1,335 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca38 -title: Part 91 -challengeType: 0 -dashedName: part-91 ---- - -# --description-- - -Create a new `const` named `pie` and set it equal to `d3.pie()`. This is the D3 pie chart generator. - -# --hints-- - -test-text - -```js -assert(/const\s*pie\s*=\s*d3\s*\.\s*pie\s*\(\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-092.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-092.md deleted file mode 100644 index 78810ee7c2..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-092.md +++ /dev/null @@ -1,344 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca39 -title: Part 92 -challengeType: 0 -dashedName: part-92 ---- - -# --description-- - -Chain a `value` function to `pie` and pass it `d => d.value`. Each piece of data(`d`) will have a `key`(platform) and a `value`(number of followers), you want to return the number of followers here. The pie function will create an array of objects from these values that describe the angles and sizes the pie chart needs. - -In a few steps, you will make an array out of your data variable that will be passed to this function. - -# --hints-- - -test-text - -```js -assert( - /const pie = d3\.pie\(\)\s*\.\s*value\s*\(\s*d\s*=>\s*d\.value\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-093.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-093.md deleted file mode 100644 index d04e9e9cd4..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-093.md +++ /dev/null @@ -1,345 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3a -title: Part 93 -challengeType: 0 -dashedName: part-93 ---- - -# --description-- - -Create a new `const` named `pieGraphData` and set the value equal to `pieGraph.selectAll('pieSlices')`. This is an empty selection similar circles you created earlier. - -# --hints-- - -test-text - -```js -assert( - /const\s*pieGraphData\s*=\s*pieGraph\s*\.\s*selectAll\s*\(\s*(`|'|")pieSlices\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-094.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-094.md deleted file mode 100644 index 2f7ab8d169..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-094.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3b -title: Part 94 -challengeType: 0 -dashedName: part-94 ---- - -# --description-- - -Add the `data` function to the selection. Pass it your `pie` function with an empty array as its argument for now. The next step will get the correct array to put there. - -# --hints-- - -test-text - -```js -assert( - /const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*\[\s*\]\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-095.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-095.md deleted file mode 100644 index aa0739df56..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-095.md +++ /dev/null @@ -1,367 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3c -title: Part 95 -challengeType: 0 -dashedName: part-95 ---- - -# --description-- - -You want the array passed to `pie` to be an array of key/value objects for the 2020 followers. `d3.entries` will build that array for you. Here's how that looks: - -```js -d3.entries(data[8].followers)) -``` - -The array it builds looks like this: - -```js -[ - { key: 'twitter', value: 2845 }, - { key: 'tumblr', value: 2040 }, - { key: 'instagram', value: 4801 } -] -``` - -This is where the `value` comes from in your `pie` variable. - -Add the `d3.entries` function as your `pie` argument. Use it to create the above array. - -# --hints-- - -test-text - -```js -assert( - /const pieGraphData = pieGraph\.selectAll\((`|'|")pieSlices\1\)\s*\.\s*data\s*\(pie\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-096.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-096.md deleted file mode 100644 index 9360d253ba..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-096.md +++ /dev/null @@ -1,350 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3d -title: Part 96 -challengeType: 0 -dashedName: part-96 ---- - -# --description-- - -Add the `enter` function to the current selection. Just like before, the initial selection here has a length of zero and the data has a length of three. So when you append elements in the next step, three will be created; one for each slice of the pie. - -# --hints-- - -test-text - -```js -assert( - /\.data\(pie\(d3\.entries\(data\[8\]\.followers\)\)\)\s*\.\s*enter\s*\(\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-097.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-097.md deleted file mode 100644 index 951024b7ea..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-097.md +++ /dev/null @@ -1,348 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3e -title: Part 97 -challengeType: 0 -dashedName: part-97 ---- - -# --description-- - -Use `append` to add three `g` elements for the pie. - -# --hints-- - -test-text - -```js -assert($('svg g').length === 20); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-098.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-098.md deleted file mode 100644 index 50c6cb583e..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-098.md +++ /dev/null @@ -1,351 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca3f -title: Part 98 -challengeType: 0 -dashedName: part-98 ---- - -# --description-- - -On a new line, `append` a `path` element to your `pieGraphData` variable. This is where you will start to draw the pie chart. - -# --hints-- - -test-text - -```js -assert(/pieGraphData\s*\.\s*append\s*\((`|'|")path\1\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-099.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-099.md deleted file mode 100644 index 8955c72ecd..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-099.md +++ /dev/null @@ -1,352 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca40 -title: Part 99 -challengeType: 0 -dashedName: part-99 ---- - -# --description-- - -Set the `d` attribute to your `pieArc` variable. Just like the `d` in your lines, this is an SVG attribute for path elements that describes how to draw things. Your `pieArc` variable will determine what this value is for you. - -# --hints-- - -test-text - -```js -assert($('.dashboard div svg path')[0].getAttribute('d').length === 94); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-100.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-100.md deleted file mode 100644 index db5e69b6b2..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-100.md +++ /dev/null @@ -1,372 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca41 -title: Part 100 -challengeType: 0 -dashedName: part-100 ---- - -# --description-- - -The pie graph is being drawn at the `0, 0` coordinates of the SVG. Back on your `pieGraphData` variable, add an attribute that changes the `transform` to `translate(100, 100)`. - -Since the pie chart has a radius of 100, and the SVG is 200 by 200, this will move it so it is centered. - -# --hints-- - -test-text - -```js -const transform = $('.dashboard div svg g')[0].getAttribute('transform'); -assert(/translate\s*\(\s*100\s*,\s*100\s*\)/g.test(transform)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-101.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-101.md deleted file mode 100644 index 016740db33..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-101.md +++ /dev/null @@ -1,377 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca42 -title: Part 101 -challengeType: 0 -dashedName: part-101 ---- - -# --description-- - -Back at the bottom, where you draw the chart. Use the `attr` function to set the `fill` to a "d function". In the "d function", use your `pieColors` scale to get the color value for the platform(`d.data.key`). So when each platform is passed to your scale, is will get the appropriate color to use as the fill from the scales range. - -# --hints-- - -test-text - -```js -const pathsArr = $('.dashboard div svg g path'); -assert( - pathsArr[0].getAttribute('fill') === '#7cd9d1' && - pathsArr[1].getAttribute('fill') === '#f6dd71' && - pathsArr[2].getAttribute('fill') === '#fd9b98' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-102.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-102.md deleted file mode 100644 index e7d9c7423c..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-102.md +++ /dev/null @@ -1,364 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca43 -title: Part 102 -challengeType: 0 -dashedName: part-102 ---- - -# --description-- - -Next, set the `stroke` to `white` and the `stroke-width` to `2`. - -# --hints-- - -test-text - -```js -const pathsArr = $('.dashboard div svg g path'); -assert( - pathsArr[0].getAttribute('stroke') === 'white' && - pathsArr[0].getAttribute('stroke-width') == 2 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-103.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-103.md deleted file mode 100644 index 2e7f2196cf..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-103.md +++ /dev/null @@ -1,365 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca44 -title: Part 103 -challengeType: 0 -dashedName: part-103 ---- - -# --description-- - -Your chart needs some labels in each slice. On a new line, append `text` elements to your `pieGraphData` variable. - -# --hints-- - -test-text - -```js -assert(/pieGraphData\s*\.\s*append\s*\((`|'|")text\1\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-104.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-104.md deleted file mode 100644 index 0cb9c6cda4..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-104.md +++ /dev/null @@ -1,381 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca47 -title: Part 104 -challengeType: 0 -dashedName: part-104 ---- - -# --description-- - -Chain a `text` function to set the text of each pie slice to a percentage. Set the value to a "d function" with curly brackets and leave the function empty for now. It should look like this: - -```js -.text(d => { - -}) -``` - -The method for getting the percent of each slice will take a few steps: - -1. Find the total number of followers for the displayed year -2. Divide the followers of a single platform by that total -3. Turn it into a string to display - -# --hints-- - -test-text - -```js -assert(/\.append\('text'\)\s*\.text\s*\(\s*d\s*=>\s*\{\s*\}\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-105.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-105.md deleted file mode 100644 index 9fe69b81a2..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-105.md +++ /dev/null @@ -1,383 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca48 -title: Part 105 -challengeType: 0 -dashedName: part-105 ---- - -# --description-- - -In the function you just created, create a `const` named `values`. Use the `d3.values` function to get the values of the 2020 followers and set the result to your `values` variable. Here's how to get the values: - -```js -d3.values(data[8].followers) -``` - -It will be an array with the values of the followers for the three platforms in 2020. - -Note that this "d function" has curly brackets. So you could `console.log(values)` in there to see it's value. - -# --hints-- - -test-text - -```js -assert( - /const\s*values\s*=\s*d3\s*\.\s*values\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\);?/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-106.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-106.md deleted file mode 100644 index 0de087f1cc..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-106.md +++ /dev/null @@ -1,372 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca49 -title: Part 106 -challengeType: 0 -dashedName: part-106 ---- - -# --description-- - -Since you want to find what percent each of those `values` is, you first need to add them all up. `d3.sum` will do that for you. Create a new `const` named `sum` and set it equal to `d3.sum(values)`. - -# --hints-- - -test-text - -```js -assert(/const\s*sum\s*=\s*d3\s*\.\s*sum\s*\(\s*values\s*\)\s*;?/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-107.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-107.md deleted file mode 100644 index 9663f711d9..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-107.md +++ /dev/null @@ -1,376 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4a -title: Part 107 -challengeType: 0 -dashedName: part-107 ---- - -# --description-- - -Create another variable named `percent` and set it equal to `d.data.value` divided by your `sum` variable. - -# --hints-- - -test-text - -```js -assert( - /const\s*percent\s*=\s*d\s*\.\s*data\s*\.\s*value\s*\/\s*sum;?/g.test(code) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-108.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-108.md deleted file mode 100644 index 2997d10be6..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-108.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4b -title: Part 108 -challengeType: 0 -dashedName: part-108 ---- - -# --description-- - -Your percent values are numbers less than one. You will need to multiply it by 100, round of the decimals, and add a `%` sign. Use a template literal to return this to the `text` function: - -```js -${Math.round(percent * 100)}% -``` - -Don't forget that you need a `return` statement here since you aren't using an implicit return. - -# --hints-- - -test-text - -```js -assert( - /return\s*`\$\{\s*Math\s*\.\s*round\s*\(\s*percent\s*\*\s*100\s*\)\s*\}%`;?\s*\}\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-109.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-109.md deleted file mode 100644 index 194c4a19ab..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-109.md +++ /dev/null @@ -1,388 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4c -title: Part 109 -challengeType: 0 -dashedName: part-109 ---- - -# --description-- - -The text elements are at the center of the pie graph, you need to use the `centroid` from the D3 arc API to tell them where to go. Add an `attr` function to set the `transform` to a `d` function that returns this template literal: `translate(${ pieArc.centroid(d) })` - -The `centroid` function will find the midpoint of each slice for each text element. - -# --hints-- - -test-text - -```js -const transform = $('.dashboard div svg g text')[0] - .getAttribute('transform') - .replace('translate(', '') - .replace(')', '') - .split(','); -assert(transform[0] < 39 && transform[1] > 31); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-110.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-110.md deleted file mode 100644 index 731a5184b1..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-110.md +++ /dev/null @@ -1,389 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4d -title: Part 110 -challengeType: 0 -dashedName: part-110 ---- - -# --description-- - -The function you just added, placed the start of the text at the midpoint of each slice. Change the `style` of the text to give it a `text-anchor` of `middle` so the middle of the text is in the middle of the slice. - -After that, set the `font` to `10px verdana`. - -# --hints-- - -test-text - -```js -const text = $('.dashboard div svg g text')[0]; -assert( - text.style.textAnchor === 'middle' && - text.style.font.toLowerCase() === '10px verdana' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-111.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-111.md deleted file mode 100644 index e191bb7684..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-111.md +++ /dev/null @@ -1,391 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4e -title: Part 111 -challengeType: 0 -dashedName: part-111 ---- - -# --description-- - -The last component you are going to add is a legend to display the name of each platform and the number of followers for the year. Create a new `const` named `legend` and use it to `append` a `table` to your `rightDashboard` variable. This looks similar to the code where you created your `pieGraph` variable. - -# --hints-- - -test-text - -```js -assert( - /const\s*legend\s*=\s*rightDashboard\s*\.\s*append\s*\(\s*('|"|`)\s*table\s*\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-112.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-112.md deleted file mode 100644 index 680c56e08b..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-112.md +++ /dev/null @@ -1,394 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca4f -title: Part 112 -challengeType: 0 -dashedName: part-112 ---- - -# --description-- - -Give the table a `width` of `200` and a `height` of `120` using `attr`. - -# --hints-- - -test-text - -```js -const table = $('.dashboard div table')[0]; -assert( - table.getAttribute('width') == 200 && table.getAttribute('height') == 120 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-113.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-113.md deleted file mode 100644 index c0c7b38cef..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-113.md +++ /dev/null @@ -1,396 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca50 -title: Part 113 -challengeType: 0 -dashedName: part-113 ---- - -# --description-- - -Set the `font` to `12px verdana` using the `style` function. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table')[0].style.font.toLowerCase() === '12px verdana' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-114.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-114.md deleted file mode 100644 index 0492d13020..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-114.md +++ /dev/null @@ -1,401 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca51 -title: Part 114 -challengeType: 0 -dashedName: part-114 ---- - -# --description-- - -Create a new `const` named `legendTitle` and use it to `append` a `thead` to your `legend` variable. `thead` is used with the HTML table element and is for the top row of the table. - -# --hints-- - -test-text - -```js -assert( - /const\s*legendTitle\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*thead\s*\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-115.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-115.md deleted file mode 100644 index 4d4098f707..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-115.md +++ /dev/null @@ -1,401 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca52 -title: Part 115 -challengeType: 0 -dashedName: part-115 ---- - -# --description-- - -`append` a `tr` element to the selection and then append a `th` element right after it. `tr` is for defining a row of the table, and `th` is for defining the header cells of the table. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table thead tr th').length === 1); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-116.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-116.md deleted file mode 100644 index 39ced1543d..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-116.md +++ /dev/null @@ -1,404 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca53 -title: Part 116 -challengeType: 0 -dashedName: part-116 ---- - -# --description-- - -Use the `text` function to set the text of the selection to `2020 followers`. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table thead tr th').text() === '2020 followers'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-117.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-117.md deleted file mode 100644 index bf9e34eda4..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-117.md +++ /dev/null @@ -1,406 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca54 -title: Part 117 -challengeType: 0 -dashedName: part-117 ---- - -# --description-- - -Your table is going to have three columns, one for the platform name, one for the color it is using on your dashboard, and a third to display the number of followers. So you want the title to take up all three columns. Set the `colspan` attribute of the `th` to `3` so it spans all three of these columns. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table thead tr th')[0].getAttribute('colspan') == 3); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-118.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-118.md deleted file mode 100644 index 0c3e750347..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-118.md +++ /dev/null @@ -1,412 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca55 -title: Part 118 -challengeType: 0 -dashedName: part-118 ---- - -# --description-- - -Create a new `const` named `legendRows` and use it to `append` a `tbody` element to your `legend` variable similar to how you added the `thead`. `tbody` is for the main content of an HTML table. - -# --hints-- - -test-text - -```js -assert( - /const\s*legendRows\s*=\s*legend\s*\.\s*append\s*\(\s*('|"|`)\s*tbody\s*\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-119.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-119.md deleted file mode 100644 index 68b03ce851..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-119.md +++ /dev/null @@ -1,417 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca56 -title: Part 119 -challengeType: 0 -dashedName: part-119 ---- - -# --description-- - -Add a `selectAll` function to the selection and pass it the string `tr`. - -# --hints-- - -test-text - -```js -assert( - /const legendRows = legend\.append\('tbody\s*'\)\s*\.\s*selectAll\s*\(\s*('|"|`)\s*tr\s*\1\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-120.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-120.md deleted file mode 100644 index aa30807012..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-120.md +++ /dev/null @@ -1,417 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca57 -title: Part 120 -challengeType: 0 -dashedName: part-120 ---- - -# --description-- - -Use the `data` function to set the data for the rows to an array of your 2020 followers. To get the array use `d3.entries(data[8].followers)`. Remember, this will create an array of key/value pairs of your followers for that year. - -# --hints-- - -test-text - -```js -assert( - /\.selectAll\('tr'\)\s*\.\s*data\s*\(\s*d3\s*\.\s*entries\s*\(\s*data\s*\[\s*8\s*\]\s*\.\s*followers\s*\)\s*\)/g.test( - code - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-121.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-121.md deleted file mode 100644 index ee08e49dda..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-121.md +++ /dev/null @@ -1,418 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca58 -title: Part 121 -challengeType: 0 -dashedName: part-121 ---- - -# --description-- - -Add the `enter` and `append` functions to the selection. Pass the string `tr` to the append function to add three table row elements. These elements will be for displaying each platform's name. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr').length === 3); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-122.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-122.md deleted file mode 100644 index 777a09d553..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-122.md +++ /dev/null @@ -1,422 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca59 -title: Part 122 -challengeType: 0 -dashedName: part-122 ---- - -# --description-- - -On a new line, `append` a `td` to your `legendRows` variable. `td` is for an individual cell in the row of the table. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr td').length === 3); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-123.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-123.md deleted file mode 100644 index 562a3d4fd0..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-123.md +++ /dev/null @@ -1,426 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5a -title: Part 123 -challengeType: 0 -dashedName: part-123 ---- - -# --description-- - -Use the `text` function to set the text of each `td` to the `key` of each data point by using a "d function" to return `d.key`. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table tbody tr td').text() === 'twittertumblrinstagram' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-124.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-124.md deleted file mode 100644 index 0e33d97bc6..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-124.md +++ /dev/null @@ -1,431 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5b -title: Part 124 -challengeType: 0 -dashedName: part-124 ---- - -# --description-- - -This is the first column of your table. Set the `align` attribute to `right` to align the text to the right of each cell. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table tbody tr td')[0] - .getAttribute('align') - .toLowerCase() === 'right' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-125.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-125.md deleted file mode 100644 index 915e877e04..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-125.md +++ /dev/null @@ -1,430 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5c -title: Part 125 -challengeType: 0 -dashedName: part-125 ---- - -# --description-- - -On a new line, append another `td` element to your `legendRows` variable. This will be for colored squares in the center column. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr td').length === 6); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-126.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-126.md deleted file mode 100644 index 1acfc7b1f6..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-126.md +++ /dev/null @@ -1,437 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5d -title: Part 126 -challengeType: 0 -dashedName: part-126 ---- - -# --description-- - -Set the `align` attribute to `center`. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table tbody tr td')[1] - .getAttribute('align') - .toLowerCase() === 'center' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-127.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-127.md deleted file mode 100644 index c2d8ad27c4..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-127.md +++ /dev/null @@ -1,435 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5e -title: Part 127 -challengeType: 0 -dashedName: part-127 ---- - -# --description-- - -Append a `div` element to the selection. Each `div` will be a small square for each color. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr td div').length === 3); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-128.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-128.md deleted file mode 100644 index 7a09ef3ed3..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-128.md +++ /dev/null @@ -1,438 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca5f -title: Part 128 -challengeType: 0 -dashedName: part-128 ---- - -# --description-- - -Set the `width` to `16px` and the `height` to `16px` using the `style` function. - -# --hints-- - -test-text - -```js -const div = $('.dashboard div table tbody tr td div')[0]; -assert(div.style.width == '16px' && div.style.height === '16px'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-129.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-129.md deleted file mode 100644 index 992537b3e6..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-129.md +++ /dev/null @@ -1,443 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca60 -title: Part 129 -challengeType: 0 -dashedName: part-129 ---- - -# --description-- - -Using the `style` function again, set the `background-color` of each div to a "d function". Using the "d function", pass the key(`d.key`) of each data point to your `pieColors` scale so it knows what color to use. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table tbody tr td div')[0].style.backgroundColor === - 'rgb(124, 217, 209)' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-130.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-130.md deleted file mode 100644 index 2cb143184e..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-130.md +++ /dev/null @@ -1,443 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca61 -title: Part 130 -challengeType: 0 -dashedName: part-130 ---- - -# --description-- - -On a new line, append another `td` to the `legendRows` variable for the last group of items. It will display the number of followers for each platform. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr td').length === 9); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-131.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-131.md deleted file mode 100644 index 470b5a68e2..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-131.md +++ /dev/null @@ -1,446 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca62 -title: Part 131 -challengeType: 0 -dashedName: part-131 ---- - -# --description-- - -Set the `text` to a "d function" that returns the value(`d.value`) for each data point. - -# --hints-- - -test-text - -```js -assert($('.dashboard div table tbody tr td')[2].innerHTML === '2845'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-132.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-132.md deleted file mode 100644 index cb3e63813d..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-132.md +++ /dev/null @@ -1,450 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca63 -title: Part 132 -challengeType: 0 -dashedName: part-132 ---- - -# --description-- - -Set the `align` attribute to `left` for this selection. - -# --hints-- - -test-text - -```js -assert( - $('.dashboard div table tbody tr td')[2] - .getAttribute('align') - .toLowerCase() === 'left' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-133.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-133.md deleted file mode 100644 index 0aa86bfb00..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-133.md +++ /dev/null @@ -1,448 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca64 -title: Part 133 -challengeType: 0 -dashedName: part-133 ---- - -# --description-- - -The legend has all the information is needs, but the title looks a little misaligned. Go to where you created your `legendTitle` variable and set the `position` to `relative` and the `left` to `20px` using `style` functions. - -# --hints-- - -test-text - -```js -const th = $('.dashboard div table thead tr th')[0]; -assert(th.style.position === 'relative' && th.style.left === '20px'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-134.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-134.md deleted file mode 100644 index 1daa93dc49..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-134.md +++ /dev/null @@ -1,453 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca65 -title: Part 134 -challengeType: 0 -dashedName: part-134 ---- - -# --description-- - -The legend and pie graph look a little off as well. Go to where you created your `legend` variable and add a `position` of `relative` and a `top` of `30px` using `style` functions. - -# --hints-- - -test-text - -```js -const table = $('.dashboard div table')[0]; -assert(table.style.position === 'relative' && table.style.top === '30px'); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-135.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-135.md deleted file mode 100644 index 3acf263d2b..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-135.md +++ /dev/null @@ -1,464 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca66 -title: Part 135 -challengeType: 0 -dashedName: part-135 ---- - -# --description-- - -Lastly, where you created your `pieGraph` variable, add a `position` of `relative` and a `left` of `20px` using `style` functions. - -# --hints-- - -test-text - -```js -const pieGraph = $('.dashboard div svg')[0]; -assert( - pieGraph.style.position === 'relative' && pieGraph.style.left === '20px' -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-136.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-136.md deleted file mode 100644 index 6ab6c4a6be..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-136.md +++ /dev/null @@ -1,476 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca67 -title: Part 136 -challengeType: 0 -dashedName: part-136 ---- - -# --description-- - -Finally! You have all the elements displayed and they look good. The last thing you will do is make it so you can see the data from whatever year you want. - -Wrap all the code in the script you've been working with in a function named `drawDashboard` and give it a parameter named `year`. Then, at the bottom of the script, call the function you created and pass it the number `2020`. - -# --hints-- - -test-text - -```js -assert( - typeof drawDashboard === 'function' && - /<\/script>\s* - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-137.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-137.md deleted file mode 100644 index 736bc47dd7..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-137.md +++ /dev/null @@ -1,484 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca68 -title: Part 137 -challengeType: 0 -dashedName: part-137 ---- - -# --description-- - -At the top of the function create a new `const` named `index`. You are going to use it to find the item in the `data` array with the year that is passed to the function. - -Use JavaScript's `findIndex` function to set your `index` variable to the index of the item in the `data` array where the year is the same as the year passed to your `drawDashboard` function. Here's an example: - -```js -array.findIndex(d => - // find the index where the year passed to - // drawDashboard equals the year of the array -) -``` - -After this, you will be able to use `data[index]` to get that item in the array. - -# --hints-- - -test-text - -```js -const script = $('.dashboard').siblings('script')[1].innerHTML; -assert( - /var index = data.findIndex\(function \(d\) \{\s*return (year === d\.year|d.year === year);\s*\}\);/g.test( - script - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-138.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-138.md deleted file mode 100644 index 763f870eeb..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-138.md +++ /dev/null @@ -1,479 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6a -title: Part 138 -challengeType: 0 -dashedName: part-138 ---- - -# --description-- - -There are four places in the file where you used `data[8]` to set data to the year 2020. Change all five of them to `data[index]` so you can pass in any year to the function to display the data from that year. - -The five spots are: - -1. The `domain` for `pieColors`. -2. The `data` for `pieGraphData`. -3. The `text` for your pie slice text. -4. The `data` for your `legendRows`. - -# --hints-- - -test-text - -```js -assert( - !/data\[8\]/g.test(code) && code.match(/data\s*\[\s*index\s*\]/g).length === 4 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-139.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-139.md deleted file mode 100644 index fa2774a18d..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-139.md +++ /dev/null @@ -1,485 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6b -title: Part 139 -challengeType: 0 -dashedName: part-139 ---- - -# --description-- - -Go to where you `call` the `xAxis` and create a `mouseover` event for the labels. Chain the `on` function to them, pass it the string `mouseover`, and give it a value of a "d function" that calls `drawDashboard` with `d` as the argument. It will look like this: - -```js -.on('mouseover', d => drawDashboard(d)) -``` - -So now, when you hover a label, the function will be called with the year that is being hovered. - -# --hints-- - -test-text - -```js -const script = $('.dashboard').siblings('script')[1].innerHTML; -assert( - /\.on\(('|"|`)mouseover\1, function \(d\) \{\s*return drawDashboard\(d\);\s*\}\)/g.test( - script - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-140.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-140.md deleted file mode 100644 index de5fea91df..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-140.md +++ /dev/null @@ -1,478 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6c -title: Part 140 -challengeType: 0 -dashedName: part-140 ---- - -# --description-- - -There's a problem, each time you hover a label it adds all the elements to the container again. If you empty the container at the top of the function, it will redraw them where they need to be. - -Go back to the top of the function and use `d3.select` to select the `.dashboard` element and chain the `html` function to it with an empty string as it parameter. Empty means no spaces. - -# --hints-- - -test-text - -```js -const script = $('.dashboard').siblings('script')[1].innerHTML; -assert(/d3\.select\(('|"|`)\.dashboard\1\)\.html\(('|"|`)\2\)/g.test(script)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-141.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-141.md deleted file mode 100644 index 0e35de8505..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-141.md +++ /dev/null @@ -1,489 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6d -title: Part 141 -challengeType: 0 -dashedName: part-141 ---- - -# --description-- - -Now when you hover a label, you can see the data for the different years. - -Where you created the `text` elements for the x-axis labels, change the `font` to `bold 10px verdana` for the currently displayed year. - -To do this, create a "d function" in the `font` value area and return the above sting if `d` equals `year`. Otherwise, return the string that is currently there (`10px verdana`). It's easiest to use a ternary operator for this. - -Here's a hint: - -```js -.style('font', d => d === year ? ) -``` - -# --hints-- - -test-text - -```js -assert( - Object.values($('.dashboard svg g text')).filter( - (el) => el.style && el.style.font.toLowerCase() === 'bold 10px verdana' - ).length === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-142.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-142.md deleted file mode 100644 index ca70f946f0..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-142.md +++ /dev/null @@ -1,481 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6e -title: Part 142 -challengeType: 0 -dashedName: part-142 ---- - -# --description-- - -Create another `mouseover` event for when you hover one of the `twitter-circles`. It will look like the other `mouseover` event you created except the `drawDashboard` function will take `d.year` instead of `d`. - -# --hints-- - -test-text - -```js -const script = $('.dashboard').siblings('script')[1].innerHTML; -assert( - /\.on\(('|"|`)mouseover\1, function \(d\) \{\s*return drawDashboard\(d\.year\);\s*\}\)/g.test( - script - ) -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-143.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-143.md deleted file mode 100644 index adb5ee8ab4..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-143.md +++ /dev/null @@ -1,483 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca6f -title: Part 143 -challengeType: 0 -dashedName: part-143 ---- - -# --description-- - -Similar to how you made the text bold for the label of the displayed year; change the `fill` of the `twitter-circles` to your `twitterColor` for the currently displayed year. To do this, use a "d function" that returns the `twitterColor` when `d.year` equals `year`, and leave it `white` if it doesn't. - -# --hints-- - -test-text - -```js -assert( - Object.values($('.dashboard svg circle')).filter( - (el) => el.getAttribute && el.getAttribute('fill') === '#7cd9d1' - ).length === 1 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-144.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-144.md deleted file mode 100644 index 26ea98aa97..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-144.md +++ /dev/null @@ -1,490 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca70 -title: Part 144 -challengeType: 0 -dashedName: part-144 ---- - -# --description-- - -Add a `mouseover` event to the `tumblr-circles` and `instagram-circles` in the same way that you did for the `twitter-circles`. - -After that, you will be able hover any of the circles or year labels to get the information for that year. - -# --hints-- - -test-text - -```js -const script = $('.dashboard').siblings('script')[1].innerHTML; -assert( - script.match( - /\.on\(('|"|`)mouseover\1, function \(d\) \{\s*return drawDashboard\(d\.year\);\s*\}\)/g - ).length === 3 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-145.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-145.md deleted file mode 100644 index 52d84a5440..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-145.md +++ /dev/null @@ -1,494 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca71 -title: Part 145 -challengeType: 0 -dashedName: part-145 ---- - -# --description-- - -Change the `fill` of the `tumblr-circles` and `instagram-circles` to use a "d function" that returns their respective color variables when `d.year` equals `year`, leave it `white` when they don't. This is similar to how you set the fill of the Twitter circles. - -Then, all of the circles will get filled in for the currently displayed year. - -# --hints-- - -test-text - -```js -const circles = Object.values($('.dashboard svg circle')); -assert( - circles.filter( - (el) => - el.getAttribute && - (el.getAttribute('fill') === '#7cd9d1' || - el.getAttribute('fill') === '#f6dd71' || - el.getAttribute('fill') === '#fd9b98') - ).length === 3 -); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -``` diff --git a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-146.md b/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-146.md deleted file mode 100644 index 421629433d..0000000000 --- a/curriculum/challenges/portuguese/04-data-visualization/d3-dashboard/part-146.md +++ /dev/null @@ -1,483 +0,0 @@ ---- -id: 5d8a4cfbe6b6180ed9a1ca72 -title: Part 146 -challengeType: 0 -dashedName: part-146 ---- - -# --description-- - -The last thing is that the legend title always shows 2020. Change the `text` of the `legendTitle` to a template literal that shows the currently displayed year followed by a space and `followers`. - -That's it, your dashboard is finished! Don't forget to admire your hard work. - -# --hints-- - -test-text - -```js -assert(/\.text\s*\(\s*`\s*\$\{\s*year\s*\} followers`\s*\)/g.test(code)); -``` - -# --seed-- - -## --before-user-code-- - -```html - - - - D3 Dashboard - - - - -
- - -``` - -## --seed-contents-- - -```html - - -``` - -# --solutions-- - -```html - - -```