Skip to content

Instantly share code, notes, and snippets.

View lvngd's full-sized avatar

Christina Levengood lvngd

32 followers · 4 following
View GitHub Profile
@lvngd
lvngd / gist:7e4c9acdda060e32e5b6d7621f77179a
Created February 26, 2021 18:33
var svg = d3.select("#chart1")
.append('div')
.classed('svg-container', true)
.append('svg')
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", `0 0 ${width} ${height}`)
.classed('svg-content-responsive', true)
.style("background-color", svgBackgroundColor)
.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);
@lvngd
lvngd / bar_chart_d3v6.html
Created February 22, 2021 01:04
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
@lvngd
lvngd / barchart.html
Last active February 19, 2021 20:05
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
@lvngd
lvngd / rectCollide.js
Created February 3, 2021 19:20
Rectangular collision detection in D3 force layouts. Blog post: https://lvngd.com/blog/rectangular-collision-detection-d3-force-layouts
function rectCollide() {
var nodes,sizes,masses;
var strength = 1;
var iterations = 1;
var nodeCenterX;
var nodeMass;
var nodeCenterY;
function force() {
@lvngd
lvngd / d3_pictogram_demo_circles.html
Created November 20, 2020 17:33
How to build a pictogram grid in D3.js. Demo with SVG circles.
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="http://d3js.org/d3.v4.js"></script>
</head>
<body>
<div id='grid-container'>
<div id='grid-chart'></div>
@lvngd
lvngd / d3_pictogram_demo.html
Created November 20, 2020 17:32
How to build a pictogram grid n D3.js. Demo with Twitter icons.
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="http://d3js.org/d3.v4.js"></script>
</head>
<body>
<div id='grid-container'>
<div id='grid-chart'></div>
@lvngd
lvngd / flood_fill_recursive.py
Created October 11, 2020 17:23
import random
m =[[2,3,3,3,3,3,4,4,4,4,4,4],
[2,3,3,3,3,3,4,4,4,4,4,4],
[3,3,3,1,3,3,4,1,4,4,0,4],
[3,3,1,1,1,3,1,1,1,4,4,4],
[3,1,1,1,1,1,1,1,1,1,4,4],
[3,1,1,0,0,0,0,0,1,1,4,4],
[3,1,1,0,0,0,0,0,1,1,4,4],
[2,1,1,1,1,0,0,0,1,1,2,2],
@lvngd
lvngd / flood_fill.py
Created October 11, 2020 16:16
import random
from PIL import Image
"""
Implements the flood fill algorithm in Python with depth-first search.
Inputs:
-image file
-new image file to write the new image to
-threshold for the color matching
@lvngd
lvngd / tgif.html
Created September 14, 2020 00:18
D3.js code for https://www.instagram.com/p/CE_4mWmgnpJ/
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="http://d3js.org/d3.v4.js"></script>
<link href="https://fonts.googleapis.com/css?family=Kanit:400,700&display=swap" rel="stylesheet">
</head>
<body>
<div id='tgif-container'>
<div id="tgif-chart"></div>
@lvngd
lvngd / d3_arc_diagram.html
Created September 3, 2020 17:57
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<script src="http://d3js.org/d3.v4.js"></script>
<link href="https://fonts.googleapis.com/css?family=Assistant&display=swap" rel="stylesheet">
</head>
<body>
<div id="chart"></div>