InteractiveDataVis · Atini2525 · Sep 1, 2020 · Sep 7, 2020 · Sep 7, 2020 · Sep 7, 2020
diff --git a/PSAT_IGCSE_Scores_01.csv b/PSAT_IGCSE_Scores_01.csv
diff --git a/TEST/README.md b/TEST/README.md
@@ -0,0 +1,43 @@
+# Tutorial 0
+
+This introductory tutorial will focus primarily on helping you get your environment set up for future code development. 
+
+The goals for this tutorial are:
+
+- to set up installations for your [local development environment](./1_INSTALL.md)
+- to get comfortable with the [Github workflow](./2_GIT_SETUP.md)
+- to learn how to [serve](./3_BASIC_SERVER.md) your pages so that you can see/interact with them while you are coding
+
+## Week 0 Assignment:
+
+- [ ] Replicate this environment on your own computer. You should leverage the files present in the root of this directory in your repository (`tutorial0_serve/` [index.html](index.html), [style.css](style.css), [main.js](main.js))
+   1. First, confirm you have all the [installations](./1_INSTALL.md) on your machine. If you have no errors, proceed to the next step. 
+   2. While logged in to your github username, follow the [github workflow](./2_GIT_SETUP.md) to fork this repository into your own account.
+   3. Ensure that you can [serve](./3_BASIC_SERVER.md) locally. 
+- [ ] Using your local server, update the language in the console log. Pick anything at all -- but it should be different than 'Hello World!' to show that your javascript code changes are connected to your site. You should see this in the browser inspector of your local serve. 
+- [ ] Push these changes up to your forked repository. You should see your commit and any code changes in the github repo. 
+- [ ] Post your code and deployed links to the Tutorial 1 post on the Commons.
+
+**BONUS:**
+
+- [ ] Use the javascript file to explore javascript syntax. Console log any more interesting findings, such as the result of a function.
+
+## Deploy + Submit
+
+Once you've completed the assignment, use the Github workflow to deploy your work to **your fork** of the course repository. Post the following as a comment to the appropriate post on the [commons site](https://data7320062268.commons.gc.cuny.edu):
+1. a link to your commited code repository (your link will look something like: `https://github.com/[YOUR_USERNAME]/Interactive-Data-Vis-Fall2020/[TUTORIAL_PATH]/`)
+2. a link to your deployed example (your link will look something like: `https://[YOUR_USERNAME].github.io/Interactive-Data-Vis-Fall2020/[TUTORIAL_PATH]/`)
+
+To receive full credit, you must post your stable path before the start of the next class. All tutorials are due on 10/28. 
+
+## Required Reading: 
+
+- [ ] [Interneting Is Hard: Introduction, Basic Web Pages, Links and Images](https://www.internetingishard.com/html-and-css/) 
+- [ ] [Javascript.info: Getting Started](https://javascript.info/getting-started)
+- [ ] [Javascript.info: Debugging Chrome](https://javascript.info/debugging-chrome)
+- [ ] [D3: Data-Driven Documents](http://vis.stanford.edu/files/2011-D3-InfoVis.pdf)
+
+## Other Resources:
+
+- [Javascript Fundamentals](https://javascript.info/first-steps)
+- [How to use github](https://git-scm.com/book/en/v2)
diff --git a/TEST/index.html b/TEST/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+  <head>
+    <meta charset="utf-8">
+    <title>Interactive Data Visualization Tutorial-Meriemmmmmmmmmmmmmmmmmm</title>
+    <link rel="stylesheet" href="./style.css">
+  </head>
+  <body>
+  <h1>Welcome to Interactive Data Visualization Tutorials-0</h1>  
+    <h2>I adore Pink's color</h2>
+    <script src="../lib/d3.js"></script>
+    <script src="main.js"></script>
+    <script>
+
+  </script>
+  </body>
+</html>
diff --git a/TEST/main.js b/TEST/main.js
@@ -0,0 +1,60 @@
+d3.csv("PSAT_IGCSE_Scores_01.csv").then(function(data) {
+    console.log(data); 
+  });
+
+console.log("data")
+console.log('PINK is my favorite color')
+// call back function
+ let people  = ['Meriem','Asma'];
+ people.forEach(data=>{ // take a value for each data as a parameter  or foreach((data).......
+   console.log (data);
+ });
+// OR WE CAN SPECIFY THE INDEX 
+
+
+ people.forEach((index,data)=>{ // take a value for each data as a parameter  or foreach((data).......
+  console.log (index,data);
+ });
+ // or  we can create an arrow function and pass this into paramater 
+ const callback = (index,data)=>{
+   console.log('${index} - hello- ${data}');
+ };
+ people.forEach(callback);
+ // an ibject is between{}
+ let user ={
+   name:'crystal',
+   age:30,
+   bolg:['hello','me']// this is array 
+ };
+ const key = Object.keys(user);
+ const value= Object.values(user);
+ const entries = Object.entries(user);
+ console.log(key);
+ console.log(value);
+ console.log(entries);
+ console.log(user);
+ console.log(user.age);
+ //console.log(user['name']); it suppose de work
+ //user['name']='Ferhat';
+// console.loge(user['name']);
+//topojson can be converted to something called a “mesh”,which is just one large web of paths. Since it is just one path,
+//we use datum to append the mesh to the svg.geojson allows us to iterate over.each feature (state, county,
+//country, etc.), so we can use our usual .data().join() process.
+//specify path drawing
+const topoPath= d3.geoPath()
+    .projection(null);
+// append a single path element to all us 
+svg.append("path")
+   .datum(topojson.mesh(mapFile))// “mesh”,which is just one large web of paths
+   .attr ("d",topoPath);
+   // geojson isn't already projected
+   const geoPath=d3.geoPath()
+      .projection(d3.geoAllbersUSA())
+
+
+   //join one path by country 
+   var paths=svg.selectAll("path")
+   .data(geojson.features)
+   .join('path')
+   .attr("class","border border--state")
+   .attr(d,)
diff --git a/TEST/style.css b/TEST/style.css
@@ -0,0 +1,21 @@
+html{
+    background-image: url("ping.png");
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+    background-size: cover; 
+
+  }
+  h1{
+    font-family: 'Times New Roman', Times, serif;
+     color: deeppink;
+     text-align: center;
+     margin-top: 1cm;
+
+
+   }
+   h2{
+     font-family: 'Times New Roman', Times, serif;
+ color: rgb(238, 49, 206);
+     margin-top: 1cm;
+     text-align: center;
+   }
diff --git a/Test2/index.html b/Test2/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+  <head>
+    <meta charset="utf-8">
+
+    <!-- this is the title that goes in the browser tab name  -->
+    <title>Interactive Data Visualization Tutorial</title>
+
+    <!-- custom font: https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap -->
+    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./style.css">
+  </head>
+  <body>
+    <header>
+      <h1>Tutorial 5</h1>
+      <h2>Geographic</h2>
+    </header>
+
+    <!-- all we need is an element to select -->
+    <div id="hover-content"></div>
+    <div id="d3-container"> </div>
+
+    <!-- this is the line that loads in d3 -->
+    <script src="../../lib/d3.js"></script>
+    <!-- this is the line that loads in the main js script -->
+    <script src="./main.js"></script>
+  </body>
+</html>
+
diff --git a/Test2/main.js b/Test2/main.js
@@ -0,0 +1,68 @@
+//* CONSTANTS AND GLOBALS */
+const width = window.innerWidth * 0.8,
+height = window.innerHeight * 0.8,
+margin = { top: 20, bottom: 50, left: 60, right: 40 };
+let svg;
+
+
+/* APPLICATION STATE */
+let state = {
+geojson: null,
+hover: {
+  latitude: null,
+  longitude: null,
+},
+};
+
+
+/* LOAD DATA */
+Promise.all([
+d3.json("../data/usState.json"),
+]).then(([geojson]) => {
+state.geojson = geojson;
+console.log("state: ", state);
+init();
+});
+
+
+/* INITIALIZING FUNCTION */
+function init() {
+
+const GradCenterCoord = { latitude: 40.7423, longitude: -73.9833 };
+
+svg = d3.select("#d3-container")
+  .append("svg")
+  .attr("width", width)
+  .attr("height", height)
+
+const projection = d3.geoAlbersUsa()
+  .fitSize([width, height], state.geojson)
+
+
+const geoPathFunc = d3.geoPath(projection)
+
+const usStates = svg.selectAll("path.map-lines")
+  .data(state.geojson.features)
+  .join("path")
+  .attr("class", "map-lines")
+  .attr("d", d => geoPathFunc(d))
+  .attr("fill", "pink")
+
+const dot = svg.append("circle")
+  .attr("r", 10)
+  .style("transform", () => {
+    const proj = projection([GradCenterCoord.longitude, GradCenterCoord.latitude])
+    const x = proj[0]
+    const y = proj[1]
+    // const [x,y] = projection([GradCenterCoord.longitude, GradCenterCoord.latitude])
+    return `translate(${x}px,${y}px)`})
+
+
+draw();
+}
+
+/* DRAW FUNCTION */
+function draw() {
+
+
+}
diff --git a/Test2/statelatlong.csv b/Test2/statelatlong.csv
@@ -0,0 +1,52 @@
+State,Latitude,Longitude,City
+AL,32.6010112,-86.6807365,Alabama
+AK,61.3025006,-158.7750198,Alaska
+AZ,34.1682185,-111.930907,Arizona
+AR,34.7519275,-92.1313784,Arkansas
+CA,37.2718745,-119.2704153,California
+CO,38.9979339,-105.550567,Colorado
+CT,41.5187835,-72.757507,Connecticut
+DE,39.145251,-75.4189206,Delaware
+DC,38.8993487,-77.0145666,District of Columbia
+FL,27.9757279,-83.8330166,Florida
+GA,32.6781248,-83.2229757,Georgia
+HI,20.46,-157.505,Hawaii
+ID,45.4945756,-114.1424303,Idaho
+IL,39.739318,-89.504139,Illinois
+IN,39.7662195,-86.441277,Indiana
+IA,41.9383166,-93.389798,Iowa
+KS,38.4987789,-98.3200779,Kansas
+KY,37.8222935,-85.7682399,Kentucky
+LA,30.9733766,-91.4299097,Louisiana
+ME,45.2185133,-69.0148656,Maine
+MD,38.8063524,-77.2684162,Maryland
+MA,42.0629398,-71.718067,Massachusetts
+MI,44.9435598,-86.4158049,Michigan
+MN,46.4418595,-93.3655146,Minnesota
+MS,32.5851062,-89.8772196,Mississippi
+MO,38.3046615,-92.437099,Missouri
+MT,46.6797995,-110.044783,Montana
+NE,41.5008195,-99.680902,Nebraska
+NV,38.502032,-117.0230604,Nevada
+NH,44.0012306,-71.5799231,New Hampshire
+NJ,40.1430058,-74.7311156,New Jersey
+NM,34.1662325,-106.0260685,New Mexico
+NY,40.7056258,-73.97968,New York
+NC,35.2145629,-79.8912675,North Carolina
+ND,47.4678819,-100.3022655,North Dakota
+OH,40.1903624,-82.6692525,Ohio
+OK,35.3097654,-98.7165585,Oklahoma
+OR,44.1419049,-120.5380993,Oregon
+PA,40.9945928,-77.6046984,Pennsylvania
+RI,41.5827282,-71.5064508,Rhode Island
+SC,33.62505,-80.9470381,South Carolina
+SD,44.2126995,-100.2471641,South Dakota
+TN,35.830521,-85.9785989,Tennessee
+TX,31.1693363,-100.0768425,Texas
+UT,39.4997605,-111.547028,Utah
+VT,43.8717545,-72.4477828,Vermont
+VA,38.0033855,-79.4587861,Virginia
+WA,38.8993487,-77.0145665,Washington
+WV,38.9201705,-80.1816905,West Virginia
+WI,44.7862968,-89.8267049,Wisconsin
+WY,43.000325,-107.5545669,Wyoming
diff --git a/Test2/style.css b/Test2/style.css