Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <meta charset="utf-8">
- <title>FINAŁ</title>
- <style type="text/css">
- html,body{
- width: 100%;
- height: 100%;
- margin: 0;
- }
- .container{
- width: 100%;
- height: 100%;
- background-image: url(15%20koniec.jpg);
- background-position: center;
- background-repeat: no-repeat;
- }
- text{
- font-family:Helvetica, Arial, sans-serif;
- font-size:32px;
- pointer-events:none;
- }
- #chart{
- position:absolute;
- width: 1000px;
- height: 1000px;
- top:20%;
- left:37%;
- }
- #question{
- position: absolute;
- width:400px;
- height:500px;
- top:-15%;
- left:42%;
- }
- #question h1{
- font-size: 200px;
- font-weight: bold;
- font-family: "Helvetica Neue", Helvetica, Arial;
- position: absolute;
- padding: 0;
- margin: 0;
- top:60%;
- left: 70px;
- text-align: center;
- color: white;
- -webkit-transform:translate(0,-50%);
- transform:translate(0,-50%);
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div id="chart"></div>
- <div id="question"><h1></h1></div>
- </div>
- <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
- <script type="text/javascript" charset="utf-8">
- var padding = {top:10, right:40, bottom:0, left:0},
- w = 500 - padding.left - padding.right,
- h = 500 - padding.top - padding.bottom,
- r = Math.min(w, h)/2,
- rotation = 0,
- oldrotation = 0,
- picked = 100000,
- color = d3.scale.category20();//category20c()
- //randomNumbers = getRandomNumbers();
- var data = [
- {"label":"Przysłowia", "value":1, "question":"Which word is used for specifying an HTML tag that is inside another tag?"}, //nesting
- {"label":"Matematyka", "value":1, "question":"Which side of the box is the third number in: margin:1px 1px 1px 1px; ?"}, //bottom
- {"label":"Sport", "value":1, "question":"What are the fonts that don't have serifs at the ends of letters called?"}, //sans-serif
- {"label":"Motoryzacja", "value":1, "question":"In CSS selectors, what character prefix should one use to specify a class?"}, //period
- {"label":"Muzyka", "value":1, "question":"In CSS selectors, what character prefix should one use to specify a class?"}, //period
- {"label":"Geografia", "value":1, "question":"In CSS selectors, what character prefix should one use to specify a class?"}, //period
- {"label":"Filmy", "value":1, "question":"In CSS selectors, what character prefix should one use to specify a class?"}, //period
- {"label":"Historia", "value":1, "question":"In CSS selectors, what character prefix should one use to specify a class?"}, //period
- ];
- var svg = d3.select('#chart')
- .append("svg")
- .data([data])
- .attr("width", w + padding.left + padding.right)
- .attr("height", h + padding.top + padding.bottom);
- var container = svg.append("g")
- .attr("class", "chartholder")
- .attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")");
- var vis = container
- .append("g");
- var pie = d3.layout.pie().sort(null).value(function(d){return 1;});
- // declare an arc generator function
- var arc = d3.svg.arc().outerRadius(r);
- // select paths, use arc generator to draw
- var arcs = vis.selectAll("g.slice")
- .data(pie)
- .enter()
- .append("g")
- .attr("class", "slice");
- arcs.append("path")
- .attr("fill", function(d, i){ return color(i); })
- .attr("d", function (d) { return arc(d); });
- // add the text
- arcs.append("text").attr("transform", function(d){
- d.innerRadius = 0;
- d.outerRadius = r;
- d.angle = (d.startAngle + d.endAngle)/2;
- return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius -10) +")";
- })
- .attr("text-anchor", "end")
- .text( function(d, i) {
- return data[i].label;
- });
- container.on("click", spin);
- function spin(d){
- var ps = 360/data.length,
- pieslice = Math.round(1440/data.length),
- rng = Math.floor((Math.random() * 1440) + 360);
- rotation = (Math.round(rng / ps) * ps);
- picked = Math.round(data.length - (rotation % 360)/ps);
- picked = picked >= data.length ? (picked % data.length) : picked;
- rotation += 90 - Math.round(ps/2);
- vis.transition()
- .duration(3000)
- .attrTween("transform", rotTween)
- .each("end", function(){
- //mark question as seen
- /* d3.select(".slice:nth-child(" + (picked + 1) + ") path")
- .attr("fill", "#111");*/
- //populate question
- d3.select("#question h1")
- .text(data[picked].label);
- oldrotation = rotation;
- });
- }
- //make arrow
- svg.append("g")
- .attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h/2)+padding.top) + ")")
- .append("path")
- .attr("d", "M-" + (r*.30) + ",0L0," + (r*.10) + "L0,-" + (r*.05) + "Z")
- .style({"fill":"white"});
- //draw spin circle
- container.append("circle")
- .attr("cx", 0)
- .attr("cy", 0)
- .attr("r", 10)
- .style({"fill":"white","cursor":"pointer"});
- //spin text
- /* container.append("text")
- .attr("x", 0)
- .attr("y", 15)
- .attr("text-anchor", "middle")
- .text("SPIN")
- .style({"font-weight":"bold", "font-size":"30px"});*/
- function rotTween(to) {
- var i = d3.interpolate(oldrotation % 360, rotation);
- return function(t) {
- return "rotate(" + i(t) + ")";
- };
- }
- function getRandomNumbers(){
- var array = new Uint16Array(1000);
- var scale = d3.scale.linear().range([360, 1440]).domain([0, 100000]);
- if(window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function"){
- window.crypto.getRandomValues(array);
- console.log("works");
- } else {
- //no support for crypto, get crappy random numbers
- for(var i=0; i < 1000; i++){
- array[i] = Math.floor(Math.random() * 100000) + 1;
- }
- }
- return array;
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement