GithubHelp home page GithubHelp logo

Comments (4)

jameswex avatar jameswex commented on June 6, 2024

If you want to host an instance of Facets Dive outside of a notebook, on your own webpage, then you can follow the same approach taken by our facets.dev website, where we set up a webpage and in our case we use GitHub Pages to host it.

https://github.com/PAIR-code/facets/blob/gh-pages/index.html shows our code for the main facets.dev page with its facets dive demo on it.

https://github.com/PAIR-code/facets/blob/gh-pages/quickdraw.js and https://github.com/PAIR-code/facets/blob/gh-pages/quickdraw.html show the code for the https://pair-code.github.io/facets/quickdraw.html demo which includes images.
The datafiles (json raw data, and the sprite image) can be seen in the same https://github.com/PAIR-code/facets/tree/gh-pages directory.

from facets.

wesnasimone avatar wesnasimone commented on June 6, 2024

I'm trying to test these codes, but I'm getting an error.

The code is this:

  • html
<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <script src="d3.min.js"></script>
  <script>
    
  window.addEventListener('WebComponentsReady', function() {
    var link = document.createElement('link');
    link.rel = "import";
    link.href = "facets.html";
    link.onload= function() {
      var dive = document.createElement('facets-dive');
      dive.crossOrigin = "anonymous";
      dive.spriteImageWidth = "40";
      dive.spriteImageHeight = "40";

      document.body.appendChild(dive);
      var script = document.createElement('script');
      script.async = true;
      script.src = 'dogs.js';
      document.head.appendChild(script);
    }
    document.head.appendChild(link);
  });
</script>
  <script type="text/javascript" src="dogs.js"></script>
<style>
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.header {
  align-items: center;
  background-color: #ffd139;  /* Quick Draw yellow. */
  display: flex;
  height: 35px;
  justify-content: center;
  width: 100%;
}

.header label {
  font-family: "Comic Sans MS";
  margin: 0 10px;
}
</style>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46457317-7', 'auto');
  ga('send', 'pageview');
</script>
<title>Quick, Draw! Year-of-the-dog special</title>
</head>
<body>
  <div class="header">
    <label>
      <span><a href="https://quickdraw.withgoogle.com/data">Quick, Draw!</a> testando</span>
    </label>
    <label>
      <span>Preset View:</span>
      <select class="presets"></select>
    </label>
  </div>
</body>
</html>
  • js
var fd = document.querySelector('facets-dive');

var url = ''
d3.json('random-dogs.json', function(data) {
  fd.data = data;
  fd.atlasUrl = 'random-dogs.png';
});

var PRESET_VIEWS = [
  {
    description: '-- select --',
    settings: {
      'verticalFacet': '',
      'verticalBuckets': 10,
      'horizontalFacet': '',
      'horizontalBuckets': 10,
      'positionMode': 'stacked',
      'verticalPosition': '',
      'horizontalPosition': '',
      'colorBy': ''
    },
  },
  {
    description: 'Correctness vs. Number of Points',
    settings: {
      'verticalFacet': 'recognized',
      'verticalBuckets': 3,
      'horizontalFacet': 'numpoints',
      'horizontalBuckets': 25,
      'positionMode': 'stacked',
      'verticalPosition': 'numpoints',
      'horizontalPosition': 'numstrokes',
      'colorBy': ''
    }
  },
  {
    description: 'US vs. GB Recognition',
    settings: {
      'verticalFacet': 'country',
      'verticalBuckets': 2,
      'horizontalFacet': 'recognized',
      'horizontalBuckets': 3,
      'positionMode': 'stacked',
      'verticalPosition': '',
      'horizontalPosition': '',
      'colorBy': ''
    }
  },
  {
    description: 'Strokes vs. Liklihood of Correctness',
    settings: {
      'verticalFacet': 'recognized',
      'verticalBuckets': 3,
      'horizontalFacet': '',
      'horizontalBuckets': 10,
      'positionMode': 'stacked',
      'verticalPosition': '',
      'horizontalPosition': '',
      'colorBy': 'numstrokes'
    }
  },
  {
    description: 'Strokes vs. Points Scatterplot',
    settings: {
      'verticalFacet': '',
      'verticalBuckets': 2,
      'horizontalFacet': '',
      'horizontalBuckets': 10,
      'positionMode': 'scatter',
      'verticalPosition': 'numpoints',
      'horizontalPosition': 'numstrokes',
      'colorBy': 'recognized'
    },
  },
  {
    description: 'Recognition Varies with Timestamp',
    settings: {
      'verticalFacet': '',
      'verticalBuckets': 10,
      'horizontalFacet': 'timestamp',
      'horizontalBuckets': 100,
      'positionMode': 'stacked',
      'verticalPosition': '',
      'horizontalPosition': '',
      'colorBy': 'recognized'
    },
  },
  {
    description: 'Small Scatterplots by Country/Timestamp',
    settings: {
      'verticalFacet': 'timestamp',
      'verticalBuckets': 24,
      'horizontalFacet': 'country',
      'horizontalBuckets': 6,
      'positionMode': 'scatter',
      'verticalPosition': 'numpoints',
      'horizontalPosition': 'numstrokes',
      'colorBy': 'recognized'
    },
  },
];

var presets = document.querySelector(".presets");
d3.select(presets)
    .selectAll('option')
    .data(PRESET_VIEWS)
    .enter()
    .append('option')
    .attr('value', function(view, index) { return index; })
    .text(function(view) {return view.description;});

var loadSettings = function(index) {
  var {settings} = PRESET_VIEWS[index];
  for (var attr in settings) {
    fd[attr] = settings[attr];
  }
};
presets.onchange = function() {
  loadSettings(+presets.value);
};
loadSettings(0);
  • Error
    erro

I'm not understand this error. I put in the code both random-dogs.json and random-dogs.png. What could be going wrong? Thanks

from facets.

jameswex avatar jameswex commented on June 6, 2024

It seems like the javascript is being executed before the HTML code to create the facets-dive and other elements have been created.

The HTML code loads the dogs.js inside the WebComponentsReady callback, which should mean it doesn't execute until the elements are built. But you also load dogs.js with a <script> tag explicitly. Try removing the "<script type="text/javascript" src="dogs.js"></script>" line from the html perhaps.

from facets.

jameswex avatar jameswex commented on June 6, 2024

Also feel free to remove the below section, as its just for our collecting of site visits on the facets homepage:
`

<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-46457317-7', 'auto'); ga('send', 'pageview'); </script>

`

from facets.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.