Pocker Mortys dataviz

Size
13,940 Kb
Views
36,432

How do I make an pocker mortys dataviz?

Scatterplot visualization for the game Pocket Mortys. What is a pocker mortys dataviz? How do you make a pocker mortys dataviz? This script and codes were developed by Rafael Abensur on 12 September 2022, Monday.

Pocker Mortys dataviz Previews

Pocker Mortys dataviz - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pocker Mortys dataviz</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css'>
<link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/20221/nouislider.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="row"> <div class="col s12"> <div class="row main"> <div class="col s12 m3 l2 controls"><a class="btn-floating btn-small teal controls__toggle" id="toggleControls"><i class="material-icons">settings</i></a> <div class="controls__type"> <h6>Type</h6> <p> <input id="normal" type="checkbox" checked="checked"/> <label for="normal">Normal</label> </p> <p> <input id="rock" type="checkbox" checked="checked"/> <label for="rock">Rock</label> </p> <p> <input id="paper" type="checkbox" checked="checked"/> <label for="paper">Paper</label> </p> <p> <input id="scissors" type="checkbox" checked="checked"/> <label for="scissors">Scissors</label> </p> </div> <div class="controls__badges"> <h6>Badges</h6> <div id="badgesNumber"></div> </div> </div> <div class="col s12 m9 l10"> <h6>Chart</h6> <div class="radar" id="radar"></div> <div class="chart" id="chart"></div> </div> </div> </div> </div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://d3js.org/d3.v4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/20221/nouislider.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/20221/radarChart.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pocker Mortys dataviz - Script Codes CSS Codes

