Skip to content

Instantly share code, notes, and snippets.

@mukhtyar

mukhtyar/.block

Last active January 11, 2018 12:45
Show Gist options
  • Save mukhtyar/e2e2d41f9828ea4459e0161878cf8f40 to your computer and use it in GitHub Desktop.
Save mukhtyar/e2e2d41f9828ea4459e0161878cf8f40 to your computer and use it in GitHub Desktop.
Download ZIP
D3 - Selections
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
main {
margin: 0 auto;
}
img {
width: 400px;
}
.blur {
filter: blur(3px);
}
</style>
</head>
<body>
<header>
<h1>WELCOME</h1>
</header>
<nav>
<ul>
<a href="home">
<li>Home</li>
</a>
<a href="gallery">
<li>Gallery</li>
</a>
<a href="contact">
<li>Contact</li>
</a>
</ul>
</nav>
<div id="hero">
<img src="https://images.unsplash.com/photo-1465935343323-d742334bcbda?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
</div>
<div class="main">
<div class="container">
<section>
<div class="item">
<h2>Lorem ipsum dolor</h2>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.
</p>
<time>9 August 2016</time>
</div>
<div class="item">
<h2>Lorem ipsum dolor</h2>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. </p>
<time>9 August 2016</time>
</div>
</section>
</div>
</div>
<script>
// Selects the element with an id="hero" attribute
d3.select('#hero');
// Selects all elements with CSS class primary
d3.selectAll('.item');
// Select all divs on the page
var divs1 = d3.selectAll('div');
//console.log(divs1);
// Select all divs within container
var divs2 = d3.select('.container').selectAll('div');
//console.log(divs2);
/* ATTRIBUTE - getter and setter */
// Get href attribute of first link
d3.select('a').attr('href');
//console.log(d3.select('a').attr('href'));
// Set href attribute of first link
d3.select('a').attr('href', 'http://cal-adapt.org');
//console.log(d3.select('a').attr('href'));
/* STYLE - getter and setter */
// Get text color of first link
var color = d3.select('a').style('color');
//console.log(color);
// Set first link's text color to red
//d3.select('a').style('color', 'red');
/* CLASS - getter and setter */
// Does img classList include 'blur'?
d3.select('img').classed('blur');
// Set href attribute of first link
//d3.select('img').classed('blur', true);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment