Comments (4)
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.
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);
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.
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.
Also feel free to remove the below section, as its just for our collecting of site visits on the facets homepage:
`
`
from facets.
Related Issues (20)
- Binning | X-Axis selection is not rendering correctly as a dropdown HOT 8
- HTML Imports is deprecated error still here! HOT 5
- Cannot copy text from side panel HOT 2
- Is it possible to increase the max size of the atlas?
- How to load a non local image atlas?
- Questions about Facets structure and dependencies HOT 2
- Facets buttons still too big HOT 1
- Facets as a Data Studio community report HOT 3
- ProtoFromDataFrames fails for dataframes with categorical columns HOT 6
- Can not show column name in jupyter notebook. HOT 3
- Custom stats cut-off with long names
- Why the facets button size is too big to see (again) HOT 2
- Support numpy >= 1.23 HOT 3
- facets dive demo no longer builds HOT 2
- Facet broken under np 1.23
- How to get started with Facets for a simple one-page website? HOT 6
- facets dive is not working in colab HOT 2
- Generate proto files to support protobuf 4.x.x and protoc 3.19.0 HOT 6
- facets_overview is failing with numpy-1.23.5 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from facets.