Skip to content

Commit c3ff35c

Browse files
nativelocationnativelocation
committed
add 2 chart
1 parent c94bc25 commit c3ff35c

File tree

7 files changed

+780
-15
lines changed

7 files changed

+780
-15
lines changed

‎src/App.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@ import React, { Component } from 'react';
22

33
import HBarChart from './components/HBarChart';
44
import RidgelineChart from './components/RidgelineChart';
5+
import AdditionalRidgelineChart from './components/AdditionalRidgelineChart';
56
import SlopegraphChart from './components/SlopegraphChart';
7+
import DifferentChart from './components/DifferentChart';
68
import './App.css';
79
import tdata from './data.tsv';
810
import cdata from './data.csv';
911
import sdata from './sdata.csv';
12+
import rdata from './ridgelineData.json';
1013

1114
class App extends Component {
1215
render() {
@@ -16,6 +19,8 @@ class App extends Component {
1619
<HBarChart data={tdata} />
1720
<RidgelineChart data={cdata} />
1821
<SlopegraphChart data={sdata} />
22+
<AdditionalRidgelineChart data={rdata} />
23+
<DifferentChart />
1924
</header>
2025
</div>
2126
);

‎src/components/AdditionalRidgelineChart/index.js‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import * as d3 from 'd3';
4+
5+
class AdditionalRidgelineChart extends Component {
6+
componentDidMount() {
7+
if (this.props.data !== null)
8+
this.calculateChart();
9+
};
10+
11+
calculateChart = () => {
12+
const { data, width, height, margin } = this.props;
13+
const svgWidth = width - margin.left - margin.right;
14+
const svgHeight = height - margin.top - margin.bottom;
15+
16+
const svg = d3
17+
.select('#additionalridgelinechart_container')
18+
.append('svg')
19+
.attr('width', svgWidth + margin.left + margin.right)
20+
.attr('height', svgHeight + margin.top + margin.bottom)
21+
.append('g')
22+
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
23+
24+
const categories = Object.keys(data);
25+
26+
const x = d3
27+
.scaleLinear()
28+
.domain([-10, 140])
29+
.range([ 0, svgWidth ]);
30+
31+
svg
32+
.append('g')
33+
.attr('transform', 'translate(0,' + svgHeight + ')')
34+
.call(d3.axisBottom(x));
35+
36+
const y = d3
37+
.scaleLinear()
38+
.domain([0, 0.4])
39+
.range([ svgHeight, 0]);
40+
41+
const yName = d3
42+
.scaleBand()
43+
.domain(categories)
44+
.range([0, svgHeight])
45+
.paddingInner(1);
46+
47+
svg
48+
.append('g')
49+
.call(d3.axisLeft(yName));
50+
51+
const allDensity = categories.map(d => ({ key: d, density: data[d].density, lower_bound: data[d].lower_bound, upper_bound: data[d].upper_bound }));
52+
// console.log('here', allDensity);
53+
// svg.selectAll('areas')
54+
// .data(allDensity)
55+
// .enter()
56+
// .append('path')
57+
// .attr('transform', d => 'translate(0,' + (yName(d.key) - svgHeight) + ')')
58+
// .attr('stroke', '#000')
59+
// .attr('stroke-width', 2)
60+
// .datum(d => d.density)
61+
// .attr('fill', '#ffffff')
62+
// .attr('d', d3.line()
63+
// .curve(d3.curveBasis)
64+
// .x(d => x(d[0]))
65+
// .y(d => y(d[1]))
66+
// );
67+
68+
allDensity.forEach(edata => {
69+
let nfirst = 0, nSecond = 0, nThird = 0;
70+
edata.density.map(densityData => {
71+
if (densityData[0] < edata.lower_bound) {
72+
nfirst = nfirst + 1;
73+
} else if (densityData[0] >= edata.lower_bound && densityData[0] < edata.upper_bound) {
74+
nSecond = nSecond + 1;
75+
} else {
76+
nThird = nThird + 1;
77+
}
78+
});
79+
const density_first = edata.density.slice(0, nfirst);
80+
const density_second = edata.density.slice(nfirst - 1, nfirst + nSecond + 1);
81+
const density_third = edata.density.slice(nfirst + nSecond, nfirst + nSecond + nThird);
82+
console.log(edata.density, density_first, density_second, density_third);
83+
svg.selectAll('areas')
84+
.data([{ density: density_first }])
85+
.enter()
86+
.append('path')
87+
.attr('transform', 'translate(0,' + (yName(edata.key) - svgHeight) + ')')
88+
.attr('stroke', '#000')
89+
.attr('stroke-width', 1)
90+
.datum(d => d.density)
91+
.attr('fill', '#69b3a2')
92+
.attr('d', d3.area()
93+
.curve(d3.curveBasis)
94+
.x(d => x(d[0]))
95+
.y0(height - 120)
96+
.y1(d => y(d[1]))
97+
);
98+
svg.selectAll('areas')
99+
.data([{ density: density_second }])
100+
.enter()
101+
.append('path')
102+
.attr('transform', 'translate(0,' + (yName(edata.key) - svgHeight) + ')')
103+
.attr('stroke', '#000')
104+
.attr('stroke-width', 1)
105+
.datum(d => d.density)
106+
.attr('fill', '#908753')
107+
.attr('d', d3.area()
108+
.curve(d3.curveBasis)
109+
.x(d => x(d[0]))
110+
.y0(height - 120)
111+
.y1(d => y(d[1]))
112+
);
113+
svg.selectAll('areas')
114+
.data([{ density: density_third }])
115+
.enter()
116+
.append('path')
117+
.attr('transform', 'translate(0,' + (yName(edata.key) - svgHeight) + ')')
118+
.attr('stroke', '#000')
119+
.attr('stroke-width', 1)
120+
.datum(d => d.density)
121+
.attr('fill', '#69b3a2')
122+
.attr('d', d3.area()
123+
.curve(d3.curveBasis)
124+
.x(d => x(d[0]))
125+
.y0(height - 120)
126+
.y1(d => y(d[1]))
127+
);
128+
});
129+
}
130+
131+
render() {
132+
return (
133+
<div id="additionalridgelinechart_container" />
134+
);
135+
}
136+
}
137+
138+
AdditionalRidgelineChart.propTypes = {
139+
data: PropTypes.object ,
140+
width: PropTypes.number,
141+
height: PropTypes.number,
142+
margin: PropTypes.object,
143+
};
144+
145+
AdditionalRidgelineChart.defaultProps = {
146+
data: null,
147+
width: 1000,
148+
height: 600,
149+
margin: { top: 100, right: 5, bottom: 20, left: 100 },
150+
};
151+
152+
export default AdditionalRidgelineChart;

‎src/components/DifferentChart/index.js‎

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import * as d3 from 'd3';
4+
5+
class DifferentChart extends Component {
6+
componentDidMount() {
7+
// if (this.props.data !== null)
8+
this.calculateChart();
9+
};
10+
11+
calculateChart = () => {
12+
const { width, height, margin } = this.props;
13+
const svgWidth = width - margin.left - margin.right;
14+
const svgHeight = height - margin.top - margin.bottom;
15+
16+
const svg = d3
17+
.select('#differentchart_container')
18+
.append('svg')
19+
.attr('width', svgWidth + margin.left + margin.right)
20+
.attr('height', svgHeight + margin.top + margin.bottom)
21+
.append('g')
22+
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
23+
24+
// const categories = Object.keys(data);
25+
26+
// const x = d3
27+
// .scaleLinear()
28+
// .domain([-10, 140])
29+
// .range([ 0, svgWidth ]);
30+
31+
// svg
32+
// .append('g')
33+
// .attr('transform', 'translate(0,' + svgHeight + ')')
34+
// .call(d3.axisBottom(x));
35+
36+
// const y = d3
37+
// .scaleLinear()
38+
// .domain([0, 0.4])
39+
// .range([ svgHeight, 0]);
40+
41+
// const yName = d3
42+
// .scaleBand()
43+
// .domain(categories)
44+
// .range([0, svgHeight])
45+
// .paddingInner(1);
46+
47+
// svg
48+
// .append('g')
49+
// .call(d3.axisLeft(yName));
50+
51+
const parseDate = d3.timeParse("%Y%m%d");
52+
const initdata = [
53+
{date: '2011-10-01T00:00', value0: 63.4, value1: 62.7},
54+
{date: '2011-10-02T00:00', value0: 58, value1: 59.9},
55+
{date: '2011-10-03T00:00', value0: 53.3, value1: 59.1},
56+
{date: '2011-10-04T00:00', value0: 55.7, value1: 58.8},
57+
{date: '2011-10-05T00:00', value0: 64.2, value1: 58.7},
58+
{date: '2011-10-06T00:00', value0: 58.8, value1: 57},
59+
{date: '2011-10-07T00:00', value0: 57.9, value1: 56.7},
60+
{date: '2011-10-08T00:00', value0: 61.8, value1: 56.8},
61+
{date: '2011-10-09T00:00', value0: 69.3, value1: 56.7},
62+
{date: '2011-10-10T00:00', value0: 71.2, value1: 60.1},
63+
{date: '2011-10-11T00:00', value0: 68.7, value1: 61.1},
64+
{date: '2011-10-12T00:00', value0: 61.8, value1: 61.5},
65+
{date: '2011-10-13T00:00', value0: 63, value1: 64.3},
66+
{date: '2011-10-14T00:00', value0: 66.9, value1: 67.1},
67+
{date: '2011-10-15T00:00', value0: 61.7, value1: 64.6},
68+
{date: '2011-10-16T00:00', value0: 61.8, value1: 61.6},
69+
{date: '2011-10-17T00:00', value0: 62.8, value1: 61.1},
70+
{date: '2011-10-18T00:00', value0: 60.8, value1: 59.2},
71+
{date: '2011-10-19T00:00', value0: 62.1, value1: 58.9},
72+
{date: '2011-10-20T00:00', value0: 65.1, value1: 57.2},
73+
{date: '2011-10-21T00:00', value0: 55.6, value1: 56.4},
74+
{date: '2011-10-22T00:00', value0: 54.4, value1: 60.7},
75+
{date: '2011-10-23T00:00', value0: 54.4, value1: 65.1},
76+
{date: '2011-10-24T00:00', value0: 54.8, value1: 60.9},
77+
{date: '2011-10-25T00:00', value0: 57.9, value1: 56.1},
78+
{date: '2011-10-26T00:00', value0: 54.6, value1: 54.6},
79+
{date: '2011-10-27T00:00', value0: 54.4, value1: 56.1},
80+
{date: '2011-10-28T00:00', value0: 42.5, value1: 58.1},
81+
{date: '2011-10-29T00:00', value0: 40.9, value1: 57.5},
82+
{date: '2011-10-30T00:00', value0: 38.6, value1: 57.7},
83+
{date: '2011-10-31T00:00', value0: 44.2, value1: 55.1},
84+
{date: '2011-11-01T00:00', value0: 49.6, value1: 57.9},
85+
{date: '2011-11-02T00:00', value0: 47.2, value1: 64.6},
86+
{date: '2011-11-03T00:00', value0: 50.1, value1: 56.2},
87+
{date: '2011-11-04T00:00', value0: 50.1, value1: 50.5},
88+
{date: '2011-11-05T00:00', value0: 43.5, value1: 51.3},
89+
{date: '2011-11-06T00:00', value0: 43.8, value1: 52.6},
90+
{date: '2011-11-07T00:00', value0: 48.9, value1: 51.4},
91+
{date: '2011-11-08T00:00', value0: 55.5, value1: 50.6},
92+
{date: '2011-11-09T00:00', value0: 53.7, value1: 54.6},
93+
{date: '2011-11-10T00:00', value0: 57.7, value1: 55.6}
94+
];
95+
const data = initdata.map(d => ({
96+
date: new Date(d.date),
97+
value0: d.value0, // The primary value.
98+
value1: d.value1, // The secondary comparison value.
99+
}));
100+
data.y = "°F"
101+
// console.log(data);
102+
const x = d3.scaleTime()
103+
.domain(d3.extent(data, d => d.date))
104+
.range([margin.left, width - margin.right])
105+
106+
const y = d3.scaleLinear()
107+
.domain([
108+
d3.min(data, d => Math.min(d.value0, d.value1)),
109+
d3.max(data, d => Math.max(d.value0, d.value1))
110+
]).nice(5)
111+
.range([height - margin.bottom, margin.top])
112+
113+
const xAxis = g => g
114+
.attr("transform", `translate(0,${height - margin.bottom})`)
115+
.call(d3.axisBottom(x)
116+
.ticks(width / 80)
117+
.tickSizeOuter(0))
118+
.call(g => g.select(".domain").remove())
119+
120+
const yAxis = g => g.append("g")
121+
.attr("transform", `translate(${margin.left},0)`)
122+
.call(d3.axisLeft(y))
123+
.call(g => g.select(".domain").remove())
124+
.call(g => g.select(".tick:last-of-type text").clone()
125+
.attr("x", 3)
126+
.attr("text-anchor", "start")
127+
.attr("font-weight", "bold")
128+
.text(data.y))
129+
130+
const colors = [
131+
"#91bfdb",
132+
"#fc8d59"
133+
];
134+
135+
const curve = d3.curveStep
136+
137+
const aboveUid = "above";
138+
const belowUid = "below";
139+
140+
svg.datum(data);
141+
142+
svg.append("g")
143+
.call(xAxis);
144+
145+
svg.append("g")
146+
.call(yAxis);
147+
148+
svg.append("clipPath")
149+
.attr("id", aboveUid)
150+
.append("path")
151+
.attr("d", d3.area()
152+
.curve(curve)
153+
.x(d => x(d.date))
154+
.y0(0)
155+
.y1(d => y(d.value1)));
156+
157+
svg.append("clipPath")
158+
.attr("id", belowUid)
159+
.append("path")
160+
.attr("d", d3.area()
161+
.curve(curve)
162+
.x(d => x(d.date))
163+
.y0(height)
164+
.y1(d => y(d.value1)));
165+
166+
svg.append("path")
167+
.attr("clip-path", aboveUid)
168+
.attr("fill", colors[1])
169+
.attr("d", d3.area()
170+
.curve(curve)
171+
.x(d => x(d.date))
172+
.y0(height)
173+
.y1(d => y(d.value0)));
174+
175+
svg.append("path")
176+
.attr("clip-path", belowUid)
177+
.attr("fill", colors[0])
178+
.attr("d", d3.area()
179+
.curve(curve)
180+
.x(d => x(d.date))
181+
.y0(0)
182+
.y1(d => y(d.value0)));
183+
184+
svg.append("path")
185+
.attr("fill", "none")
186+
.attr("stroke", "black")
187+
.attr("stroke-width", 1.5)
188+
.attr("stroke-linejoin", "round")
189+
.attr("stroke-linecap", "round")
190+
.attr("d", d3.line()
191+
.curve(curve)
192+
.x(d => x(d.date))
193+
.y(d => y(d.value0)));
194+
}
195+
196+
render() {
197+
return (
198+
<div id="differentchart_container" />
199+
);
200+
}
201+
}
202+
203+
DifferentChart.propTypes = {
204+
data: PropTypes.object ,
205+
width: PropTypes.number,
206+
height: PropTypes.number,
207+
margin: PropTypes.object,
208+
};
209+
210+
DifferentChart.defaultProps = {
211+
data: null,
212+
width: 1000,
213+
height: 600,
214+
margin: { top: 100, right: 5, bottom: 20, left: 100 },
215+
};
216+
217+
export default DifferentChart;

0 commit comments

Comments
 (0)