mayblue9

D3 Radar Chart

A radar chart visualizes multivariate data in a 2D chart of three or more quantitative variables represented on axes.

The project is created using AngularJS and D3.js.

Description

A simple example which uses d3.js to create a set of concentric circles according to a given array of radii.

Click on empty space to add node
Drag from node to node to add edge
Click/Select + Delete to delete node/edge
Click/Select Edge + Enter to change edge's weight
Press Ctrl to Drag node around

Showing the functionality of toggling layers in Leaflet while preserving their reference for later usage (i.e. turning the layer back on). This is useful when working with many layers in leaflet and turning opacity to 0 won't cut it because it can have negative effects when hover and click events require properly layered DOM elements.

Important takeaways:

It's important to scope your data to access it globally, or at least within your appropriate scope.
Turn off a layer by referencing its variable using the removeLayer() method.
Turn on a layer by referencing its variable using the addLayer() method.

The force graph has been the subject of my fascination in the recent couple weeks. One of the fun things about the force layout is that the positioning of each node and link is calculated at every tick, which means the normal update-transition paradigm doesn't work too well.

This was my approach to the enter-update-exit pattern in a force graph, and other then a couple bounces of the nodes, seem to work pretty decently.

This example demonstrates how to add and remove nodes and links from a force layout. The graph initially appears with three nodes A, B and C connected in a loop. Three seconds later, node B is removed, along with the links B-A and B-C. At six seconds, node B is reintroduced, restoring the original links B-A and B-C. This example uses the general update pattern for data joins.

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	body {
	font: 14px sans-serif;
	}
	.axis path, .axis line {
	fill: none;

	# -- coding: utf-8 --
	# Girvan Newman algorithmを使って空手クラブネットワークのコミュニティが分割していく様子を出力
	# Zachary's karate club(空手クラブのネットワーク)のデータ取得元URL
	# http://www-personal.umich.edu/~mejn/netdata/


	import networkx as NX
	import networkx.readwrite.gml as NRG
	import networkx.algorithms.centrality as NC
	import pylab as P

	<!DOCTYPE html>
	<html>
	<head>
	<title>Leaflet and D3 Map</title>
	<meta charset="utf-8" />
	<link
	rel="stylesheet"
	href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css"
	/>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
	<script src="http://rawgithub.com/clhenrick/Major-Studio-Two/gh-pages/map-story/html/js/pct-trail-partial.js"></script>
	<script src="http://rawgithub.com/openplans/Leaflet.AnimatedMarker/master/src/AnimatedMarker.js"></script>