Responsive DOM elements distribution with D3 and Scales

Developer
Fabio Biondi
Size
3,323 Kb
Views
30,360
  1. Responsive DOM elements distribution with D3 and Scales Previews
  2. Responsive DOM elements distribution with D3 and Scales HTML Codes
  3. Responsive DOM elements distribution with D3 and Scales CSS Codes
  4. Responsive DOM elements distribution with D3 and Scales JS Codes

How do I make an responsive dom elements distribution with d3 and scales?

Sort and dispose users by age. What is a responsive dom elements distribution with d3 and scales? How do you make a responsive dom elements distribution with d3 and scales? This script and codes were developed by Fabio Biondi on 13 October 2022, Thursday.

Responsive DOM elements distribution with D3 and Scales Previews
IQ Test

Responsive DOM elements distribution with D3 and Scales - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive DOM elements distribution with D3 and Scales</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
<h2 class="centered">Responsive DOM elements distribution with D3 Scales</h2>
<h4 class="centered">Sort and dispose users by age with different scales</h4>
<div class="container"></div>
<div class="menu centered"> <button class="btn" onclick="render(scaleLinear)">Linear Scale</button> <button class="btn" onclick="render(scaleLog)">Logarithm Scale</button> <button class="btn" onclick="render(scalePow)">Pow Scale</button> <button class="btn zero" onclick="toggle()">Base To Zero <span></span></button>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive DOM elements distribution with D3 and Scales - Script Codes CSS Codes

body { margin: 0; overflow-x: hidden; font-family: 'Open Sans', sans-serif;
}
.menu { position: absolute; width: 100%; bottom: 30px;
}
.centered { text-align:center
}
.container { width: 90%; height: 48px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: #C7F277; position: absolute; z-index: 999;
}
.group { line-height: 200px; height: 200px;
}
.circle-mask { position: absolute; color: #5A840D; font-family: Arial; font-size: 14px; -webkit-border-radius: 50em; -moz-border-radius: 50em; border-radius: 50em; cursor: pointer;
}
.tooltip { position: absolute; z-index: 10000; visibility: hidden; background-color: rgba(0,0,0,0.1); padding: 20px;
}

Responsive DOM elements distribution with D3 and Scales - Script Codes JS Codes

var currentScale, zeroBased = false;
// http://uifaces.com/utom
var data = [ {"name": "Fabio", "age": 37, "pic": "https://s3.amazonaws.com/uifaces/faces/twitter/cemshid/48.jpg"}, {"name": "Lorenzo", "age": 10, "pic": "https://s3.amazonaws.com/uifaces/faces/twitter/utom/48.jpg"}, {"name": "Lisa", "age": 34, "pic": "https://s3.amazonaws.com/uifaces/faces/twitter/uxceo/48.jpg"}, {"name": "Matteo", "age": 25, "pic": "https://s3.amazonaws.com/uifaces/faces/twitter/chadengle/48.jpg"}, {"name": "A Grandmother", "age": 95, "pic": "https://s3.amazonaws.com/uifaces/faces/twitter/teclaro/48.jpg"}, {"name": "Leonardo", "age": 20, "pic": "https://s3.amazonaws.com/uifaces/faces/twitter/joshaustin/48.jpg"}, {"name": "Grandmother", "age": 67, "pic": "https://s3.amazonaws.com/uifaces/faces/twitter/megdraws/48.jpg"}, {"name": "Grandfather", "age": 75, "pic": "https://s3.amazonaws.com/uifaces/faces/twitter/aaronkwhite/48.jpg"}, {"name": "Uncle", "age": 48, "pic": "https://s3.amazonaws.com/uifaces/faces/twitter/robergd/48.jpg"}
];
var max = d3.max(data, function(d) { return d.age; }), start = d3.min(data, function(d) { return d.age; }), width = parseInt(d3.select(".container").style("width"));
// SCALE: Linear
var scaleLinear=d3.scale.linear().domain([start,max]).range([0, width]);
// SCALE: Log
var scaleLog = d3.scale.log().domain([start,max]).rangeRound([0, width]);
// SCALE: Pow
var scalePow = d3.scale.pow().exponent(2).domain([start,max]).rangeRound([0, width]);
// Group for images
var group = d3.select('.container').append("div").classed("group", true);
// Tooltip
var tooltip = d3.select("body")
.append("h3")
.classed("tooltip", true);
// Render data
function render(scale) { currentScale = scale; // Update the range of the scale in order to support a new width (useful for resize) scale.range([0, width]); if (zeroBased) { scale.domain([1,max]); } else { scale.domain([start,max]); } // Enter group.selectAll("div .circle-mask") .data(data) .enter().append("div") .append("img") .attr("src", function(d) { return d.pic;}) .classed("circle-mask", true) // TOOLTIP STUFF .on("mouseover", function(d){ tooltip.html(d.name + " <br> " + d.age + " years old"); return tooltip.style("visibility", "visible"); }) .on("mousemove", function(){ offset = (d3.event.x > width/3) ? 100 : 10; return tooltip.style("top", (event.pageY-10)+"px") .style("left",(event.pageX-offset)+"px"); }) .on("mouseout", function(){ return tooltip.style("visibility", "hidden"); }); // Update group.selectAll("div .circle-mask") .data(data) .transition().ease("cubic-in-out") .duration(500) .delay(function (d, i) { return (i * 50); }) .style('margin-left', function (d) { return ( d3.round(scale(d.age) -25) + "px" ); // Round });
}
// Resize event handler
function toggle() { zeroBased = (zeroBased) ? false : true; d3.select(".btn.zero > span").text(" - " + zeroBased); render(currentScale);
}
// Resize event handler
function resize() { // Update the width width = parseInt(d3.select(".container").style("width")); render(currentScale);
}
// Init
render(scaleLinear); // render the first scale
resize(); // Called in order to apply the right properties at the beginning
// Listener Resize Event
d3.select(window).on('resize', resize);
Responsive DOM elements distribution with D3 and Scales - Script Codes
Responsive DOM elements distribution with D3 and Scales - Script Codes
Home Page Home
Developer Fabio Biondi
Username fabiobiondi
Uploaded October 13, 2022
Rating 3
Size 3,323 Kb
Views 30,360
Do you need developer help for Responsive DOM elements distribution with D3 and Scales?

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!

Fabio Biondi (fabiobiondi) Script Codes
Name
D3 Pack Layout with transitions and tooltips
AngularJS 1.2.x - FullScreen Directive
Realtime todo-list in AngularJS and Firebase in 20 lines
AngularJS - Day 1 - Boilerplate
FlexBox - Grid 2x2
AngularJS Directive - YouTube DATA API example
AngularJS Form Validation
D3.js Multi-Foci Force layout animated example
FlexBox - Grid 2 rows with different columns
Resizable directive in AngularJS and jQueryUI
Create amazing Facebook ads 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!