Chrissi kalk/datavis technologies handson

src/routes/02_exercises/01_web_technologies/exercise_01/Exercise.svelte

@@ -1,7 +1 @@
-<div class="answer">My name is ...</div>
-
-<style>
-  div.answer {
-    color: rgb(2, 96, 45);
-  }
-</style>
+<div class="answer"> <p style="color: red">My name is <b>Christina</b></p></div>

src/routes/02_exercises/01_web_technologies/exercise_02/Exercise.svelte

@@ -0,0 +1,6 @@
+<h1>Header 1</h1>
+<h2>Header 2</h2>
+<h3>Header 3</h3>
+<h4>Header 4</h4>
+<h5>Header 5</h5>
+<h6>Header 6</h6>

src/routes/02_exercises/01_web_technologies/exercise_03/Exercise.svelte

@@ -0,0 +1,2 @@
+<p>  <em>"The best visual channels ordered by Mackinlay's ranking:" </em> 
+and an ordered list containing the items: <em>position, length,</em> and <em>angle</em>.</p>

src/routes/02_exercises/01_web_technologies/exercise_04/Exercise.svelte

@@ -1 +1 @@
-Marks are basic geometric elements that depict items and links.
+<em>Marks</em> are <s>basic</s> <b>geometric elements</b> that depict items and links.

src/routes/02_exercises/01_web_technologies/exercise_05/Exercise.svelte

@@ -1 +1 @@
-The first message! The second message!
+<div>The first message!</div> <div>The second message!</div>

src/routes/02_exercises/01_web_technologies/exercise_06/Exercise.svelte

@@ -1 +1,10 @@
-I really like data visualisation!
+<p>I <span style='color: pink'>really</span> like data visualisation!</p>
+
+<style>
+  p {
+    color: steelblue;
+    font-family: verdana;
+    font-size: 300%;
+
+  }
+</style>

src/routes/02_exercises/01_web_technologies/exercise_07/Exercise.svelte

@@ -1 +1,4 @@
-My lucky number is
+<script>
+const lucky_nr = 23
+</script>
+My lucky number is {lucky_nr}

src/routes/02_exercises/01_web_technologies/exercise_08/Exercise.svelte