body { margin-top: 44px;
}
h6 { color: rgba(128, 128, 128, 0.75); font-weight: 300;
}
label { color: #666;
}
.radar { position: absolute; width: 140px; height: 140px; -webkit-transform: translate(60px, 30px); transform: translate(60px, 30px);
}
.chart { width: 100%; height: 350px; border: 1px solid rgba(128, 128, 128, 0.5); position: relative;
}
.chart__voronoi { fill: none; stroke: none; pointer-events: all;
}
.chart__voronoi:hover + circle { fill: red;
}
.chart__dot { pointer-events: none; stroke: #000; stroke-opacity: .7; fill-opacity: .7;
}
.chart__label { fill: #222; font-size: 15px; font-family: Roboto;
}
.chart__axis path,
.chart__axis line { fill: none; stroke: #ccc; shape-rendering: crispEdges; pointer-events: none;
}
.chart__axis text { fill: #666; font-weight: 300; font-size: 0.75rem;
}
.chart__mortys { position: absolute; left: 0; top: 0; bottom: 0; right: 0; pointer-events: none;
}
.chart__mortys img { max-width: 13px; position: absolute;
}
@media only screen and (min-width: 601px) { .chart__mortys img { max-width: 18px; }
}
@media only screen and (max-width: 600px) { .controls { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); position: absolute; left: 0 !important; top: 0; width: 100%; background: #fff; padding: 1.5rem 0.75rem !important; z-index: 1; opacity: 1; -webkit-transform: translate(0, -115%); transform: translate(0, -115%); -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; } .controls__type p { display: inline-block; margin: 0 1rem 0 0; } .controls__badges { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-right: 0.75rem; } .controls__badges h6 { margin-bottom: 0.75rem; } .controls__toggle { position: absolute; right: calc(5% - 0.75rem); bottom: calc(-15% + -0.75rem); -webkit-transform: translate(0, 100%) rotate(-90deg); transform: translate(0, 100%) rotate(-90deg); -webkit-transition: -webkit-transform 1s ease; transition: -webkit-transform 1s ease; transition: transform 1s ease; transition: transform 1s ease, -webkit-transform 1s ease; cursor: pointer; z-index: 2; pointer-events: all; } .controls__toggle .material-icons { position: relative; -webkit-transition: color 1s ease; transition: color 1s ease; top: 1px; left: 0.5px; } .controls--active { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .controls--active .controls__toggle { -webkit-transform: translate(0, 100%) rotate(180deg); transform: translate(0, 100%) rotate(180deg); } .controls--active .material-icons { color: #13534d; }
}
@media only screen and (min-width: 601px) { .controls { -webkit-transform: translate(0, 0) !important; transform: translate(0, 0) !important; } .controls__toggle { display: none; } .controls__type p { margin-left: 0.75rem; } .controls__badges h6 { margin-top: 1rem; margin-bottom: 0.75rem; } .controls__badges > div { margin-left: 1rem; margin-right: 0.75rem; }
}
.mortyicon-002, .mortyicon-031, .mortyicon-038, .mortyicon-044, .mortyicon-051,
.mortyicon-001, .mortyicon-003, .mortyicon-005, .mortyicon-006, .mortyicon-009,
.mortyicon-010, .mortyicon-011, .mortyicon-012, .mortyicon-013, .mortyicon-014,
.mortyicon-015, .mortyicon-016, .mortyicon-017, .mortyicon-018, .mortyicon-019,
.mortyicon-020, .mortyicon-021, .mortyicon-022, .mortyicon-023, .mortyicon-024,
.mortyicon-025, .mortyicon-026, .mortyicon-027, .mortyicon-028, .mortyicon-029,
.mortyicon-030, .mortyicon-032, .mortyicon-033, .mortyicon-034, .mortyicon-035,
.mortyicon-036, .mortyicon-037, .mortyicon-039, .mortyicon-040, .mortyicon-041,
.mortyicon-042, .mortyicon-043, .mortyicon-045, .mortyicon-046, .mortyicon-047,
.mortyicon-048, .mortyicon-049, .mortyicon-050, .mortyicon-052, .mortyicon-053,
.mortyicon-054, .mortyicon-055, .mortyicon-056, .mortyicon-057, .mortyicon-058,
.mortyicon-059, .mortyicon-060, .mortyicon-061, .mortyicon-062, .mortyicon-063,
.mortyicon-064, .mortyicon-065, .mortyicon-066, .mortyicon-067, .mortyicon-068,
.mortyicon-069, .mortyicon-070, .mortyicon-071, .mortyicon-072, .mortyicon-073,
.mortyicon-074, .mortyicon-075, .mortyicon-076, .mortyicon-077, .mortyicon-078,
.mortyicon-079, .mortyicon-080, .mortyicon-081, .mortyicon-082, .mortyicon-083,
.mortyicon-084, .mortyicon-085, .mortyicon-086, .mortyicon-087, .mortyicon-088,
.mortyicon-089, .mortyicon-090, .mortyicon-091, .mortyicon-092, .mortyicon-093,
.mortyicon-094, .mortyicon-095, .mortyicon-096, .mortyicon-097, .mortyicon-098,
.mortyicon-099, .mortyicon-100, .mortyicon-101, .mortyicon-102, .mortyicon-103,
.mortyicon-104, .mortyicon-105, .mortyicon-106, .mortyicon-107, .mortyicon-108,
.mortyicon-109, .mortyicon-110, .mortyicon-111, .mortyicon-112, .mortyicon-113,
.mortyicon-114, .mortyicon-115, .mortyicon-116, .mortyicon-117, .mortyicon-118,
.mortyicon-119, .mortyicon-120, .mortyicon-121, .mortyicon-122, .mortyicon-123,
.mortyicon-124, .mortyicon-125, .mortyicon-126, .mortyicon-127, .mortyicon-128,
.mortyicon-129, .mortyicon-130, .mortyicon-131, .mortyicon-132, .mortyicon-133,
.mortyicon-134, .mortyicon-135, .mortyicon-136, .mortyicon-137, .mortyicon-138,
.mortyicon-139, .mortyicon-140, .mortyicon-141, .mortyicon-142, .mortyicon-008,
.mortyicon-004, .mortyicon-007 { max-width: 24px; background-size: 100% 100%; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/20221/morty-spritesheet.png"); -webkit-transition: -webkit-transform 0.2s; transition: -webkit-transform 0.2s; transition: transform 0.2s; transition: transform 0.2s, -webkit-transform 0.2s;
}
.mortyicon-002 { background-position: 0 0%; background-size: 100%;
}
.mortyicon-031 { background-position: 0 0.7633%; background-size: 100%;
}
.mortyicon-038 { background-position: 0 1.5266%; background-size: 100%;
}
.mortyicon-044 { background-position: 0 2.2899%; background-size: 100%;
}
.mortyicon-051 { background-position: 0 3.0532%; background-size: 100%;
}
.mortyicon-001 { background-position: 0 3.814441%; background-size: 107.777778%;
}
.mortyicon-003 { background-position: 0 4.523388%; background-size: 107.777778%;
}
.mortyicon-005 { background-position: 0 5.232334%; background-size: 107.777778%;
}
.mortyicon-006 { background-position: 0 5.941281%; background-size: 107.777778%;
}
.mortyicon-009 { background-position: 0 6.650227%; background-size: 107.777778%;
}
.mortyicon-010 { background-position: 0 7.359174%; background-size: 107.777778%;
}
.mortyicon-011 { background-position: 0 8.068121%; background-size: 107.777778%;
}
.mortyicon-012 { background-position: 0 8.777067%; background-size: 107.777778%;
}
.mortyicon-013 { background-position: 0 9.486014%; background-size: 107.777778%;
}
.mortyicon-014 { background-position: 0 10.19496%; background-size: 107.777778%;
}
.mortyicon-015 { background-position: 0 10.903907%; background-size: 107.777778%;
}
.mortyicon-016 { background-position: 0 11.612854%; background-size: 107.777778%;
}
.mortyicon-017 { background-position: 0 12.3218%; background-size: 107.777778%;
}
.mortyicon-018 { background-position: 0 13.030747%; background-size: 107.777778%;
}
.mortyicon-019 { background-position: 0 13.739693%; background-size: 107.777778%;
}
.mortyicon-020 { background-position: 0 14.44864%; background-size: 107.777778%;
}
.mortyicon-021 { background-position: 0 15.157586%; background-size: 107.777778%;
}
.mortyicon-022 { background-position: 0 15.866533%; background-size: 107.777778%;
}
.mortyicon-023 { background-position: 0 16.57548%; background-size: 107.777778%;
}
.mortyicon-024 { background-position: 0 17.284426%; background-size: 107.777778%;
}
.mortyicon-025 { background-position: 0 17.993373%; background-size: 107.777778%;
}
.mortyicon-026 { background-position: 0 18.702319%; background-size: 107.777778%;
}
.mortyicon-027 { background-position: 0 19.411266%; background-size: 107.777778%;
}
.mortyicon-028 { background-position: 0 20.120213%; background-size: 107.777778%;
}
.mortyicon-029 { background-position: 0 20.829159%; background-size: 107.777778%;
}
.mortyicon-030 { background-position: 0 21.538106%; background-size: 107.777778%;
}
.mortyicon-032 { background-position: 0 22.247052%; background-size: 107.777778%;
}
.mortyicon-033 { background-position: 0 22.955999%; background-size: 107.777778%;
}
.mortyicon-034 { background-position: 0 23.664946%; background-size: 107.777778%;
}
.mortyicon-035 { background-position: 0 24.373892%; background-size: 107.777778%;
}
.mortyicon-036 { background-position: 0 25.082839%; background-size: 107.777778%;
}
.mortyicon-037 { background-position: 0 25.791785%; background-size: 107.777778%;
}
.mortyicon-039 { background-position: 0 26.500732%; background-size: 107.777778%;
}
.mortyicon-040 { background-position: 0 27.209679%; background-size: 107.777778%;
}
.mortyicon-041 { background-position: 0 27.918625%; background-size: 107.777778%;
}
.mortyicon-042 { background-position: 0 28.627572%; background-size: 107.777778%;
}
.mortyicon-043 { background-position: 0 29.336518%; background-size: 107.777778%;
}
.mortyicon-045 { background-position: 0 30.045465%; background-size: 107.777778%;
}
.mortyicon-046 { background-position: 0 30.754412%; background-size: 107.777778%;
}
.mortyicon-047 { background-position: 0 31.463358%; background-size: 107.777778%;
}
.mortyicon-048 { background-position: 0 32.172305%; background-size: 107.777778%;
}
.mortyicon-049 { background-position: 0 32.881251%; background-size: 107.777778%;
}
.mortyicon-050 { background-position: 0 33.590198%; background-size: 107.777778%;
}
.mortyicon-052 { background-position: 0 34.299145%; background-size: 107.777778%;
}
.mortyicon-053 { background-position: 0 35.008091%; background-size: 107.777778%;
}
.mortyicon-054 { background-position: 0 35.717038%; background-size: 107.777778%;
}
.mortyicon-055 { background-position: 0 36.425984%; background-size: 107.777778%;
}
.mortyicon-056 { background-position: 0 37.134931%; background-size: 107.777778%;
}
.mortyicon-057 { background-position: 0 37.843878%; background-size: 107.777778%;
}
.mortyicon-058 { background-position: 0 38.552824%; background-size: 107.777778%;
}
.mortyicon-059 { background-position: 0 39.261771%; background-size: 107.777778%;
}
.mortyicon-060 { background-position: 0 39.970717%; background-size: 107.777778%;
}
.mortyicon-061 { background-position: 0 40.679664%; background-size: 107.777778%;
}
.mortyicon-062 { background-position: 0 41.388611%; background-size: 107.777778%;
}
.mortyicon-063 { background-position: 0 42.097557%; background-size: 107.777778%;
}
.mortyicon-064 { background-position: 0 42.806504%; background-size: 107.777778%;
}
.mortyicon-065 { background-position: 0 43.51545%; background-size: 107.777778%;
}
.mortyicon-066 { background-position: 0 44.224397%; background-size: 107.777778%;
}
.mortyicon-067 { background-position: 0 44.933344%; background-size: 107.777778%;
}
.mortyicon-068 { background-position: 0 45.64229%; background-size: 107.777778%;
}
.mortyicon-069 { background-position: 0 46.351237%; background-size: 107.777778%;
}
.mortyicon-070 { background-position: 0 47.060183%; background-size: 107.777778%;
}
.mortyicon-071 { background-position: 0 47.76913%; background-size: 107.777778%;
}
.mortyicon-072 { background-position: 0 48.478077%; background-size: 107.777778%;
}
.mortyicon-073 { background-position: 0 49.187023%; background-size: 107.777778%;
}
.mortyicon-074 { background-position: 0 49.89597%; background-size: 107.777778%;
}
.mortyicon-075 { background-position: 0 50.604916%; background-size: 107.777778%;
}
.mortyicon-076 { background-position: 0 51.313863%; background-size: 107.777778%;
}
.mortyicon-077 { background-position: 0 52.02281%; background-size: 107.777778%;
}
.mortyicon-078 { background-position: 0 52.731756%; background-size: 107.777778%;
}
.mortyicon-079 { background-position: 0 53.440703%; background-size: 107.777778%;
}
.mortyicon-080 { background-position: 0 54.149649%; background-size: 107.777778%;
}
.mortyicon-081 { background-position: 0 54.858596%; background-size: 107.777778%;
}
.mortyicon-082 { background-position: 0 55.567543%; background-size: 107.777778%;
}
.mortyicon-083 { background-position: 0 56.276489%; background-size: 107.777778%;
}
.mortyicon-084 { background-position: 0 56.985436%; background-size: 107.777778%;
}
.mortyicon-085 { background-position: 0 57.694382%; background-size: 107.777778%;
}
.mortyicon-086 { background-position: 0 58.403329%; background-size: 107.777778%;
}
.mortyicon-087 { background-position: 0 59.112276%; background-size: 107.777778%;
}
.mortyicon-088 { background-position: 0 59.821222%; background-size: 107.777778%;
}
.mortyicon-089 { background-position: 0 60.530169%; background-size: 107.777778%;
}
.mortyicon-090 { background-position: 0 61.239115%; background-size: 107.777778%;
}
.mortyicon-091 { background-position: 0 61.948062%; background-size: 107.777778%;
}
.mortyicon-092 { background-position: 0 62.657009%; background-size: 107.777778%;
}
.mortyicon-093 { background-position: 0 63.365955%; background-size: 107.777778%;
}
.mortyicon-094 { background-position: 0 64.074902%; background-size: 107.777778%;
}
.mortyicon-095 { background-position: 0 64.783848%; background-size: 107.777778%;
}
.mortyicon-096 { background-position: 0 65.492795%; background-size: 107.777778%;
}
.mortyicon-097 { background-position: 0 66.201742%; background-size: 107.777778%;
}
.mortyicon-098 { background-position: 0 66.910688%; background-size: 107.777778%;
}
.mortyicon-099 { background-position: 0 67.619635%; background-size: 107.777778%;
}
.mortyicon-100 { background-position: 0 68.328581%; background-size: 107.777778%;
}
.mortyicon-101 { background-position: 0 69.037528%; background-size: 107.777778%;
}
.mortyicon-102 { background-position: 0 69.746475%; background-size: 107.777778%;
}
.mortyicon-103 { background-position: 0 70.455421%; background-size: 107.777778%;
}
.mortyicon-104 { background-position: 0 71.164368%; background-size: 107.777778%;
}
.mortyicon-105 { background-position: 0 71.873314%; background-size: 107.777778%;
}
.mortyicon-106 { background-position: 0 72.582261%; background-size: 107.777778%;
}
.mortyicon-107 { background-position: 0 73.291208%; background-size: 107.777778%;
}
.mortyicon-108 { background-position: 0 74.000154%; background-size: 107.777778%;
}
.mortyicon-109 { background-position: 0 74.709101%; background-size: 107.777778%;
}
.mortyicon-110 { background-position: 0 75.418047%; background-size: 107.777778%;
}
.mortyicon-111 { background-position: 0 76.126994%; background-size: 107.777778%;
}
.mortyicon-112 { background-position: 0 76.835941%; background-size: 107.777778%;
}
.mortyicon-113 { background-position: 0 77.544887%; background-size: 107.777778%;
}
.mortyicon-114 { background-position: 0 78.253834%; background-size: 107.777778%;
}
.mortyicon-115 { background-position: 0 78.96278%; background-size: 107.777778%;
}
.mortyicon-116 { background-position: 0 79.671727%; background-size: 107.777778%;
}
.mortyicon-117 { background-position: 0 80.380673%; background-size: 107.777778%;
}
.mortyicon-118 { background-position: 0 81.08962%; background-size: 107.777778%;
}
.mortyicon-119 { background-position: 0 81.798567%; background-size: 107.777778%;
}
.mortyicon-120 { background-position: 0 82.507513%; background-size: 107.777778%;
}
.mortyicon-121 { background-position: 0 83.21646%; background-size: 107.777778%;
}
.mortyicon-122 { background-position: 0 83.925406%; background-size: 107.777778%;
}
.mortyicon-123 { background-position: 0 84.634353%; background-size: 107.777778%;
}
.mortyicon-124 { background-position: 0 85.3433%; background-size: 107.777778%;
}
.mortyicon-125 { background-position: 0 86.052246%; background-size: 107.777778%;
}
.mortyicon-126 { background-position: 0 86.761193%; background-size: 107.777778%;
}
.mortyicon-127 { background-position: 0 87.470139%; background-size: 107.777778%;
}
.mortyicon-128 { background-position: 0 88.179086%; background-size: 107.777778%;
}
.mortyicon-129 { background-position: 0 88.888033%; background-size: 107.777778%;
}
.mortyicon-130 { background-position: 0 89.596979%; background-size: 107.777778%;
}
.mortyicon-131 { background-position: 0 90.305926%; background-size: 107.777778%;
}
.mortyicon-132 { background-position: 0 91.014872%; background-size: 107.777778%;
}
.mortyicon-133 { background-position: 0 91.723819%; background-size: 107.777778%;
}
.mortyicon-134 { background-position: 0 92.432766%; background-size: 107.777778%;
}
.mortyicon-135 { background-position: 0 93.141712%; background-size: 107.777778%;
}
.mortyicon-136 { background-position: 0 93.850659%; background-size: 107.777778%;
}
.mortyicon-137 { background-position: 0 94.559605%; background-size: 107.777778%;
}
.mortyicon-138 { background-position: 0 95.268552%; background-size: 107.777778%;
}
.mortyicon-139 { background-position: 0 95.977499%; background-size: 107.777778%;
}
.mortyicon-140 { background-position: 0 96.686445%; background-size: 107.777778%;
}
.mortyicon-141 { background-position: 0 97.395392%; background-size: 107.777778%;
}
.mortyicon-142 { background-position: 0 98.104338%; background-size: 107.777778%;
}
.mortyicon-008 { background-position: 0 98.676414%; background-size: 110.227273%;
}
.mortyicon-004 { background-position: 0 99.3529%; background-size: 112.790698%;
}
.mortyicon-007 { background-position: 0 100%; background-size: 112.790698%;
}

Pocker Mortys dataviz - Script Codes JS Codes

'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
console.clear();
var pokemortyDex = function () { function pokemortyDex(options) { _classCallCheck(this, pokemortyDex); try { this.sliderId = options.sliderId; this.dataURL = options.dataURL; this.controlsToggle = options.controlsToggle; this.mortySpritesheet = options.mortySpritesheet; this.chartWrapperId = options.chartWrapperId; this.filterObject = { badges: [0, 45], type: { rock: true, paper: true, scissors: true, normal: true } }; } catch (err) { return console.log('Missing options: ' + err); } } pokemortyDex.prototype.init = function init() { this.renderUI(); this.fetch(); }; pokemortyDex.prototype.createChart = function createChart() { var _this = this; var chartWrapper = document.querySelector(this.chartWrapperId); this.config = { m: { t: 20, r: 20, b: 30, l: 40 }, w: chartWrapper.offsetWidth - 20 - 40, h: chartWrapper.offsetHeight - 20 - 30, padding: 1, radius: chartWrapper.offsetWidth * 0.01 }; this.y = d3.scaleLinear().range([this.config.h, 0]); this.x = d3.scaleLinear().range([0, this.config.w]); this.radar = d3.select('#radar').append('svg').attr('width', 140).attr('height', 140).append('g'); this.svg = d3.select(this.chartWrapperId).append('svg').attr('class', 'chart__svg').attr('width', this.config.w + this.config.m.l + this.config.m.r).attr('height', this.config.h + this.config.m.t + this.config.m.b).append('g').attr('transform', 'translate(' + this.config.m.l + ',' + this.config.m.t + ')'); this.mortys = d3.select(this.chartWrapperId).append('div').attr('class', 'chart__mortys').append('div').style('transform', 'translate( ' + this.config.m.l + 'px,' + this.config.m.t + 'px)').style('width', this.config.w + 'px').style('height', this.config.h + 'px'); this.x.domain(d3.extent(this.data, function (d) { return d.Total; })); this.y.domain(d3.extent(this.data, function (d) { return d.XP; })); this.svg.append('g').attr('transform', 'translate(' + this.config.w / 2 + ', 0)').append('text').attr('class', 'chart__label').style('text-anchor', 'middle'); this.svg.append('g').attr('class', 'chart__x chart__axis').attr('transform', 'translate(0, ' + this.config.h + ')').call(d3.axisBottom(this.x)).append('text').attr('class', 'chart__label').attr('x', this.config.w).attr('y', -6).style('text-anchor', 'end').text('Total'); this.svg.append('g').attr('class', 'chart__y chart__axis').call(d3.axisLeft(this.y)).append('text').attr('class', 'chart__label').attr('transform', 'rotate(-90)').attr('y', 6).attr('dy', '.7em').style('text-anchor', 'end').text('Base XP'); this.nodes = this.svg.append('g').attr('class', 'chart__nodes'); this.updateChart(); d3.select(window).on("resize", function () { $(_this.chartWrapperId).html(''); _this.createChart(); }); }; pokemortyDex.prototype.updateChart = function updateChart() { var _this2 = this; var typeCondition = false; var t = d3.transition().duration(750); var filteredData = this.data.filter(function (d, i) { var badgeCondition = d.Badges >= _this2.filterObject.badges[0] && d.Badges <= _this2.filterObject.badges[1]; switch (d.Type) { case 'Rock': typeCondition = _this2.filterObject.type.rock; break; case 'Paper': typeCondition = _this2.filterObject.type.paper; break; case 'Scissors': typeCondition = _this2.filterObject.type.scissors; break; case 'Normal': typeCondition = _this2.filterObject.type.normal; break; default: break; } if (badgeCondition && typeCondition) { return d; } }); this.x.domain(d3.extent(filteredData, function (d) { return d.Total; })); this.y.domain(d3.extent(filteredData, function (d) { return d.XP; })); filteredData.forEach(function (d) { d.x = _this2.x(d.Total); d.y = _this2.y(d.XP); d.radius = _this2.config.radius; }); this.nodes.selectAll('*').remove(); this.mortys.selectAll('*').remove(); var radarChartOptions = { w: 100, h: 100, levels: 2, maxValue: d3.max(this.data, function (d) { return d.Total; }) / 4, roundStrokes: true, color: d3.scaleOrdinal(d3.schemeCategory20c) }; this.cells = this.nodes.selectAll('g').data(filteredData).enter().append('g'); this.simulation = d3.forceSimulation(this.data).force('x', d3.forceX(function (d) { return d.x; }).strength(1)).force('y', d3.forceY(function (d) { return d.y; }).strength(1)).force('collide', d3.forceCollide(this.config.radius * 1.5)).stop(); for (var i = 0; i < 100; ++i) { this.simulation.tick(); }var voronoiW = [-this.config.m.l, -this.config.m.t], voronoiH = [+this.config.w + this.config.m.r, this.config.h + this.config.m.t]; this.cells.data(d3.voronoi().extent([voronoiW, voronoiH]).x(function (d) { return d.x; }).y(function (d) { return d.y; }).polygons(filteredData)); this.cells.append('path').attr('class', 'chart__voronoi').attr('d', function (d) { return 'M' + d.join('L') + 'Z'; }).on('mouseenter', function (d, si) { var i = d.data['#'];i = '.mortyicon-' + (i <= 999 ? ("00" + i).slice(-3) : i); var radarData = []; d3.select(i).style('transform', 'scale(3)'); d3.select(i).style('z-index', '2'); d3.select('.chart__label').text(d.data['Name']); radarData.push([{ axis: 'ATK', value: d.data['ATK'] }, { axis: 'DEF', value: d.data['DEF'] }, { axis: 'SPD', value: d.data['SPD'] }, { axis: 'HP', value: d.data['HP'] }]); d3.select("#radar").html(''); RadarChart("#radar", radarData, radarChartOptions); }).on('mouseleave', function (d) { var i = d.data['#'];i = '.mortyicon-' + (i <= 999 ? ("00" + i).slice(-3) : i); d3.select(i).style('transform', 'scale(1)'); d3.select(i).style('z-index', '1'); }); // this.cells.append('circle').attr('class', 'chart__dot') // .attr('r', d => d.data.radius) // .attr('cx', d => d.data.x).attr('cy', d => d.data.y); this.mortys.selectAll('img').data(filteredData).enter().append('img').attr('src', this.mortySpritesheet).attr('class', function (d) { var i = d['#']; return 'mortyicon-' + (i <= 999 ? ("00" + i).slice(-3) : i); }).attr('style', function (d, i) { var l = d.x - 6, t = d.y - 7; return 'left: ' + l + 'px; top: ' + t + 'px;'; }); }; pokemortyDex.prototype.fetch = function fetch() { var _this3 = this; d3.json(this.dataURL, function (err, data) { if (err) { return console.log(err); } _this3.data = data.data; _this3.createChart(); }); }; pokemortyDex.prototype.renderUI = function renderUI() { var _this4 = this; var slider = document.querySelector(this.sliderId); var controlsToggle = $(this.controlsToggle); noUiSlider.create(slider, { start: [0, 45], connect: true, step: 1, range: { 'min': 0, 'max': 45 }, format: wNumb({ decimals: 0 }) }); controlsToggle.on('click', function (ev) { ev.currentTarget.parentNode.classList.toggle('controls--active'); }); slider.noUiSlider.on('change', function (values, handle) { _this4.updateFilterObject('badges', values); }); ['#normal', '#rock', '#paper', '#scissors'].forEach(function (id) { $(id).on('change', function (ev) { _this4.updateFilterObject(id.replace('#', ''), ev.currentTarget.checked); }); }); }; pokemortyDex.prototype.updateFilterObject = function updateFilterObject(input, values) { this.filteredData = this.data; if (this.data) { switch (input) { case 'badges': this.filterObject.badges = [+values[0], +values[1]]; break; case 'rock': case 'paper': case 'scissors': case 'normal': this.filterObject.type[input] = values; break; case 'rare': this.filterObject.rare = values; break; default: break; } } this.updateChart(); }; return pokemortyDex;
}();
var pkmydex = new pokemortyDex({ sliderId: '#badgesNumber', chartWrapperId: '#chart', controlsToggle: '#toggleControls', dataURL: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/20221/mortys.json', mortySpritesheet: ['data:image/png;base64,', 'iVBORw0KGgoAAAANSUhEUgAAAGEAAABhAQMAAAD8yF3gAAAAA1BMVEX///+', 'nxBvIAAAAAXRSTlMAQObYZgAAABRJREFUeNpjYBgFo2AUjIJRQDkAAAVOAAF3d96LAAAAAElFTkSuQmCC'].join('')
});
pkmydex.init();
Pocker Mortys dataviz - Script Codes
Pocker Mortys dataviz - Script Codes
Home Page Home
Developer Rafael Abensur
Username abensur
Uploaded September 12, 2022
Rating 3
Size 13,940 Kb
Views 36,432
Do you need developer help for Pocker Mortys dataviz?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rafael Abensur (abensur) Script Codes
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!