Skip to content

Instantly share code, notes, and snippets.

@susielu
susielu / README.md
Created March 13, 2014 10:59
Gephi + d3.js. Fixed network, dynamic labels.

This example creates a fixed network graph with dynamic labels using d3.js. The network layout and placement of the nodes and edges was calculated in Gephi and then exported as the graph.json file.

This was inspired from these gists by Mike Bostock: Force-Directed Graph, Multi-Foci Force Layout

@susielu
susielu / index.html
Last active October 13, 2015 06:48
Basic block template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'>
<style>
body{
background-color: whitesmoke;
}
@susielu
susielu / README.md
Last active October 10, 2023 14:26
Radar Plot Annual Temperature

Radar Plot Example

In the example we're looking at historical weather data for San Francisco provided by intellicast.com.

@susielu
susielu / README.md
Last active October 10, 2023 14:25
Annual Temp - New York 2015

Weather Plot - New York 2015

In the example we're looking at historical weather data for New York provided by intellicast.com and wunderground.com. Inspired by weather-radicals.com.

This example uses scales to roll your own radial projection by mapping out the x, y, and r positions. If you are creating a line or an area you can use d3's convenience functions d3.svg.line.radial and d3.svg.area.radial but this is a method you can use if you want to use different graphical elements in a circular layout.

@susielu
susielu / README.md
Last active March 19, 2024 07:45
Circle Pack Labels

Circle Pack Labels

A technique to hack the current d3.layout.pack to add labels by adding a label node into the circle pack data before it is processed. By using the sizes of the children, you add a node to your nested data and create a space using the pack algorithm for the label. You will need to do some filtering to display the labels differently from other nodes at that level, but feel free to use this example as a guide.

I am planning on looking at the d3 code to see how easy it would be to make a build in label layer for this layout. But for now you can follow along with this block if you need circle pack labels today!

Really fun dataset on flight delays that I plan on investigating further: Airline on-time performance data provided by the Department of Transportation's Bureau of Transportation Statistics

Before

@susielu
susielu / README.md
Last active September 30, 2016 01:01
Datasets

Datasets

@susielu
susielu / README.md
Last active October 10, 2023 14:22
Overlapping Bump Chart

Overlapping Bump Chart

Playing around with the idea of a bump chart comparison with two overlapping areas. Based on Farmers Markets data from data.gov.

Another iteration with step interpolation instead of cardinal.

Alt text

@susielu
susielu / index.html
Last active September 19, 2016 21:11
Overlapping Dimensions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'>
<style>
body{
background-color: whitesmoke;
}
@susielu
susielu / README.md
Last active October 10, 2023 14:24
K-Means Centroid Deviation

K-Means Centroid Deviation

Added all of the Farmers' Markets data into the kMeans Library by @emilbayes, thank you!

Exploring the idea of using the areas around the centroids to exaggerate that cluster when it deviates from the rest of the clusters. This originates from the question "Which features in each cluster differentiate it from the rest?"