Skip to content
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

Atlas Charts Upgrade to D3 v4 (#417) #450

Merged
merged 12 commits into from
Aug 29, 2017
Merged

Atlas Charts Upgrade to D3 v4 (#417) #450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4d970bc
Replaced jnj charts with new charting library
Jun 30, 2017
2cc1807
Added missing dependencies
Jun 30, 2017
8cf6c8b
Added missing dependencies
Jun 30, 2017
c5695a5
Merge pull request #1 from odysseusinc/new-charts-lib
pavgra Jun 30, 2017
ec9f62b
reflected changes in atlas charts
Jul 13, 2017
ce31f82
Merge pull request #2 from odysseusinc/new-charts-lib
pavgra Jul 18, 2017
622c7ee
Refactor due to the new version of the visualizations lib published t…
Aug 24, 2017
bafdda6
Merged in upstream repo
Aug 25, 2017
4b127e9
Merge branch 'master' into new-charts-lib
Aug 25, 2017
b55eee0
updated code to use separate atlascharts lib
Aug 25, 2017
303a0b0
Merge branch 'odysseusinc-new-charts-lib' into atlascharts-d3v4
chrisknoll Aug 29, 2017
3d82967
Fixes for charting library.
chrisknoll Aug 29, 2017
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
3 changes: 2 additions & 1 deletion js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
define(['jquery', 'knockout', 'jnj_chart', 'd3', 'ohdsi.util', 'appConfig', 'webapi/AuthAPI', 'atlas-state', 'facets', 'css!styles/tabs.css', 'css!styles/buttons.css', ], function ($, ko, jnj_chart, d3, ohdsiUtil, config, authApi, sharedState) {
define(['jquery', 'knockout', 'ohdsi.util', 'appConfig', 'webapi/AuthAPI', 'atlas-state', 'facets', 'css!styles/tabs.css', 'css!styles/buttons.css'],
function ($, ko, ohdsiUtil, config, authApi, sharedState) {
var appModel = function () {
$.support.cors = true;
var self = this;
Expand Down
5 changes: 4 additions & 1 deletion js/components/cohort-comparison-manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -364,7 +364,10 @@ define(['jquery', 'knockout', 'text!./cohort-comparison-manager.html', 'lodash',
var balanceChart = nv.models.scatterChart()
.showDistX(true)
.showDistY(true)
.color(d3.scale.category10().range());
.color(
d3.scaleOrdinal()
.range(d3.schemeCategory10)
);

balanceChart.tooltip.contentGenerator(function (d) {
return '<div class="scatterTooltip"><div>' + d.point.tooltip + '</div><div>Before Matching: ' + d.point.x + '</div><div>After Matching: ' + d.point.y + '</div></div>';
Expand Down
172 changes: 69 additions & 103 deletions js/components/data-sources.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'colorbrewer', 'lodash', 'appConfig', 'knockout.dataTables.binding', 'databindings/eventListenerBinding'], function ($, ko, view, d3, jnj_chart, colorbrewer, _, config) {
define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'atlascharts', 'colorbrewer', 'lodash', 'appConfig', 'knockout.dataTables.binding', 'databindings/eventListenerBinding'], function ($, ko, view, d3, atlascharts, colorbrewer, _, config) {
function dataSources(params) {
var self = this;

Expand Down Expand Up @@ -154,23 +154,18 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co
success: function (data) {
self.loadingReport(false);
if (!!data.summary) {
var formatter = (new atlascharts.chart()).formatters.formatSI(2);
data.summary.forEach(function (d) {
if (!isNaN(d.attributeValue)) {
d.attributeValue = self.formatSI(d.attributeValue, 2);
d.attributeValue = formatter(d.attributeValue);
}
});
currentReport.summary(data.summary);
}
var genderDonut = new jnj_chart.donut();

var genderConceptData = self.mapConceptData(data.gender);
genderDonut.render(genderConceptData, "#populationByGender", self.donutWidth, self.donutHeight, {
margin: {
top: 5,
left: 5,
right: 200,
bottom: 5
}
});
var populationDonut = new atlascharts.donut();
populationDonut.render(genderConceptData, "#populationByGender", self.donutWidth, self.donutHeight);

var ageAtFirstData = self.normalizeArray(data.ageAtFirstObservation);
if (!ageAtFirstData.empty) {
Expand All @@ -181,11 +176,12 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co
histData.intervals = 120;
histData.data = ageAtFirstData;

d3.selectAll("#ageAtFirstObservation svg").remove();
var ageAtFirstObservationData = self.mapHistogram(histData);
var ageAtFirstObservationHistogram = new jnj_chart.histogram();
ageAtFirstObservationHistogram.render(ageAtFirstObservationData, "#ageAtFirstObservation", self.boxplotWidth, self.boxplotHeight, {

var ageHistogram = new atlascharts.histogram();
ageHistogram.render(ageAtFirstObservationData, "#ageAtFirstObservation", self.boxplotWidth, self.boxplotHeight, {
xFormat: d3.format('d'),
yFormat: d3.format(',.1s'),
xLabel: 'Age',
yLabel: 'People'
});
Expand All @@ -194,7 +190,6 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co
d3.selectAll("#cumulativeObservation svg").remove();
var cumObsData = self.normalizeArray(data.cumulativeObservation);
if (!cumObsData.empty) {
var cumulativeObservationLine = new jnj_chart.line();
var cumulativeData = self.normalizeDataframe(cumObsData).xLengthOfObservation
.map(function (d, i) {
var item = {
Expand All @@ -214,10 +209,10 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co
cumulativeObservationXLabel = 'Years';
}
}

cumulativeObservationLine.render(cumulativeData, "#cumulativeObservation", 230, 115, {
yFormat: d3.format('0%'),
interpolate: "step-before",
var observationLine = new atlascharts.line();
observationLine.render(cumulativeData, "#cumulativeObservation", 230, 115, {
yFormat: d3.format('0.0%'),
interpolate: (new atlascharts.line()).interpolation.curveStepBefore,
xLabel: cumulativeObservationXLabel,
yLabel: 'Percent of Population'
});
Expand All @@ -232,13 +227,13 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co
yPercent: 'percentValue'
});
d3.selectAll("#oppeoplebymonthsingle svg").remove();
var observationByMonthSingle = new jnj_chart.line();
observationByMonthSingle.render(byMonthSeries, "#oppeoplebymonthsingle", 400, 200, {
xScale: d3.time.scale().domain(d3.extent(byMonthSeries[0].values, function (d) {
var singleLine = new atlascharts.line();
singleLine.render(byMonthSeries, "#oppeoplebymonthsingle", 400, 200, {
xScale: d3.scaleTime().domain(d3.extent(byMonthSeries[0].values, function (d) {
return d.xValue;
})),
xFormat: d3.time.format("%m/%Y"),
tickFormat: d3.time.format("%Y"),
xFormat: d3.timeFormat("%m/%Y"),
tickFormat: d3.timeFormat("%Y"),
ticks: 10,
xLabel: "Date",
yLabel: "People"
Expand All @@ -259,59 +254,26 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co

if (!!data.yearOfBirth && data.yearOfBirth.length > 0 &&
!!data.yearOfBirthStats && data.yearOfBirthStats.length > 0) {
var yearHistogram = new jnj_chart.histogram();
var histData = {};
histData.intervalSize = 1;
histData.min = data.yearOfBirthStats[0].minValue;
histData.max = data.yearOfBirthStats[0].maxValue;
histData.intervals = 100;
histData.data = (self.normalizeArray(data.yearOfBirth));
yearHistogram.render(self.mapHistogram(histData), "#hist", 460, 195, {
histData.data = self.normalizeArray(data.yearOfBirth);
var histogram = new atlascharts.histogram();
histogram.render(self.mapHistogram(histData), "#hist", 460, 195, {
xFormat: d3.format('d'),
yFormat: d3.format(',.1s'),
xLabel: 'Year',
yLabel: 'People'
});
}

var genderDonut = new jnj_chart.donut();
genderDonut.render(self.mapConceptData(data.gender), "#gender", 260, 130, {
colors: d3.scale.ordinal()
.domain([8507, 8551, 8532])
.range(["#1F78B4", "#33A02C", "#FB9A99"]),
margin: {
top: 5,
bottom: 10,
right: 150,
left: 10
}

});

var raceDonut = new jnj_chart.donut();
raceDonut.render(self.mapConceptData(data.race), "#race", 260, 130, {
margin: {
top: 5,
bottom: 10,
right: 150,
left: 10
},
colors: d3.scale.ordinal()
.domain(data.race)
.range(colorbrewer.Paired[10])
});

var ethnicityDonut = new jnj_chart.donut();
ethnicityDonut.render(self.mapConceptData(data.ethnicity), "#ethnicity", 260, 130, {
margin: {
top: 5,
bottom: 10,
right: 150,
left: 10
},
colors: d3.scale.ordinal()
.domain(data.ethnicity)
.range(colorbrewer.Paired[10])
});
var genderDonut = new atlascharts.donut();
var raceDonut = new atlascharts.donut();
var ethnicityDonut = new atlascharts.donut();
genderDonut.render(self.mapConceptData(data.gender), "#gender", 260, 130);
raceDonut.render(self.mapConceptData(data.race), "#race", 260, 130);
ethnicityDonut.render(self.mapConceptData(data.ethnicity), "#ethnicity", 260, 130);
}
});
} else if (currentReport.name == 'Achilles Heel') {
Expand Down Expand Up @@ -353,12 +315,12 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co
data: 'type',
visible: true,
width: 200
},
},
{
data: 'content',
visible: true
}
],
}
],
pageLength: 15,
lengthChange: false,
deferRender: true,
Expand Down Expand Up @@ -399,19 +361,19 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co
});


var totalRecordsLine = new jnj_chart.line();
totalRecordsLine.render(totalRecordsData, "#totalrecords", 900, 250, {
xScale: d3.time.scale().domain(d3.extent(totalRecords, function (d) {
var totalLine = new atlascharts.line();
totalLine.render(totalRecordsData, "#totalrecords", 900, 250, {
xScale: d3.scaleTime().domain(d3.extent(totalRecords, function (d) {
return d.xCalendarMonth;
})),
xFormat: d3.time.format("%m/%Y"),
tickFormat: d3.time.format("%Y"),
xFormat: d3.timeFormat("%m/%Y"),
tickFormat: d3.timeFormat("%Y"),
xValue: "xCalendarMonth",
yValue: "yRecordCount",
xLabel: "Year",
yLabel: "# of Records",
showLegend: true,
colors: d3.scale.category10()
colors: d3.schemeCategory10
});
}

Expand All @@ -437,24 +399,24 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co
});


var recordsPerPersonLine = new jnj_chart.line();
recordsPerPersonLine.render(recordsPerPersonData, "#recordsperperson", 900, 250, {
xScale: d3.time.scale().domain(d3.extent(recordsPerPerson, function (d) {
var recordsperpersonLine = new atlascharts.line();
recordsperpersonLine.render(recordsPerPersonData, "#recordsperperson", 900, 250, {
xScale: d3.scaleTime().domain(d3.extent(recordsPerPerson, function (d) {
return d.xCalendarMonth;
})),
xFormat: d3.time.format("%m/%Y"),
tickFormat: d3.time.format("%Y"),
xFormat: d3.timeFormat("%m/%Y"),
tickFormat: d3.timeFormat("%Y"),
xValue: "xCalendarMonth",
yValue: "yRecordCount",
xLabel: "Year",
yLabel: "Records Per Person",
showLegend: true,
colors: d3.scale.category10()
colors: d3.schemeCategory10
});
}

if (!!data.conceptsPerPerson) {
var conceptsBoxplot = new jnj_chart.boxplot();

var conceptsSeries = [];
var conceptsData = self.normalizeArray(data.conceptsPerPerson);
for (i = 0; i < conceptsData.category.length; i++) {
Expand All @@ -469,8 +431,10 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co
UIF: conceptsData.p90Value[i]
});
}
conceptsBoxplot.render(conceptsSeries, "#conceptsperperson", 800, 200, {
var conceptsperpersonBoxPlot = new atlascharts.boxplot();
conceptsperpersonBoxPlot.render(conceptsSeries, "#conceptsperperson", 800, 200, {
yMax: d3.max(conceptsData.p90Value),
yFormat: d3.format(',.1s'),
xLabel: 'Concept Type',
yLabel: 'Concepts per Person'
});
Expand Down Expand Up @@ -567,7 +531,7 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co
});

var treeData = self.buildHierarchyFromJSON(data, threshold);
var treemap = new jnj_chart.treemap();
var treemap = new atlascharts.treemap();
treemap.render(treeData, '#treemap_container', width, height, {
onclick: function (node) {
self.currentConcept(node);
Expand Down Expand Up @@ -692,20 +656,22 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co
});

// create svg with range bands based on the trellis names
var chart = new jnj_chart.trellisline();
chart.render(dataByDecile, selector, 1000, 300, {
var dataByDecileTrellisline = new atlascharts.trellisline();
dataByDecileTrellisline.render(dataByDecile, selector, 1000, 300, {
trellisSet: allDeciles,
trellisLabel: "Age Decile",
seriesLabel: "Year of Observation",
yLabel: "Prevalence Per 1000 People",
xFormat: d3.time.format("%Y"),
xFormat: d3.timeFormat("%Y"),
yFormat: d3.format("0.2f"),
tickPadding: 20,
colors: d3.scale.ordinal()
.domain(["MALE", "FEMALE", "UNKNOWN"])
colors: d3.scaleOrdinal()
.domain(['MALE', 'FEMALE', 'UNKNOWN'])
.range(["#1F78B4", "#FB9A99", "#33A02C"])

});
d3.select(selector).select('svg')
.attr('width', '1000px')
.attr('height', '300px');
}
};

Expand All @@ -717,14 +683,13 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co
yValue: 'yPrevalence1000Pp',
yPercent: 'yPrevalence1000Pp'
});

var prevalenceByMonth = new jnj_chart.line();
prevalenceByMonth.render(byMonthSeries, selector, 1000, 300, {
xScale: d3.time.scale().domain(d3.extent(byMonthSeries[0].values, function (d) {
var byMonthSeriesLine = new atlascharts.line();
byMonthSeriesLine.render(byMonthSeries, selector, 1000, 300, {
xScale: d3.scaleTime().domain(d3.extent(byMonthSeries[0].values, function (d) {
return d.xValue;
})),
xFormat: d3.time.format("%m/%Y"),
tickFormat: d3.time.format("%Y"),
xFormat: d3.timeFormat("%m/%Y"),
tickFormat: d3.timeFormat("%Y"),
xLabel: "Date",
yLabel: "Prevalence per 1000 People"
});
Expand All @@ -733,8 +698,8 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co

self.prevalenceByType = function (data, selector) {
if (!!data && data.length > 0) {
var donut = new jnj_chart.donut();
donut.render(self.mapConceptData(data), selector, self.donutWidth, self.donutHeight, {
var prevalenceByTypeDonut = new atlascharts.donut();
prevalenceByTypeDonut.render(self.mapConceptData(data), selector, self.donutWidth, self.donutHeight, {
margin: {
top: 5,
left: 5,
Expand All @@ -747,7 +712,6 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co

self.ageBoxplot = function (data, selector, yLabel) {
yLabel = yLabel ? yLabel : 'Age at First Occurrence';
var boxplot = new jnj_chart.boxplot();
var bpseries = [];
var bpdata = self.normalizeArray(data);
if (!bpdata.empty) {
Expand All @@ -763,9 +727,11 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co
UIF: bpdata.p90Value[i]
});
}
boxplot.render(bpseries, selector, self.boxplotWidth, self.boxplotHeight, {
var ageBoxplot = new atlascharts.boxplot();
ageBoxplot.render(bpseries, selector, self.boxplotWidth, self.boxplotHeight, {
xLabel: 'Gender',
yLabel: yLabel
yLabel: yLabel,
yFormat: d3.format(',.1s'),
});
}
};
Expand Down Expand Up @@ -963,7 +929,7 @@ define(['jquery', 'knockout', 'text!./data-sources.html', 'd3', 'jnj_chart', 'co
id: data.conceptId,
label: data.conceptName,
value: data.countValue
}];
}];
}

result = result.sort(function (a, b) {
Expand Down
2 changes: 1 addition & 1 deletion js/components/explore-cohort.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
define(['knockout', 'text!./explore-cohort.html', 'd3', 'appConfig', 'webapi/AuthAPI', 'lodash', 'crossfilter', 'd3_tip', 'knockout.dataTables.binding', 'components/faceted-datatable-cf-profile', 'css!./styles/exploreCohort.css'],
define(['knockout', 'text!./explore-cohort.html', 'd3', 'appConfig', 'webapi/AuthAPI', 'lodash', 'crossfilter', 'd3-tip', 'knockout.dataTables.binding', 'components/faceted-datatable-cf-profile', 'css!./styles/exploreCohort.css'],
function (ko, view, d3, config, authApi, lodash, crossfilter) {

function exploreCohort(params) {
Expand Down
2 changes: 1 addition & 1 deletion js/components/profile-manager.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
"use strict";
define(['knockout', 'text!./profile-manager.html', 'd3', 'appConfig', 'lodash', 'crossfilter', 'ohdsi.util', 'cohortbuilder/CohortDefinition', 'webapi/CohortDefinitionAPI', 'd3_tip', 'knockout.dataTables.binding', 'faceted-datatable', 'components/profileChart', 'css!./styles/profileManager.css'],
define(['knockout', 'text!./profile-manager.html', 'd3', 'appConfig', 'lodash', 'crossfilter', 'ohdsi.util', 'cohortbuilder/CohortDefinition', 'webapi/CohortDefinitionAPI', 'd3-tip', 'knockout.dataTables.binding', 'faceted-datatable', 'components/profileChart', 'css!./styles/profileManager.css'],
function (ko, view, d3, config, _, crossfilter, util, CohortDefinition, cohortDefinitionAPI) {

var reduceToRecs = [ // crossfilter group reduce functions where group val
Expand Down
Loading