mayblue9

chartFactory

Based on D3.JS and Dimple, ChartFactory provide the ability to build quickly D3.JS charts without coding any lines of javascript. Just define your dashboard in a JSON and voila !

charts: [
        {id:'chart1',
         width:800,height:250,

xAxis:{type:'Category',field: "Month",orderRule:'Date'},

This is a D3.js Heatmap example showing how the highest sun position of the day (which directly correlates with average temperature) changes over the year depending on the latitude of the place. The actual temperature chart would be shifted to the right a bit beacuse of thermal lag.

The data for the chart is calculated using SunCalc.

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.

source	target	weight
1	3	5
1	8	3
1	9	3
1	12	3
1	15	2
1	23	3
1	26	2
1	37	2
1	46	2

A redesign of the radar chart function that was created by alangrafu, used in my blog on Making the D3 Radar Chart look a bit better

An even newer version created 2 years later can be found here

	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>


	.pico{
	fill:blue;
	height:100px;
	}

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<script src="https://raw.github.com/timrwood/moment/1.6.0/min/moment.min.js"></script>

	<style type="text/css">
	#chart-mini {

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>D3.js Bar Chart</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body {
	font-family: dotum;
	font-size: 11px;

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>D3.js Bar Chart</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body {
	font-family: dotum;
	font-size: 11px;

	d3.layout.orbit = function() {
	var currentTickStep = 0;
	var orbitNodes;
	var orbitSize = [1,1];
	var nestedNodes;
	var flattenedNodes = [];
	var tickRadianStep = 0.004363323129985824;
	var orbitDispatch = d3.dispatch('tick');
	var tickInterval;
	var orbitalRings = [];