Theme Experiment by curran

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <style>
    body {
      margin:0;
    }
  </style>
</head>
<body>
  <svg width='960', height='500'></svg>
  <script>
    function buildTheme() {
      const colors = {
        blues: [
          '#0071bb', // Use for text, and lines.
          '#007ec3',
          '#4c8ecb',
          '#73a0d5',
          '#8aaedc',
          '#a2bde2',
          '#bacdea',
          '#c7d5ed'
        ],
        yellows: [
          '#fdeb00', // Accent color, or text on black.
          '#feed51',
          '#fef184',
          '#fef5ad',
          '#fef9d4'
        ],
        greens: [
          "#58c274"
        ],
        grays: [
          '#253645' // Use for subheadline
        ]
      };
      const text = {
        headline: {
          color: colors.blues[0],
          font: {
            family: 'Lato, sans-serif',
            size: '38pt'
          }
        },
        subheadline: {
          color: colors.grays[0],
          font: {
            family: 'Lato, sans-serif',
            size: '19pt'
          }
        },
        body: {
          color: colors.grays[0],
          font: {
            family: 'Lato, sans-serif',
            size: '10pt'
          }
        }
      };
      return { colors, text };
    }
    const theme = buildTheme();
    const squareSize = 110;
    const squareSpacing = 10;
    const margin = squareSpacing / 2;
    
    const rects = (selection, colors) => {
      selection.selectAll('rect .brand-blue').data(colors)
        .enter().append('rect')
          .attr('class', 'brand-blue')
          .attr('x', (d, i) => i * (squareSize + squareSpacing))
          .attr('width', squareSize)
          .attr('height', squareSize)
          .attr('fill', d => d);
    };
    
    const svg = d3.select('svg');
    const width = svg.attr('width');
    const innerWidth = width - margin * 2;
    
    const g = svg.append('g')
      .attr('transform', `translate(${margin}, ${margin})`);
    
    g.append('g')
        .call(rects, theme.colors.blues);
    
    g.append('line')
        .attr('x1', 0)
        .attr('x2', innerWidth)
        .attr('y1', squareSize + squareSpacing)
        .attr('y2', squareSize + squareSpacing)
        .attr('stroke', theme.colors.blues[0])
        .attr('stroke-width', 1);
    
    g.append('g')
        .attr('transform', `translate(0, ${squareSize + squareSpacing * 2})`)
        .call(rects, theme.colors.yellows.concat(theme.colors.greens));
    
    g.append('g')
        .attr('transform', `translate(0, ${squareSize*2 + squareSpacing*2 + 60})`)
      .append('text')
        .style('font-family', theme.text.headline.font.family)
        .style('font-size', theme.text.headline.font.size)
     	  .attr('fill', theme.text.headline.color)
        .text('Headline');
    
    g.append('g')
        .attr('transform', `translate(0, ${squareSize*2 + squareSpacing*2 + 90})`)
      .append('text')
        .style('font-family', theme.text.subheadline.font.family)
        .style('font-size', theme.text.subheadline.font.size)
     	  .attr('fill', theme.text.subheadline.color)
        .text('Subheadline looks like this');
    
    g.append('g')
        .attr('transform', `translate(0, ${squareSize*2 + squareSpacing*2 + 110})`)
      .append('text')
        .style('font-family', theme.text.body.font.family)
        .style('font-size', theme.text.body.font.size)
     	  .attr('fill', theme.text.body.color)
        .text('Body copy has this sort of look and feel to it.');
  </script>
</body>