ICE-6 Scatter Plot Graph

ICE-6 Scatter Plot Graph ' const parseRow = (d) => { d.sepal_length = +d.sepal_length; d.sepal_width = +d.sepal_width; d.petal_length = +d.petal_length; d.petal_width = +d.petal_width; return d; }; //LOAD THE DATA const xValue = (d) => d.petal_length; const yValue = (d) => d.petal_width; const rxValue = (d) => d.sepal_length; const ryValue = (d) => d.sepal_width; const speciesValue = (d) => d.species; const margin = { top: 20, right: 20, bottom: 190, left: 100, }; const radius = 5; const width = window.innerWidth; const height = window.innerHeight; const svg = select('body') .append('svg') .attr('width', width) .attr('height', height); const main = async () => { const data = await csv(csvUrl, parseRow); const x = scaleLinear() .domain(extent(data, xValue)) .range([margin.left, width - margin.right]); const y = scaleLinear() .domain(extent(data, yValue)) .range([height - margin.bottom, margin.top]); const marker = (d) => { switch(d){ case 'setosa': return 'yellow'; case 'versicolor': return 'blue'; default: return 'red'; } } const marks = data.map((d) => ({ x: x(xValue(d)), y: y(yValue(d)), species: speciesValue(d), color: marker(speciesValue(d)), rx: rxValue(d), ry: ryValue(d), })); svg .selectAll('circle') .data(marks) .join('circle') .attr('cx', (d) => d.x) .attr('cy', (d) => d.y) .attr('fill', (d) => d.color) .attr('rx', (d) => (d.rx)) .attr('ry', (d) => (d.ry)) .attr('r', radius); svg .append('g') .attr('transform', `translate(${margin.left},0)`) .call(axisLeft(y)); svg.append('text') .attr('class', 'axis-label') .attr('x', -innerHeight / 3) .attr('y', 47) .attr('fill', 'black') .style("font", "25px times") .style('text-anchor', 'middle') .attr('transform', `rotate(-90)`) .text('Petal-Length'); svg .append('g') .attr( 'transform', `translate(0,${height - margin.bottom})` ) .call(axisBottom(x)); svg.append('text') .attr('class', 'axis-label') .attr('x', innerWidth / 2) .attr('y', 370) .style("font", "25px times") .style('text-anchor', 'middle') .text('Sepal-Length'); }; main();