Skip to content

Commit

Permalink
functional heatmap color scale specification #496 #495 #449 #433 #338
Browse files Browse the repository at this point in the history
  • Loading branch information
nicolaskruchten committed Jun 23, 2016
1 parent 57ce2f9 commit 7f23c77
Show file tree
Hide file tree
Showing 8 changed files with 92 additions and 113 deletions.
88 changes: 35 additions & 53 deletions dist/pivot.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/pivot.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/pivot.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/pivot.min.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion examples/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ <h3 align="center">Canadian Parliament 2012 Dataset <small>(<a href="mps.csv">CS
</ul>
<h3 align="center">Montreal Weather 2014 Dataset <small>(<a href="montreal_2014.csv">CSV</a>)</small></h3>
<ul>
<li><a href="montreal_2014.html">pivotUI() with date derivers and sort overriding</a></li>
<li><a href="montreal_2014.html">pivotUI() with date derivers, sort overriding and custom heatmap colours</a></li>
</ul>
</div>

Expand Down
45 changes: 24 additions & 21 deletions examples/montreal_2014.html
Original file line number Diff line number Diff line change
Expand Up @@ -50,27 +50,17 @@

$.get("montreal_2014.csv", function(montreal_2014) {
$("#output").pivotUI($.csv.toArrays(montreal_2014), {
hiddenAttributes: ["Date","Max Temp (C)","Mean Temp (C)",
"Min Temp (C)" ,"Total Rain (mm)","Total Snow (cm)"],

aggregators: {
"Mean Temp (Celsius)":
function() { return tpl.average()(["Mean Temp (C)"])},
"Max Temp (Celsius)":
function() { return tpl.max()(["Max Temp (C)"]) },
"Min Temp (Celsius)":
function() { return tpl.min()(["Min Temp (C)"]) },
"Total Rain (mm)":
function() { return tpl.sum()(["Total Rain (mm)"]) },
"Total Snow (cm)":
function() { return tpl.sum()(["Total Snow (cm)"]) }
},
derivedAttributes: {
"year": dateFormat("Date", "%y", true),
"month": dateFormat("Date", "%m", true),
"day": dateFormat("Date", "%d", true),
"month name": dateFormat("Date", "%n", true),
"day name": dateFormat("Date", "%w", true)
},

rows: ["day name"],
cols: ["month name"],

sorters: function(attr) {
if(attr == "month name") {
return sortAs(["Jan","Feb","Mar","Apr", "May",
Expand All @@ -82,19 +72,32 @@
}
},

hiddenAttributes: ["Date","Max Temp (C)","Mean Temp (C)",
"Min Temp (C)" ,"Total Rain (mm)","Total Snow (cm)"],
aggregators: {
"Mean Temp (Celsius)":
function() { return tpl.average()(["Mean Temp (C)"])},
"Max Temp (Celsius)":
function() { return tpl.max()(["Max Temp (C)"]) },
"Min Temp (Celsius)":
function() { return tpl.min()(["Min Temp (C)"]) }
},

renderers: $.extend(
$.pivotUtilities.renderers,
$.pivotUtilities.c3_renderers,
$.pivotUtilities.export_renderers
),

rows: ["year", "month name"],
cols: ["day name"]


rendererName: "Heatmap",

rendererOptions: {
heatmap: {
colorScaleGenerator: function(values) {
return d3.scale.linear()
.domain([d3.min(values), 0, d3.max(values)])
.range(["blue", "white", "red"])
}
}
}
});
});
});
Expand Down
13 changes: 6 additions & 7 deletions examples/scatter.html
Original file line number Diff line number Diff line change
Expand Up @@ -33,16 +33,15 @@
</head>
<body>
<script type="text/javascript">
// This example shows off the C3 Scatterplot renderer
// with CSV input.
// This example shows off the C3 Scatterplot renderer with CSV input.

$(function(){
$.get("/Rdatasets/csv/datasets/iris.csv", function(iris) {
var input = $.csv.toArrays(iris);
input[0][0] = "Row";
$("#output").pivot(input, {
cols: ["Petal.Width", "Species"], rows: ["Petal.Length"],
renderer: $.pivotUtilities.c3_renderers["Scatter Chart"]
$("#output").pivot($.csv.toArrays(iris), {
rows: ["Petal.Length"],
cols: ["Petal.Width", "Species"],
renderer: $.pivotUtilities.c3_renderers["Scatter Chart"],
rendererOptions: { c3: { size: {width: 600, height: 600} } }
});
});
});
Expand Down
51 changes: 23 additions & 28 deletions pivot.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -150,11 +150,11 @@ callWithJQuery ($) ->
"Count as Fraction of Columns": tpl.fractionOf(tpl.count(), "col", usFmtPct)

renderers =
"Table": (pvtData, opts) -> pivotTableRenderer(pvtData, opts)
"Table Barchart": (pvtData, opts) -> $(pivotTableRenderer(pvtData, opts)).barchart()
"Heatmap": (pvtData, opts) -> $(pivotTableRenderer(pvtData, opts)).heatmap()
"Row Heatmap": (pvtData, opts) -> $(pivotTableRenderer(pvtData, opts)).heatmap("rowheatmap")
"Col Heatmap": (pvtData, opts) -> $(pivotTableRenderer(pvtData, opts)).heatmap("colheatmap")
"Table": (data, opts) -> pivotTableRenderer(data, opts)
"Table Barchart": (data, opts) -> $(pivotTableRenderer(data, opts)).barchart()
"Heatmap": (data, opts) -> $(pivotTableRenderer(data, opts)).heatmap("heatmap", opts)
"Row Heatmap": (data, opts) -> $(pivotTableRenderer(data, opts)).heatmap("rowheatmap", opts)
"Col Heatmap": (data, opts) -> $(pivotTableRenderer(data, opts)).heatmap("colheatmap", opts)

locales =
en:
Expand Down Expand Up @@ -872,43 +872,38 @@ callWithJQuery ($) ->
Heatmap post-processing
###

$.fn.heatmap = (scope = "heatmap", color = "red") ->
$.fn.heatmap = (scope = "heatmap", opts) ->
numRows = @data "numrows"
numCols = @data "numcols"

colorGen = (color, min, max) ->
hexGen = switch color
when "red" then (hex) -> "ff#{hex}#{hex}"
when "green" then (hex) -> "#{hex}ff#{hex}"
when "blue" then (hex) -> "#{hex}#{hex}ff"

# given a series of values
# must return a function to map a given value to a CSS color
colorScaleGenerator = opts?.heatmap?.colorScaleGenerator
colorScaleGenerator ?= (values) ->
min = Math.min(values...)
max = Math.max(values...)
return (x) ->
intensity = 255 - Math.round 255*(x-min)/(max-min)
hex = intensity.toString(16).split(".")[0]
hex = 0+hex if hex.length == 1
return hexGen(hex)
nonRed = 255 - Math.round 255*(x-min)/(max-min)
return "rgb(255,#{nonRed},#{nonRed})"

heatmapper = (scope, color) =>
heatmapper = (scope) =>
forEachCell = (f) =>
@find(scope).each ->
x = $(this).data("value")
f(x, $(this)) if x? and isFinite(x)

values = []
forEachCell (x) -> values.push x
colorFor = colorGen color, Math.min(values...), Math.max(values...)
forEachCell (x, elem) -> elem.css "background-color", "#" + colorFor(x)
colorScale = colorScaleGenerator(values)
forEachCell (x, elem) -> elem.css "background-color", colorScale(x)

switch scope
when "heatmap"
heatmapper ".pvtVal", color
when "rowheatmap"
heatmapper ".pvtVal.row#{i}", color for i in [0...numRows]
when "colheatmap"
heatmapper ".pvtVal.col#{j}", color for j in [0...numCols]

heatmapper ".pvtTotal.rowTotal", color
heatmapper ".pvtTotal.colTotal", color
when "heatmap" then heatmapper ".pvtVal"
when "rowheatmap" then heatmapper ".pvtVal.row#{i}" for i in [0...numRows]
when "colheatmap" then heatmapper ".pvtVal.col#{j}" for j in [0...numCols]

heatmapper ".pvtTotal.rowTotal"
heatmapper ".pvtTotal.colTotal"

return this

Expand Down

0 comments on commit 7f23c77

Please sign in to comment.