All examples By author By category About

35degrees

Full window Github gist

scrollytest3

forked from 35degrees's block: scrollytest1

forked from 35degrees's block: scrollytest2

<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href='https://fonts.googleapis.com/css?family=Cabin:300,400' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
<style>
.line { 
      fill: none;
      stroke: Navy;
      stroke-width: 3px;
    }
    
   .line2 {
      fill: none;
      stroke: LightGreen;
      stroke-width: 3px;
    }
body{ 
  max-width: 900px;
  margin: 0px auto;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: LightSkyBlue;

}

#container{
  position: relative;
}

#sections{
  width: 800px;
  position: relative;
  margin: 0px auto;
  padding-top: 60px;
}

#sections div{
  font-family: Lato;
  text-align: center;
  color: Navy;
  padding: 10px;
  max-width: 900px;
  margin-bottom: 500px;
  font-size: 20px;
  margin-top: -35px;
}
#sections > div:last-child{
  margin-bottom: 30px;
}
#sections > div.graph-scroll-active{
  opacity: 1;
}

#graph{
  width: 600px;
  position: absolute;
  top: 250px;
  margin-left: 15%;
}

.graph-scroll-fixed #graph{
  position: fixed;
  top: 100px;
}

.graph-scroll-below #graph{
  bottom: 20px;
  top: auto;
}

h1 {
  font-family: Cabin;
  margin-top: 20px;
  margin-left: 60px;
  margin-right: 60px;
  color: Navy;
  }
  h3, h5 {
    font-family: Lato;
    margin-left: 80px;
    margin-right: 80px;
    margin-top: -8px;
    color: Navy;
    }

h1, h3, h5{
  text-align: center;

}

#intro-block {
display: block;
  top: 0;
  width: 100%;
  float: top;
  overflow: auto;
}
p {
  color: Navy;
  line-height: 1.2em;
  margin-left: 50px;
  margin-right: 50px;
  text-align: center;
}
circle{
  fill: steelblue;
}

.mono{
  font-family: monospace;
}
  rect {
    fill: Goldenrod;
  }
svg{
  background-color: Azure;
  }

#logo {
  display: block;
  margin: auto;
}
#quote {
  font-family: Lato;
  font-size: 20px;
  opacity: 1;
}
#head {
  color: Ivory;
  text-shadow: 1px 1px Navy;
}
</style>
<div id="intro-block">
<h1>How does Camping World earn its profits?</h1>

<h3>Camping World is the domestic leader in new and used RV sales, so why does its business model more resemble Apple's walled garden ecosystem?</h3>
<h5>July 2017</h5>
</div>
<img id="logo" src="https://www.samhooker.com/images/classcrv.png" width="40">

<div>
    <h3 id="head">Booming RV Sales</h3>
    <p>The RV business has been a bonanza. Since 2008 economic downturn, RV sales have been moving up rapidly, and its been a powerful force. for enthusiasts. Freedom, travel, exploration, family, these aren’t functional needs, but they are emotional needs. Trailers to motorhomes, there’s a product for every economic tier.</p>
  </div>
  <div>
    <p>Not only are more RVs being sold each year, but the total revenue is growing more than the units, showing that higher priced units are being sold more, continuing the bonanza for RV dealers.</p>
  </div>

<div>
        <p id="quote">"Today, what we have is the single-largest RV and camping company that the world has ever known. Bigger than any manufacturer, bigger than anything."</p>
        <h6>Marcus Lemonis, CEO of Camping World</h6>
      </div>
        </div>

</div>
<div id='container' class='container-2'>
  <div id='graph'></div>

<div id='sections'>
<div>
  <p>Camping World has is the largest seller of RVs in the country, and is the single largest dealer of Thor and Winnebago (17%).
  </p>
</div>

<div>
      <p>Marcus quote “we aren’t an RV dealership”.

So what gives? How can the biggest seller of RVs not consider themselves an RV dealership? Wouldn’t you want to be the king of this growth channel?</p>
    </div>

<div>
    <p>Wouldn’t you want to keep your ASPs flat given the power you have over the market via market share? Why wouldn’t you keep the price higher for your captive audience of buyers?</p>
    </div>

</div>

</div>
<div id='container' class='container-3'>
  <div id='graph'></div>

<div>
    <h1>
      Multiple graphs
    </h1>
    <img id="logo" src="https://www.samhooker.com/images/cwgs.png" width="200">
    </div>
    <div>
      <h3>Scroll away</h3>

As the bottom of the container approaches the top of the page, the graph is classed with <span class='mono'>graph-scroll-below</span>. A little more css allows the graph slide out of view gracefully:
<pre>
.graph-scroll-below #graph{
  position: absolute;
  bottom: 0px;
}
</pre>
    </div>

<div>
      <h3>Mobile</h3>

On mobile centering the graph and sections while adding a some padding for the first slide is a good option:
<pre>
@media (max-width: 925px)  {
  #graph{
    width: 100%;
    transform: translate(-50%, 0);
    margin-left: 50%;
  }

