Make a dropdown menu to choose an object in array?
1
I am new to using javascript and d3. I have a csv file of colleges and have created an array of each of these college object along with the attributes that belong to each college. I wan to create a drop down menu for the user to be able to select the college they would like to view the statistics of. I know how to make a bar graph given the statistic but do not know how to give the user the option of a drop down menu to select the college object and then how to pass the data from the selected object a graph. Could someone help me out. I will file and the code I have so far.
Here is a snippet of the csv file I am working with
Name,Predominant Degree,Highest Degree,Control,Region,Locale,Admission Rate,ACT Median,SAT Average,Undergrad Population,% White,% Black,% Hispanic,% Asian,% American Indian,% Pacific Islander,% Biracial,% Nonresident Aliens,% Part-time Undergrads,Average Cost,Expenditure Per Student,Average Faculty Salary,% Full-time Faculty,% Undergrads with Pell Grant,Completion Rate 150% time,Retention Rate (First Time Students),% Undergrads 25+ y.o.,3 Year Default Rate,Median Debt,Median Debt on Graduation,Median Debt on Withdrawal,% Federal Loans,% Pell Grant Recipients,Average Age of Entry,Average Family Income,Median Family Income,Poverty Rate,Number of Unemployed 8 years after entry,Number of Employed 8 years after entry,Mean Earnings 8 years After Entry,Median Earnings 8 years After Entry
Abilene Christian University,3,4,Private,Southwest,Mid-size City,0.4894,24,1087,3647,0.7069,0.076,0.1206,0.0099,0.0036,0.0005,0.0373,0.0417,0.0398,39811,8737,5508,0.9204,0.2347,0.5637,0.7941,0.0381,7.5,20698.5,26237.5,9500,0.970000029,0.439999998,20.22999954,86392,75873.5,7.800000191,130,1327,39800,37200
Adams State University,3,4,Public,Rocky Mountains,Remote Town,0.526,20,939,2227,0.5123,0.0768,0.3026,0.0112,0.0153,0.0063,0.04,0,0.1612,17759,7996,5986,0.5088,0.5029,0.227,0.5592,0.2106,9.3,11000,0,11000,0.829999983,0.730000019,24.12999916,45711.23,34243,11.84000015,99,752,33600,30700
Adelphi University,3,4,Private,Mid-Atlantic,Large Suburb,0.6814,22,1098,5000,0.5296,0.1062,0.1336,0.0756,0.0016,0.002,0.022,0.0396,0.0952,41559,12142,11315,0.3203,0.2951,0.6251,0.8112,0.1562,3.7,21325,25000,13000,0.949999988,0.449999988,23.12999916,74831.68,54115,7.46999979,152,1524,52200,49400
Adrian College,3,3,Private,Great Lakes,Distant Town,0.5628,22,1007,1616,0.7605,0.1002,0.0217,0.0056,0.0037,0.0006,0.0384,0.0006,0.021,40199,7091,7453,0.4767,0.4368,0.5445,0.5811,0.023,7.7,14250,27000,7655,0.99000001,0.479999989,19.62999916,77959.35,71008.5,5.710000038,34,393,35000,33800
and here is the code I have so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: All vehicles</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
h1 {
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
.area {
stroke: none;
}
.area:hover {
fill: yellow;
}
</style>
</head>
<body>
<h1>Colleges</h1>
<script type="text/javascript">
//Width and height
var width = 1000;
var height = 1000;
var padding = 20;
var dataset, xScale, yScale, xAxis, yAxis, area; //Empty, for now
//For converting strings to Dates
var parseTime = d3.timeParse("%Y-%m");
//For converting Dates to strings
var formatTime = d3.timeFormat("%b %Y");
//Set up stack method
var stack = d3.stack()
.order(d3.stackOrderDescending); // <-- Flipped stacking order
//Setting up the scales
//Load in data
d3.request("colleges.csv")
.mimeType("text/csv")
.get(function(response) {
//
// DATA PARSING
//
//Parse each row of the CSV into an array of string values
var rows = d3.csvParseRows(response.responseText);
//console.log(rows);
//Make dataset an empty array, so we can start adding values
dataset = ;
schoolvsSATvsACT =
//Loop once for each row of the CSV, starting at row 3,
//since rows 0-2 contain only vehicle info, not sales values.
for (var i = 1; i < rows.length; i++) {
//console.log(rows[i][0]);
//Create a new object
dataset[i - 1] = {
// school: rows[i][0] //Make a new School object for each school
school: rows[i][0]
};
//Loop once for each vehicle in this row (i.e., for this date)
//for (var j = 1; j < rows[i].length; j++) {
var school = rows[i][0];
var predominantDegree = rows[i][1]; //'Make' from 1st row in CSV
var highestDegree = rows[i][2]; //'Model' from 2nd row in CSV
var control = rows[i][3]; //'Make' + 'Model' will serve as our key
var region = rows[i][4]; //'Type' from 3rd row in CSV
var local = rows[i][5]; //Sales value for this vehicle and month
var act = parseInt(rows[i][7]);
var sat = parseInt(rows[i][8]);
var white = parseFloat(rows[i][10]);
var black = parseFloat(rows[i][11]);
var hispanic = parseFloat(rows[i][12]);
var asian = parseFloat(rows[i][13]);
// //If sales value exists…
// if (sales) {
// sales = parseInt(sales); //Convert from string to int
// } else { //Otherwise…
// sales = 0; //Set to zero
// }
//Append a new object with data for this vehicle and month
dataset[i - 1] = {
"School" : school,
"PredominantDegree": predominantDegree,
"HighestDegree": highestDegree,
"Control": control,
"Region": region,
"Local": local,
"ACT" : act,
"SAT" : sat,
"White" : white,
"Black" : black,
"Hispanic" : hispanic,
"Asian" : asian
};
//}
}
console.log(dataset);
//Log out the final state of dataset
// console.log(dataset);
// console.log(rows[0].school);
xScale = d3.scaleLinear().domain([0,d3.max(dataset,function(d){
return d.ACT; })]).range([0,height]);
yScale = d3.scaleLinear().domain([0,d3.max(dataset,function(d){
return d.SAT; })]).range([0,width]);
var maxValue = d3.max(dataset,function(d){
return d.SAT;
});
console.log(parseInt(maxValue));
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d.ACT);
})
.attr("cy", function(d) {
return yScale(d.SAT);
})
.attr("r", 1);
// svg.selectAll("text")
// .data(dataset)
// .enter()
// .append("text")
// .text(function(d){
// return d.ACT + "," + d.SAT;
// })
// .attr("x", function(d){
// return xScale(d.ACT);
// })
// .attr("y", function(d){
// return yScale(d.SAT);
// }).attr("font-family", "sans-serif")
// .attr("font-size", "11px")
// .attr("fill","red");
// var xAxis = d3.svg.axis().scale(xScale);
// var yAxis = d3.svg.axis().scale(yScale);
for (var i = 1; i < rows.length; i++) {
//console.log(rows[i][0]);
//Create a new object
schoolvsSATvsACT[i - 1] = {
school: rows[i][0] //Make a new Date object for each year + month
};
//Loop once for each vehicle in this row (i.e., for this date)
//for (var j = 1; j < rows[i].length; j++) {
var ACT = rows[i][7];
var SAT = rows[i][8]; //'Make' from 1st row in CSV
// //If sales value exists…
// if (sales) {
// sales = parseInt(sales); //Convert from string to int
// } else { //Otherwise…
// sales = 0; //Set to zero
// }
//Append a new object with data for this vehicle and month
// dataset[i - 1][school] = {
// "predominant Degree": predominantDegree,
// "Highest Degree": highestDegree,
// "Control": control,
// "Region": region,
// "Local": local
// };
//}
}
});
</script>
</body>
</html>
javascript d3.js
edited Nov 25 '18 at 3:15
rioV8
4,5742311
asked Nov 25 '18 at 2:14
Trea704Trea704
114
add a comment |
1
I am new to using javascript and d3. I have a csv file of colleges and have created an array of each of these college object along with the attributes that belong to each college. I wan to create a drop down menu for the user to be able to select the college they would like to view the statistics of. I know how to make a bar graph given the statistic but do not know how to give the user the option of a drop down menu to select the college object and then how to pass the data from the selected object a graph. Could someone help me out. I will file and the code I have so far.
Here is a snippet of the csv file I am working with
Name,Predominant Degree,Highest Degree,Control,Region,Locale,Admission Rate,ACT Median,SAT Average,Undergrad Population,% White,% Black,% Hispanic,% Asian,% American Indian,% Pacific Islander,% Biracial,% Nonresident Aliens,% Part-time Undergrads,Average Cost,Expenditure Per Student,Average Faculty Salary,% Full-time Faculty,% Undergrads with Pell Grant,Completion Rate 150% time,Retention Rate (First Time Students),% Undergrads 25+ y.o.,3 Year Default Rate,Median Debt,Median Debt on Graduation,Median Debt on Withdrawal,% Federal Loans,% Pell Grant Recipients,Average Age of Entry,Average Family Income,Median Family Income,Poverty Rate,Number of Unemployed 8 years after entry,Number of Employed 8 years after entry,Mean Earnings 8 years After Entry,Median Earnings 8 years After Entry
Abilene Christian University,3,4,Private,Southwest,Mid-size City,0.4894,24,1087,3647,0.7069,0.076,0.1206,0.0099,0.0036,0.0005,0.0373,0.0417,0.0398,39811,8737,5508,0.9204,0.2347,0.5637,0.7941,0.0381,7.5,20698.5,26237.5,9500,0.970000029,0.439999998,20.22999954,86392,75873.5,7.800000191,130,1327,39800,37200
Adams State University,3,4,Public,Rocky Mountains,Remote Town,0.526,20,939,2227,0.5123,0.0768,0.3026,0.0112,0.0153,0.0063,0.04,0,0.1612,17759,7996,5986,0.5088,0.5029,0.227,0.5592,0.2106,9.3,11000,0,11000,0.829999983,0.730000019,24.12999916,45711.23,34243,11.84000015,99,752,33600,30700
Adelphi University,3,4,Private,Mid-Atlantic,Large Suburb,0.6814,22,1098,5000,0.5296,0.1062,0.1336,0.0756,0.0016,0.002,0.022,0.0396,0.0952,41559,12142,11315,0.3203,0.2951,0.6251,0.8112,0.1562,3.7,21325,25000,13000,0.949999988,0.449999988,23.12999916,74831.68,54115,7.46999979,152,1524,52200,49400
Adrian College,3,3,Private,Great Lakes,Distant Town,0.5628,22,1007,1616,0.7605,0.1002,0.0217,0.0056,0.0037,0.0006,0.0384,0.0006,0.021,40199,7091,7453,0.4767,0.4368,0.5445,0.5811,0.023,7.7,14250,27000,7655,0.99000001,0.479999989,19.62999916,77959.35,71008.5,5.710000038,34,393,35000,33800
and here is the code I have so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: All vehicles</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
h1 {
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
.area {
stroke: none;
}
.area:hover {
fill: yellow;
}
</style>
</head>
<body>
<h1>Colleges</h1>
<script type="text/javascript">
//Width and height
var width = 1000;
var height = 1000;
var padding = 20;
var dataset, xScale, yScale, xAxis, yAxis, area; //Empty, for now
//For converting strings to Dates
var parseTime = d3.timeParse("%Y-%m");
//For converting Dates to strings
var formatTime = d3.timeFormat("%b %Y");
//Set up stack method
var stack = d3.stack()
.order(d3.stackOrderDescending); // <-- Flipped stacking order
//Setting up the scales
//Load in data
d3.request("colleges.csv")
.mimeType("text/csv")
.get(function(response) {
//
// DATA PARSING
//
//Parse each row of the CSV into an array of string values
var rows = d3.csvParseRows(response.responseText);
//console.log(rows);
//Make dataset an empty array, so we can start adding values
dataset = ;
schoolvsSATvsACT =
//Loop once for each row of the CSV, starting at row 3,
//since rows 0-2 contain only vehicle info, not sales values.
for (var i = 1; i < rows.length; i++) {
//console.log(rows[i][0]);
//Create a new object
dataset[i - 1] = {
// school: rows[i][0] //Make a new School object for each school
school: rows[i][0]
};
//Loop once for each vehicle in this row (i.e., for this date)
//for (var j = 1; j < rows[i].length; j++) {
var school = rows[i][0];
var predominantDegree = rows[i][1]; //'Make' from 1st row in CSV
var highestDegree = rows[i][2]; //'Model' from 2nd row in CSV
var control = rows[i][3]; //'Make' + 'Model' will serve as our key
var region = rows[i][4]; //'Type' from 3rd row in CSV
var local = rows[i][5]; //Sales value for this vehicle and month
var act = parseInt(rows[i][7]);
var sat = parseInt(rows[i][8]);
var white = parseFloat(rows[i][10]);
var black = parseFloat(rows[i][11]);
var hispanic = parseFloat(rows[i][12]);
var asian = parseFloat(rows[i][13]);
// //If sales value exists…
// if (sales) {
// sales = parseInt(sales); //Convert from string to int
// } else { //Otherwise…
// sales = 0; //Set to zero
// }
//Append a new object with data for this vehicle and month
dataset[i - 1] = {
"School" : school,
"PredominantDegree": predominantDegree,
"HighestDegree": highestDegree,
"Control": control,
"Region": region,
"Local": local,
"ACT" : act,
"SAT" : sat,
"White" : white,
"Black" : black,
"Hispanic" : hispanic,
"Asian" : asian
};
//}
}
console.log(dataset);
//Log out the final state of dataset
// console.log(dataset);
// console.log(rows[0].school);
xScale = d3.scaleLinear().domain([0,d3.max(dataset,function(d){
return d.ACT; })]).range([0,height]);
yScale = d3.scaleLinear().domain([0,d3.max(dataset,function(d){
return d.SAT; })]).range([0,width]);
var maxValue = d3.max(dataset,function(d){
return d.SAT;
});
console.log(parseInt(maxValue));
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d.ACT);
})
.attr("cy", function(d) {
return yScale(d.SAT);
})
.attr("r", 1);
// svg.selectAll("text")
// .data(dataset)
// .enter()
// .append("text")
// .text(function(d){
// return d.ACT + "," + d.SAT;
// })
// .attr("x", function(d){
// return xScale(d.ACT);
// })
// .attr("y", function(d){
// return yScale(d.SAT);
// }).attr("font-family", "sans-serif")
// .attr("font-size", "11px")
// .attr("fill","red");
// var xAxis = d3.svg.axis().scale(xScale);
// var yAxis = d3.svg.axis().scale(yScale);
for (var i = 1; i < rows.length; i++) {
//console.log(rows[i][0]);
//Create a new object
schoolvsSATvsACT[i - 1] = {
school: rows[i][0] //Make a new Date object for each year + month
};
//Loop once for each vehicle in this row (i.e., for this date)
//for (var j = 1; j < rows[i].length; j++) {
var ACT = rows[i][7];
var SAT = rows[i][8]; //'Make' from 1st row in CSV
// //If sales value exists…
// if (sales) {
// sales = parseInt(sales); //Convert from string to int
// } else { //Otherwise…
// sales = 0; //Set to zero
// }
//Append a new object with data for this vehicle and month
// dataset[i - 1][school] = {
// "predominant Degree": predominantDegree,
// "Highest Degree": highestDegree,
// "Control": control,
// "Region": region,
// "Local": local
// };
//}
}
});
</script>
</body>
</html>
javascript d3.js
edited Nov 25 '18 at 3:15
rioV8
4,5742311
asked Nov 25 '18 at 2:14
Trea704Trea704
114
add a comment |
1
1
1
I am new to using javascript and d3. I have a csv file of colleges and have created an array of each of these college object along with the attributes that belong to each college. I wan to create a drop down menu for the user to be able to select the college they would like to view the statistics of. I know how to make a bar graph given the statistic but do not know how to give the user the option of a drop down menu to select the college object and then how to pass the data from the selected object a graph. Could someone help me out. I will file and the code I have so far.
Here is a snippet of the csv file I am working with
Name,Predominant Degree,Highest Degree,Control,Region,Locale,Admission Rate,ACT Median,SAT Average,Undergrad Population,% White,% Black,% Hispanic,% Asian,% American Indian,% Pacific Islander,% Biracial,% Nonresident Aliens,% Part-time Undergrads,Average Cost,Expenditure Per Student,Average Faculty Salary,% Full-time Faculty,% Undergrads with Pell Grant,Completion Rate 150% time,Retention Rate (First Time Students),% Undergrads 25+ y.o.,3 Year Default Rate,Median Debt,Median Debt on Graduation,Median Debt on Withdrawal,% Federal Loans,% Pell Grant Recipients,Average Age of Entry,Average Family Income,Median Family Income,Poverty Rate,Number of Unemployed 8 years after entry,Number of Employed 8 years after entry,Mean Earnings 8 years After Entry,Median Earnings 8 years After Entry
Abilene Christian University,3,4,Private,Southwest,Mid-size City,0.4894,24,1087,3647,0.7069,0.076,0.1206,0.0099,0.0036,0.0005,0.0373,0.0417,0.0398,39811,8737,5508,0.9204,0.2347,0.5637,0.7941,0.0381,7.5,20698.5,26237.5,9500,0.970000029,0.439999998,20.22999954,86392,75873.5,7.800000191,130,1327,39800,37200
Adams State University,3,4,Public,Rocky Mountains,Remote Town,0.526,20,939,2227,0.5123,0.0768,0.3026,0.0112,0.0153,0.0063,0.04,0,0.1612,17759,7996,5986,0.5088,0.5029,0.227,0.5592,0.2106,9.3,11000,0,11000,0.829999983,0.730000019,24.12999916,45711.23,34243,11.84000015,99,752,33600,30700
Adelphi University,3,4,Private,Mid-Atlantic,Large Suburb,0.6814,22,1098,5000,0.5296,0.1062,0.1336,0.0756,0.0016,0.002,0.022,0.0396,0.0952,41559,12142,11315,0.3203,0.2951,0.6251,0.8112,0.1562,3.7,21325,25000,13000,0.949999988,0.449999988,23.12999916,74831.68,54115,7.46999979,152,1524,52200,49400
Adrian College,3,3,Private,Great Lakes,Distant Town,0.5628,22,1007,1616,0.7605,0.1002,0.0217,0.0056,0.0037,0.0006,0.0384,0.0006,0.021,40199,7091,7453,0.4767,0.4368,0.5445,0.5811,0.023,7.7,14250,27000,7655,0.99000001,0.479999989,19.62999916,77959.35,71008.5,5.710000038,34,393,35000,33800
and here is the code I have so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: All vehicles</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
h1 {
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
.area {
stroke: none;
}
.area:hover {
fill: yellow;
}
</style>
</head>
<body>
<h1>Colleges</h1>
<script type="text/javascript">
//Width and height
var width = 1000;
var height = 1000;
var padding = 20;
var dataset, xScale, yScale, xAxis, yAxis, area; //Empty, for now
//For converting strings to Dates
var parseTime = d3.timeParse("%Y-%m");
//For converting Dates to strings
var formatTime = d3.timeFormat("%b %Y");
//Set up stack method
var stack = d3.stack()
.order(d3.stackOrderDescending); // <-- Flipped stacking order
//Setting up the scales
//Load in data
d3.request("colleges.csv")
.mimeType("text/csv")
.get(function(response) {
//
// DATA PARSING
//
//Parse each row of the CSV into an array of string values
var rows = d3.csvParseRows(response.responseText);
//console.log(rows);
//Make dataset an empty array, so we can start adding values
dataset = ;
schoolvsSATvsACT =
//Loop once for each row of the CSV, starting at row 3,
//since rows 0-2 contain only vehicle info, not sales values.
for (var i = 1; i < rows.length; i++) {
//console.log(rows[i][0]);
//Create a new object
dataset[i - 1] = {
// school: rows[i][0] //Make a new School object for each school
school: rows[i][0]
};
//Loop once for each vehicle in this row (i.e., for this date)
//for (var j = 1; j < rows[i].length; j++) {
var school = rows[i][0];
var predominantDegree = rows[i][1]; //'Make' from 1st row in CSV
var highestDegree = rows[i][2]; //'Model' from 2nd row in CSV
var control = rows[i][3]; //'Make' + 'Model' will serve as our key
var region = rows[i][4]; //'Type' from 3rd row in CSV
var local = rows[i][5]; //Sales value for this vehicle and month
var act = parseInt(rows[i][7]);
var sat = parseInt(rows[i][8]);
var white = parseFloat(rows[i][10]);
var black = parseFloat(rows[i][11]);
var hispanic = parseFloat(rows[i][12]);
var asian = parseFloat(rows[i][13]);
// //If sales value exists…
// if (sales) {
// sales = parseInt(sales); //Convert from string to int
// } else { //Otherwise…
// sales = 0; //Set to zero
// }
//Append a new object with data for this vehicle and month
dataset[i - 1] = {
"School" : school,
"PredominantDegree": predominantDegree,
"HighestDegree": highestDegree,
"Control": control,
"Region": region,
"Local": local,
"ACT" : act,
"SAT" : sat,
"White" : white,
"Black" : black,
"Hispanic" : hispanic,
"Asian" : asian
};
//}
}
console.log(dataset);
//Log out the final state of dataset
// console.log(dataset);
// console.log(rows[0].school);
xScale = d3.scaleLinear().domain([0,d3.max(dataset,function(d){
return d.ACT; })]).range([0,height]);
yScale = d3.scaleLinear().domain([0,d3.max(dataset,function(d){
return d.SAT; })]).range([0,width]);
var maxValue = d3.max(dataset,function(d){
return d.SAT;
});
console.log(parseInt(maxValue));
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d.ACT);
})
.attr("cy", function(d) {
return yScale(d.SAT);
})
.attr("r", 1);
// svg.selectAll("text")
// .data(dataset)
// .enter()
// .append("text")
// .text(function(d){
// return d.ACT + "," + d.SAT;
// })
// .attr("x", function(d){
// return xScale(d.ACT);
// })
// .attr("y", function(d){
// return yScale(d.SAT);
// }).attr("font-family", "sans-serif")
// .attr("font-size", "11px")
// .attr("fill","red");
// var xAxis = d3.svg.axis().scale(xScale);
// var yAxis = d3.svg.axis().scale(yScale);
for (var i = 1; i < rows.length; i++) {
//console.log(rows[i][0]);
//Create a new object
schoolvsSATvsACT[i - 1] = {
school: rows[i][0] //Make a new Date object for each year + month
};
//Loop once for each vehicle in this row (i.e., for this date)
//for (var j = 1; j < rows[i].length; j++) {
var ACT = rows[i][7];
var SAT = rows[i][8]; //'Make' from 1st row in CSV
// //If sales value exists…
// if (sales) {
// sales = parseInt(sales); //Convert from string to int
// } else { //Otherwise…
// sales = 0; //Set to zero
// }
//Append a new object with data for this vehicle and month
// dataset[i - 1][school] = {
// "predominant Degree": predominantDegree,
// "Highest Degree": highestDegree,
// "Control": control,
// "Region": region,
// "Local": local
// };
//}
}
});
</script>
</body>
</html>
javascript d3.js
edited Nov 25 '18 at 3:15
rioV8
4,5742311
asked Nov 25 '18 at 2:14
Trea704Trea704
114
I am new to using javascript and d3. I have a csv file of colleges and have created an array of each of these college object along with the attributes that belong to each college. I wan to create a drop down menu for the user to be able to select the college they would like to view the statistics of. I know how to make a bar graph given the statistic but do not know how to give the user the option of a drop down menu to select the college object and then how to pass the data from the selected object a graph. Could someone help me out. I will file and the code I have so far.
Here is a snippet of the csv file I am working with
Name,Predominant Degree,Highest Degree,Control,Region,Locale,Admission Rate,ACT Median,SAT Average,Undergrad Population,% White,% Black,% Hispanic,% Asian,% American Indian,% Pacific Islander,% Biracial,% Nonresident Aliens,% Part-time Undergrads,Average Cost,Expenditure Per Student,Average Faculty Salary,% Full-time Faculty,% Undergrads with Pell Grant,Completion Rate 150% time,Retention Rate (First Time Students),% Undergrads 25+ y.o.,3 Year Default Rate,Median Debt,Median Debt on Graduation,Median Debt on Withdrawal,% Federal Loans,% Pell Grant Recipients,Average Age of Entry,Average Family Income,Median Family Income,Poverty Rate,Number of Unemployed 8 years after entry,Number of Employed 8 years after entry,Mean Earnings 8 years After Entry,Median Earnings 8 years After Entry
Abilene Christian University,3,4,Private,Southwest,Mid-size City,0.4894,24,1087,3647,0.7069,0.076,0.1206,0.0099,0.0036,0.0005,0.0373,0.0417,0.0398,39811,8737,5508,0.9204,0.2347,0.5637,0.7941,0.0381,7.5,20698.5,26237.5,9500,0.970000029,0.439999998,20.22999954,86392,75873.5,7.800000191,130,1327,39800,37200
Adams State University,3,4,Public,Rocky Mountains,Remote Town,0.526,20,939,2227,0.5123,0.0768,0.3026,0.0112,0.0153,0.0063,0.04,0,0.1612,17759,7996,5986,0.5088,0.5029,0.227,0.5592,0.2106,9.3,11000,0,11000,0.829999983,0.730000019,24.12999916,45711.23,34243,11.84000015,99,752,33600,30700
Adelphi University,3,4,Private,Mid-Atlantic,Large Suburb,0.6814,22,1098,5000,0.5296,0.1062,0.1336,0.0756,0.0016,0.002,0.022,0.0396,0.0952,41559,12142,11315,0.3203,0.2951,0.6251,0.8112,0.1562,3.7,21325,25000,13000,0.949999988,0.449999988,23.12999916,74831.68,54115,7.46999979,152,1524,52200,49400
Adrian College,3,3,Private,Great Lakes,Distant Town,0.5628,22,1007,1616,0.7605,0.1002,0.0217,0.0056,0.0037,0.0006,0.0384,0.0006,0.021,40199,7091,7453,0.4767,0.4368,0.5445,0.5811,0.023,7.7,14250,27000,7655,0.99000001,0.479999989,19.62999916,77959.35,71008.5,5.710000038,34,393,35000,33800
and here is the code I have so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: All vehicles</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
h1 {
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
.area {
stroke: none;
}
.area:hover {
fill: yellow;
}
</style>
</head>
<body>
<h1>Colleges</h1>
<script type="text/javascript">
//Width and height
var width = 1000;
var height = 1000;
var padding = 20;
var dataset, xScale, yScale, xAxis, yAxis, area; //Empty, for now
//For converting strings to Dates
var parseTime = d3.timeParse("%Y-%m");
//For converting Dates to strings
var formatTime = d3.timeFormat("%b %Y");
//Set up stack method
var stack = d3.stack()
.order(d3.stackOrderDescending); // <-- Flipped stacking order
//Setting up the scales
//Load in data
d3.request("colleges.csv")
.mimeType("text/csv")
.get(function(response) {
//
// DATA PARSING
//
//Parse each row of the CSV into an array of string values
var rows = d3.csvParseRows(response.responseText);
//console.log(rows);
//Make dataset an empty array, so we can start adding values
dataset = ;
schoolvsSATvsACT =
//Loop once for each row of the CSV, starting at row 3,
//since rows 0-2 contain only vehicle info, not sales values.
for (var i = 1; i < rows.length; i++) {
//console.log(rows[i][0]);
//Create a new object
dataset[i - 1] = {
// school: rows[i][0] //Make a new School object for each school
school: rows[i][0]
};
//Loop once for each vehicle in this row (i.e., for this date)
//for (var j = 1; j < rows[i].length; j++) {
var school = rows[i][0];
var predominantDegree = rows[i][1]; //'Make' from 1st row in CSV
var highestDegree = rows[i][2]; //'Model' from 2nd row in CSV
var control = rows[i][3]; //'Make' + 'Model' will serve as our key
var region = rows[i][4]; //'Type' from 3rd row in CSV
var local = rows[i][5]; //Sales value for this vehicle and month
var act = parseInt(rows[i][7]);
var sat = parseInt(rows[i][8]);
var white = parseFloat(rows[i][10]);
var black = parseFloat(rows[i][11]);
var hispanic = parseFloat(rows[i][12]);
var asian = parseFloat(rows[i][13]);
// //If sales value exists…
// if (sales) {
// sales = parseInt(sales); //Convert from string to int
// } else { //Otherwise…
// sales = 0; //Set to zero
// }
//Append a new object with data for this vehicle and month
dataset[i - 1] = {
"School" : school,
"PredominantDegree": predominantDegree,
"HighestDegree": highestDegree,
"Control": control,
"Region": region,
"Local": local,
"ACT" : act,
"SAT" : sat,
"White" : white,
"Black" : black,
"Hispanic" : hispanic,
"Asian" : asian
};
//}
}
console.log(dataset);
//Log out the final state of dataset
// console.log(dataset);
// console.log(rows[0].school);
xScale = d3.scaleLinear().domain([0,d3.max(dataset,function(d){
return d.ACT; })]).range([0,height]);
yScale = d3.scaleLinear().domain([0,d3.max(dataset,function(d){
return d.SAT; })]).range([0,width]);
var maxValue = d3.max(dataset,function(d){
return d.SAT;
});
console.log(parseInt(maxValue));
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d.ACT);
})
.attr("cy", function(d) {
return yScale(d.SAT);
})
.attr("r", 1);
// svg.selectAll("text")
// .data(dataset)
// .enter()
// .append("text")
// .text(function(d){
// return d.ACT + "," + d.SAT;
// })
// .attr("x", function(d){
// return xScale(d.ACT);
// })
// .attr("y", function(d){
// return yScale(d.SAT);
// }).attr("font-family", "sans-serif")
// .attr("font-size", "11px")
// .attr("fill","red");
// var xAxis = d3.svg.axis().scale(xScale);
// var yAxis = d3.svg.axis().scale(yScale);
for (var i = 1; i < rows.length; i++) {
//console.log(rows[i][0]);
//Create a new object
schoolvsSATvsACT[i - 1] = {
school: rows[i][0] //Make a new Date object for each year + month
};
//Loop once for each vehicle in this row (i.e., for this date)
//for (var j = 1; j < rows[i].length; j++) {
var ACT = rows[i][7];
var SAT = rows[i][8]; //'Make' from 1st row in CSV
// //If sales value exists…
// if (sales) {
// sales = parseInt(sales); //Convert from string to int
// } else { //Otherwise…
// sales = 0; //Set to zero
// }
//Append a new object with data for this vehicle and month
// dataset[i - 1][school] = {
// "predominant Degree": predominantDegree,
// "Highest Degree": highestDegree,
// "Control": control,
// "Region": region,
// "Local": local
// };
//}
}
});
</script>
</body>
</html>
javascript d3.js
javascript d3.js
edited Nov 25 '18 at 3:15
rioV8
4,5742311
asked Nov 25 '18 at 2:14
Trea704Trea704
114
edited Nov 25 '18 at 3:15
rioV8
4,5742311
asked Nov 25 '18 at 2:14
Trea704Trea704
114
edited Nov 25 '18 at 3:15
rioV8
4,5742311
edited Nov 25 '18 at 3:15
rioV8
4,5742311
edited Nov 25 '18 at 3:15
rioV8
4,5742311
4,5742311
asked Nov 25 '18 at 2:14
Trea704Trea704
114
asked Nov 25 '18 at 2:14
Trea704Trea704
114
asked Nov 25 '18 at 2:14
Trea704Trea704
114
114
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
To create a drop down with D3, you want something like this -
var dropdown = d3.select("#your-dropdown-location")
.insert("select", "svg")
.on("change", dropdownChange);
dropdown.selectAll("option")
.data(dataset)
.enter().append("option")
.attr("value", function (d) { return d.school; });
function dropdownChange() {
var newSchool = d3.select(this).property('value');
//Update bar graph...
}
May require small tweak to the setting of the value to accommodate the format of your data set.
answered Nov 26 '18 at 14:37
A ZibudaA Zibuda
388
Thank you for the help. This did the job!
– Trea704
Nov 28 '18 at 20:43
No problem! Glad I could help. If it did answer your question, you should "accept" the answer so others viewing later with a similar concern can know how to solve it.
– A Zibuda
Nov 28 '18 at 20:46
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53464101%2fmake-a-dropdown-menu-to-choose-an-object-in-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
To create a drop down with D3, you want something like this -
var dropdown = d3.select("#your-dropdown-location")
.insert("select", "svg")
.on("change", dropdownChange);
dropdown.selectAll("option")
.data(dataset)
.enter().append("option")
.attr("value", function (d) { return d.school; });
function dropdownChange() {
var newSchool = d3.select(this).property('value');
//Update bar graph...
}
May require small tweak to the setting of the value to accommodate the format of your data set.
answered Nov 26 '18 at 14:37
A ZibudaA Zibuda
388
Thank you for the help. This did the job!
– Trea704
Nov 28 '18 at 20:43
No problem! Glad I could help. If it did answer your question, you should "accept" the answer so others viewing later with a similar concern can know how to solve it.
– A Zibuda
Nov 28 '18 at 20:46
add a comment |
0
To create a drop down with D3, you want something like this -
var dropdown = d3.select("#your-dropdown-location")
.insert("select", "svg")
.on("change", dropdownChange);
dropdown.selectAll("option")
.data(dataset)
.enter().append("option")
.attr("value", function (d) { return d.school; });
function dropdownChange() {
var newSchool = d3.select(this).property('value');
//Update bar graph...
}
May require small tweak to the setting of the value to accommodate the format of your data set.
answered Nov 26 '18 at 14:37
A ZibudaA Zibuda
388
Thank you for the help. This did the job!
– Trea704
Nov 28 '18 at 20:43
No problem! Glad I could help. If it did answer your question, you should "accept" the answer so others viewing later with a similar concern can know how to solve it.
– A Zibuda
Nov 28 '18 at 20:46
add a comment |
0
0
0
To create a drop down with D3, you want something like this -
var dropdown = d3.select("#your-dropdown-location")
.insert("select", "svg")
.on("change", dropdownChange);
dropdown.selectAll("option")
.data(dataset)
.enter().append("option")
.attr("value", function (d) { return d.school; });
function dropdownChange() {
var newSchool = d3.select(this).property('value');
//Update bar graph...
}
May require small tweak to the setting of the value to accommodate the format of your data set.
answered Nov 26 '18 at 14:37
A ZibudaA Zibuda
388
To create a drop down with D3, you want something like this -
var dropdown = d3.select("#your-dropdown-location")
.insert("select", "svg")
.on("change", dropdownChange);
dropdown.selectAll("option")
.data(dataset)
.enter().append("option")
.attr("value", function (d) { return d.school; });
function dropdownChange() {
var newSchool = d3.select(this).property('value');
//Update bar graph...
}
May require small tweak to the setting of the value to accommodate the format of your data set.
answered Nov 26 '18 at 14:37
A ZibudaA Zibuda
388
answered Nov 26 '18 at 14:37
A ZibudaA Zibuda
388
answered Nov 26 '18 at 14:37
A ZibudaA Zibuda
388
answered Nov 26 '18 at 14:37
A ZibudaA Zibuda
388
388
Thank you for the help. This did the job!
– Trea704
Nov 28 '18 at 20:43
No problem! Glad I could help. If it did answer your question, you should "accept" the answer so others viewing later with a similar concern can know how to solve it.
– A Zibuda
Nov 28 '18 at 20:46
add a comment |
Thank you for the help. This did the job!
– Trea704
Nov 28 '18 at 20:43
No problem! Glad I could help. If it did answer your question, you should "accept" the answer so others viewing later with a similar concern can know how to solve it.
– A Zibuda
Nov 28 '18 at 20:46
Thank you for the help. This did the job!
– Trea704
Nov 28 '18 at 20:43
Thank you for the help. This did the job!
– Trea704
Nov 28 '18 at 20:43
No problem! Glad I could help. If it did answer your question, you should "accept" the answer so others viewing later with a similar concern can know how to solve it.
– A Zibuda
Nov 28 '18 at 20:46
No problem! Glad I could help. If it did answer your question, you should "accept" the answer so others viewing later with a similar concern can know how to solve it.
– A Zibuda
Nov 28 '18 at 20:46
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53464101%2fmake-a-dropdown-menu-to-choose-an-object-in-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
