D3 Examples - Trump Twitter References by Outlet

xxxxxxxxxx
 
<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" rel="stylesheet" type="text/css">
    </head>
  <body>
    <div id="chartContainer" style="height: 100%">
      <script type="text/javascript">
        // In version 1.1.0 it's possible to initialise any size parameter with a
        // % value as well as pixels
        // scales and axes
        
//var width = 1500;
        var margin = {top: 30, right: 10, bottom: 30, left: 10}
  , width = parseInt(d3.select('#chartContainer').style('width'), 10)
  , width = width - margin.left - margin.right
  , barHeight = 20
        
var x = d3.scaleLinear()
    .range([0, width])
    .domain([0, .4]); // hard-coding this because I know the data
​
// ordinal scales are easier for uniform bar heights
// I'll set domain and rangeBands after data loads
var y = d3.scaleOrdinal(); 
​
var percent = d3.format('%');
//var xAxis = d3.svg.d3.axisBottom();
var xAxis = d3.axisBottom().tickFormat(percent);
    /*
    .scale(x)
    .tickFormat(percent);
    */
        
        var svg = dimple.newSvg("#chartContainer", "100%", "100%");  
        
        d3.select("html")
          .style("height", "100%")
          .style("overflow", "hidden");
        d3.select("body")
          .style("height", "100%")
          .style("overflow", "hidden");
        
        var myChart;
        var toggles;
        d3.csv("References_By_Outlet.csv", function (data) {
          toggle_data = [
             { "Timeframe":"Since Election Day","Height":1},
             { "Timeframe":"Last 6 Months","Height":1},
             { "Timeframe":"Last 12 Months","Height":1}
          ];
          
          // Create the toggles
          var toggles = new dimple.chart(svg, toggle_data);
          var defaultColor = new dimple.color("rgb(245, 245, 245)", "#226d9e", 1);
          var indicatorColor = new dimple.color("#226d9e", "#226d9e", 1);
​
          // Place the toggles bar chart just below title
          toggles.setBounds("31%", "9%", "42%", "25px");
​
          var toggleX = toggles.addCategoryAxis("x", "Timeframe");
          toggleX.addOrderRule(["Since Election Day", "Last 6 Months", "Last 12 Months"])
          var toggleY = toggles.addMeasureAxis("y", "Height");
          toggleY.hidden = true;
​
          // Add the bars to the toggles and add event handlers
          var toggleSeries = toggles.addSeries(null, dimple.plot.bar);
          toggleSeries.barGap = 0.08;
          toggleSeries.addEventHandler("mouseover", onHover);
          toggleSeries.addEventHandler("click", onClick)
          
          // Draw toggles
          toggles.draw();
          moveToggleLabels();
                  
          /*
          // Position text directly beside toggles
          svg.selectAll("title_text")
                  .data(["Timeframe:"])
                  .enter()
                  .append("text")
                  .attr("x", '25%')
                  .attr("y", '11.4%' )
                  .style("font-family", "Roboto")
                  .style("font-size", "10px")
                  .style("color", "Black")
                  .text(function (d) { return d; });
                  */
​
          // Manually set the bar colors
          toggleSeries.shapes
                  .attr("rx", 10)
                  .attr("ry", 10)
                  .style("fill", function (d) { return (d.x === 'Since Election Day' ? indicatorColor.fill : defaultColor.fill) })
                  .style("stroke", function (d) { return (d.x === 'Since Election Day' ? indicatorColor.stroke : defaultColor.stroke) })
                  .style("opacity", 0.4);
​
          // filter data for main chart
          var filteredData = dimple.filterData(data, "Timeframe", "Since Election Day");
          myChart = new dimple.chart(svg, filteredData);
​
          /*
          // add chart title
          svg.append("text")
           .attr("x", myChart._xPixels() + myChart._widthPixels() / 2)
           .attr("y", myChart._yPixels() - 20)
           .style("text-anchor", "middle")
           .style("font-family", "Roboto")
           .style("font-weight", "bold")
           .text("How much do Various Media Outlets Reference Trump's Twitter?");
           
          
          // add DataFace watermark in upper right corner
          svg.append("svg:image")
            .attr("xlink:href", "https://thedataface.com/wp-content/uploads/2015/10/Data-Face_logo-300x90.png")
            .attr("x", myChart._widthPixels())
            .attr("width", myChart._widthPixels()/5)
            .attr("height", myChart._heightPixels()/6);
          
          // add Donald Trump's face in upper left
          svg.append("svg:image")
            .attr("xlink:href", "https://www.latimes.com/projects/la-na-pol-presidential-debate-primer/static/img/trump-cutout.png")
            .attr("x", 0)
            .attr("y", '1.6%')
            .attr("width", myChart._widthPixels()/3)
            .attr("height", myChart._heightPixels()/6);
            */
​
          // Fix the margins
          myChart.setMargins("12%", "18%", "3%", "15%");
          myChart.defaultColors = [new dimple.color("#e74c3c", "#c0392b", 1)]
          
          // Continue to set up a standard chart
          var xAxis = myChart.addMeasureAxis("x", "Percent of Articles");
          var yAxis = myChart.addCategoryAxis("y", "Media Outlet");
          xAxis.fontSize = "auto";
          xAxis.fontFamily = "Roboto";
          xAxis.tickFormat = ".0%";
          yAxis.fontSize = "auto";
          yAxis.fontFamily = "Roboto";
​
          drawMainChart();
          
          // Remove tooltip from charts
          function onHover(e) {
          }
        
          // On click of the toggles
          function onClick(e) {
            // clear chart area
            for(var i = 0; i < myChart.series.length; i++){
              d3.selectAll('.dimple-chart:nth-child(3)').selectAll(".dimple-series-" + i).remove();
              d3.selectAll('.bar-labels').remove();
              myChart.series.splice(i, 1);
            }
            
            // change color toggles
            toggleSeries.shapes
              .transition()
              .duration(500)
              .style("fill", function (d) { return (d.x === e.xValue ? indicatorColor.fill : defaultColor.fill) })
              .style("stroke", function (d) { return (d.x === e.xValue ? indicatorColor.stroke : defaultColor.stroke) })
            toggles.draw();
            
            
            moveToggleLabels();
            
            var newData = dimple.filterData(data, "Timeframe", e.xValue)
            myChart.data = newData;
            
            drawMainChart();
          }
          
          window.onresize = function () {
            drawMainChart();
            drawToggles();
          }
          
          function drawToggles() {
              // Place the toggles bar chart just below title
            toggles.setBounds("31%", "9%", "42%", "25px");
​
            toggleX = toggles.addCategoryAxis("x", "Timeframe");
            toggleX.addOrderRule(["Since Election Day", "Last 6 Months", "Last 12 Months"])
            toggleY = toggles.addMeasureAxis("y", "Height");
            toggleY.hidden = true;
​
            // Add the bars to the toggles and add event handlers
            toggleSeries = toggles.addSeries(null, dimple.plot.bar);
            toggleSeries.barGap = 0.08;
            toggleSeries.addEventHandler("mouseover", onHover);
            toggleSeries.addEventHandler("click", onClick)
​
            // Draw toggles
            toggles.draw();
            moveToggleLabels();
          }
          
          function moveToggleLabels() {
            // remove x axis marks and title
            toggleX.titleShape.remove();
            toggleX.shapes.selectAll("line,path").remove();
​
            // Move the x axis text inside the plot area
            toggleX.shapes.selectAll("text")
              .style("text-anchor", "start")
              .style("font-size", "13px")
              .attr("transform", function(d, i) {
                        return "translate(" + (-55 + 5*i) + ", -25)" 
                });
          }
          
          function drawMainChart() {
            var series = myChart.addSeries(null, dimple.plot.bar);
            series.aggregate = dimple.aggregateMethod.avg;
            series.tooltipFontSize = "14px";
            series.tooltipFontFamily = "Roboto";
            series.addEventHandler("mouseover", onHover);
​
            //draw labels on bars
            series.afterDraw = function (shape, data) {
              // Get the shape as a d3 selection
              var s = d3.select(shape),
                rect = {
                  x: parseFloat(s.attr("x")),
                  y: parseFloat(s.attr("y")),
                  width: parseFloat(s.attr("width")),
                  height: parseFloat(s.attr("height"))
                };
              
              // Add a text label for the value
              svg.append("text")
                // Position in the centre of the shape (vertical position is
                // manually set due to cross-browser problems with baseline)
                .attr("x", rect.x + rect.width + 15)
                .attr("y", rect.y + rect.height / 2 + 3.5)
                // Centre align
                .style("text-anchor", "middle")
                .style("font-size", "13px")
                .style("font-family", "Roboto")
                // Make it a little transparent to tone down the black
                .style("opacity", 0.9)
                // Format the number
                .text(d3.format(",.0%")(data.xValue))
                .classed("bar-labels", true);
                
                };
          
            myChart.ease = "cubic";
            myChart.draw(600);
          
            xAxis.titleShape.style("font-weight", "bold");
            xAxis.titleShape.style("font-size", "14px");
            yAxis.titleShape.remove();
          }
          
​
        });
        
        // Add a method to draw the chart on resize of the window
        //window.onresize = function () {
          // As of 1.1.0 the second parameter here allows you to draw
          // without reprocessing data.  This saves a lot on performance
          // when you know the data won't have changed.
          
          //drawMainChart();
            //myChart.draw(0, true);
          //toggles.draw(0, true);
          
          /*
          // update width
    width = parseInt(d3.select('#chartContainer').style('width'), 10);
    console.log("old width", width);
          
    width = width; // - margin.left - margin.right;
        //console.log("new width", width);
​
    console.log(myChart);   
          
// resize the chart
    x.range([0, width]);
    d3.select(myChart.node().parentNode)
        .style('height', (y.rangeExtent()[1] + margin.top + margin.bottom) + 'px')
        .style('width', (width + margin.left + margin.right) + 'px');
​
    chart.selectAll('rect.background')
        .attr('width', width);
​
    chart.selectAll('rect.percent')
        .attr('width', function(d) { return x(d.percent); });
​
    // update median ticks
    var median = d3.median(chart.selectAll('.bar').data(), 
        function(d) { return d.percent; });
​
    chart.selectAll('line.median')
        .attr('x1', x(median))
        .attr('x2', x(median));
​
​
    // update axes
    chart.select('.x.axis.top').call(xAxis.orient('top'));
    chart.select('.x.axis.bottom').call(xAxis.orient('bottom'));
​
​
​
​
          /*
          // remove x axis marks and title
          toggleX.titleShape.remove();
          toggleX.shapes.selectAll("line,path").remove();
          
          // Move the x axis text inside the plot area
          toggleX.shapes.selectAll("text")
            .style("text-anchor", "start")
            .style("font-size", "13px")
            .attr("transform", function(d, i) {
                    return "translate(" + (-55 + 5*i) + ", -25)" 
            });
          
          myChart.draw(0, true);
          
          xAxis.titleShape.style("font-weight", "bold");
          xAxis.titleShape.style("font-size", "14px");
          yAxis.titleShape.remove();
          */
        //};
// text
        
      </script>
    </div>
  </body>
</html>
    