pattern fill demo

by nancynancy

HTML

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

JavaScript

// set the dimensions and margins of the graph
var margin = {
    top: 20,
    right: 30,
    bottom: 60,
    left: 60
  },
  width = 400 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .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 + ")");

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/5_OneCatSevNumOrdered_wide.csv", function(data) {

  // List of groups = header of the csv files
  var keys = data.columns.slice(1)

  // Add X axis
  var x = d3.scaleLinear()
    .domain(d3.extent(data, function(d) {
      return d.year;
    }))
    .range([0, width]);

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([-100000, 100000])
    .range([height, 0]);

  //stack the data?
  var stackedData = d3.stack()
    .offset(d3.stackOffsetSilhouette)
    .keys(keys)
    (data)


  console.log(keys)

  var defs = svg.append('svg:defs');

  defs.append("svg:pattern")
    .attr("id", "seal")
    .attr("width", 350)
    .attr("height", 350)
    .attr("patternUnits", "userSpaceOnUse")
    .append("svg:image")
    .attr("xlink:href", 
    'https://img.freepik.com/free-vector/hand-drawn-floral-pattern-background_52683-16482.jpg?size=626&ext=jpg')
    .attr("width", 350)
    .attr("height", 350)
    .attr("x", -15)
    .attr("y", 20);

  // Show the areas
  svg
    .selectAll("mylayers")
    .data(stackedData)
    .enter()
    .append("path")
    .style("fill", function(d) {
      if (d.key == "Amanda") {
        return "#DB6413"
      }
      if (d.key == "Ashley") {
        return "#B4CEB6"
      }
      if (d.key == "Betty") {
        return "cornsilk"
      }
      if (d.key == "Deborah") {
        return "lightsalmon"
      }
      if (d.key ==...