Skip to content

Instantly share code, notes, and snippets.

Avatar

Efrat Vilenski EfratVil

View GitHub Profile
@EfratVil
EfratVil / CIMIS_Station_125.csv
Last active May 15, 2019
Brush & Zoom line chart
View CIMIS_Station_125.csv
Date Eto Precip Sol_Rad Vap_Pres Air_Temp Rel_Hum Wind_Speed Wind_Dir Soil_Temp
1/1/2014 01:00 0 0 0 0.5 3.1 70 1.4 50 10.6
1/1/2014 02:00 0 0 0 0.5 3.2 68 1.2 51 10.4
1/1/2014 03:00 0 0 0 0.5 1.6 75 0.9 44 10.3
1/1/2014 04:00 0 0 0 0.5 1 77 1 47 10.1
1/1/2014 05:00 0 0 0 0.5 2.3 69 1.2 73 10
1/1/2014 06:00 0 0 0 0.5 0.7 75 0.9 54 9.8
1/1/2014 07:00 0 0 1 0.5 1 74 1.1 64 9.7
1/1/2014 08:00 0 0 20 0.5 1.3 73 1 48 9.6
1/1/2014 09:00 0.07 0 199 0.6 5 69 1 356 9.5
@EfratVil
EfratVil / README.md
Last active Apr 29, 2019
Scatter plot with zoom
View README.md

Scatter plot zoom of the brushed region. Double-click to zoom out.

@EfratVil
EfratVil / README.md
Last active Feb 16, 2018
Circle Gradient I
View README.md

Circle Gradient

@EfratVil
EfratVil / index.html
Last active Feb 16, 2018
Drag circles
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.active {
stroke: #000;
stroke-width: 2px;
}
</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
@EfratVil
EfratVil / index.html
Last active Jan 19, 2018
highlight.js
View index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>highlight.js</title>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/highlight.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/default.min.css" rel="stylesheet" />
<script>hljs.initHighlightingOnLoad();</script>
<style>
@EfratVil
EfratVil / index.html
Last active Jan 15, 2018
Filtering Objects
View index.html
<meta charset="utf-8">
<html>
<style>
h2 {
text-align:center;
font-weight: bold;
}
.card {
@EfratVil
EfratVil / index.html
Last active Jan 15, 2018
Transition Options
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<div style="margin-left: 50px; margin-top: 20px;">
<button id="btn1" type="button" class="btn btn-info btn-sm">Transition - Sequential</button>
<button id="btn2" type="button" class="btn btn-info btn-sm">Transition - Together</button>
@EfratVil
EfratVil / index.html
Last active Jan 15, 2018
Linear Gradient
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v4.min.js"></script>
<body>
linearGradient with html / svg <br/>
<svg width="620" height="120">
<defs>
<linearGradient id="gradient"> <!--gradientTransform="rotate(45)"-->
@EfratVil
EfratVil / index.html
Last active Jan 15, 2018
Linear Gradient Rotation
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v4.min.js"></script>
<body>
<span class="leftlabel">0</span>
<input id="range1" type="range" min="0" max="90" value="0" style="width: 300px; margin-right: 10px;" />
<span class="rightlabel">100</span> <br/><br />
@EfratVil
EfratVil / index.html
Last active Jan 15, 2018
Linear Gradient Along Line Path
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v4.min.js"></script>
<body>
<script>
var margin = 0,
width = 600 - margin,
height = 200 - margin;
You can’t perform that action at this time.