js/scatterdist.js
// Below are the basic D3 principles applied to make a scatterplot
Below are the basic D3 principles applied to make a scatterplot
Below are the basic D3 principles applied to make a scatterplot
function chart(selector, data) {
    data = data.filter(function(d){return d.assignType === "quiz" || d.assignType === "offline-quiz"} )
    let svg = d3.select(selector)
        .append('svg')
          .attr('preserveAspectRatio', 'xMidYMid meet')
          .attr('viewBox', [0, 0, width + margin.left + margin.right, height *3].join(' '))
      svg.append("text")
          .attr("x", (width / 2 + margin.right + margin.left))             
          .attr("y", 0 + (height/2))
          .attr("text-anchor", "middle")  
          .style("font-size", "20px") 
          .text("Grades by Time Spent"); 
    svg.append("text")
          .attr("x", (width / 2 + margin.right + margin.left))             
          .attr("y", 0 + (height*3 - margin.top - margin.bottom))
          .attr("text-anchor", "middle")  
          .style("font-size", "20px") 
          .text("Below are the reference distributions from the chart above");
    svg = svg.append('g')
          .attr('transform', 'translate(' + margin.left + ',' + (height + margin.top + margin.bottom) + ')');
    let legend = svg.append('g') 
          .attr('transform', 'translate(' + -width/1.1 + ',' + ((height - margin.bottom- margin.top)/2) + ')');
    let dist = svg.append('g')
    .attr('transform', 'translate(' + 0  + ',' + -(height + 10) + ')')
    let seconddist = svg.append('g') 
    .attr('transform', 'translate(' + (width+height + margin.right) + ',' + 0 + ')' +  'rotate(90)')
          .attr('class', 'gRotate')
        xScale
          .domain(d3.extent(data, xValue)) 
          .rangeRound([0, width]);
        yScale
          .domain(d3.extent(data, yValue))
          .rangeRound([height, 0]);
        let xAxis = svg.append('g')
            .attr('transform', 'translate(0,' + (height) + ')')
            .call(d3.axisBottom(xScale));
        xAxis.append('text')        
            .attr('class', 'axisLabel')
            .attr('y', 35)
            .attr('fill', 'black')
            .style("font-size", "15px") 
            .attr('x', (width) / 2)
            .text(xLabelText); 
        let yAxis = svg.append('g')
            .call(d3.axisLeft(yScale))
        yAxis.append('text')
            .attr('class', 'axisLabel')
            .attr('y', -25)
            .attr('fill', 'black') 
            .attr('x', -height/2)
            .attr('transform', `rotate(-90)`)
            .attr('text-anchor', 'middle')
            .style("font-size", "15px") 
            .text(yLabelText);
          var colorScale = d3.scaleOrdinal(d3.schemeCategory10)
          .domain(data.map(function (d){ return d.className; })); 
        svg.selectAll('circle').data(data)
            .enter().append('circle')
              .attr('cy', d => yScale(yValue(d))) 
              .attr('cx', d => xScale(xValue(d))) 
              .attr('r', 4)
              .style("fill", function(d) { 
                return colorScale(d.className)
                });
        let statusMap = new Map();   
            data.forEach(d => {       
            if (!statusMap.has(d.className)) statusMap.set(d.className, d);  
            }); 
        legend.selectAll("mydots")
            .data(statusMap.values()) 
            .enter()
            .append("circle")
              .attr("cx", margin.left - 30)
              .attr("cy", function(d,i){ return i*25}) 
              .attr("r", 5)
              .style("fill", function(d) {
                return colorScale(d.className)
                });
        legend.selectAll("mylabels")
            .data(statusMap.values()) 
            .enter()
            .append("text")
            .attr("x", margin.left - 20)
            .attr("y", function(d,i){ return i*25}) 
            .text(function(d){ return d.className})
            .attr("text-anchor", "left")
            .style("alignment-baseline", "middle")
            .style("fill", function(d) { 
            console.log(d)
              return colorScale(d.className)
            })
      return chart;
    }
