Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
MUR Drupal
d3-library
Commits
c9629d47
Commit
c9629d47
authored
Dec 19, 2012
by
Mike Bostock
Browse files
Remove calendar examples.
Replaced by <
http://bl.ocks.org/4063318
>.
parent
96f1be94
Changes
6
Expand all
Hide whitespace changes
Inline
Side-by-side
examples/calendar/calendar.css
deleted
100644 → 0
View file @
96f1be94
#chart
{
font
:
10px
sans-serif
;
shape-rendering
:
crispEdges
;
}
.day
{
fill
:
#fff
;
stroke
:
#ccc
;
}
.month
{
fill
:
none
;
stroke
:
#000
;
stroke-width
:
2px
;
}
examples/calendar/dji-area.html
deleted
100644 → 0
View file @
96f1be94
<!DOCTYPE html>
<meta
charset=
"utf-8"
>
<title>
DJI
</title>
<style>
body
{
font
:
10px
sans-serif
;
}
rect
{
fill
:
#ddd
;
}
path
.area
{
fill
:
#000
;
fill-opacity
:
.75
;
}
.axis
,
.grid
{
shape-rendering
:
crispEdges
;
}
.grid
line
{
stroke
:
#fff
;
}
.grid
line
.minor
{
stroke-opacity
:
.5
;
}
.grid
text
{
display
:
none
;
}
.axis
line
{
stroke
:
#000
;
}
.grid
path
,
.axis
path
{
display
:
none
;
}
</style>
<body>
<script
src=
"../../d3.js"
></script>
<script>
var
margin
=
{
top
:
10
,
right
:
50
,
bottom
:
20
,
left
:
10
},
width
=
960
-
margin
.
right
-
margin
.
left
,
height
=
500
-
margin
.
top
-
margin
.
bottom
,
parse
=
d3
.
time
.
format
(
"
%Y-%m-%d
"
).
parse
;
// Scales. Note the inverted range for the y-scale: bigger is up!
var
x
=
d3
.
time
.
scale
()
.
range
([
20
,
width
-
20
]);
var
y
=
d3
.
scale
.
linear
()
.
range
([
height
-
20
,
20
]);
// Axes.
var
xAxis
=
d3
.
svg
.
axis
().
scale
(
x
).
orient
(
"
bottom
"
),
yAxis
=
d3
.
svg
.
axis
().
scale
(
y
).
orient
(
"
right
"
);
// An area generator.
var
area
=
d3
.
svg
.
area
()
.
x
(
function
(
d
)
{
return
x
(
d
.
Date
);
})
.
y0
(
y
(
0
))
.
y1
(
function
(
d
)
{
return
y
(
d
.
Close
);
});
var
svg
=
d3
.
select
(
"
body
"
).
append
(
"
svg
"
)
.
attr
(
"
width
"
,
width
+
margin
.
right
+
margin
.
left
)
.
attr
(
"
height
"
,
height
+
margin
.
top
+
margin
.
bottom
)
.
append
(
"
g
"
)
.
attr
(
"
transform
"
,
"
translate(
"
+
margin
.
left
+
"
,
"
+
margin
.
top
+
"
)
"
);
svg
.
append
(
"
rect
"
)
.
attr
(
"
width
"
,
width
)
.
attr
(
"
height
"
,
height
);
d3
.
csv
(
"
dji.csv
"
,
function
(
error
,
data
)
{
// Parse dates and numbers.
data
.
reverse
().
forEach
(
function
(
d
)
{
d
.
Date
=
parse
(
d
.
Date
);
d
.
Close
=
+
d
.
Close
;
});
// Compute the minimum and maximum date, and the maximum price.
x
.
domain
([
data
[
0
].
Date
,
data
[
data
.
length
-
1
].
Date
]);
y
.
domain
([
0
,
d3
.
max
(
data
,
function
(
d
)
{
return
d
.
Close
;
})]);
svg
.
append
(
"
g
"
)
.
attr
(
"
class
"
,
"
x grid
"
)
.
attr
(
"
transform
"
,
"
translate(0,
"
+
height
+
"
)
"
)
.
call
(
xAxis
.
tickSubdivide
(
1
).
tickSize
(
-
height
));
svg
.
append
(
"
g
"
)
.
attr
(
"
class
"
,
"
y grid
"
)
.
attr
(
"
transform
"
,
"
translate(
"
+
width
+
"
,0)
"
)
.
call
(
yAxis
.
tickSubdivide
(
1
).
tickSize
(
-
width
));
svg
.
append
(
"
g
"
)
.
attr
(
"
class
"
,
"
x axis
"
)
.
attr
(
"
transform
"
,
"
translate(0,
"
+
height
+
"
)
"
)
.
call
(
xAxis
.
tickSubdivide
(
0
).
tickSize
(
6
));
svg
.
append
(
"
g
"
)
.
attr
(
"
class
"
,
"
y axis
"
)
.
attr
(
"
transform
"
,
"
translate(
"
+
width
+
"
,0)
"
)
.
call
(
yAxis
.
tickSubdivide
(
0
).
tickSize
(
6
));
svg
.
append
(
"
path
"
)
.
attr
(
"
class
"
,
"
area
"
)
.
attr
(
"
d
"
,
area
(
data
));
});
</script>
examples/calendar/dji.csv
deleted
100644 → 0
View file @
96f1be94
This diff is collapsed.
Click to expand it.
examples/calendar/dji.html
deleted
100644 → 0
View file @
96f1be94
<!DOCTYPE html>
<meta
charset=
"utf-8"
>
<title>
DJI
</title>
<style>
@import
url(../../lib/colorbrewer/colorbrewer.css)
;
body
{
font
:
10px
sans-serif
;
shape-rendering
:
crispEdges
;
}
.day
{
fill
:
#fff
;
stroke
:
#ccc
;
}
.month
{
fill
:
none
;
stroke
:
#000
;
stroke-width
:
2px
;
}
</style>
<body>
<script
src=
"../../d3.js"
></script>
<script>
var
margin
=
{
top
:
19
,
right
:
20
,
bottom
:
20
,
left
:
19
},
width
=
960
-
margin
.
right
-
margin
.
left
,
// width
height
=
136
-
margin
.
top
-
margin
.
bottom
,
// height
cellSize
=
17
;
// cell size
var
day
=
d3
.
time
.
format
(
"
%w
"
),
week
=
d3
.
time
.
format
(
"
%U
"
),
percent
=
d3
.
format
(
"
.1%
"
),
format
=
d3
.
time
.
format
(
"
%Y-%m-%d
"
);
var
color
=
d3
.
scale
.
quantize
()
.
domain
([
-
.
05
,
.
05
])
.
range
(
d3
.
range
(
9
));
var
svg
=
d3
.
select
(
"
body
"
).
selectAll
(
"
svg
"
)
.
data
(
d3
.
range
(
1990
,
2011
))
.
enter
().
append
(
"
svg
"
)
.
attr
(
"
width
"
,
width
+
margin
.
right
+
margin
.
left
)
.
attr
(
"
height
"
,
height
+
margin
.
top
+
margin
.
bottom
)
.
attr
(
"
class
"
,
"
RdYlGn
"
)
.
append
(
"
g
"
)
.
attr
(
"
transform
"
,
"
translate(
"
+
(
margin
.
left
+
(
width
-
cellSize
*
53
)
/
2
)
+
"
,
"
+
(
margin
.
top
+
(
height
-
cellSize
*
7
)
/
2
)
+
"
)
"
);
svg
.
append
(
"
text
"
)
.
attr
(
"
transform
"
,
"
translate(-6,
"
+
cellSize
*
3.5
+
"
)rotate(-90)
"
)
.
attr
(
"
text-anchor
"
,
"
middle
"
)
.
text
(
String
);
var
rect
=
svg
.
selectAll
(
"
rect.day
"
)
.
data
(
function
(
d
)
{
return
d3
.
time
.
days
(
new
Date
(
d
,
0
,
1
),
new
Date
(
d
+
1
,
0
,
1
));
})
.
enter
().
append
(
"
rect
"
)
.
attr
(
"
class
"
,
"
day
"
)
.
attr
(
"
width
"
,
cellSize
)
.
attr
(
"
height
"
,
cellSize
)
.
attr
(
"
x
"
,
function
(
d
)
{
return
week
(
d
)
*
cellSize
;
})
.
attr
(
"
y
"
,
function
(
d
)
{
return
day
(
d
)
*
cellSize
;
})
.
datum
(
format
);
rect
.
append
(
"
title
"
)
.
text
(
function
(
d
)
{
return
d
;
});
svg
.
selectAll
(
"
path.month
"
)
.
data
(
function
(
d
)
{
return
d3
.
time
.
months
(
new
Date
(
d
,
0
,
1
),
new
Date
(
d
+
1
,
0
,
1
));
})
.
enter
().
append
(
"
path
"
)
.
attr
(
"
class
"
,
"
month
"
)
.
attr
(
"
d
"
,
monthPath
);
d3
.
csv
(
"
dji.csv
"
,
function
(
error
,
csv
)
{
var
data
=
d3
.
nest
()
.
key
(
function
(
d
)
{
return
d
.
Date
;
})
.
rollup
(
function
(
d
)
{
return
(
d
[
0
].
Close
-
d
[
0
].
Open
)
/
d
[
0
].
Open
;
})
.
map
(
csv
);
rect
.
filter
(
function
(
d
)
{
return
d
in
data
;
})
.
attr
(
"
class
"
,
function
(
d
)
{
return
"
day q
"
+
color
(
data
[
d
])
+
"
-9
"
;
})
.
select
(
"
title
"
)
.
text
(
function
(
d
)
{
return
d
+
"
:
"
+
percent
(
data
[
d
]);
});
});
function
monthPath
(
t0
)
{
var
t1
=
new
Date
(
t0
.
getFullYear
(),
t0
.
getMonth
()
+
1
,
0
),
d0
=
+
day
(
t0
),
w0
=
+
week
(
t0
),
d1
=
+
day
(
t1
),
w1
=
+
week
(
t1
);
return
"
M
"
+
(
w0
+
1
)
*
cellSize
+
"
,
"
+
d0
*
cellSize
+
"
H
"
+
w0
*
cellSize
+
"
V
"
+
7
*
cellSize
+
"
H
"
+
w1
*
cellSize
+
"
V
"
+
(
d1
+
1
)
*
cellSize
+
"
H
"
+
(
w1
+
1
)
*
cellSize
+
"
V
"
+
0
+
"
H
"
+
(
w0
+
1
)
*
cellSize
+
"
Z
"
;
}
</script>
examples/calendar/vix.csv
deleted
100644 → 0
View file @
96f1be94
This diff is collapsed.
Click to expand it.
examples/calendar/vix.html
deleted
100644 → 0
View file @
96f1be94
<!DOCTYPE html>
<meta
charset=
"utf-8"
>
<title>
VIX
</title>
<style>
@import
url(../../lib/colorbrewer/colorbrewer.css)
;
body
{
font
:
10px
sans-serif
;
shape-rendering
:
crispEdges
;
}
.day
{
fill
:
#fff
;
stroke
:
#ccc
;
}
.month
{
fill
:
none
;
stroke
:
#000
;
stroke-width
:
2px
;
}
</style>
<body>
<script
src=
"../../d3.js"
></script>
<script>
var
margin
=
{
top
:
19
,
right
:
20
,
bottom
:
20
,
left
:
19
},
width
=
960
-
margin
.
right
-
margin
.
left
,
// width
height
=
136
-
margin
.
top
-
margin
.
bottom
,
// height
cellSize
=
17
;
// cell size
var
day
=
d3
.
time
.
format
(
"
%w
"
),
week
=
d3
.
time
.
format
(
"
%U
"
),
format
=
d3
.
time
.
format
(
"
%Y-%m-%d
"
);
var
color
=
d3
.
scale
.
quantile
()
.
range
(
d3
.
range
(
9
).
reverse
());
var
svg
=
d3
.
select
(
"
body
"
).
selectAll
(
"
svg
"
)
.
data
(
d3
.
range
(
1993
,
2011
))
.
enter
().
append
(
"
svg
"
)
.
attr
(
"
width
"
,
width
+
margin
.
right
+
margin
.
left
)
.
attr
(
"
height
"
,
height
+
margin
.
top
+
margin
.
bottom
)
.
attr
(
"
class
"
,
"
RdYlGn
"
)
.
append
(
"
g
"
)
.
attr
(
"
transform
"
,
"
translate(
"
+
(
margin
.
left
+
(
width
-
cellSize
*
53
)
/
2
)
+
"
,
"
+
(
margin
.
top
+
(
height
-
cellSize
*
7
)
/
2
)
+
"
)
"
);
svg
.
append
(
"
text
"
)
.
attr
(
"
transform
"
,
"
translate(-6,
"
+
cellSize
*
3.5
+
"
)rotate(-90)
"
)
.
attr
(
"
text-anchor
"
,
"
middle
"
)
.
text
(
function
(
d
)
{
return
d
;
});
var
rect
=
svg
.
selectAll
(
"
rect.day
"
)
.
data
(
function
(
d
)
{
return
d3
.
time
.
days
(
new
Date
(
d
,
0
,
1
),
new
Date
(
d
+
1
,
0
,
1
));
})
.
enter
().
append
(
"
rect
"
)
.
attr
(
"
class
"
,
"
day
"
)
.
attr
(
"
width
"
,
cellSize
)
.
attr
(
"
height
"
,
cellSize
)
.
attr
(
"
x
"
,
function
(
d
)
{
return
week
(
d
)
*
cellSize
;
})
.
attr
(
"
y
"
,
function
(
d
)
{
return
day
(
d
)
*
cellSize
;
})
.
datum
(
format
);
rect
.
append
(
"
title
"
)
.
text
(
function
(
d
)
{
return
d
;
});
svg
.
selectAll
(
"
path.month
"
)
.
data
(
function
(
d
)
{
return
d3
.
time
.
months
(
new
Date
(
d
,
0
,
1
),
new
Date
(
d
+
1
,
0
,
1
));
})
.
enter
().
append
(
"
path
"
)
.
attr
(
"
class
"
,
"
month
"
)
.
attr
(
"
d
"
,
monthPath
);
d3
.
csv
(
"
vix.csv
"
,
function
(
error
,
csv
)
{
var
data
=
d3
.
nest
()
.
key
(
function
(
d
)
{
return
d
.
Date
;
})
.
rollup
(
function
(
d
)
{
return
d
[
0
].
Open
;
})
.
map
(
csv
);
color
.
domain
(
d3
.
values
(
data
));
rect
.
filter
(
function
(
d
)
{
return
d
in
data
;
})
.
attr
(
"
class
"
,
function
(
d
)
{
return
"
day q
"
+
color
(
data
[
d
])
+
"
-9
"
;
})
.
select
(
"
title
"
)
.
text
(
function
(
d
)
{
return
d
+
"
:
"
+
data
[
d
];
});
});
function
monthPath
(
t0
)
{
var
t1
=
new
Date
(
t0
.
getFullYear
(),
t0
.
getMonth
()
+
1
,
0
),
d0
=
+
day
(
t0
),
w0
=
+
week
(
t0
),
d1
=
+
day
(
t1
),
w1
=
+
week
(
t1
);
return
"
M
"
+
(
w0
+
1
)
*
cellSize
+
"
,
"
+
d0
*
cellSize
+
"
H
"
+
w0
*
cellSize
+
"
V
"
+
7
*
cellSize
+
"
H
"
+
w1
*
cellSize
+
"
V
"
+
(
d1
+
1
)
*
cellSize
+
"
H
"
+
(
w1
+
1
)
*
cellSize
+
"
V
"
+
0
+
"
H
"
+
(
w0
+
1
)
*
cellSize
+
"
Z
"
;
}
</script>
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment