Skip to content

[tfjs-vis] Support custom tickLabels with duplicate values in heatmaps #2012

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

Merged
tafsiri merged 6 commits into from
Sep 18, 2019
Merged

[tfjs-vis] Support custom tickLabels with duplicate values in heatmaps #2012

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2c9229f
Support custom tickLabels with duplicate values.
tafsiri Sep 10, 2019
0bb0ef7
Improve tooltips on confusion matrix
tafsiri Sep 10, 2019
811b4f7
Merge branch 'master' into fix-heatmap-bug
tafsiri Sep 13, 2019
7044eb2
save
tafsiri Sep 18, 2019
03def42
Merge branch 'master' into fix-heatmap-bug
tafsiri Sep 18, 2019
8145a76
Merge branch 'fix-heatmap-bug' of github.com:tensorflow/tfjs into fix…
tafsiri Sep 18, 2019
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
Prev Previous commit
Next Next commit
Improve tooltips on confusion matrix
  • Loading branch information
@tafsiri
tafsiri committed Sep 10, 2019
commit 0bb0ef71296adc732aa51d51cc6c6896c9374ccd
65 changes: 39 additions & 26 deletions tfjs-vis/src/render/confusion_matrix.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,14 +95,15 @@ export async function confusionMatrix(
values.push({
label,
prediction,
diagCount: count,
count,
noFill: true,
});
} else {
values.push({
label,
prediction,
count,
scaleCount: count,
});
// When not shading the diagonal we want to check if there is a non
// zero value. If all values are zero we will not color them as the
Expand All @@ -122,7 +123,7 @@ export async function confusionMatrix(
for (const val of values) {
if (val.noFill === true) {
val.noFill = false;
val.count = val.diagCount;
val.scaleCount = val.count;
}
}
}
Expand Down Expand Up @@ -171,45 +172,56 @@ export async function confusionMatrix(
'layer': [
{
// The matrix
'transform': [
{'filter': 'datum.noFill != true'},
],
'mark': {
'type': 'rect',
},
'encoding': {
'fill': {
'condition': {
'test': 'datum["noFill"] == true',
'value': 'white',
},
'field': 'count',
'color': {
'field': 'scaleCount',
'type': 'quantitative',
'scale': {'range': ['#f7fbff', '#4292c6']},
},
'tooltip': {
'condition': {
'test': 'datum["noFill"] == true',
'field': 'diagCount',
'type': 'nominal',
},
'field': 'count',
'type': 'nominal',
}
'tooltip': [
{'field': 'label', 'type': 'nominal'},
{'field': 'prediction', 'type': 'nominal'},
{'field': 'count', 'type': 'quantitative'},
]
},

},
]
};

if (options.shadeDiagonal === false) {
spec.layer.push(
{
// render unfilled rects for the diagonal
'transform': [
{'filter': 'datum.noFill == true'},
],
'mark': {
'type': 'rect',
'fill': 'white',
},
'encoding': {
'tooltip': [
{'field': 'label', 'type': 'nominal'},
{'field': 'prediction', 'type': 'nominal'},
{'field': 'count', 'type': 'quantitative'},
]
},
},
);
}

if (options.showTextOverlay) {
spec.layer.push({
// The text labels
'mark': {'type': 'text', 'baseline': 'middle'},
'encoding': {
'text': {
'condition': {
'test': 'datum["noFill"] == true',
'field': 'diagCount',
'type': 'nominal',
},
'field': 'count',
'type': 'nominal',
},
Expand All @@ -218,7 +230,6 @@ export async function confusionMatrix(
}

await embed(drawArea, spec, embedOpts);
return Promise.resolve();
}

const defaultOpts: ConfusionMatrixOptions = {
Expand All @@ -235,7 +246,9 @@ const defaultOpts: ConfusionMatrixOptions = {
interface MatrixEntry {
label: string;
prediction: string;
count?: number;
diagCount?: number;
// The displayed count
count: number;
// The count values used to compute the color scale
scaleCount?: number;
noFill?: boolean;
}