#sections{
    position: relative;
    margin: 0px auto;
    padding-top: 400px;
  }
}
</pre>
    </div>

<div>
      <h3>Examples</h3>
      <p><a href='https://www.bloomberg.com/graphics/2015-auto-sales/'>Auto Sales</a></p>
      <p><a href='https://www.bloomberg.com/graphics/2015-measles-outbreaks/'>Measles</a></p>
      <p><a href='https://roadtolarissa.com/blog/2015/01/04/coloring-maps-with-d3/'>Coloring Maps</a></p>
  <p><a href='https://www.bloomberg.com/graphics/2015-fifa-scandal/'>FIFA Scandal</a></p>
      <p><a href='https://www.bloomberg.com/graphics/2015-whats-warming-the-world/'>Global Warming</a></p>
      <p><a href='https://www.bloomberg.com/politics/graphics/2015-hillary-womens-movement-timeline/'>Hillary Clinton’s Debt to Feminism
</a></p>
      <p><a href='https://www.bloomberg.com/graphics/year-ahead-2016/'>The Year Ahead</a></p>
      <p><a href='https://www.bloomberg.com/graphics/2015-pace-of-social-change/'>Pace of Social Change</a></p>
      <p><a href='https://www.bloomberg.com/graphics/2015-red-meat-cancer/'>Red Meat</a></p>
    </div>

<div>
      <h3>More reading</h3>
      <p><a href='https://bost.ocks.org/mike/scroll/'>How To Scroll</a></p>
      <p><a href='https://vallandingham.me/scroller.html/'>So You Want to Build A Scroller</a></p>
      <p><a href='https://source.opennews.org/en-US/articles/behind-scenes-fewer-helmets-more-deaths/'>Making “Fewer Helmets, More Deaths”</a></p>
      <p><a href='https://www.nytimes.com/interactive/2015/10/27/world/greenland-is-melting-away.html'>Greenland Is Melting Away</a></p>
      <p><a href='https://www.theguardian.com/us-news/ng-interactive/2015/oct/19/homan-square-chicago-police-detainees'>Homan Square</a></p>
   </div>

<div>
      <h3>Todos</h3>
      <p>- Simple examples
      <p>- Self explanatory graphics
      <p>- Swiper
    </div>
  </div>

</div>

<h3 id='source'><a href='https://github.com/1wheel/graph-scroll'>contribute/view on github</a></h3>

