Skip to content

Commit

Permalink
v2.2.1 Performace improments to graph components. Trying to figure ou…
Browse files Browse the repository at this point in the history 
…t 'merge'.
  • Loading branch information
@jamesleesaunders
jamesleesaunders committed Jan 13, 2018
1 parent 6d52aaa commit 9229fbe
Show file tree
Hide file tree
Showing 20 changed files with 364 additions and 336 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ var title = d3.ez.component.title()
.mainText("Super Fruit Survey")
.subText("Which fruit do you like?");

var chart = d3.ez.chart.barVertical()
var chart = d3.ez.chart.barChartVertical()
.colors(['#00c41d', '#FFA500', '#800080', '#ffe714']);

var legend = d3.ez.component.legend()
Expand Down
99 changes: 52 additions & 47 deletions build/d3-ez.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* @license GPLv3
*/
d3.ez = {
version: "2.2.0",
version: "2.2.1",
author: "James Saunders",
copyright: "Copyright (C) 2017 James Saunders",
license: "GPL-3.0"
Expand Down Expand Up @@ -461,12 +461,12 @@ d3.ez.component.barsVertical = function module() {
function my(selection) {
selection.each(function() {
// Create series group
var series = selection.selectAll(".series").data(function(d) {
var seriesSelect = selection.selectAll(".series").data(function(d) {
return [ d ];
}).enter().append("g").classed("series", true).on("click", function(d) {
dispatch.call("customClick", this, d);
});
series = selection.selectAll(".series").merge(series);
var series = seriesSelect.enter().append("g").classed("series", true).on("click", function(d) {
dispatch.call("customClick", this, d);
}).merge(seriesSelect);
// Add bars to series
var bars = series.selectAll(".bar").data(function(d) {
return d.values;
Expand Down Expand Up @@ -559,13 +559,13 @@ d3.ez.component.barsStacked = function module() {
};
selection.each(function() {
// Create series group
var series = selection.selectAll(".series").data(function(d) {
var seriesSelect = selection.selectAll(".series").data(function(d) {
return [ d ];
}).enter().append("g").classed("series", true).attr("width", width).attr("height", height).on("click", function(d) {
dispatch.call("customClick", this, d);
});
series = selection.selectAll(".series").merge(series);
// Add Bars to Group
var series = seriesSelect.enter().append("g").classed("series", true).on("click", function(d) {
dispatch.call("customClick", this, d);
}).merge(seriesSelect);
// Add bars to series
var bars = series.selectAll(".bar").data(function(d) {
return stacker(d.values);
});
Expand Down Expand Up @@ -648,12 +648,12 @@ d3.ez.component.polarArea = function module() {
}).innerRadius(0).cornerRadius(2);
selection.each(function() {
// Create series group
var series = selection.selectAll(".series").data(function(d) {
var seriesSelect = selection.selectAll(".series").data(function(d) {
return [ d ];
}).enter().append("g").classed("series", true).on("click", function(d) {
dispatch.call("customClick", this, d);
});
series = selection.selectAll(".series").merge(series);
var series = seriesSelect.enter().append("g").classed("series", true).on("click", function(d) {
dispatch.call("customClick", this, d);
}).merge(seriesSelect);
// Add segments to series
var segments = series.selectAll(".segment").data(function(d) {
return pie(d.values);
Expand Down Expand Up @@ -743,15 +743,15 @@ d3.ez.component.donut = function module() {
};
selection.each(function() {
// Create chart group
var series = selection.selectAll(".series").data(function(d) {
var seriesSelect = selection.selectAll(".series").data(function(d) {
return [ d ];
}).enter().append("g").classed("series", true).on("click", function(d) {
dispatch.call("customClick", this, d);
});
var series = seriesSelect.enter().append("g").classed("series", true).on("click", function(d) {
dispatch.call("customClick", this, d);
}).merge(seriesSelect);
series.append("g").attr("class", "slices");
series.append("g").attr("class", "labels");
series.append("g").attr("class", "lines");
series = selection.selectAll(".series").merge(series);
// Slices
var slices = series.select(".slices").selectAll("path.slice").data(function(d) {
return pie(d.values);
Expand Down Expand Up @@ -863,15 +863,15 @@ d3.ez.component.scatterPlot = function module() {
function my(selection) {
selection.each(function() {
// Create series group
var series = selection.selectAll(".series").data(function(d) {
var seriesSelect = selection.selectAll(".series").data(function(d) {
return [ d ];
}).enter().append("g").classed("series", true).attr("fill", function(d) {
});
var series = seriesSelect.enter().append("g").classed("series", true).attr("fill", function(d) {
return colorScale(d.key);
}).attr("width", width).attr("height", height).on("click", function(d) {
}).on("click", function(d) {
dispatch.call("customClick", this, d);
});
series = selection.selectAll(".series").merge(series);
// Add Dots to Group
}).merge(seriesSelect);
// Add dots to series
var dots = series.selectAll(".dot").data(function(d) {
return d.values;
});
Expand Down Expand Up @@ -965,6 +965,7 @@ d3.ez.component.lineChart = function module() {
}).attr("fill", "none").merge(series).transition().duration(transition.duration).attrTween("d", function(d) {
return pathTween(d.values);
});
series.exit().transition().style("opacity", 0).remove();
});
}
// Configuration Getters & Setters
Expand Down Expand Up @@ -1026,23 +1027,24 @@ d3.ez.component.heatMapRow = function module() {
var cellWidth = xScale.bandwidth();
selection.each(function() {
// Create series group
var series = selection.selectAll(".series").data(function(d) {
var seriesSelect = selection.selectAll(".series").data(function(d) {
return [ d ];
}).enter().append("g").classed("series", true).on("click", function(d) {
dispatch.call("customClick", this, d);
});
selection.selectAll(".series").merge(series);
var series = seriesSelect.enter().append("g").classed("series", true).on("click", function(d) {
dispatch.call("customClick", this, d);
}).merge(seriesSelect);
// Add cells to series
var cells = series.selectAll(".cell").data(function(d) {
return d.values;
});
cells.enter().append("rect").attr("x", function(d) {
return xScale(d.key);
}).attr("y", 0).attr("rx", 2).attr("ry", 2).attr("fill", "black").attr("class", "cell").attr("width", cellWidth).attr("height", cellHeight).on("click", dispatch.customClick).on("mouseover", function(d) {
dispatch.call("customMouseOver", this, d);
}).merge(cells).transition().duration(transition.duration).attr("fill", function(d) {
}).transition().duration(transition.duration).attr("fill", function(d) {
return colorScale(d.value);
});
cells.exit().remove();
cells.exit().transition().style("opacity", 0).remove();
});
}
// Configuration Getters & Setters
Expand Down Expand Up @@ -1110,13 +1112,13 @@ d3.ez.component.heatMapRing = function module() {
// Arc Generator
var arc = d3.arc().outerRadius(radius).innerRadius(innerRadius).cornerRadius(2);
selection.each(function() {
// Create chart group
var series = selection.selectAll(".series").data(function(d) {
// Create series group
var seriesSelect = selection.selectAll(".series").data(function(d) {
return [ d ];
}).enter().append("g").classed("series", true).on("click", function(d) {
dispatch.call("customClick", this, d);
});
series = selection.selectAll(".series").merge(series);
var series = seriesSelect.enter().append("g").classed("series", true).on("click", function(d) {
dispatch.call("customClick", this, d);
}).merge(seriesSelect);
var segments = series.selectAll(".segment").data(function(d) {
var key = d.key;
var data = pie(d.values);
Expand All @@ -1131,7 +1133,7 @@ d3.ez.component.heatMapRing = function module() {
}).merge(segments).transition().duration(transition.duration).attr("fill", function(d) {
return colorScale(d.data.value);
});
segments.exit().remove();
segments.exit().transition().style("opacity", 0).remove();
});
}
// Configuration Getters & Setters
Expand Down Expand Up @@ -1204,14 +1206,16 @@ d3.ez.component.proportionalAreaCircles = function module() {
var cellWidth = xScale.bandwidth();
selection.each(function() {
// Create series group
var series = selection.selectAll(".series").data(function(d) {
var seriesSelect = selection.selectAll(".series").data(function(d) {
return [ d ];
}).enter().append("g").attr("transform", function(d) {
return "translate(0, " + cellHeight / 2 + ")";
}).classed("series", true).on("click", function(d) {
});
var series = seriesSelect.enter().append("g").classed("series", true).on("click", function(d) {
dispatch.call("customClick", this, d);
}).merge(seriesSelect);
series.attr("transform", function(d) {
return "translate(0, " + cellHeight / 2 + ")";
});
series = selection.selectAll(".series").merge(series);
// Add spots to series
var spots = series.selectAll(".punchSpot").data(function(d) {
return d.values;
});
Expand All @@ -1224,7 +1228,7 @@ d3.ez.component.proportionalAreaCircles = function module() {
}).attr("r", function(d) {
return sizeScale(d["value"]);
});
spots.exit().remove();
spots.exit().transition().style("opacity", 0).remove();
});
}
// Configuration Getters & Setters
Expand Down Expand Up @@ -1291,12 +1295,13 @@ d3.ez.component.numberCard = function module() {
var cellWidth = xScale.bandwidth();
selection.each(function() {
// Create series group
var series = selection.selectAll(".series").data(function(d) {
var seriesSelect = selection.selectAll(".series").data(function(d) {
return [ d ];
}).enter().append("g").classed("series", true).attr("width", width).attr("height", height).on("click", function(d) {
dispatch.call("customClick", this, d);
});
series = selection.selectAll(".series").merge(series);
var series = seriesSelect.enter().append("g").classed("series", true).on("click", function(d) {
dispatch.call("customClick", this, d);
}).merge(seriesSelect);
// Add numbers to series
var numbers = series.selectAll(".number").data(function(d) {
return d.values;
});
Expand All @@ -1309,7 +1314,7 @@ d3.ez.component.numberCard = function module() {
}).merge(numbers).transition().duration(1e3).attr("fill", function(d) {
return colorScale(d.value);
});
numbers.exit().remove();
numbers.exit().transition().style("opacity", 0).remove();
});
}
// Configuration Getters & Setters
Expand Down
4 changes: 1 addition & 3 deletions build/d3-ez.min.js
View file

Large diffs are not rendered by default.

Binary file modified build/d3-ez.zip
View file
Binary file not shown.
12 changes: 7 additions & 5 deletions examples/HeatMapTableExample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,20 @@
<div>Value: <span id="message"></span></div>

<script type="text/javascript">
d3.json("data/netflix_isp_speed_index.json", function(error, json) {
d3.json("data/town2town.json", function(error, json) {
// Netflix Speed ISP Speed Index Source: https://ispspeedindex.netflix.com/country/uk/
// Possibly move to http://www.holiday-weather.com/new_york_city/averages/ ?

var colors = ["#fb0007", "#fdb409", "#ffff0b", "#c3ff28"];
// var colors = ["#fb0007", "#fdb409", "#ffff0b", "#c3ff28"];
var colors = ["#c3ff28", "#fdb409", "#f38337", "#fb0007"];
var chart = d3.ez.chart.heatMapTable().colors(colors);
var legend = d3.ez.component.legend().title('Speed Index');
var title = d3.ez.component.title().mainText(json.Metadata.Title).subText(json.Metadata.Detail);

// Create chart object
var myChart = d3.ez.chart()
.width(750)
.height(400)
.height(600)
.chart(chart)
.legend(legend)
.title(title)
Expand All @@ -38,11 +40,11 @@

// Convert json to d3-ez data format
var data = d3.nest().key(function(d) {
return d.ISP;
return d.TownA;
}).entries(json.Data).map(function(obj) {
obj.values = obj.values.map(function(values) {
return {
key: values.Month,
key: values.TownB,
value: values.Value
};
});
Expand Down
2 changes: 1 addition & 1 deletion examples/ReadmeExample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
};

// Configure chart components
var chart = d3.ez.chart.barVertical().colors(['#00c41d', '#FFA500', '#800080', '#ffe714']);
var chart = d3.ez.chart.barChartVertical().colors(['#00c41d', '#FFA500', '#800080', '#ffe714']);
var legend = d3.ez.component.legend().title("Fruit Type");
var title = d3.ez.component.title().mainText("Super Fruit Survey").subText("Which fruit do you like?");

Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "d3-ez",
"version": "2.2.0",
"version": "2.2.1",
"description": "D3 Easy Reusable Chart Library",
"license": "GPL-3.0",
"keywords": [
Expand Down
68 changes: 34 additions & 34 deletions src/component/barsStacked.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,49 +4,49 @@
*/
d3.ez.component.barsStacked = function module() {
// Default Options (Configurable via setters)
var width = 100;
var width = 100;
var height = 400;
var transition = { ease: d3.easeBounce, duration: 500 };
var transition = { ease: d3.easeBounce, duration: 500 };
var colorScale;
var xScale;
var yScale;
var xScale;
var yScale;
var dispatch = d3.dispatch("customMouseOver", "customMouseOut", "customClick");

function my(selection) {
// Stack Generator
var stacker = function(data) {
series = [];
var y0 = 0;
data.forEach(function(d, i) {
series[i] = {
name: d.key,
value: d.value,
y0: y0,
y1: y0 + d.value
};
y0 += d.value;
});
// Stack Generator
var stacker = function(data) {
series = [];
var y0 = 0;
data.forEach(function(d, i) {
series[i] = {
name: d.key,
value: d.value,
y0: y0,
y1: y0 + d.value
};
y0 += d.value;
});

return series;
};
return series;
};

selection.each(function() {
// Create series group
var series = selection.selectAll('.series')
.data(function(d) { return [d]; })
.enter()
// Create series group
var seriesSelect = selection.selectAll('.series')
.data(function(d) { return [d]; });

var series = seriesSelect.enter()
.append("g")
.classed('series', true)
.attr("width", width)
.attr("height", height)
.on("click", function(d) { dispatch.call("customClick", this, d); });
series = selection.selectAll('.series').merge(series);
.on("click", function(d) { dispatch.call("customClick", this, d); })
.merge(seriesSelect);

// Add Bars to Group
// Add bars to series
var bars = series.selectAll(".bar")
.data(function(d) { return stacker(d.values); });

bars.enter().append("rect")
bars.enter()
.append("rect")
.classed("bar", true)
.attr("width", width)
.attr("x", 0)
Expand All @@ -73,11 +73,11 @@ d3.ez.component.barsStacked = function module() {
}

// Configuration Getters & Setters
my.width = function(_) {
if (!arguments.length) return width;
width = _;
return this;
};
my.width = function(_) {
if (!arguments.length) return width;
width = _;
return this;
};

my.height = function(_) {
if (!arguments.length) return height;
Expand Down
Loading

0 comments on commit 9229fbe

Please sign in to comment.