chart = {
// set the dimensions and margins of the graph
const margin = {top: 30, right: 10, bottom: 10, left: 0};
const svg_width = 500;
const svg_height = 400;
// TODO: set up the dimension for the drawing spaces (1 points)
// const group_width =
// const group_height =
// 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(${0},${0})`);
// 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)
}
// Build the X scale -> it find the best position for each Y axis
// TODO: Finish the scale function for x axis (1 points)
// Which scale function should we choose?
// let x =
// function row2points(row){
// // TODO: Complete the x and y coordinates of the line to draw for each row in the dataset. (2 points)
// }
// Draw the lines
group
.selectAll("myPath")
.data(data_cleaned)
.join("path")
// .attr("d", row=>d3.line()()) // TODO: finish the function that convert each row of data to path (1 points)
.style("fill", "none")
//.style("stroke", "#69b3a2") // 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()
.enter()
.append("g")
// TODO: finish the transform function for the axes (1 points)
// .attr("transform", function(d) { return })
// Build the axes at each group location
.each(function(d) { d3.axisLeft(y[d])(d3.select(this)) })
// Add axis title
.append("text")
.style("text-anchor", "middle")
.attr("y", -9)
.text(function(d) { return 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.