var oldWidth = 0
function render(){
  if (oldWidth == innerWidth) return
  oldWidth = innerWidth

var width = d3.select('#graph').node().offsetWidth,
      height = 400;
      r = 20
// GRAPH1 STARTS HERE
      
 var margin = {top: 20, right: 50, bottom: 30, left: 50},
    width = 640 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;

var svg = d3.select('#graph').html('')
    .append('svg')
  .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

var circle = svg.append('circle')
      .attrs({cx: 0, cy: 0, r: r})
  //new starts here
var x = d3.scaleTime().range([0, width]);
var y0 = d3.scaleLinear().range([height, 0]);
var y1 = d3.scaleLinear().range([height, 0]);

// define the line
var valueline = d3.line()
.curve(d3.curveBasis)
    .x(function(d) { return x(d.year); })
    .y(function(d) { return y0(d.rvShipped); });
    
var valueline2 = d3.line()
.curve(d3.curveBasis)
    .x(function(d) { return x(d.year); })
    .y(function(d) { return y1(d.rvRetail); });
  
  d3.csv("rvsales.csv", function(error, data) {
  if (error) throw error;

// format the data
  data.forEach(function(d) {
      d.year = d.year;
      d.rvShipped = +d.rv_shipped;
    	d.rvPct = +d.rv_pct;
    	d.rvRetail = +d.rv_retail;
    	d.retailPct = +d.retail_pct;
  });  
   x.domain(d3.extent(data, function(d) { return d.year; }));
  y0.domain([100, d3.max(data, function(d) { return d.rvShipped; })]);
   y1.domain([4, d3.max(data, function(d) { return d.rvRetail; })]);

// Add the valueline path.
  svg.append("path")
      .data([data])
      .attr("class", "line2")
      .attr("d", valueline2);
   
/* var curtain = svg.append('rect')
    .attr('x', 1)
.attr('height', height)
    .attr('width', width -1)
    .attr('class', 'curtain')
    .style('fill', '#ffffff'); */
        svg.append("path")
      .data([data])
      .attr("class", "line")
      .attr("d", valueline);
   
/* var curtain2 = svg.append('rect')
    .attr('x', 1)
.attr('height', height)
    .attr('width', width -1)
    .attr('class', 'curtain2')
    .style('fill', '#ffffff'); */
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
			.attr('x','margin.left')
      .call(d3.axisBottom(x)
           .tickFormat(d3.format("y")));

// Add the Y Axis
  svg.append("g")
      .call(d3.axisLeft(y0));
   
   /* svg.append("g")
				.attr("transform", "translate( " + width + ", 0 )")
         .call(d3.axisRight(y1)); */
  });
  var colors = ['orange', 'purple', 'HotPink', 'pink', 'black']
  var gs = d3.graphScroll()
      .container(d3.select('#container'))
      .graph(d3.selectAll('#graph'))
      .eventId('uniqueId1')
      .sections(d3.selectAll('#sections > div'))
      // .offset(innerWidth < 900 ? innerHeight - 30 : 200)
      .on('active', function(i){
        var pos = [ {cx: width - r *2, cy: r},
                    {cx: r ,         cy: r*2},
                    {cx: width - r, cy: height - r},
                    {cx: width/3,   cy: height/3} ][i]

circle.transition().duration(1000)
            .attrs(pos)
          .transition()
            .style('fill', colors[i])
      })

// GRAPH2 STARTS HERE
 var margin = {top: 20, right: 50, bottom: 30, left: 50},
    width = 640 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;
  
  var svg2 = d3.select('.container-2 #graph').html('')
    .append('svg')
  .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// format the data
  data2.forEach(function(d) {
      d.year = d.year;
      d.rvNew = +d.new_asp;
    	d.rvUsed = +d.used_asp;
    
  });
     
     
x1.domain(d3.extent(data2, function(d) { return d.year; }));
  y2.domain([d3.min(data2, function(d) { return d.rvNew; })-1000, d3.max(data2, function(d) { return d.rvNew; })+1000]);
    y3.domain([d3.min(data2, function(d) { return d.rvUsed; })-500, d3.max(data2, function(d) { return d.rvUsed; })+500]);

// Add the valueline path.
  svg2.append("path")
      .data([data2])
      .attr("class", "line")
      .attr("d", valueline3);
   
    svg2.append("path")
      .data([data2])
      .attr("class", "line2")
      .attr("d", valueline4);

// Add the X Axis
 svg2.append("g")
      .attr("transform", "translate(0," + height + ")")

.call(d3.axisBottom(x1)
           .tickFormat(d3.format("y")));

// Add the Y Axis
  svg2.append("g")
      .call(d3.axisLeft(y2));
svg2.append("g")
.attr("transform", "translate( " + width + ", 0 )")
      .call(d3.axisRight(y3));

});
  var gs2 = d3.graphScroll()
      .container(d3.select('.container-2'))
      .graph(d3.selectAll('.container-2 #graph'))
      .eventId('uniqueId1')
      .sections(d3.selectAll('.container-2 #sections > div'))
      .on('active', function(i){
        var h = height
        var w = width
        var dArray = [
          [[w/4, h/4], [w*3/4, h/4],  [w*3/4, h*3/4], [w/4, h*3/4]],
          [[0, 0],     [w*3/4, h/4],  [w*3/4, h*3/4], [w/4, h*3/4]],
          [[w/2, h/2], [w, h/4],      [w, h],         [w/4, h]],
          [[w/2, h/2], [w, h/4],      [w, h],         [w/4, h]],
          [[w/2, h/2], [w, h/2],      [0, 0],         [w/4, h/2]],
          [[w/2, h/2], [0, h/4],      [0, h/2],         [w/4, 0]],
        ].map(function(d){ return 'M' + d.join(' L ') })

path.transition().duration(1000)
            .attr('d', dArray[i])
            .style('fill', colors[i])
      })
  
  // GRAPH3 STARTS HERE
var svg3 = d3.select('.container-3 #graph').html('')
    .append('svg')
      .attrs({width: width, height: height})

var path = svg3.append('path')

var gs3 = d3.graphScroll()
      .container(d3.select('.container-3'))
      .graph(d3.selectAll('.container-3 #graph'))
      .eventId('uniqueId1')
      .sections(d3.selectAll('.container-3 #sections > div'))
      .on('active', function(i){
        var h = height
        var w = width
        var dArray = [
          [[w/6, h/6], [w*3/6, h/6],  [w*3/6, h*3/6], [w/6, h*3/6]],
          [[0, 0],     [w*3/6, h/6],  [w*3/6, h*3/6], [w/4, h*3/6]],
          [[w/2, h/2], [w, h/4],      [w, h],         [w/6, h]],
          [[w/2, h/2], [w, h/4],      [w, h],         [w/6, h]],
          [[w/2, h/2], [w, h/2],      [0, 0],         [w/6, h/2]],
          [[w/2, h/2], [0, h/4],      [0, h/2],         [w/4, 0]],
        ].map(function(d){ return 'M' + d.join(' L ') })

path.transition().duration(500)
            .attr('d', dArray[i])
            .style('fill', colors[i])
      })
  d3.select('#source')
      .styles({'margin-bottom': window.innerHeight - 450 + 'px', padding: '100px'})
}
render()
d3.select(window).on('resize', render)

Promise.all([
  "https://www.samhooker.com/data/rvsales.csv",
  "two.csv",
  "three.csv"
].map(function(url) {
  return fetch(url).then(function(response) {
    return response.ok ? response.text() : Promise.reject(response.status);
  }).then(function(text) {
    return d3.csvParse(text);
  });
})).then(function(value) {
  var one = +value[0][0].number,
      two = +value[1][0].number,
      three = +value[2][0].number;
});
</script>