LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Wanna check the code?
Click "Edit this pen" in left bottom corner.

  • Chart 1

    Pie Question Would Go Here

  • Chart 2

    Area Label Would Go Here

CSS
/**
 * Variable power
 */
* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 14px;
  font-family: sans-serif;
  font-weight: 100;
  background-color: #ccc;
  background-image: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.5) 25%);
  background-size: 4px 4px;
}
body ul {
  list-style: none;
}
body ul, body li {
  margin: 0;
  padding: 0;
}

.chart {
  min-height: 400px;
  border-bottom: 1px solid #eee;
  padding: 1em;
}

.chart--headline, .chart--subHeadline {
  text-align: center;
}

.chart--headline {
  position: relative;
  font-weight: 100;
  font-size: 28px;
}
.chart--headline:before {
  position: absolute;
  content: '';
  bottom: 133%;
  left: 50%;
  width: 25%;
  margin: 0 0 0 -12.5%;
  border-top: 1px dashed #999999;
}

.chart--subHeadline {
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 1px;
}

.charts--container {
  background-color: #fff;
  width: 100%;
}
@media screen and (min-width: 700px) {
  .charts--container {
    max-width: 700px;
    left: 50%;
    top: 10%;
    margin: 5em auto;
    box-shadow: 0 2em 2em #333;
  }
}

.charts--headline {
  text-align: center;
  color: #444;
  background-color: #fff;
  padding: 1em;
}

