hw6 first commit

hw6/public/js/electoralVoteChart.js

@@ -0,0 +1,86 @@
+
+class ElectoralVoteChart {
+  /**
+   * Constructor for the ElectoralVoteChart
+   *
+   * @param shiftChart an instance of the ShiftChart class
+   */
+  constructor (shiftChart){
+    this.shiftChart = shiftChart;
+    
+    this.margin = {top: 30, right: 20, bottom: 30, left: 50};
+    let divelectoralVotes = d3.select("#electoral-vote").classed("content", true);
+
+    //Gets access to the div element created for this chart from HTML
+    this.svgBounds = divelectoralVotes.node().getBoundingClientRect();
+    this.svgWidth = this.svgBounds.width - this.margin.left - this.margin.right;
+    this.svgHeight = 150;
+
+    //creates svg element within the div
+    this.svg = divelectoralVotes.append("svg")
+      .attr("width",this.svgWidth)
+      .attr("height",this.svgHeight)
+    ;
+
+  };
+
+  /**
+   * Returns the class that needs to be assigned to an element.
+   *
+   * @param party an ID for the party that is being referred to.
+   */
+  chooseClass (party) {
+    if (party == "R"){
+      return "republican";
+    }
+    else if (party == "D"){
+      return "democrat";
+    }
+    else if (party == "I"){
+      return "independent";
+    }
+  }
+
+
+  /**
+   * Creates the stacked bar chart, text content and tool tips for electoral vote chart
+   *
+   * @param electionResult election data for the year selected
+   * @param colorScale global quantile scale based on the winning margin between republicans and democrats
+   */
+
+  update (electionResult, colorScale){
+
+    // ******* TODO: PART II *******
+
+    //Group the states based on the winning party for the state;
+    //then sort them based on the margin of victory
+
+    //Create the stacked bar chart.
+    //Use the global color scale to color code the rectangles.
+    //HINT: Use .electoralVotes class to style your bars.
+
+    //Display total count of electoral votes won by the Democrat and Republican party
+    //on top of the corresponding groups of bars.
+    //HINT: Use the .electoralVoteText class to style your text elements;  Use this in combination with
+    // chooseClass to get a color based on the party wherever necessary
+
+    //Display a bar with minimal width in the center of the bar chart to indicate the 50% mark
+    //HINT: Use .middlePoint class to style this bar.
+
+    //Just above this, display the text mentioning the total number of electoral votes required
+    // to win the elections throughout the country
+    //HINT: Use .electoralVotesNote class to style this text element
+
+    //HINT: Use the chooseClass method to style your elements based on party wherever necessary.
+
+    //******* TODO: PART V *******
+    //Implement brush on the bar chart created above.
+    //Implement a call back method to handle the brush end event.
+    //Call the update method of shiftChart and pass the data corresponding to brush selection.
+    //HINT: Use the .brush class to style the brush.
+
+  };
+
+  
+}

hw6/public/js/script.js

@@ -0,0 +1,20 @@
+let tooltip = new Tooltip();
+
+let votePercentageChart = new VotePercentageChart(tooltip);
+
+let tileChart = new TileChart(tooltip);
+
+let shiftChart = new ShiftChart();
+
+let electoralVoteChart = new ElectoralVoteChart(shiftChart);
+
+
+// Load the data corresponding to all the election years.
+// Pass this data and instances of all the charts that update on year
+// selection to yearChart's constructor.
+d3.csv("data/yearwiseWinner.csv").then(electionWinners => {
+  console.log(electionWinners);
+  let yearChart = new YearChart(electoralVoteChart, tileChart,
+                                votePercentageChart, electionWinners);
+  yearChart.update();
+});

hw6/public/js/shiftChart.js

