Skip to content

Instantly share code, notes, and snippets.

View JulienAssouline's full-sized avatar

Julien Assouline JulienAssouline

23 followers · 12 following
View GitHub Profile
@JulienAssouline
JulienAssouline / index.html
Created November 20, 2017 15:59
A simple choropleth map
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Loading GeoJSON data and generating SVG paths</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
/* No style rules here yet */
body,html{
margin: 0;
@JulienAssouline
JulienAssouline / index.html
Created February 11, 2018 21:41
Canvas grid exercise
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>d3 and canvas</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<style type="text/css">
@JulienAssouline
JulienAssouline / index.html
Last active March 18, 2020 06:24
World tour d3 v4
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.country {
fill: #b8b8b8;
stroke: #fff;
stroke-width: .5px;
stroke-linejoin: round;
}
@JulienAssouline
JulienAssouline / index.html
Created February 8, 2019 17:27
Responsive map method 2 (viewBox)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
<style type="text/css">
/* No style rules here yet */
body,html{
@JulienAssouline
JulienAssouline / index.html
Created February 8, 2019 17:23
responsive map method 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
<style type="text/css">
/* No style rules here yet */
body,html{
@JulienAssouline
JulienAssouline / index.html
Last active November 15, 2018 18:12
regl barcode plot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://npmcdn.com/regl@1.3.0/dist/regl.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
/* No style rules here yet */
body,html{
margin: 0;
@JulienAssouline
JulienAssouline / df_example.csv
Last active November 12, 2018 16:09
Line chart with tooltip
Date randNumCol something
0 August 2018 7 something1
1 August 2018 31 something2
2 August 2018 18 something3
3 August 2018 6 something4
4 August 2018 1 something5
5 August 2018 12 something6
6 August 2018 23 something7
7 August 2018 2 something8
8 August 2018 8 something9
@JulienAssouline
JulienAssouline / example_data.csv
Created July 29, 2018 08:19
circle packing slider transition
Award Year Theme Funding Org:Name Recipient Org:Name Amount Awarded
606 2003 Sports Sport England Groundwork Wakefield 1667.0
607 2003 Sports Sport England Sandwell Metropolitan Borough Council 24572.0
608 2003 Sports Sport England South Yorkshire Sports Partner 63686.0
609 2003 Sports Sport England West Yorkshire Sport 67000.0
4495 2004 Sports Sport England Birmingham City Council 242452.0
4496 2004 Sports Sport England Cornwall Sports Partnership 317257.0
4497 2004 Sports Sport England Crigglestone All Blacks ARLFC 10000.0
4498 2004 Sports Sport England Draycott and Long Eaton Table Tennis Club 471589.0
4499 2004 Sports Sport England Greater Warwickshire Sport 145440.0
@JulienAssouline
JulienAssouline / index.html
Last active March 17, 2018 20:54
Waffle Chart
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<style type="text/css">
div.tooltip {
position: absolute;
@JulienAssouline
JulienAssouline / index.html
Last active March 15, 2018 14:37
transitioning with time
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Loading TopoJSON data and generating SVG paths</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<style type="text/css">
body,html{
margin: 0;