chart = {
// set the dimensions and margins of the graph
const margin = {top: 30, right: 30, bottom: 40, left: 70};
const svg_width = 600;
const svg_height = 700;
// TODO: set up the dimension for the drawing spaces (1 points)
const group_width = svg_width - margin.left - margin.right;
const group_height = svg_height - margin.top - margin.bottom;
// create the svg element
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height);
// TODO: complete the transformation for the group containing the chart (1 points)
// The group should be translated to leave the margins
const group = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Extract the list of dimensions we want to keep in the plot.
let dimensions = ['Displacement', 'Length', 'Beam', 'Draft', 'Speed', 'Crew'];
// For each dimension, we need to create a linearScale function
const y = {};
for (let i in dimensions) {
let name = dimensions[i];
y[name] = d3.scaleLinear()
// TODO: Finish the range and domain for these functions (1 points)
.domain(d3.extent(data_cleaned, d => d[name]))
.range([group_height, 0]);
}
// Build the X scale -> it finds the best position for each Y axis
// TODO: Finish the scale function for x axis (1 point)
// Which scale function should we choose?
// ANS: Here we use d3.scalepoint() because, this scale function is a best suite for categorical variables It places each dimension at a distinct position along the horizontal axis.
let x = d3.scalePoint()
.domain(dimensions)
.range([0, group_width]);
// function row2points(row){
// // TODO: Complete the x and y coordinates of the line to draw for each row in the dataset. (2 points)
// }
function row2points(row) {
return dimensions.map(dim => [x(dim), y[dim](row[dim])]);
}
// Draw the lines
group
.selectAll("myPath")
.data(data_cleaned)
.join("path")
.attr("d", row => d3.line()(row2points(row))) // TODO: finish the function that convert each row of data to path (1 points)
.style("fill", "none")
.style("stroke", d => d.Type === "Battleship" ? "#1f77b4" : d.Type === "Carrier" ? "#ff7f0e" : "#2ca02c") // TODO: change the fill color to encode the ship type (battleship, carrier, or cruiser) (1 points)
.style("opacity", 0.5);
// Draw the axes
group.selectAll("myAxis")
// For each dimension of the dataset, add a 'g' element:
// TODO: which data should be bound to axes? (1 points)
.data(dimensions)
.enter()
.append("g")
// TODO: finish the transform function for the axes (1 points)
.attr("transform", d => `translate(${x(d)}, 0)`)
// Build the axes at each group location
.each(function(d) { d3.select(this).call(d3.axisLeft(y[d])); })
// Add axis title
.append("text")
.style("text-anchor", "middle")
.attr("y", -9)
.text(d => d)
.style("fill", "black");
return svg.node();
}
chart2 = FileAttachment("chart (2).png").image()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
