Skip to content

Instantly share code, notes, and snippets.

@EfratVil
EfratVil / README.md
Last active September 16, 2023 02:37
V4 simple network graph
@EfratVil
EfratVil / README.md
Last active May 22, 2023 21:55
Scatter plot with zoom

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

@EfratVil
EfratVil / index.html
Last active July 16, 2022 11:06
Linear Gradient Along Line Path
<!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;
@EfratVil
EfratVil / CIMIS_Station_125.csv
Last active May 15, 2019 17:28
Brush & Zoom line chart
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 February 16, 2018 09:47
Circle Gradient I

Circle Gradient

@EfratVil
EfratVil / index.html
Last active February 16, 2018 09:44
Drag circles
<!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 January 19, 2018 14:06
highlight.js
<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 January 15, 2018 08:11
Filtering Objects
<meta charset="utf-8">
<html>
<style>
h2 {
text-align:center;
font-weight: bold;
}
.card {
@EfratVil
EfratVil / index.html
Last active January 15, 2018 08:09
Transition Options
<!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 January 15, 2018 08:07
Linear Gradient
<!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)"-->