xxxxxxxxxx<html lang = "en"><head><meta charset="utf-8"> <title> Parallel Coordinates </title><style></style></head><body><script src="https://d3js.org/d3.v4.min.js"></script><script>var margin = {top: 50, right: 50, bottom: 50, left: 50}, width = 1000 - margin.left - margin.right, height = 600 - margin.top - margin.bottom;// divide into scales for for carrier, security, and weathervar yScaleCarrier = d3.scaleLinear() .range([height, 0]);var yScaleWeather = d3.scaleLinear() .range([height, 0]);var yScaleSecurity = d3.scaleLinear() .range([height, 0]);var yAxisSecurity = d3.axisLeft() .scale(yScaleSecurity) .ticks(9);var yAxisCarrier = d3.axisLeft() .scale(yScaleCarrier) .ticks(10);var yAxisWeather = d3.axisLeft() .scale(yScaleWeather) .ticks(10);var svg = d3.select("body") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var dataset = []; d3.csv("airlines.csv", function(data) { // only want values from SFO data.forEach(function(d) { if (d.Code == "SFO"){ dataset.push({carrier:parseInt(d["# of Delays.Carrier"]), weather:parseInt(d["# of Delays.Weather"]), security:parseInt(d["# of Delays.Security"])}); } }); yScaleCarrier.domain([d3.min(dataset, function(d) { return d.carrier; }), d3.max(dataset, function(d) { return d.carrier; })]); yScaleWeather.domain([d3.min(dataset, function(d) { return d.weather; }), d3.max(dataset, function(d) { return d.weather; })]); yScaleSecurity.domain([d3.min(dataset, function(d) { return d.security; }), d3.max(dataset, function(d) { return d.security; })]); // adding in lines svg.selectAll("carrier-weather") .data(dataset) .enter() .append("line") .attr("x1", width/6) .attr("y1", function(d) { return yScaleCarrier(d.carrier); }) .attr("x2", width/2) .attr("y2", function(d) { return yScaleWeather(d.weather); }) .attr("stroke", "#D3D3D3"); svg.selectAll("weather-security") .data(dataset) .enter() .append("line") .attr("x1", width/2) .attr("y1", function(d) { return yScaleWeather(d.weather); }) .attr("x2", 5*(width/6)) .attr("y2", function(d) { return yScaleSecurity(d.security); }) .attr("stroke", "#D3D3D3"); // adding y axes svg.append("g") .attr("class", "axis") .attr("transform", "translate("+ width/6 +"," + 0 + ")") .call(yAxisCarrier); svg.append("g") .attr("class", "axis") .attr("transform", "translate("+ width/2 +"," + 0 + ")") .call(yAxisWeather); svg.append("g") .attr("class", "axis") .attr("transform", "translate("+ 5*(width/6) +"," + 0 + ")") .call(yAxisSecurity); //title svg.append("text") .attr("transform", "translate(" + width/2 + "," + -20 + ")") .style("text-anchor", "middle") .attr("font-family", "sans-serif") .text("Parallel Coordinates for Delays from SFO"); // text label weather - x axis svg.append("text") .attr("transform", "translate(" + (width/2) + " ," + (height + 30) + ")") .style("text-anchor", "middle") .attr("font-family", "sans-serif") .style("font-size","11px") .text("Weather"); // text label carrier - x axis svg.append("text") .attr("transform", "translate(" + (width/1.2) + " ," + (height + 30) + ")") .style("text-anchor", "middle") .attr("font-family", "sans-serif") .style("font-size","11px") .text("Security"); // text label security - x axis svg.append("text") .attr("transform", "translate(" + (width/6) + " ," + (height + 30) + ")") .style("text-anchor", "middle") .attr("font-family", "sans-serif") .style("font-size","11px") .text("Carrier");});</script></body></html> https://d3js.org/d3.v4.min.js