@@ -0,0 +1,36 @@
+/** Class implementing the shiftChart. */
+class ShiftChart {
+
+  /**
+   * Initializes the svg elements required for this chart;
+   */
+  constructor(){
+    this.divShiftChart = d3.select("#shiftChart").classed("sideBar", true);
+
+  };
+
+  /**
+   * Creates a list of states that have been selected by brushing over the Electoral Vote Chart
+   *
+   * @param selectedStates data corresponding to the states selected on brush
+   */
+  update(selectedStates){
+    // ******* TODO: PART V *******
+    //Display the names of selected states in a list
+
+    //******** TODO: PART VI*******
+    //Use the shift data corresponding to the selected years and sketch a visualization
+    //that encodes the shift information
+
+    //******** TODO: EXTRA CREDIT I*******
+    //Handle brush selection on the year chart and sketch a visualization
+    //that encodes the shift informatiomation for all the states on selected years
+
+    //******** TODO: EXTRA CREDIT II*******
+    //Create a visualization to visualize the shift data
+    //Update the visualization on brush events over the Year chart and Electoral Vote Chart
+
+  };
+
+
+}

hw6/public/js/tileChart.js

@@ -0,0 +1,84 @@
+
+/** Class implementing the tileChart. */
+class TileChart {
+
+  /**
+   * Initializes the svg elements required to lay the tiles
+   * and to populate the legend.
+   */
+  constructor(tooltip){
+
+    let divTiles = d3.select("#tiles").classed("content", true);
+    this.margin = {top: 30, right: 20, bottom: 30, left: 50};
+    //Gets access to the div element created for this chart and legend element from HTML
+    let svgBounds = divTiles.node().getBoundingClientRect();
+    this.svgWidth = svgBounds.width - this.margin.left - this.margin.right;
+    this.svgHeight = this.svgWidth/2;
+    let legendHeight = 150;
+    //add the svg to the div
+    let legend = d3.select("#legend").classed("content",true);
+
+    //creates svg elements within the div
+    this.legendSvg = legend.append("svg")
+      .attr("width",this.svgWidth)
+      .attr("height",legendHeight)
+      .attr("transform", "translate(" + this.margin.left + ",0)")
+    this.svg = divTiles.append("svg")
+      .attr("width",this.svgWidth)
+      .attr("height",this.svgHeight)
+      .attr("transform", "translate(" + this.margin.left + ",0)")
+
+    this.tooltip = tooltip;
+  };
+
+  /**
+   * Returns the class that needs to be assigned to an element.
+   *
+   * @param party an ID for the party that is being referred to.
+   */
+  chooseClass (party) {
+    if (party == "R"){
+      return "republican";
+    }
+    else if (party== "D"){
+      return "democrat";
+    }
+    else if (party == "I"){
+      return "independent";
+    }
+  }
+
+  /**
+   * Creates tiles and tool tip for each state, legend for encoding the
+   * color scale information.
+   *
+   * @param electionResult election data for the year selected
+   * @param colorScale global quantile scale based on the winning
+   * margin between republicans and democrats
+   */
+  update (electionResult, colorScale){
+
+    //Calculates the maximum number of rows and columns
+    this.maxColumns = d3.max(electionResult, d => +d.Space) + 1;
+    this.maxRows = d3.max(electionResult, d => +d.Row) + 1;
+
+    // ******* TODO: PART IV *******
+    //Tansform the legend element to appear in the center and make a call to this element for it to display.
+
+    //Lay rectangles corresponding to each state according to the 'row' and 'column' information in the data.
+
+    //Display the state abbreviation and number of electoral votes on each of these rectangles
+
+    //Use global color scale to color code the tiles.
+
+    //HINT: Use .tile class to style your tiles;
+    // .tilestext to style the text corresponding to tiles
+
+    //Call the tool tip on hover over the tiles to display stateName, count of electoral votes
+    //then, vote percentage and number of votes won by each party.
+    //HINT: Use the .republican, .democrat and .independent classes to style your elements.
+    
+  };
+
+
+}

hw6/public/js/tooltip.js