function chart ( selector , data ) { data = data . filter ( function ( d ) { return d . assignType === "quiz" || d . assignType === "offline-quiz" } ) let svg = d3 . select ( selector ) . append ( 'svg' ) . attr ( 'preserveAspectRatio' , 'xMidYMid meet' ) . attr ( 'viewBox' , [ 0 , 0 , width + margin . left + margin . right , height * 3 ] . join ( ' ' ) ) svg . append ( "text" ) . attr ( "x" , ( width / 2 + margin . right + margin . left ) ) . attr ( "y" , 0 + ( height / 2 ) ) . attr ( "text-anchor" , "middle" ) . style ( "font-size" , "20px" ) . text ( "Grades by Time Spent" ) ; svg . append ( "text" ) . attr ( "x" , ( width / 2 + margin . right + margin . left ) ) . attr ( "y" , 0 + ( height * 3 - margin . top - margin . bottom ) ) . attr ( "text-anchor" , "middle" ) . style ( "font-size" , "20px" ) . text ( "Below are the reference distributions from the chart above" ) ; svg = svg . append ( 'g' ) . attr ( 'transform' , 'translate(' + margin . left + ',' + ( height + margin . top + margin . bottom ) + ')' ) ; let legend = svg . append ( 'g' ) . attr ( 'transform' , 'translate(' + - width / 1.1 + ',' + ( ( height - margin . bottom - margin . top ) / 2 ) + ')' ) ; let dist = svg . append ( 'g' ) . attr ( 'transform' , 'translate(' + 0 + ',' + - ( height + 10 ) + ')' ) let seconddist = svg . append ( 'g' ) . attr ( 'transform' , 'translate(' + ( width + height + margin . right ) + ',' + 0 + ')' + 'rotate(90)' ) . attr ( 'class' , 'gRotate' ) xScale . domain ( d3 . extent ( data , xValue ) ) . rangeRound ( [ 0 , width ] ) ; yScale . domain ( d3 . extent ( data , yValue ) ) . rangeRound ( [ height , 0 ] ) ; let xAxis = svg . append ( 'g' ) . attr ( 'transform' , 'translate(0,' + ( height ) + ')' ) . call ( d3 . axisBottom ( xScale ) ) ; xAxis . append ( 'text' ) . attr ( 'class' , 'axisLabel' ) . attr ( 'y' , 35 ) . attr ( 'fill' , 'black' ) . style ( "font-size" , "15px" ) . attr ( 'x' , ( width ) / 2 ) . text ( xLabelText ) ; let yAxis = svg . append ( 'g' ) . call ( d3 . axisLeft ( yScale ) ) yAxis . append ( 'text' ) . attr ( 'class' , 'axisLabel' ) . attr ( 'y' , - 25 ) . attr ( 'fill' , 'black' ) . attr ( 'x' , - height / 2 ) . attr ( 'transform' , ` ` ) . attr ( 'text-anchor' , 'middle' ) . style ( "font-size" , "15px" ) . text ( yLabelText ) ; var colorScale = d3 . scaleOrdinal ( d3 . schemeCategory10 ) . domain ( data . map ( function ( d ) { return d . className ; } ) ) ; svg . selectAll ( 'circle' ) . data ( data ) . enter ( ) . append ( 'circle' ) . attr ( 'cy' , d => yScale ( yValue ( d ) ) ) . attr ( 'cx' , d => xScale ( xValue ( d ) ) ) . attr ( 'r' , 4 ) . style ( "fill" , function ( d ) { return colorScale ( d . className ) } ) ; let statusMap = new Map ( ) ; data . forEach ( d => { if ( ! statusMap . has ( d . className ) ) statusMap . set ( d . className , d ) ; } ) ; legend . selectAll ( "mydots" ) . data ( statusMap . values ( ) ) . enter ( ) . append ( "circle" ) . attr ( "cx" , margin . left - 30 ) . attr ( "cy" , function ( d , i ) { return i * 25 } ) . attr ( "r" , 5 ) . style ( "fill" , function ( d ) { return colorScale ( d . className ) } ) ; legend . selectAll ( "mylabels" ) . data ( statusMap . values ( ) ) . enter ( ) . append ( "text" ) . attr ( "x" , margin . left - 20 ) . attr ( "y" , function ( d , i ) { return i * 25 } ) . text ( function ( d ) { return d . className } ) . attr ( "text-anchor" , "left" ) . style ( "alignment-baseline" , "middle" ) . style ( "fill" , function ( d ) { console . log ( d ) return colorScale ( d . className ) } ) return chart ; }
Below are the basic D3 principles applied to make a scatterplot
Below are the basic D3 principles applied to make a scatterplot
//For timespent it is only applicable for quiz and offline quiz //Title Text // Transition Text //Setting up the sidescaling distributions // NOTE THE SECOND HISTOGRAM IS ROTATED 90 Degrees // Use extent to get the min, max // X axis label //xLabelText is applied in the main visualization.js file //yLabelText is applied in the main visualization.js file //ColorScheme set up based on class name //Scale the y datapoint  //Scale the x datapoint //Color logic for the scatterplot points // https://observablehq.com/@d3/d3v6-migration-guide // Using the migration guide to apply d3.Map in V6 // Add if not already present //StatusMap contians a map iterator with unique values of d.status and its entire data fields //https://www.d3-graph-gallery.com/graph/custom_legend.html inspiration for legend //Insert the mapped values which we are concerned with, the status value will be distinct for each data object // 100 is where the first dot appears. 25 is the distance between dots //Insert the mapped values which we are concerned with, the status value will be distinct for each data object // 100 is where the first dot appears. 25 is the distance between dots //Color logic for the scatterplot points