import { csv, select } from 'd3'; import { scatterPlot } from './scatterPlot'; const csvUrl = [ 'https://gist.githubusercontent.com/', 'INDU1998-GIT/', '27d356a6eb8513e0146a91a997d27aa6/', 'raw/ba3c2ada2696991aacf6cb2323b97b8d2c40e46e/iris.csv', // File name ].join(''); 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; }; const width = window.innerWidth; const height = window.innerHeight; const svg = select('body') .append('svg') .attr('width', width) .attr('height', height); 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 colorValue = d => d.species; const colorLabel = 'Species'; const main = async () => { const data = await csv(csvUrl, parseRow); const x = xValue((d) => d.petal_width); const y = yValue((d) => d.sepal_length); const marker = (d) => { switch(d){ case 'setosa': //label names on top return 'skyblue'; // colours for each type case 'versicolor': return 'lightgreen'; default: return 'orange'; } } //values of xand y axis const marks = data.map((d) => ({ x: xValue((d) => d.petal_width), y: yValue((d) => d.sepal_length), species: speciesValue(d), color: marker(speciesValue(d)), rx: rxValue(d), ry: ryValue(d), })); //structure of scatterplot is defined const plot = scatterPlot() .width(width) .height(height) .data(await csv(csvUrl, parseRow)) .xValue((d) => d.petal_width) .yValue((d) => d.sepal_length) .margin({ top: 28, right: 53, bottom: 82, left: 88, }) .radius(5); const g = svg.append('g') .attr('transform', `translate(${100},${100})`); const colorLegendG = g.append('g') .attr('transform', `translate(${100}, 150)`); //shape of that scattered data 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)); const columns = [ 'petal_width', 'sepal_width', 'petal_length', 'sepal_length', ]; let i = 0; setInterval(() => { plot.xValue((d) => d[columns[i % columns.length]]); svg.selectAll('text').remove(); svg.call(plot); colorLegendG.append('text') .attr('class', 'legend-label') .attr('x', -70) .attr('y', -210) .style("font-style","italic") .style("stroke","violet") .style("font-weight","bold") .style("font-style","italic") .text(colorLabel); // display Title svg.append("text").attr("x", 450).attr("y", 20).text("Iris Scatterplot").style("font-size", "40px").attr("alignment-baseline","middle").attr('fill','lightgreen').style("font-style","italic") .style("text-decoration","underline") // Adding labels in the legend and its style svg.append("text").attr("x", 150).attr("y", 70).text("Setosa").style("font-size", "20px").attr("alignment-baseline","middle") svg.append("text").attr("x", 150).attr("y", 100).text("Versicolor").style("font-size", "20px").attr("alignment-baseline","middle") svg.append("text").attr("x", 150).attr("y", 130).text("Virginica").style("font-size", "20px").attr("alignment-baseline","middle") svg .append("text") .attr('transform', 'rotate(-90)') .attr('x',0 - (height /2)) .attr("y", height/12) .attr('fill', 'red') .style("text-anchor", "middle") .style("font-style","italic") .style("font-weight","bold") .text("Sepal Length"); // Add points for legend svg.append("circle").attr("cx",130).attr("cy",70).attr("r", 6).style("fill", "lightblue") svg.append("circle").attr("cx",130).attr("cy",100).attr("r", 6).style("fill", "lightgreen") svg.append("circle").attr("cx",130).attr("cy",130).attr("r", 6).style("fill", "orange") // plot petal_width on x-axis if(i % columns.length==0) svg .append("text") .attr("x", width / 2 ) .attr("y", 480 ) .attr('fill','red') .style("text-anchor", "middle") .style("font-style","italic") .style("font-weight","bold") .text("Petal Width"); // plot sepal_width on x-axis else if(i % columns.length==1) svg .append("text") .attr("x", width / 2 ) .attr("y", 480 ) .attr('fill','red') .style("text-anchor", "middle") .style("font-style","italic") .style("font-weight","bold") .text("Sepal Width"); // plot petal_length on x-axis else if(i % columns.length==2) svg .append("text") .attr("x", width / 2 ) .attr("y", 520 ) .attr('fill','red') .style("text-anchor", "middle") .style("font-weight","bold") .text("Petal Length"); // plot sepal_length on x-axis else svg .append("text") .attr("x", width / 2 ) .attr("y", 540 ) .style("text-anchor", "middle") .style("font-style","italic") .style("font-weight","bold") .text("Sepal Length"); i++; }, 5000);// every 5 seconds changes the visualization }; main();