@@ -0,0 +1,10 @@
+<script>const my_fav_things =['Cappuccino', 'dancing', 'sports', 'my laptop']</script>
+
+
+<div>
+My name is Christina and these are some of my favourite things: <ul>
+	{#each my_fav_things as things}
+		<li> {things}</li>
+	{/each}
+	</ul>
+    </div>

src/routes/02_exercises/01_web_technologies/exercise_09/Exercise.svelte

@@ -0,0 +1,9 @@
+<script>
+	function circ(radius) {
+  return Number((Math.PI * radius *  2).toFixed(2));
+}
+const rad = 2;
+const circum = circ(rad);
+</script>
+
+<p>The circumference of a circle with radius {rad}m is {circum}m .</p>

src/routes/02_exercises/01_web_technologies/exercise_10/Exercise.svelte

@@ -0,0 +1,4 @@
+<script>import E2 from '/home/ChrissiKalk/datavis-technologies-handson/src/routes/02_exercises/01_web_technologies/exercise_02/Exercise.svelte'
+import E3 from '/home/ChrissiKalk/datavis-technologies-handson/src/routes/02_exercises/01_web_technologies/exercise_03/Exercise.svelte' </script>
+<div><E3 />
+<E2 /></div>

src/routes/02_exercises/01_web_technologies/exercise_11/Exercise.svelte

@@ -0,0 +1,4 @@
+<script>import Child from './Exercise_child.svelte' 
+</script>
+
+<Child answer={42}/>

src/routes/02_exercises/01_web_technologies/exercise_11/Exercise_child.svelte

@@ -0,0 +1,4 @@
+<script>
+export let answer;
+</script>
+<p>The answer to the universe and everything is {answer}</p>

src/routes/02_exercises/01_web_technologies/exercise_12/Exercise.svelte

@@ -6,5 +6,13 @@
 	<button class="btn btn-primary" on:click={() => (clicked = true)}>
 		click here
 	</button>
-	<!--  -->
+	<!-- This is not working but I dont know why... -->
+	{#if clicked == false}
+		<p>'You have to click the button!'</p>
+	{:else}
+		<p>'You have clicked the button!'</p>
+	{/if}
 </div>
+
+
+

src/routes/02_exercises/01_web_technologies/exercise_13/Exercise.svelte

@@ -8,5 +8,9 @@
 
 <div>
 	<h5>Famous soccer players:</h5>
-	<!--  -->
-</div>
+	<ul>
+	{#each videos as players}
+		<li> {players.name}  ({players.url})</li>
+	{/each}
+	</ul>
+</div>

src/routes/02_exercises/02_basic_visualisations/exercise_15/Exercise.svelte

@@ -8,11 +8,18 @@
 
   <svg {width} {height}>
     <g transform="translate({margin.left}, {margin.top})">
-      <!--  -->
+      <rect x=25 y=25 width=40 height=40 />
+      <circle cx=73 cy=73 r=20 />
     </g>
   </svg>
 
   <style>
+  rect{
+        fill: yellow;
+      }
+    circle{
+        fill: skyblue;
+      }
     svg {
       border: 1px solid black;
       border-radius: 5px;

src/routes/02_exercises/02_basic_visualisations/exercise_16/Exercise.svelte

@@ -6,10 +6,12 @@
     const innerHeight = height - margin.top - margin.bottom;
   </script>
 
-  <svg {width} {height}>
+ <svg {width} {height}>
     <g transform="translate({margin.left}, {margin.top})">
-      <circle cx={innerWidth / 2} cy={innerHeight / 2} r="20" fill="teal" />
-    </g>
+  <svg viewBox='0 0 100 100'>
+  <circle cx=73% cy=73% r="20" fill="teal" />
+  </svg>
+  </g>
   </svg>
 
   <style>

src/routes/02_exercises/02_basic_visualisations/exercise_17/Exercise.svelte

@@ -1,4 +1,7 @@
 <script>
+import { scaleLog } from 'd3-scale';
+const scale = scaleLog().domain([2, 9]).range([10,780]);
+
     // Dimensions
     const width = 800;
     const height = 100;
@@ -8,11 +11,16 @@
 
     // Array
     const values = [2, 4, 6, 7, 9];
+    const mappedValues = values.map(v => scale(v));
+    //const array = [];
+    //values.forEach(abc => array.push(abc *2));
   </script>
 
   <svg viewBox="0 0 {width} {height}">
     <g transform="translate({margin.left},{margin.top})">
-      <!--  -->
+      {#each mappedValues as dp}
+        <circle cx={dp} cy="50" r=10 />
+      {/each}
     </g>
   </svg>
 

src/routes/02_exercises/02_basic_visualisations/exercise_18/Exercise.svelte

@@ -1,4 +1,17 @@
 <script>
+import { scaleLog } from 'd3-scale';
+import { axisBottom } from 'd3-axis';
+import { select } from 'd3-selection';
+
+const scale = scaleLog().domain([2, 9]).range([10,780]);
+const xAxis = axisBottom(scale);
+
+
+
+function executeXAxis(handle){
+    xAxis(select(handle));
+  }
+
     // Dimensions
     const width = 800;
     const height = 100;
@@ -8,11 +21,32 @@
 
     // Array
     const values = [2, 4, 6, 7, 9];
+    const mappedValues = values.map(v => scale(v));
+
+
   </script>
 
   <svg viewBox="0 0 {width} {height}">
     <g transform="translate({margin.left},{margin.top})">
-      <!--  -->
+      {#each mappedValues as dp}
+        <circle cx={dp} cy="50" r=10 />
+      {/each}
     </g>
+    <g use:executeXAxis  transform="translate({margin.left},{height-margin.bottom})">
+
+    </g>
+    <text x="395" y="100" class="x-label">x-axis</text>
   </svg>
+
+  <style>
+    .x-label{
+      fill: blue;
+      font-size: 10px;
+    }
+  </style>
+
+
+
+
+
 

src/routes/02_exercises/02_basic_visualisations/exercise_19/Exercise.svelte

@@ -1,11 +1,21 @@
 <script>
+import { scaleLinear } from 'd3-scale';
+import { scaleOrdinal } from 'd3-scale';
+import * as d3_chrom from 'd3-scale-chromatic';
+
+
     // Dimensions
     const width = 800;
     const height = 100;
     const margin = { top: 20, right: 5, bottom: 5, left: 5 };
     const innerWidth = width - margin.left - margin.right;
     const innerHeight = height - margin.top - margin.bottom;
-
+
+    const scale_x = scaleLinear().domain([2, 9]).range([10,innerWidth]);
+    const scale_y = scaleLinear().domain([1, 3]).range([10,innerHeight]);
+    const scale_cat = scaleOrdinal(d3_chrom.schemeDark2).domain(["cat1", "cat2", "cat3"]);
+
+
     // Array
     const values = [
       { x: 2, y: 1, category: "cat1" },
@@ -14,11 +24,32 @@
       { x: 7, y: 3, category: "cat3" },
       { x: 9, y: 1, category: "cat2" }
     ];
+
+    //I dont know what I am supposed to use this for...
+    //Maybe I got the exercise wrong but it seems to work w/o the uniques...
+    //const uniques = [...new Set(values.map(v => v.category))]; 
+    //const values.forEach{(cat => scale_cat(cat)};
+    //console.log(uniques);
+
+    const array = [];
+    values.forEach(abc => {
+      let point;
+      point = {x: scale_x(abc.x), y: scale_y(abc.y), category: scale_cat(abc.category)};
+      array.push(point);
+      });
+
+
+
+
+
   </script>
 
   <svg viewBox="0 0 {width} {height}">
     <g transform="translate({margin.left},{margin.top})">
-      <!--  -->
+      {#each array as point}
+      <circle cx={point.x} cy={point.y} r=5 fill={point.category}/>
+       <text x={point.x} y={point.y-10} class="valueLabel">{point.y}</text>
+      {/each}
     </g>
   </svg>
 

src/routes/02_exercises/02_basic_visualisations/exercise_20/Exercise.svelte

@@ -1,10 +1,18 @@
 <script>
+import { scaleLinear } from 'd3-scale';
+import { scaleOrdinal } from 'd3-scale';
+import { axisBottom } from 'd3-axis';
+import { axisLeft } from 'd3-axis';
+import { select } from 'd3-selection';
+
     // Dimensions
     const width = 600;
     const height = 300;
     const margin = { top: 10, right: 10, bottom: 30, left: 60 };
     const innerWidth = width - margin.left - margin.right;
     const innerHeight = height - margin.top - margin.bottom;
+
+
 
     // Array
     const data = [
@@ -15,12 +23,58 @@
       { service: "Apple TV", viewers: 1.1 },
       { service: "Rakuten", viewers: 0.4 }
     ];
+
+    //scales
+    const scale_x = scaleOrdinal().domain(data.map(entry => entry.service)).range([margin.left+50,margin.left+125,margin.left+200,margin.left+275,margin.left+350,margin.left+425]);
+    const scale_y = scaleLinear().domain([0.4, 2.9]).range([10,innerHeight]);
+    const scale_y_inv = scaleLinear().domain([0.4, 2.9]).range([innerHeight,10]);
+
+    const xAxis = axisBottom(scale_x);
+    const yAxis = axisLeft(scale_y_inv);
+
+    function executeXAxis(handle){
+    xAxis(select(handle));
+  }
+
+  function executeYAxis(handle){
+    yAxis(select(handle));
+  }
+
+
+    let drawData = [];
+    data.forEach(entry => {
+        let new_entry;
+        new_entry = {service: scale_x(entry.service), viewers: scale_y(entry.viewers)};
+        drawData.push(new_entry);
+    });
+
+
   </script>
 
   <!-- setting a viewBox and max-width allows the SVG to shrink but not grow! -->
   <svg viewbox="0 0 {width} {height}" style="max-width: {width}px">
     <g transform={`translate(${margin.left},${margin.top})`}>
-      <!--  -->
+      {#each drawData as bar}
+      <rect x={bar.service} y={270-bar.viewers} width="70" height={bar.viewers} />
+      {/each}
+      <g use:executeYAxis  transform={`translate(${margin.left},${margin.top-10})`}>
+    </g>
     </g>
+    <g transform="translate(70, 190)">
+     <text
+       text-anchor="start"
+       transform="rotate(270)"
+     >
+      nr of viewers
+    </text>
+  </g>
+  <g use:executeXAxis  transform={`translate(${margin.left+40},${height-20})`}>
+
   </svg>
+
+<style>
+    rect {
+      fill : pink;
+    }
+  </style>
 

src/routes/02_exercises/02_basic_visualisations/exercise_21/Exercise.svelte

@@ -1,3 +1,24 @@
 <script>
+  import Scatterplot from "./Scatterplot.svelte";
+  import { json, csv } from "d3-fetch";
+  import { onMount } from "svelte";
 
+  let test = test1();
+  let data_1 = null;
+  let new_dat = null;
+  async function test1() {
+    console.log("onMount started!");
+    data_1 = await json("/data/gapminder.json");
+    new_dat = data_1.filter((value) => value.year === "1800");
+    console.log(new_dat);
+    return new_dat;
+  }
+
+  console.log("Script finished!");
 </script>
+
+{#await test}
+  Loading...
+{:then new_dat}
+  <Scatterplot data={new_dat} />
+{/await}