@@ -0,0 +1,71 @@
+class Tooltip {
+
+  constructor() {
+    //----------------------------------------
+    // tooltip
+    //----------------------------------------
+    this.tooltip = d3.select("body")
+      .append("div")
+      .style("position", "absolute")
+      .style("z-index", "10")
+      .style("visibility", "hidden")
+      .style("background", "#FFFFFF")
+      .attr('id', 'tooltip')
+      .classed('tooltipDiv', true)
+    ;
+  };
+
+  chooseClass (party) {
+    if (party == "R"){
+      return "republican";
+    }
+    else if (party== "D"){
+      return "democrat";
+    }
+    else if (party == "I"){
+      return "independent";
+    }
+  }
+
+  /**
+   * Gets the HTML content for a tool tip.
+   */
+  tooltip_html(d) {
+    let text = "<h2 class ="  + this.chooseClass(d.State_Winner) +
+      " >" + d.State + "</h2>";
+    text +=  "Electoral Votes: " + d.Total_EV;
+    text += "<ul>"
+    // Democrat
+    text += "<li class = democrat>" +
+      d.D_Nominee_prop+":\t\t"+d.D_Votes+"("+d.D_Percentage+"%)" + "</li>"
+    // Republican
+    text += "<li class = republican>" +
+      d.R_Nominee_prop+":\t\t"+d.R_Votes+"("+d.R_Percentage+"%)" + "</li>"
+    // Independent
+    if (d.I_Percentage) {
+      text += "<li class = independent>" +
+        d.I_Nominee_prop+":\t\t"+d.I_Votes+"("+d.I_Percentage+"%)" + "</li>"
+    }
+    text += "</ul>";
+
+    return text;
+  }
+
+  mouseover(d) {
+    this.tooltip
+      .html(this.tooltip_html(d))
+      .classed('tooltip-title', true)
+    ;
+    this.tooltip.style("visibility", "visible");
+  }
+
+  mousemove(d) {
+    this.tooltip.style("top", (d3.event.pageY-10)+"px")
+      .style("left",(d3.event.pageX+10)+"px");
+  }
+
+  mouseout(d) {
+    this.tooltip.style("visibility", "hidden");
+  }
+
+};

hw6/public/js/votePercentageChart.js

@@ -0,0 +1,88 @@
+/** Class implementing the votePercentageChart. */
+class VotePercentageChart {
+
+  /**
+   * Initializes the svg elements required for this chart;
+   */
+  constructor(tooltip){
+    this.margin = {top: 30, right: 20, bottom: 30, left: 50};
+    let divvotesPercentage = d3.select("#votes-percentage").classed("content", true);
+
+    //fetch the svg bounds
+    this.svgBounds = divvotesPercentage.node().getBoundingClientRect();
+    this.svgWidth = this.svgBounds.width - this.margin.left - this.margin.right;
+    this.svgHeight = 200;
+
+    //add the svg to the div
+    this.svg = divvotesPercentage.append("svg")
+      .attr("width",this.svgWidth)
+      .attr("height",this.svgHeight)
+
+    this.tooltip = tooltip;
+  }
+
+
+  /**
+   * Returns the class that needs to be assigned to an element.
+   *
+   * @param party an ID for the party that is being referred to.
+   */
+  chooseClass(data) {
+    if (data == "R"){
+      return "republican";
+    }
+    else if (data == "D"){
+      return "democrat";
+    }
+    else if (data == "I"){
+      return "independent";
+    }
+  }
+
+  /**
+   * Renders the HTML content for tool tip
+   *
+   * @param tooltip_data information that needs to be populated in the tool tip
+   * @return text HTML content for toop tip
+   */
+  tooltip_render (tooltip_data) {
+    let text = "<ul>";
+    tooltip_data.result.forEach((row)=>{
+      text += "<li class = " + this.chooseClass(row.party)+ ">" + row.nominee+":\t\t"+row.votecount+"("+row.percentage+"%)" + "</li>"
+    });
+
+    return text;
+  }
+
+  /**
+   * Creates the stacked bar chart, text content and tool tips for Vote Percentage chart
+   *
+   * @param electionResult election data for the year selected
+   */
+  update (electionResult){
+    // ******* TODO: PART III *******
+
+    //Create the stacked bar chart.
+    //Use the global color scale to color code the rectangles.
+    //HINT: Use .votesPercentage class to style your bars.
+
+    //Display the total percentage of votes won by each party
+    //on top of the corresponding groups of bars.
+    //HINT: Use the .votesPercentageText class to style your text elements;  Use this in combination with
+    // chooseClass to get a color based on the party wherever necessary
+
+    //Display a bar with minimal width in the center of the bar chart to indicate the 50% mark
+    //HINT: Use .middlePoint class to style this bar.
+
+    //Just above this, display the text mentioning details about this mark on top of this bar
+    //HINT: Use .votesPercentageNote class to style this text element
+
+    //Call the tool tip on hover over the bars to display stateName, count of electoral votes.
+    //then, vote percentage and number of votes won by each party.
+
+    //HINT: Use the chooseClass method to style your elements based on party wherever necessary.
+
+  };
+
+
+}

