Old school D3 from simpler times

All examples By author By category About

buffaly

Full window Github gist

Film Flowers, Single Starter Code

Built with blockbuilder.org

forked from sxywu's block: DS July: Code 1

forked from sxywu's block: DS July: Code 2

forked from sxywu's block: DS July: Code 3

forked from sxywu's block: DS July: Code 4

forked from sxywu's block: DS July: Code 5

forked from sxywu's block: DS July: Code 6

forked from sxywu's block: DS July: Code 7

forked from sxywu's block: Film Flowers, All

forked from anonymous's block: Film Flowers, Refactored

forked from sxywu's block: Film Flowers, Refactored

forked from sxywu's block: Film Flowers, Single Starter Code

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js'></script>
  <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700' rel='stylesheet' type='text/css'>
  
  <style>
    svg {
      width: 600px;
      height: 20000px;
    }
  </style>
</head>

<body>
  <svg>
    <g class="gg" transform="translate(250,250) scale(0.15,0.15)"></g>
  </svg>
  
  <script>
    const width = 600;
    const height = 600;
    
    const petalPaths = [[
        'M15, -45',
        'C12,-45 117,0 22,47',
        'C73,-12 15,-43 15,-45',
      ]];
    
    // instantiate scales and petal path lookup
    const sizeScale = d3.scaleLinear().range([1.1, 2.2]);
   	const numPetalsScale = d3.scaleQuantize()
    	.range(_.range(5, 10));

const roseColor = {
      G: 'red',
      PG: 'blue',
      'PG-13': 'red',
      R: 'purple',
    };
    
    // grab svg
    const svg = d3.select('.gg');
    /*****************************************************
    ** get movie data
    ******************************************************/
    
    d3.json('movies.json', function(movies) {
      movies = _.map(movies, movie => {
        return {
          rating: ++movie.imdbRating,
          votes: parseInt(movie.imdbVotes.replace(/\,/g, '')),
          year: ++movie.Year,
          title: movie.Title,
          pg: movie.Rated,
        }
      });
//       const data = _.map(movies, (v) => {color: roseColor[v.pg], path: petalPaths});
      
      const petalsData = _.times(24, (i) => {
        return {
          size: sizeScale(i),
          path: petalPaths,
          color: roseColor[movies[0].pg],
        };
      });
      
      svg.selectAll('.petal')
      	.data(petalsData).enter().append('path')
      	.classed('petal', true)
      	.attr('transform', (d, i) => {
          const angle = i * (360 / 0.06498);
        	return `translate(0,-0.6) scale(${d.size}) rotate(${angle})`;
        })
      	.attr('opacity', (d, i) => i * (1 / 20) + 0.2)
      	.attr('d', d => d.path)
      	.attr('fill', d => d.color)
    });
    
  </script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js'></script>
  <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700' rel='stylesheet' type='text/css'>
  
  <style>
    svg {
      width: 600px;
      height: 20000px;
    }
  </style>
</head>
​
<body>
  <svg>
    <g class="gg" transform="translate(250,250) scale(0.15,0.15)"></g>
  </svg>
  
  <script>
    const width = 600;
    const height = 600;
    
    const petalPaths = [[
        'M15, -45',
        'C12,-45 117,0 22,47',
        'C73,-12 15,-43 15,-45',
      ]];
    
    // instantiate scales and petal path lookup
    const sizeScale = d3.scaleLinear().range([1.1, 2.2]);
    const numPetalsScale = d3.scaleQuantize()
        .range(_.range(5, 10));
​
    const roseColor = {
      G: 'red',
      PG: 'blue',
      'PG-13': 'red',
      R: 'purple',
    };
    
    // grab svg
    const svg = d3.select('.gg');
    /*****************************************************
    ** get movie data
    ******************************************************/
    
    d3.json('movies.json', function(movies) {
      movies = _.map(movies, movie => {
        return {
          rating: ++movie.imdbRating,
          votes: parseInt(movie.imdbVotes.replace(/\,/g, '')),
          year: ++movie.Year,
          title: movie.Title,
          pg: movie.Rated,
        }
      });
//       const data = _.map(movies, (v) => {color: roseColor[v.pg], path: petalPaths});
      
      const petalsData = _.times(24, (i) => {
        return {
          size: sizeScale(i),
          path: petalPaths,
          color: roseColor[movies[0].pg],
        };
      });
      
      svg.selectAll('.petal')
        .data(petalsData).enter().append('path')
        .classed('petal', true)
        .attr('transform', (d, i) => {
          const angle = i * (360 / 0.06498);
            return `translate(0,-0.6) scale(${d.size}) rotate(${angle})`;
        })
        .attr('opacity', (d, i) => i * (1 / 20) + 0.2)
        .attr('d', d => d.path)
        .attr('fill', d => d.color)
    });
    
  </script>
</body>
​
    

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

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js