.lineChart--area {
  fill: url(#lineChart--gradientBackgroundArea);
}

.lineChart--areaLine {
  fill: none;
  stroke: #6bb7c7;
  stroke-width: 3;
}

.lineChart--bubble--label {
  fill: none;
  stroke: #6bb7c7;
  font-size: 12.6px;
  font-style: italic;
  font-weight: 100;
}

.lineChart--bubble--value {
  fill: #fff;
  stroke: #fff;
  font-size: 21px;
  font-weight: 100;
}

.lineChart--circle {
  fill: #6bb7c7;
  stroke: #fff;
  stroke-width: 3;
}

.lineChart--circle__highlighted {
  fill: #fff;
  stroke: #3f95a7;
}

.lineChart--gradientBackgroundArea--top {
  stop-color: #6bb7c7;
  stop-opacity: 0.1;
}

.lineChart--gradientBackgroundArea--bottom {
  stop-color: #6bb7c7;
  stop-opacity: 0.6;
}

.lineChart--svg {
  border: 1px solid #eee;
}

.lineChart--xAxisTicks .domain, .lineChart--xAxis .domain, .lineChart--yAxisTicks .domain {
  display: none;
}

.lineChart--xAxis .tick line {
  display: none;
}

.lineChart--xAxisTicks .tick line, .lineChart--yAxisTicks .tick line {
  fill: none;
  stroke: #b3b3b3;
  stroke-width: 1;
  stroke-dasharray: 2,2;
}

.pieChart--center--innerCircle {
  fill: #fff;
}

.pieChart--center--text {
  font-size: 28px;
}

.pieChart--center--outerCircle {
  fill: rgba(255, 255, 255, 0.75);
}

.pieChart--detail--divider {
  stroke: gray;
  stroke-width: 1;
}

.pieChart--detail--percentage {
  font-size: 42px;
  font-weight: 100;
  fill: #333;
  stroke-width: 1px;
}

.pieChart--detail--textContainer {
  background-color: transparent;
  padding: 10px 0 0 0;
  margin: 0;
  color: #666;
  font-style: italic;
}

.pieChart--detail__left {
  text-align: left;
}

.pieChart--detail__right {
  text-align: right;
}

.pieChart__blue {
  fill: #6bb7c7;
}

.pieChart__red {
  fill: #d79d91;
}

/**
 * Helper classes
 */
.hidden {
  display: none;
}
JS
;( function() {
  var data = {
    lineChart : [
      {
        date  : '2006-02-22',
        label : 'foo',
        value : 950
      },
      {
        date  : '2006-08-22',
        label : 'bar',
        value : 1000
      },
      {
        date  : '2007-01-11',
        label : 'baz',
        value : 700
      },
      {
        date  : '2008-10-01',
        label : 'boing',
        value : 534
      },
      {
        date  : '2009-02-24',
        label : 'loool',
        value : 1423
      },
      {
        date  : '2010-12-30',
        label : 'YEAH',
        value : 1222
      },
      {
        date  : '2011-05-15',
        label : 'Hurray',
        value : 948
      },
      {
        date  : '2012-04-02',
        label : 'WTF',
        value : 1938
      },
      {
        date  : '2013-08-19',
        label : 'OMG',
        value : 1245
      },
      {
        date  : '2013-11-11',
        label : 'ROFL',
        value : 888
      }
    ],
    pieChart  : [
      {
        color       : 'red',
        description : 'Ipsem lorem text goes here. And foo goes bar goes baz. That\'s up!!!',
        title       : 'flowers',
        value       : 0.62
      },
      {
        color       : 'blue',
        description : 'Another ipsem text goes here. And baz goes bar goes foo. Oh yeah, whazzz up?',
        title       : 'trains',
        value       : 0.38
      }
    ]
  };
  
  var DURATION = 1500;
  var DELAY    = 500;
  
  /**
   * draw the fancy line chart
   *
   * @param {String} elementId elementId
   * @param {Array}  data      data
   */
  function drawLineChart( elementId, data ) {
    // parse helper functions on top
    var parse = d3.time.format( '%Y-%m-%d' ).parse;
    // data manipulation first
    data = data.map( function( datum ) {
      datum.date = parse( datum.date );
      
      return datum;
    } );
    
    // TODO code duplication check how you can avoid that
    var containerEl = document.getElementById( elementId ),
        width       = containerEl.clientWidth,
        height      = width * 0.4,
        margin      = {
          top    : 30,
          right  : 10,
          left   : 10 
        },
        
        detailWidth  = 98,
        detailHeight = 55,
        detailMargin = 10,

        container   = d3.select( containerEl ),
        svg         = container.select( 'svg' )
                                .attr( 'width', width )
                                .attr( 'height', height + margin.top ),

        x          = d3.time.scale().range( [ 0, width - detailWidth ] ),
        xAxis      = d3.svg.axis().scale( x )
                                  .ticks ( 8 )
                                  .tickSize( -height ),
        xAxisTicks = d3.svg.axis().scale( x )
                                  .ticks( 16 )
                                  .tickSize( -height )
                                  .tickFormat( '' ),
        y          = d3.scale.linear().range( [ height, 0 ] ),
        yAxisTicks = d3.svg.axis().scale( y )
                                  .ticks( 12 )
                                  .tickSize( width )
                                  .tickFormat( '' )
                                  .orient( 'right' ),
        
        area = d3.svg.area()
                      .interpolate( 'linear' )
                      .x( function( d )  { return x( d.date ) + detailWidth / 2; } )
                      .y0( height )
                      .y1( function( d ) { return y( d.value ); } ),

        line = d3.svg.line()
                  .interpolate( 'linear' )
                  .x( function( d ) { return x( d.date ) + detailWidth / 2; } )
                  .y( function( d ) { return y( d.value ); } ),
        
        startData = data.map( function( datum ) {
                      return {
                        date  : datum.date,
                        value : 0
                      };
                    } ),
        
        circleContainer;

    // Compute the minimum and maximum date, and the maximum price.
    x.domain( [ data[ 0 ].date, data[ data.length - 1 ].date ] );
    // hacky hacky hacky :(
    y.domain( [ 0, d3.max( data, function( d ) { return d.value; } ) + 700 ] );

    svg.append( 'g' )
        .attr( 'class', 'lineChart--xAxisTicks' )
        .attr( 'transform', 'translate(' + detailWidth / 2 + ',' + height + ')' )
        .call( xAxisTicks );

    svg.append( 'g' )
        .attr( 'class', 'lineChart--xAxis' )
        .attr( 'transform', 'translate(' + detailWidth / 2 + ',' + ( height + 7 ) + ')' )
        .call( xAxis );
    
    svg.append( 'g' )
      .attr( 'class', 'lineChart--yAxisTicks' )
      .call( yAxisTicks );
    
    // Add the line path.
    svg.append( 'path' )
        .datum( startData )
        .attr( 'class', 'lineChart--areaLine' )
        .attr( 'd', line )
        .transition()
        .duration( DURATION )
        .delay( DURATION / 2 )
        .attrTween( 'd', tween( data, line ) )
        .each( 'end', function() {
          drawCircles( data );
        } );
    
    
    // Add the area path.
    svg.append( 'path' )
        .datum( startData )
        .attr( 'class', 'lineChart--area' )
        .attr( 'd', area )
        .transition()
        .duration( DURATION )
        .attrTween( 'd', tween( data, area ) );
    
    // Helper functions!!!
    function drawCircle( datum, index ) {
      circleContainer.datum( datum )
                    .append( 'circle' )
                    .attr( 'class', 'lineChart--circle' )
                    .attr( 'r', 0 )
                    .attr(
                      'cx',
                      function( d ) {
                        return x( d.date ) + detailWidth / 2;
                      }
                    )
                    .attr(
                      'cy',
                      function( d ) {
                        return y( d.value );
                      }
                    )
                    .on( 'mouseenter', function( d ) {
                      d3.select( this )
                        .attr(
                          'class',
                          'lineChart--circle lineChart--circle__highlighted' 
                        )
                        .attr( 'r', 7 );
                      
                        d.active = true;
                        
                        showCircleDetail( d );
                    } )
                    .on( 'mouseout', function( d ) {
                      d3.select( this )
                        .attr(
                          'class',
                          'lineChart--circle' 
                        )
                        .attr( 'r', 6 );
                      
                      if ( d.active ) {
                        hideCircleDetails();
                        
                        d.active = false;
                      }
                    } )
                    .on( 'click touch', function( d ) {
                      if ( d.active ) {
                        showCircleDetail( d )
                      } else {
                        hideCircleDetails();
                      }
                    } )
                    .transition()
                    .delay( DURATION / 10 * index )
                    .attr( 'r', 6 );
    }
    
    function drawCircles( data ) {
      circleContainer = svg.append( 'g' );

      data.forEach( function( datum, index ) {
        drawCircle( datum, index );
      } );
    }
    
    function hideCircleDetails() {
      circleContainer.selectAll( '.lineChart--bubble' )
                      .remove();
    }
    
    function showCircleDetail( data ) {
      var details = circleContainer.append( 'g' )
                        .attr( 'class', 'lineChart--bubble' )
                        .attr(
                          'transform',
                          function() {
                            var result = 'translate(';
                            
                            result += x( data.date );
                            result += ', ';
                            result += y( data.value ) - detailHeight - detailMargin;
                            result += ')';
                            
                            return result;
                          }
                        );
      
      details.append( 'path' )
              .attr( 'd', 'M2.99990186,0 C1.34310181,0 0,1.34216977 0,2.99898218 L0,47.6680579 C0,49.32435 1.34136094,50.6670401 3.00074875,50.6670401 L44.4095996,50.6670401 C48.9775098,54.3898926 44.4672607,50.6057129 49,54.46875 C53.4190918,50.6962891 49.0050244,54.4362793 53.501875,50.6670401 L94.9943116,50.6670401 C96.6543075,50.6670401 98,49.3248703 98,47.6680579 L98,2.99898218 C98,1.34269006 96.651936,0 95.0000981,0 L2.99990186,0 Z M2.99990186,0' )
              .attr( 'width', detailWidth )
              .attr( 'height', detailHeight );
      
      var text = details.append( 'text' )
                        .attr( 'class', 'lineChart--bubble--text' );
      
      text.append( 'tspan' )
          .attr( 'class', 'lineChart--bubble--label' )
          .attr( 'x', detailWidth / 2 )
          .attr( 'y', detailHeight / 3 )
          .attr( 'text-anchor', 'middle' )
          .text( data.label );
      
      text.append( 'tspan' )
          .attr( 'class', 'lineChart--bubble--value' )
          .attr( 'x', detailWidth / 2 )
          .attr( 'y', detailHeight / 4 * 3 )
          .attr( 'text-anchor', 'middle' )
          .text( data.value );
    }
    
    function tween( b, callback ) {
      return function( a ) {
        var i = d3.interpolateArray( a, b );

        return function( t ) {
          return callback( i ( t ) );
        };
      };
    }
  }
  
  /**
   * draw the fancy pie chart
   *
   * @param {String} elementId elementId
   * @param {Array}  data      data
   */
  function drawPieChart( elementId, data ) {
    // TODO code duplication check how you can avoid that
    var containerEl = document.getElementById( elementId ),
        width       = containerEl.clientWidth,
        height      = width * 0.4,
        radius      = Math.min( width, height ) / 2,
        container   = d3.select( containerEl ),
        svg         = container.select( 'svg' )
                              .attr( 'width', width )
                              .attr( 'height', height );
    var pie = svg.append( 'g' )
                .attr(
                  'transform',
                  'translate(' + width / 2 + ',' + height / 2 + ')'
                );
    
    var detailedInfo = svg.append( 'g' )
                          .attr( 'class', 'pieChart--detailedInformation' );

    var twoPi   = 2 * Math.PI;
    var pieData = d3.layout.pie()
                    .value( function( d ) { return d.value; } );

    var arc = d3.svg.arc()
                    .outerRadius( radius - 20)
                    .innerRadius( 0 );
    
    var pieChartPieces = pie.datum( data )
                            .selectAll( 'path' )
                            .data( pieData )
                            .enter()
                            .append( 'path' )
                            .attr( 'class', function( d ) {
                              return 'pieChart__' + d.data.color;
                            } )
                            .attr( 'filter', 'url(#pieChartInsetShadow)' )
                            .attr( 'd', arc )
                            .each( function() {
                              this._current = { startAngle: 0, endAngle: 0 }; 
                            } )
                            .transition()
                            .duration( DURATION )
                            .attrTween( 'd', function( d ) {
                              var interpolate = d3.interpolate( this._current, d );
                              this._current = interpolate( 0 );
                    
                              return function( t ) {
                                return arc( interpolate( t ) );
                              };
                            } )
                            .each( 'end', function handleAnimationEnd( d ) {
                              drawDetailedInformation( d.data, this ); 
                            } );

    drawChartCenter(); 
    
    function drawChartCenter() {
      var centerContainer = pie.append( 'g' )
                                .attr( 'class', 'pieChart--center' );
      
      centerContainer.append( 'circle' )
                      .attr( 'class', 'pieChart--center--outerCircle' )
                      .attr( 'r', 0 )
                      .attr( 'filter', 'url(#pieChartDropShadow)' )
                      .transition()
                      .duration( DURATION )
                      .delay( DELAY )
                      .attr( 'r', radius - 50 );
      
      centerContainer.append( 'circle' )
                      .attr( 'id', 'pieChart-clippy' )
                      .attr( 'class', 'pieChart--center--innerCircle' )
                      .attr( 'r', 0 )
                      .transition()
                      .delay( DELAY )
                      .duration( DURATION )
                      .attr( 'r', radius - 55 )
                      .attr( 'fill', '#fff' );
    }
    
    function drawDetailedInformation ( data, element ) {
      var bBox      = element.getBBox(),
          infoWidth = width * 0.3,
          anchor,
          infoContainer,
          position;
      
      if ( ( bBox.x + bBox.width / 2 ) > 0 ) {
        infoContainer = detailedInfo.append( 'g' )
                                    .attr( 'width', infoWidth )
                                    .attr(
                                      'transform',
                                      'translate(' + ( width - infoWidth ) + ',' + ( bBox.height + bBox.y ) + ')'
                                    );
        anchor   = 'end';
        position = 'right';
      } else {
        infoContainer = detailedInfo.append( 'g' )
                                    .attr( 'width', infoWidth )
                                    .attr(
                                      'transform',
                                      'translate(' + 0 + ',' + ( bBox.height + bBox.y ) + ')'
                                    );
        anchor   = 'start';
        position = 'left';
      }

      infoContainer.data( [ data.value * 100 ] )
                    .append( 'text' )
                    .text ( '0 %' )
                    .attr( 'class', 'pieChart--detail--percentage' )
                    .attr( 'x', ( position === 'left' ? 0 : infoWidth ) )
                    .attr( 'y', -10 )
                    .attr( 'text-anchor', anchor )
                    .transition()
                    .duration( DURATION )
                    .tween( 'text', function( d ) {
                      var i = d3.interpolateRound(
                        +this.textContent.replace( /\s%/ig, '' ),
                        d
                      );

                      return function( t ) {
                        this.textContent = i( t ) + ' %';
                      };
                    } );
      
      infoContainer.append( 'line' )
                    .attr( 'class', 'pieChart--detail--divider' )
                    .attr( 'x1', 0 )
                    .attr( 'x2', 0 )
                    .attr( 'y1', 0 )
                    .attr( 'y2', 0 )
                    .transition()
                    .duration( DURATION )
                    .attr( 'x2', infoWidth );
      
      infoContainer.data( [ data.description ] ) 
                    .append( 'foreignObject' )
                    .attr( 'width', infoWidth ) 
                    .attr( 'height', 100 )
                    .append( 'xhtml:body' )
                    .attr(
                      'class',
                      'pieChart--detail--textContainer ' + 'pieChart--detail__' + position
                    )
                    .html( data.description );
    }
  }
  
  function ಠ_ಠ() {
    drawPieChart(     'pieChart',     data.pieChart );
    drawLineChart(    'lineChart',    data.lineChart );
  }
  
  // yeah, let's kick things off!!!
  ಠ_ಠ();
  
})();
Host Instantly Drag and Drop Website Builder

 

Description

Inspired by http://dribbble.com/shots/1252153-Charts-Inforgraphic-Templates/attachments/170613
Term
Mon, 11/27/2017 - 22:10

Related Codes

Pen ID
Pen ID
Pen ID