зеркало из https://github.com/microsoft/SandDance.git
152 строки
4.6 KiB
HTML
152 строки
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>Document</title>
|
|
<style type="text/css">
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
select,
|
|
button,
|
|
input {
|
|
font-family: 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
#app {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" type="text/css" href="../packages/sanddance-app/src/css/sanddance-app.scss" />
|
|
<link rel="shortcut icon" href="../docs/favicon.ico" />
|
|
</head>
|
|
|
|
<body>
|
|
<!-- link to JSON files so we can get a url from the bundler -->
|
|
<a class="sanddance-app-static-content" id="demovote" data-display-name="Demo Vote" data-type="tsv"
|
|
href="../docs/sample-data/demovote.tsv"></a>
|
|
<a class="sanddance-app-static-content" id="titanic" data-display-name="Titanic" data-type="tsv"
|
|
href="../docs/sample-data/titanicmaster.tsv"></a>
|
|
|
|
<script>
|
|
var themeColors = {
|
|
"dark": {
|
|
defaultCube: [128, 225, 255, 255]
|
|
},
|
|
"light": {
|
|
defaultCube: [128, 225, 255, 255]
|
|
}
|
|
};
|
|
var insights = {
|
|
"titanic": {
|
|
"columns": {
|
|
"uid": "Name",
|
|
"x": "Gender",
|
|
"y": "Joined",
|
|
"color": "Survived",
|
|
"z": "TicketCost",
|
|
"size": "TicketCost",
|
|
"sort": "Survived"
|
|
},
|
|
"scheme": "dual_redgreen",
|
|
"chart": "barchart",
|
|
"view": "2d"
|
|
},
|
|
"demovote": {
|
|
"columns": {
|
|
"uid": "Id",
|
|
"x": "Longitude",
|
|
"y": "Latitude",
|
|
"color": "Obama",
|
|
"z": "Education",
|
|
"size": "TotalPop",
|
|
"sort": "State"
|
|
},
|
|
"scheme": "redblue",
|
|
"chart": "scatterplot",
|
|
"view": "3d",
|
|
"colorBin": "quantize"
|
|
}
|
|
};
|
|
var options = {
|
|
"*": {
|
|
"chartPrefs": {
|
|
"*": {
|
|
"*": {
|
|
"*": {
|
|
"signalValues": {
|
|
"RoleColor_BinCountSignal": 7
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"titanic": {
|
|
"chartPrefs": {
|
|
"barchart": {
|
|
"color": {
|
|
"Gender": {
|
|
"scheme": "set2"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"demovote": {
|
|
"chartPrefs": {
|
|
"*": {
|
|
"color": {
|
|
"Winner": {
|
|
"scheme": "dual_bluered"
|
|
}
|
|
}
|
|
},
|
|
"treemap": {
|
|
"*": {
|
|
"*": {
|
|
"columns": {
|
|
"size": "TotalPop"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"stacks": {
|
|
"*": {
|
|
"*": {
|
|
"signalValues": {
|
|
"RoleX_BinsSignal": 30,
|
|
"RoleY_BinsSignal": 30
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"tooltipExclusions": ["Id", "Latitude", "Longitude"]
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<main id="app"></main>
|
|
|
|
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
|
|
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
|
|
<script type="module" src="../packages/sanddance-app/src/index.tsx"></script>
|
|
|
|
</body>
|
|
|
|
</html> |