Skip to content

Commit 0f7958d

Browse files
kum-deepakkum-deepak
committed
Updating to Jekyll
1 parent 1003608 commit 0f7958d

File tree

1 file changed

+122
-151
lines changed

1 file changed

+122
-151
lines changed

‎examples/color-swatch.html‎

Lines changed: 122 additions & 151 deletions
Original file line numberDiff line numberDiff line change
@@ -1,154 +1,125 @@
11
---
2+
layout: example
3+
title: Minimal Chart - Color Swatch
24
---
35

4-
<!DOCTYPE html>
5-
<htmllang="en">
6-
<head>
7-
<title>dc.js - Color Swatch Example</title>
8-
<metacharset="UTF-8" />
9-
<link
10-
rel="stylesheet"
11-
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
12-
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
13-
crossorigin="anonymous"
14-
/>
15-
<!-- <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" /> -->
16-
<linkrel="stylesheet" type="text/css" href="../css/dc.css" />
17-
18-
<scripttype="text/javascript" src="header.js"></script>
19-
20-
{% include cdn-js-links.html %}
21-
22-
</head>
23-
<body>
24-
<divclass="container">
25-
<divid="header"></div>
26-
27-
<pstyle="clear: left">
28-
Example of creating a simple external chart and attaching it to the
29-
dc.js chart registry.
30-
</p>
31-
32-
<p>
33-
The color swatch widget is not supposed to be useful, just the most
34-
minimal example. It watches a groupAll value and maps it to a color
35-
using a color scale.
36-
</p>
37-
38-
<divid="swatch"></div>
39-
<divid="bar"></div>
40-
41-
<scripttype="text/javascript" src="header.js"></script>
42-
<scripttype="text/javascript" src="../js/d3.js"></script>
43-
<scripttype="text/javascript" src="../js/crossfilter.js"></script>
44-
<scripttype="text/javascript" src="../js/dc.js"></script>
45-
<scripttype="text/javascript">
46-
classColorSwatch{
47-
constructor(parent,chartGroup){
48-
this._groupAll=null;
49-
this._colorScale=null;
50-
this._duration=500;
51-
this._root=d3.select(parent);
52-
chartGroup.register(this);
53-
this._rect=null;
54-
}
55-
56-
// initialization functions for user
57-
58-
groupAll(groupAll){
59-
if(!arguments.length){
60-
returnthis._groupAll;
61-
}
62-
this._groupAll=groupAll;
63-
returnthis;
64-
}
65-
66-
colorScale(scale){
67-
if(!arguments.length){
68-
returnthis._colorScale;
69-
}
70-
this._colorScale=scale;
71-
returnthis;
72-
}
73-
74-
// interface for dc.js chart registry
75-
76-
render(){
77-
constwidth=200,
78-
height=200;
79-
constsvg=this._root
80-
.selectAll('svg')
81-
.data([0])
82-
.join('svg')
83-
.attr('width',width)
84-
.attr('height',height);
85-
this._rect=svg
86-
.selectAll('rect.swatch')
87-
.data([0])
88-
.join('rect')
89-
.attr('class','swatch')
90-
.attr('width',width)
91-
.attr('height',height);
92-
this.redraw();
93-
}
94-
95-
redraw(){
96-
this._rect
97-
.transition()
98-
.duration(this._duration)
99-
.attr('fill',this._colorScale(this._groupAll.value()));
100-
}
101-
}
102-
103-
constchartGroup=newdc.ChartGroup();
104-
constswatch=newColorSwatch('#swatch',chartGroup),
105-
bar=newdc.BarChart('#bar',chartGroup);
106-
107-
d3.csv('morley.csv').then(experiments=>{
108-
experiments.forEach(x=>{
109-
x.Speed=+x.Speed;
110-
});
111-
112-
constcf=crossfilter(experiments),
113-
groupAllSpeed=cf.groupAll().reduceSum(d=>d.Speed);
114-
115-
swatch
116-
.groupAll(groupAllSpeed)
117-
.colorScale(
118-
d3.scaleSequential(
119-
[0,groupAllSpeed.value()],
120-
d3.interpolateRdYlGn
121-
)
122-
);
123-
124-
construnDimension=cf.dimension(d=>+d.Run),
125-
speedSumGroup=runDimension
126-
.group()
127-
.reduceSum(d=>(d.Speed*d.Run)/1000);
128-
129-
bar
130-
.configure({
131-
width: 768,
132-
height: 480,
133-
})
134-
.dataProvider(
135-
newdc.CFMultiAdapter({
136-
dimension: runDimension,
137-
layers: [
138-
{
139-
group: speedSumGroup,
140-
},
141-
],
142-
})
143-
)
144-
.configure({
145-
renderLabel: true,
146-
})
147-
.x(d3.scaleLinear().domain([6,20]));
148-
149-
chartGroup.renderAll();
150-
});
151-
</script>
152-
</div>
153-
</body>
154-
</html>
6+
<divclass="d-flex flex-column align-items-center text-center max-width-1000" style="margin: auto">
7+
<p>
8+
Example of creating a simple external chart and attaching it to the dc.js
9+
chart registry.
10+
</p>
11+
12+
<p>
13+
The color swatch widget is not supposed to be useful, just a minimal
14+
example. It watches a groupAll value and maps it to a color using a color
15+
scale.
16+
</p>
17+
18+
<divid="swatch"></div>
19+
<div
20+
id="bar"
21+
class="ratio ratio-4x3"
22+
style="min-width: 360px; max-width: 800px; margin: auto"
23+
></div>
24+
</div>
25+
26+
<scripttype="text/javascript">
27+
classColorSwatch{
28+
constructor(parent,chartGroup){
29+
this._groupAll=null;
30+
this._colorScale=null;
31+
this._duration=500;
32+
this._root=d3.select(parent);
33+
chartGroup.register(this);
34+
this._rect=null;
35+
}
36+
37+
// initialization functions for user
38+
39+
groupAll(groupAll){
40+
if(!arguments.length){
41+
returnthis._groupAll;
42+
}
43+
this._groupAll=groupAll;
44+
returnthis;
45+
}
46+
47+
colorScale(scale){
48+
if(!arguments.length){
49+
returnthis._colorScale;
50+
}
51+
this._colorScale=scale;
52+
returnthis;
53+
}
54+
55+
// interface for dc.js chart registry
56+
57+
render(){
58+
constwidth=200,
59+
height=200;
60+
constsvg=this._root
61+
.selectAll('svg')
62+
.data([0])
63+
.join('svg')
64+
.attr('width',width)
65+
.attr('height',height);
66+
this._rect=svg
67+
.selectAll('rect.swatch')
68+
.data([0])
69+
.join('rect')
70+
.attr('class','swatch')
71+
.attr('width',width)
72+
.attr('height',height);
73+
this.redraw();
74+
}
75+
76+
redraw(){
77+
this._rect
78+
.transition()
79+
.duration(this._duration)
80+
.attr('fill',this._colorScale(this._groupAll.value()));
81+
}
82+
}
83+
84+
constchartGroup=newdc.ChartGroup();
85+
constswatch=newColorSwatch('#swatch',chartGroup),
86+
bar=newdc.BarChart('#bar',chartGroup);
87+
88+
d3.csv('morley.csv').then(experiments=>{
89+
experiments.forEach(x=>{
90+
x.Speed=+x.Speed;
91+
});
92+
93+
constcf=crossfilter(experiments),
94+
groupAllSpeed=cf.groupAll().reduceSum(d=>d.Speed);
95+
96+
swatch
97+
.groupAll(groupAllSpeed)
98+
.colorScale(
99+
d3.scaleSequential([0,groupAllSpeed.value()],d3.interpolateRdYlGn)
100+
);
101+
102+
construnDimension=cf.dimension(d=>+d.Run),
103+
speedSumGroup=runDimension
104+
.group()
105+
.reduceSum(d=>(d.Speed*d.Run)/1000);
106+
107+
bar
108+
.dataProvider(
109+
newdc.CFMultiAdapter({
110+
dimension: runDimension,
111+
layers: [
112+
{
113+
group: speedSumGroup,
114+
},
115+
],
116+
})
117+
)
118+
.configure({
119+
renderLabel: true,
120+
})
121+
.x(d3.scaleLinear().domain([6,20]));
122+
123+
chartGroup.renderAll();
124+
});
125+
</script>

0 commit comments

Comments
(0)