Skip to content

Feature/updated code d3 v4 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tzs34 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Feature/updated code d3 v4 #1

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a04089d
Refactored app.js code for d3 version 4. Breaking chnages introduced …
Mar 14, 2018
14c2b8e
Reverted back master created branch for pull request
Mar 14, 2018
d8d3d02
Refactored app.js for chnages between d3 version 3 and d3 version 4
Mar 14, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 19 additions & 15 deletions src/app.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ import ReactDOM from 'react-dom';
import { ChartContainer, PieChart, RowChart, BubbleChart,
DataTable, DataCount, BarChart, LineChart } from 'dc-react';
import crossfilter from 'crossfilter';
import d3 from 'd3';
import {csv, format, scaleLinear, scaleTime, timeFormat, timeMonth, timeMonths, timeParse, timeYear} from "d3"
import dc from 'dc';

const dateFormat = d3.time.format('%m/%d/%Y');
const numberFormat = d3.format('.2f');
const dateFormat = timeFormat('%m/%d/%Y');
const numberFormat = format('.2f');
const weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

class CrossfilterContext {
Expand All @@ -19,7 +19,7 @@ class CrossfilterContext {
this.crossfilter = crossfilter(data);
this.groupAll = this.crossfilter.groupAll();
this.dateDimension = this.crossfilter.dimension(d => d.dd);
this.yearlyDimension = this.crossfilter.dimension(d => d3.time.year(d.dd).getFullYear());
this.yearlyDimension = this.crossfilter.dimension(d => timeYear(d.dd).getFullYear());
this.dayOfWeekDimension = this.crossfilter.dimension((d) => {
var day = d.dd.getDay();
return `${day}.${weekdayLabels[day]}`;
Expand Down Expand Up @@ -117,22 +117,27 @@ class App extends Component {
}

crossfilterContext = (callback) => {

let parseDate = timeParse('%m/%d/%Y');

if (!callback) {
return this._crossfilterContext;
}
d3.csv('../ndx.csv', (data) => {
csv('../ndx.csv', (data) => {
for (let d of data) {
d.dd = dateFormat.parse(d.date);
d.month = d3.time.month(d.dd);
d.dd = parseDate(d.date);
d.month = timeMonth(d.dd);
d.close = +d.close;
d.open = +d.open;
}

this._crossfilterContext = new CrossfilterContext(data);
callback(this._crossfilterContext);
});
};

render() {

return (
<ChartContainer className="container" crossfilterContext={this.crossfilterContext}>
<h1>Nasdaq 100 Index 1985/11/01-2012/06/29</h1>
Expand All @@ -144,9 +149,9 @@ class App extends Component {
keyAccessor={p => p.value.absGain}
valueAccessor={p => p.value.percentageGain}
radiusValueAccessor={p => p.value.fluctuationPercentage}
x={d3.scale.linear().domain([-2500, 2500])}
y={d3.scale.linear().domain([-100, 100])}
r={d3.scale.linear().domain([0, 4000])}
x={scaleLinear().domain([-2500, 2500])}
y={scaleLinear().domain([-100, 100])}
r={scaleLinear().domain([0, 4000])}
colorDomain={[-500, 500]}
/>
<div className="row">
Expand All @@ -157,7 +162,6 @@ class App extends Component {
radius={80}
label={(d) => {
let percent = numberFormat(d.value / this.crossfilterContext().groupAll.value() * 100);

return `${d.key} (${percent}%)`;
}}
/>
Expand Down Expand Up @@ -187,7 +191,7 @@ class App extends Component {
gap={1}
round={dc.round.floor}
alwaysUseRounding={true}
x={d3.scale.linear().domain([-25, 25])}
x={scaleLinear().domain([-25, 25])}
renderHorizontalGridLines={true}
/>
</div>
Expand All @@ -204,9 +208,9 @@ class App extends Component {
transitionDuration={1000}
margins={{top: 30, right: 50, bottom: 25, left: 40}}
mouseZoomable={true}
x={d3.time.scale().domain([new Date(1985, 0, 1), new Date(2012, 11, 31)])}
round={d3.time.month.round}
xUnits={d3.time.months}
x={scaleTime().domain([new Date(1985, 0, 1), new Date(2012, 11, 31)])}
round={timeMonth.round}
xUnits={timeMonths}
elasticY={true}
renderHorizontalGridLines={true}
legend={dc.legend().x(800).y(10).itemHeight(13).gap(5)}
Expand Down