Skip to content

Instantly share code, notes, and snippets.

View tamascsaba's full-sized avatar

Csaba Tamás tamascsaba

View GitHub Profile
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="chart"></div>
// Use the axis in the initialize method of your BarChart, like this:
d3.chart('BarChart', {
initialize: function() {
...
chart.xAxis = this.base.select('g').append('g').chart('xAxis', {parent: this});
this.attach('axis', chart.xAxis);
}
d3.chart('BaseChart').extend('LineChart', {
initialize: function () {
var chart = this
var lines = chart.base.append('g')
.classed('lines', true)
var line = d3.svg.line()
chart.xScale = d3.time.scale()
function getter(attr, scale) {
return function(d) {
return scale ? scale(d[attr]) : d[attr]
}
}
var defaults = {
width: 560,
height: 250,
x: 'x',
(function() {
"use strict";
d3.json("bullets.json", function(error, data) {
var myChart = d3.select("body").chart("Bullets", {
seriesCount: data.length
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
var LineChart = d3.chart("Line", {
initialize: function() {
var path = this.base.append("path")
.classed("line", true);
var x = this.x = d3.time.scale()
.range([0, width]);
var y = this.y = d3.scale.linear()
.range([height, 0]);
var line = d3.svg.line()
.x(function(d) { return x(d.date); })

Valid Module Definition Formats

  • ES6
    • with dependencies
      • export default + assignment expression
      • export + declaration
    • without dependencies
      • export default + assignment expression
      • export + declaration
  • Common JS
d3.chart('BaseChart').extend('GroupedBarChart', {
initialize : function() {
var chart = this;
chart.margin = {top: 40, right: 20, bottom: 40, left: 60};
chart.xScale = d3.scale.ordinal().rangeRoundBands([0, chart.width()], 0.1);
chart.x1Scale = d3.scale.ordinal();
chart.yScale = d3.scale.linear().range([chart.height(), 0]);
chart.color = d3.scale.category10();
chart.duration = 500;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,