Adding Multiple graphs to one page with D3

Ari Howe posted on 17-07-2020 javascript html d3.js charts

I'm trying to figure out how to get two d3 graphs onto the same page with one on the left and one on the right. However, what I'm getting is this.

This is my html file.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  font: 10px sans-serif;
}

.polyline path {
  fill: none;
  stroke: #666;
  shape-rendering: crispEdges;
}

.axis line,
.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis text {
  text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
  cursor: move;
}

.xaxis text {
  font: 10px sans-serif;
}
.yaxis text {
  font: 10px sans-serif;
}

.xaxis path,
.xaxis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.yaxis path,
.yaxis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}


</style>
<body>
<svg class="chart"></svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src = "project3.js">//https://my.up.ist.psu.edu/lng5099/project3.html   </script>
</body>
</html>

This is my js file.

(function() {
	var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal().rangePoints([0, width], 1),
    y = {};

var axis = d3.svg.axis().orient("left");

var line = d3.svg.line() //define a function to convert points into a polyline
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("linear");//line style. you can try "cardinal".

var chart = d3.select(".chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var cars=[];

d3.csv("cars.csv", type, function(error, data) {
    cars = data;
    drawPC();
});

function drawPC() {
    
    // Extract the list of dimensions and create a scale for each.
    for (var dim in cars[0]) {
	   if (dim != "name") {
		  y[dim] = d3.scale.linear()
			 .domain([d3.min(cars, function(d) { return +d[dim]; }), d3.max(cars, function(d) { return +d[dim]; })])
		      .range([height,0]);
	   }
    }
    
    x.domain(dimensions = d3.keys(cars[0]).filter(function(d) { return d != "name";}));

    //draw polylines
    for (var i=1; i< cars.length; i++) { //for each car

	   //prepare the coordinates for a polyline
	   var lineData = []; //initialize an array for coordinates of a polyline
	   for (var prop in cars[0]) { //get each dimension
	       if (prop != "name" ) { //skip the name dimension
	           var point = {}; //initialize a coordinate object
	           var val = cars[i][prop]; //obtain the value of a car in a dimension
		      point['x'] = x(prop); //x value: mapping the dimension  
	           point['y'] = y[prop](val);//y value: mapping the value in that dimension
	           lineData.push(point); //add the object into the array 
	       }
	   }

	   //draw a polyline based on the coordindates 
        chart.append("g")
	       .attr("class", "polyline")
	       .append("path") // a path shape
		  .attr("d", line(lineData)); //line() is a function to turn coordinates into SVG commands
    }

    //next: draw individual dimension lines
    //position dimension lines appropriately
    var g = chart.selectAll(".dimension")
	   .data(dimensions)
	   .enter().append("g")
	   .attr("class", "dimension")
	   .attr("transform", function(d) { return "translate(" + x(d) + ")"; }); //translate each axis
    
    // Add an axis and title.
    g.append("g")
	   .attr("class", "axis")
	   .each(function(d) { d3.select(this).call(axis.scale(y[d])); })
	   .append("text")
	   .style("text-anchor", "middle")
	   .attr("y", -9)
	   .text(function(d) { return d; });
    
};

//this function coerces numerical data to numbers  
function type(d) {
    d.economy = +d.economy; // coerce to number
    d.displacement = +d.displacement; // coerce to number
    d.power = +d.power; // coerce to number
    d.weight = +d.weight; // coerce to number
    d.year = +d.year;
    return d;
}
})();
(function() {
var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear().range([50, width]),
    y = d3.scale.linear().range([height-20,0]);

var chart = d3.select(".chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xAxis = d3.svg.axis().scale(x).orient("bottom");

var yAxis = d3.svg.axis().scale(y).orient("left");

var cars=[];

d3.csv("cars.csv", type, function(error, data) {
    cars = data;
    drawXY();
});

function drawXY(){

    x.domain([d3.min(cars, function(d) { return d.year; }), d3.max(cars, function(d) { return d.year; })]);
    y.domain([d3.min(cars, function(d) { return d.power; }), d3.max(cars, function(d) { return d.power; })]);

    var yPos = height -20;
    chart.append("g")
	   .attr("class", "xaxis")
	   .attr("transform", "translate(0," + yPos + ")")
	   .call(xAxis);

    chart.append("g")
	   .attr("class", "yaxis")
	   .attr("transform", "translate(50,0)")
	   .call(yAxis);
    
    chart.selectAll(".dot")
	   .data(cars)
	   .enter().append("circle")
	   .attr("class", "dot")
	   .attr("cx", function(d) { return x(d.year); })
	   .attr("cy", function(d) { return y(d.power); })
	   .attr("r", 3);
}
d3.selectAll("circle").data(cars).enter()
  .append("circle")
  .classed("circle", true)
  .on("mouseover", function() { d3.select(d3.event.target).classed("highlight", true); })
  .on("mouseout", function() { d3.select(d3.event.target).classed("highlight", false); });

function type(d) {
    d.economy = +d.economy; // coerce to number
    d.displacement = +d.displacement; // coerce to number
    d.power = +d.power; // coerce to number
    d.weight = +d.weight; // coerce to number
    d.year = +d.year;
    return d;
}
})();

Both are displaying, but I'm not sure how set it so that they position properly. Please help.

Answers:

Sarina Gulgowski answered on 17-07-2020

Figured it out there was an issue with the positioning of my margins, width and height. There is the java code for anyone who needs the help.

(function() {
	var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 700 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

var x = d3.scale.ordinal().rangePoints([0, width], 1),
    y = {};

var axis = d3.svg.axis().orient("left");

var line = d3.svg.line() //define a function to convert points into a polyline
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("linear");//line style. you can try "cardinal".

var chart = d3.select(".chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var cars=[];

d3.csv("cars.csv", type, function(error, data) {
    cars = data;
    drawPC();
});

function drawPC() {
    
    // Extract the list of dimensions and create a scale for each.
    for (var dim in cars[0]) {
	   if (dim != "name") {
		  y[dim] = d3.scale.linear()
			 .domain([d3.min(cars, function(d) { return +d[dim]; }), d3.max(cars, function(d) { return +d[dim]; })])
		      .range([height,0]);
	   }
    }
    
    x.domain(dimensions = d3.keys(cars[0]).filter(function(d) { return d != "name";}));

    //draw polylines
    for (var i=1; i< cars.length; i++) { //for each car

	   //prepare the coordinates for a polyline
	   var lineData = []; //initialize an array for coordinates of a polyline
	   for (var prop in cars[0]) { //get each dimension
	       if (prop != "name" ) { //skip the name dimension
	           var point = {}; //initialize a coordinate object
	           var val = cars[i][prop]; //obtain the value of a car in a dimension
		      point['x'] = x(prop); //x value: mapping the dimension  
	           point['y'] = y[prop](val);//y value: mapping the value in that dimension
	           lineData.push(point); //add the object into the array 
	       }
	   }

	   //draw a polyline based on the coordindates 
        chart.append("g")
	       .attr("class", "polyline")
	       .append("path") // a path shape
		  .attr("d", line(lineData)); //line() is a function to turn coordinates into SVG commands
    }

    //next: draw individual dimension lines
    //position dimension lines appropriately
    var g = chart.selectAll(".dimension")
	   .data(dimensions)
	   .enter().append("g")
	   .attr("class", "dimension")
	   .attr("transform", function(d) { return "translate(" + x(d) + ")"; }); //translate each axis
    
    // Add an axis and title.
    g.append("g")
	   .attr("class", "axis")
	   .each(function(d) { d3.select(this).call(axis.scale(y[d])); })
	   .append("text")
	   .style("text-anchor", "middle")
	   .attr("y", -9)
	   .text(function(d) { return d; });
    
};

//this function coerces numerical data to numbers  
function type(d) {
    d.economy = +d.economy; // coerce to number
    d.displacement = +d.displacement; // coerce to number
    d.power = +d.power; // coerce to number
    d.weight = +d.weight; // coerce to number
    d.year = +d.year;
    return d;
}
})();

(function() {
var margin = {top: 20, right: 30, bottom: 30, left: 690},
    width = 1300 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

var x = d3.scale.linear().range([50, width]),
    y = d3.scale.linear().range([height-20,0]);

var chart = d3.select(".chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xAxis = d3.svg.axis().scale(x).orient("bottom");

var yAxis = d3.svg.axis().scale(y).orient("left");

var cars=[];

d3.csv("cars.csv", type, function(error, data) {
    cars = data;
    drawXY();
});

function drawXY(){

    x.domain([d3.min(cars, function(d) { return d.year; }), d3.max(cars, function(d) { return d.year; })]);
    y.domain([d3.min(cars, function(d) { return d.power; }), d3.max(cars, function(d) { return d.power; })]);

    var yPos = height -20;
    chart.append("g")
	   .attr("class", "xaxis")
	   .attr("transform", "translate(0," + yPos + ")")
	   .call(xAxis);

    chart.append("g")
	   .attr("class", "yaxis")
	   .attr("transform", "translate(50,0)")
	   .call(yAxis);
    
    chart.selectAll(".dot")
	   .data(cars)
	   .enter().append("circle")
	   .attr("class", "dot")
	   .attr("cx", function(d) { return x(d.year); })
	   .attr("cy", function(d) { return y(d.power); })
	   .attr("r", 3);
}
d3.selectAll("circle").data(cars).enter()
  .append("circle")
  .classed("circle", true)
  .on("mouseover", function() { d3.select(d3.event.target).classed("highlight", true); })
  .on("mouseout", function() { d3.select(d3.event.target).classed("highlight", false); });

function type(d) {
    d.economy = +d.economy; // coerce to number
    d.displacement = +d.displacement; // coerce to number
    d.power = +d.power; // coerce to number
    d.weight = +d.weight; // coerce to number
    d.year = +d.year;
    return d;
}
})();

Adding Multiple graphs to one page with D3

Answers:

TAGS