Activity6_task3.2
This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with categorical species encoded through different point shapes. The visualization uses D3.js v7 to render the plot, with axes generated via `axisLeft` and `axisBottom` from the `d3` module. A custom shape legend explains the species-to-symbol mapping, built using `d3.symbol()` and `d3.symbolsFill`. Data is fetched as CSV and parsed with `d3.csvParse`, with numeric columns converted for scaling. The implementation demonstrates modular D3 components for reusable chart construction, including separate `axes.js` and `shapeLegend.js` modules composed within the main `scatterPlot.js` layout.
AI-generated descriptionimport { axisLeft, axisBottom } from 'd3';
export const axes = ( selection, { xScale, yScale,
xAxisLabel, yAxisLabel, xAxisLabelOffset = 25,
yAxisLabelOffset = 30, } ) => { selection
.selectAll('g.y-axis') .data([null]) .join('g')
.attr('class', 'y-axis') .attr( 'transform',
translate(${xScale.range()[0]},0) )
.call(axisLeft(yScale));
selection .selectAll('g.x-axis') .data([null]) .join('g')
.attr('class', 'x-axis') .attr( 'transform',
translate(0,${yScale.range()[0]}) )
.call(axisBottom(xScale));
selection .selectAll('text.x-axis-label') .data([null]) .join('text') .attr( 'x', (xScale.range()[0] + xScale.range()[1]) / 2 ) .attr( 'y', yScale.range()[0] + xAxisLabelOffset ) .attr('class', 'x-axis-label') .attr('alignment-baseline', 'hanging') .attr('text-anchor', 'middle') .attr('font-family', 'sans-serif') .text(xAxisLabel);
selection .selectAll('text.y-axis-label') .data([null]) .join('text') .attr('class', 'y-axis-label') .attr('text-anchor', 'middle') .attr('transform', 'rotate(-90)') .attr('font-family', 'sans-serif') .attr( 'x', -(yScale.range()[0] + yScale.range()[1]) / 2 ) .attr( 'y', xScale.range()[0] - yAxisLabelOffset ) .text(yAxisLabel); };