Trump Twitter References by Outlet

forked from jackbeckwith's block: dimple.js example

forked from jackbeckwith's block: Trump Twitter References Over Time

forked from jackbeckwith's block: Trump Twitter References by Outlet

<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();

// 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>

Modified http://d3js.org/d3.v4.min.js to a secure url

Modified http://dimplejs.org/dist/dimple.v2.3.0.min.js to a secure url

https://d3js.org/d3.v4.min.js

https://dimplejs.org/dist/dimple.v2.3.0.min.js