Skip to content

Instantly share code, notes, and snippets.

View timelyportfolio's full-sized avatar

timelyportfolio timelyportfolio

1.1k followers · 1.2k following
View GitHub Profile
@mbostock
mbostock / .block
Last active February 4, 2023 21:57
DOM-to-Canvas using D3
license: gpl-3.0
@mbostock
mbostock / .block
Last active August 1, 2023 07:29
Hierarchical Bar Chart
license: gpl-3.0
redirect: https://observablehq.com/@d3/hierarchical-bar-chart
@mbostock
mbostock / .block
Last active February 9, 2016 00:41
Sunburst with Distortion
license: gpl-3.0
@njvack
njvack / index.html
Created October 26, 2011 16:08
Beeswarm plot with gravity and collisions
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Beeswarm plot - collision detection</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
</head>
<body>
@mbostock
mbostock / .block
Last active July 22, 2018 01:18
Transform Transitions
license: gpl-3.0
@jugglebird
jugglebird / gexf.xml
Created November 16, 2011 18:55
D3 Loading a GEXF XML file
<?xml version="1.0" encoding="utf-8"?><gexf version="1.1"
xmlns="http://www.gexf.net/1.1draft" xmlns:viz="http://www.gexf.net/
1.1draft/viz" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2001/XMLSchema-instance">
<graph defaultedgetype="directed" mode="static">
<nodes>
<node id="A" label="A" />
<node id="B" label="B" />
</nodes>
<edges>
@MoritzStefaner
MoritzStefaner / .block
Last active January 20, 2020 10:46
Force-based label placement
license: apache-2.0
@mundhradevang
mundhradevang / index.html
Created November 23, 2011 03:02 — forked from mbostock/.block
Treemap with WordWrap (D3, SVG)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
<style type="text/css">
rect {
fill: none;
stroke: #fff;
@johan
johan / dnd.js
Created December 4, 2011 22:03 — forked from johan/dnd.js
Drag and drop geo-json feature files to paint your planet!
// http://www.html5rocks.com/en/tutorials/file/dndfiles/
d3.select('svg')
.on('dragover', handleDragOver)
.on('drop', handleFileSelect)
;
function handleFileSelect() {
var event = d3.event
, files = event.dataTransfer.files // FileList object
, about = []
@sfrdmn
sfrdmn / index.html
Created December 6, 2011 09:20
D3 Mouseover Example w/ trailing infobox
<html>
<head>
<meta charset="utf-8">
<title>Mouse Over and Out with Moving Infobox</title>
<script type="text/javascript" src="https://github.com/mbostock/d3/raw/fe671a70e236710412a514fa276e59f875f3c617/d3.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<!-- I've only commented changes relevant to this mouse follow stuff -->
<!-- btw, this is what an html comment looks like -->