stuff

Author: rob3rtroessler

.idea/workspace.xml

@@ -74,6 +74,10 @@ h2 {
     height: 200px;
 }
 
+#HalfLifeGeldChart{
+    width: 100%;
+    height: 400px;
+}
 
 #MarxChart {
   /*background: rgba(0, 97, 0, 0.53);*/

css/style.css

@@ -1,69 +1,87 @@
 
 // Use the margin convention practice
 var ExampleMargin = {top: 50, right: 70, bottom: 50, left: 70},
-    width = $("#ExampleLineChart").width() - ExampleMargin.left - ExampleMargin.right, // Use the window's width
-    height = $("#ExampleLineChart").height() - ExampleMargin.top - ExampleMargin.bottom; // Use the window's height
+    width = $("#HalfLifeGeldChart").width() - ExampleMargin.left - ExampleMargin.right, // Use the window's width
+    height = $("#HalfLifeGeldChart").height() - ExampleMargin.top - ExampleMargin.bottom; // Use the window's height
 
-// The number of datapoints
-var n = 21;
 
-var xScale = d3.scaleLinear()
-    .domain([0, n-1]) // input
-    .range([0, width]); // output
 
-var yScale = d3.scaleLinear()
-    .domain([0, 1]) // input
-    .range([height, 0]); // output
+
+
+d3.csv("../data/hl/arbeit.csv", function(csv) {
+
+    csv.forEach(function(d){
+        d.x = +d.x;
+        d.y = +d.y;
+        });
+
+    data = csv;
+
+
+
+    var testMin = d3.min(data, function (d){return d.y});
+    console.log(testMin);
+    var testMax = d3.max(data, function (d){return d.y});
+    console.log(testMax);
+
+    var xScale = d3.scaleLinear()
+        .domain([d3.min(data, function (d){return d.x}), d3.max(data, function (d){return d.x})]) // input
+        .range([0, width]); // output
+
+    var yScale = d3.scaleLog()
+        .domain([d3.min(data, function (d){return d.y}),d3.max(data, function (d){return d.y})]) // input
+        .range([height, 0]); // output
+
 
 // d3's line generator
-var line = d3.line()
-    .x(function(d, i) { return xScale(i); }) // set the x values for the line generator
-    .y(function(d) { return yScale(d.y); }) // set the y values for the line generator
-    .curve(d3.curveMonotoneX); // apply smoothing to the line
-
-
-d3.csv("data/MartiniStoryTwo_StackedAreaChart_DATA.csv", function(data) {
-
-};
-
-
-console.log("test");
-console.log(dataset);
-
-// Add the SVG to the page and employ
-var svg = d3.select("#ExampleLineChart").append("svg")
-    .attr("width", width + ExampleMargin.left + ExampleMargin.right)
-    .attr("height", height + ExampleMargin.top + ExampleMargin.bottom)
-    .append("g")
-    .attr("transform", "translate(" + ExampleMargin.left + "," + ExampleMargin.top + ")");
-
-// Call the x axis in a group tag
-svg.append("g")
-    .attr("class", "x axis")
-    .attr("transform", "translate(0," + height + ")")
-    .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom
-
-// Call the y axis in a group tag
-svg.append("g")
-    .attr("class", "y axis")
-    .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft
-
-// Append the path, bind the data, and call the line generator
-svg.append("path")
-    .datum(dataset) // Binds data to the line
-    .attr("class", "line") // Assign a class for styling
-    .attr("d", line) // Calls the line generator
-    .attr("fill","none")
-    .attr("stroke","#960510")
-    .attr("stroke-width", 2);
-
-
-// Appends a circle for each datapoint
-svg.selectAll(".dot")
-    .data(dataset)
-    .enter().append("circle") // Uses the enter().append() method
-    .attr("class", "dot") // Assign a class for styling
-    .attr("cx", function(d, i) { return xScale(i) })
-    .attr("cy", function(d) { return yScale(d.y) })
-    .attr("r", 3)
-    .attr("fill","#960510");
+    var line = d3.line()
+        .x(function(d) { return xScale(d.x); }) // set the x values for the line generator
+        .y(function(d) { return yScale(d.y); }) // set the y values for the line generator
+        .curve(d3.curveCardinal); // apply smoothing to the line
+
+
+
+
+    console.log("showing the data");
+    console.log(data);
+
+
+    // Add the SVG to the page and employ
+    var svg = d3.select("#HalfLifeGeldChart").append("svg")
+        .attr("width", width + ExampleMargin.left + ExampleMargin.right)
+        .attr("height", height + ExampleMargin.top + ExampleMargin.bottom)
+        .append("g")
+        .attr("transform", "translate(" + ExampleMargin.left + "," + ExampleMargin.top + ")");
+
+    // Call the x axis in a group tag
+    svg.append("g")
+        .attr("class", "x axis")
+        .attr("transform", "translate(0," + height + ")")
+        .call(d3.axisBottom(xScale)); // Create an axis component with d3.axisBottom
+
+    // Call the y axis in a group tag
+    svg.append("g")
+        .attr("class", "y axis")
+        .call(d3.axisLeft(yScale)); // Create an axis component with d3.axisLeft
+
+    // Append the path, bind the data, and call the line generator
+    svg.append("path")
+        .datum(data) // Binds data to the line
+        .attr("class", "line") // Assign a class for styling
+        .attr("d", line) // Calls the line generator
+        .attr("fill","none")
+        .attr("stroke","#960510")
+        .attr("stroke-width", 2);
+
+
+    // Appends a circle for each datapoint
+    svg.selectAll(".dot")
+        .data(data)
+        .enter().append("circle") // Uses the enter().append() method
+        .attr("class", "dot") // Assign a class for styling
+        .attr("cx", function(d) { return xScale(d.x) })
+        .attr("cy", function(d) { return yScale(d.y) })
+        .attr("r", 0.1)
+        .attr("fill","#960510");
+
+});