vertical graph

2_1_quantities_and_amounts/index.html

@@ -10,11 +10,11 @@ <h3>Section 2 | Tutorial 1 | Quantities and Amounts</h3>
 
     <h4>By Akeem Jermine Shepherd</h4>
 
-    <script src="main.js"></script>
+
 
     <div id="container"></div>
 
     <script src="../lib/d3.js"></script>
-
+    <script src="main.js"></script>
   </body>
 </html> 

2_1_quantities_and_amounts/main.js

@@ -1,16 +1,15 @@
 
 /* CONSTANTS AND GLOBALS */
-const width = window.innerWidth *0.8;
-//const height = 400;
-const height = window.innerHeight * 0.7
-//const margin = 40;
+const width = window.innerWidth *.8 ;
+const height = 400;
+const margin = 20;
 
-data = d3.csv('../data/MoMA_topTenNationalities.csv', d3.autoType).then((data) => {
+d3.csv('../data/MoMA_topTenNationalities.csv', d3.autoType).then(data => {
     console.log("data",data)
-    console.log(data)
+
 
     /* SCALES */
-    console.log(d3)
+
     //first add svg to container
     const svg = d3
       .select("#container")
@@ -21,27 +20,30 @@ data = d3.csv('../data/MoMA_topTenNationalities.csv', d3.autoType).then((data) =
 
     //add xscale for the bargraph
     const xScale = d3.scaleBand()
-      .domain(data.map(d => d.activity))
+      .domain(data.map(d => d.Nationality))
       .range([margin, width - margin])
-      //.paddingInner(0.1)
-      .marginInner(0.1)
-      //.paddingOuter(0.2)
-      .marginOuter(0.2)
+      .paddingInner(0.1)
+      //.marginInner(0.1)
+      .paddingOuter(0.2)
+      //.marginOuter(0.2)
 
-    //add yscale for the bargraph
+    //add yscale for the bargraph // the error is in the yScale
     const yScale = d3.scaleLinear()
-      .doman([0, Math.max(...data.map(d => d.count))])
+      .domain([239,5181])
+      //.doman([0, Math.max(...data.map(d => d.Count))])
+      //.domain([0,1])
+      //.domain([ydomainMin, ydomainMax])
       .range([height - margin, margin])
 
-    //add group to X axis
+    //add group to X axis; this places the magin in a location
     const xAxis = d3.axisBottom(xScale)
     svg.append("g")
-      .attr("transform", `translate(0, $(height - margin))`)
+      .attr("transform", `translate(0, ${height - margin})`)
       .call(xAxis)
-    //add group to Y axis
+    //add group to Y axis; this places the margin in a location
     const yAxis = d3.axisLeft(yScale)
     svg.append("g")
-      .attr("transform", `translate($(margin), 0)`)
+      .attr("transform", `translate(${margin}, 0)`)
       .call(yAxis)
 
 
@@ -53,8 +55,8 @@ data = d3.csv('../data/MoMA_topTenNationalities.csv', d3.autoType).then((data) =
       .data(data)
       .join("rect")
       .attr("class", "bar")
-      .attr("x", d => xScale(d.activity))
-      .attr("y", d => yScale(d.count))
+      .attr("x", d => xScale(d.Nationality))
+      .attr("y", d => yScale(d.Count))
       .attr("width", xScale.bandwidth)
-      .attr("height", d => height - yScale(d.count) - margin)
+      .attr("height", d => height - yScale(d.Count) - margin)
   });

2_2_distributions/main.js

@@ -1,16 +1,54 @@
 /* CONSTANTS AND GLOBALS */
-// const width = ,
-//   height = ,
-//   margin = ,
-//   radius = ;
+const width = window.innerWidth * 0.7,
+  height = window.innerHeight * 0.7,
+  margin = { top: 20, bottom: 60, left: 60, right: 40 },
+  radius = 5;
 
 /* LOAD DATA */
-d3.csv("../data/MoMA_distributions.csv", d3.autoType)
-  .then(data => {
-    console.log(data)
-
-    /* SCALES */
-
-    /* HTML ELEMENTS */
-
-  });
+d3.json("../data/environmentRatings.json", d3.autoType).then(data => {
+  console.log(data)
+
+  /* SCALES */
+  // xscale  - linear,count
+  const xScale = d3.scaleLinear()
+    .domain([0, d3.max(data.map(d => d.envScore2020))])
+    .range([margin.left, width - margin.right])
+
+    // yscale - linear,count
+  const yScale = d3.scaleLinear()
+    .domain([0, d3.max(data, d => d.ideologyScore2020)])
+    .range([height - margin.bottom, margin.top])
+
+  const colorScale = d3.scaleOrdinal()
+    .domain(["R", "D"])
+    .range(["red", "blue", "purple"])
+
+  /* HTML ELEMENTS */
+  // svg
+  const svg = d3.select("#container")
+    .append("svg")
+    .attr("width", width)
+    .attr("height", height)
+
+  // axis scales
+  const xAxis = d3.axisBottom(xScale)
+  svg.append("g")
+  .attr("transform", `translate(0,${height - margin.bottom})`)
+  .call(xAxis);
+
+  const yAxis = d3.axisLeft(yScale)
+  svg.append("g")
+    .attr("transform", `translate(${margin.left},0)`)
+    .call(yAxis);
+
+  // circles
+  const dot = svg
+    .selectAll("circle")
+    .data(data, d => d.BioID) // second argument is the unique key for that row
+    .join("circle")
+    .attr("cx", d => xScale(d.envScore2020))
+    .attr("cy", d => yScale(d.ideologyScore2020))
+    .attr("r", radius)
+    .attr("fill", d => colorScale(d.Party))
+
+});