hw6/public/js/yearChart.js

@@ -0,0 +1,104 @@
+
+class YearChart {
+
+  /**
+   * Constructor for the Year Chart
+   *
+   * @param electoralVoteChart instance of ElectoralVoteChart
+   * @param tileChart instance of TileChart
+   * @param votePercentageChart instance of Vote Percentage Chart
+   * @param electionInfo instance of ElectionInfo
+   * @param electionWinners data corresponding to the winning parties over mutiple election years
+   */
+  constructor (electoralVoteChart, tileChart, votePercentageChart, electionWinners) {
+
+    //Creating YearChart instance
+    this.electoralVoteChart = electoralVoteChart;
+    this.tileChart = tileChart;
+    this.votePercentageChart = votePercentageChart;
+    // the data
+    this.electionWinners = electionWinners;
+    
+    // Initializes the svg elements required for this chart
+    this.margin = {top: 10, right: 20, bottom: 30, left: 50};
+    let divyearChart = d3.select("#year-chart").classed("fullView", true);
+
+    //fetch the svg bounds
+    this.svgBounds = divyearChart.node().getBoundingClientRect();
+    this.svgWidth = this.svgBounds.width - this.margin.left - this.margin.right;
+    this.svgHeight = 100;
+
+    //add the svg to the div
+    this.svg = divyearChart.append("svg")
+      .attr("width", this.svgWidth)
+      .attr("height", this.svgHeight);
+
+    this.selected = null;
+  }
+
+  /**
+   * Returns the class that needs to be assigned to an element.
+   *
+   * @param party an ID for the party that is being referred to.
+   */
+  chooseClass (data) {
+    if (data == "R") {
+      return "yearChart republican";
+    }
+    else if (data == "D") {
+      return "yearChart democrat";
+    }
+    else if (data == "I") {
+      return "yearChart independent";
+    }
+  }
+
+  /**
+   * Creates a chart with circles representing each election year, populates text content and other required elements for the Year Chart
+   */
+  update () {
+
+    //Domain definition for global color scale
+    let domain = [-60, -50, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50, 60];
+
+    //Color range for global color scale
+    let range = ["#063e78", "#08519c", "#3182bd", "#6baed6", "#9ecae1", "#c6dbef", "#fcbba1", "#fc9272", "#fb6a4a", "#de2d26", "#a50f15", "#860308"];
+
+    //ColorScale be used consistently by all the charts
+    this.colorScale = d3.scaleQuantile()
+      .domain(domain)
+      .range(range);
+
+    // ******* TODO: PART I *******
+
+    // Create the chart by adding circle elements representing each election year
+
+    //The circles should be colored based on the winning party for that year
+    //HINT: Use the .yearChart class to style your circle elements
+    //HINT: Use the chooseClass method to choose the color corresponding to the winning party.
+
+    //Append text information of each year right below the corresponding circle
+    //HINT: Use .yeartext class to style your text elements
+
+    //Style the chart by adding a dashed line that connects all these years.
+    //HINT: Use .lineChart to style this dashed line
+
+    //Clicking on any specific year should highlight that circle and  update the rest of the visualizations
+    //HINT: You can get the d3 selection that was clicked on using
+    //   d3.select(d3.event.target)
+    //HINT: Use .highlighted class to style the highlighted circle
+
+    //Election information corresponding to that year should be loaded and passed to
+    // the update methods of other visualizations
+
+
+    //******* TODO: EXTRA CREDIT *******
+
+    //Implement brush on the year chart created above.
+    //Implement a call back method to handle the brush end event.
+    //Call the update method of shiftChart and pass the data corresponding to brush selection.
+    //HINT: Use the .brush class to style the brush.
+
+  }
+
+}