function initGraph () {
var loading = david.createLoadingEl()
graphContainer.prepend(loading)
d3.json(pathname + graphJsonUrl, function (er, json) {
if (er) return loading.empty().text("Error occurred retrieving graph data")
transformData(cycle.retrocycle(json), function (er, root) {
var vis = graph.create(container)
// Initialize the display to show a few nodes.
root.children.forEach(graph.toggleChildren)
graph.update(vis, root)
loading.remove()
})
})
}
constructor() {
let self = this;
this.left = Object()
this.right = Object()
this.current_suggestions=[{'text' : ''}]
this.model_left='none';
this.model_right='none';
this.class_names = {'20ng' : ['Atheism', 'Christian'], 'politeness': ['rude', 'polite'], 'sentiment' : ['negative', 'positive']}
// Buttons
this.dataset_map = {'Religion' : '20ng', 'Politeness' : 'politeness', 'Sentiment' : 'sentiment'};
let dataset_div = d3.select('#datasets_div')
dataset_div.selectAll('li').data(['Religion', 'Politeness', 'Sentiment'])
.enter().append('li')
.append('a')
.classed('tablink', true)
.text(d => d)
.on('click', function(d) {
d3.select('#datasets_div').selectAll('a').classed('active', false);
d3.select(this).classed('active', true);
self.update_dataset(d)
})
let button = d3.select('#explain_button_div').append('button')
button.classed('btn', true)
button.text('Explain')
button.on('click', () => {this.send_request(); this.true_class=-1;});
// Text area
this.textarea = d3.select('#input_text_div').append('textarea').style('width', '100%').style('height', '100%');
// Build sides
this.model_options = {'20ng' : ['none', 'Logistic Regression', 'Random Forest', 'Word2vec RF', 'SVM RBF', 'Clean SVM'],
'politeness' : ['none', 'Logistic Regression', 'Random Forest', 'SVM RBF'],
'sentiment' : ['none', 'Logistic Regression', 'Random Forest', 'NN on Embeddings']};
this.model_map = {'none' : 'none', 'Logistic Regression' : 'lr', 'Random Forest' : 'rf', 'SVM RBF' : 'svm', 'NN on Embeddings' : 'nn', 'Clean SVM' : 'cleansvm', 'Word2vec RF' : 'rfemb'}
this.build_side(this.left, '#left_model_div');
this.build_side(this.right, '#right_model_div');
this.update_side('left', '', '')
this.update_side('right', '', '')
d3.json("static/suggestions.json", function(error, json) {
self.suggestions = json['suggestions'];
self.accuracy = json['accuracy'];
self.update_dataset('Religion');
})
}
function init() {
var target = 'data/' + location.pathname.substring(1);
if (target === 'data/') {
target = 'data/demo2.json';
}
d3.json(target, function(json) {
preprocessJson(json);
visChart.loadJsonToChart(json);
// document.getElementById('expand-errors').click();
});
document.getElementById('expand-errors').onclick = visChart.expandErrors;
document.getElementById('expand-ok').onclick = visChart.expandOK;
document.getElementById('expand-dontknow').onclick = visChart.expandDontKnow;
document.getElementById('small-demo').onclick = smallDemo;
document.getElementById('large-demo').onclick = largeDemo;
}
tributary.loadPlugin = function(url, opts, cb) {
d3.json(url, function(err, plugin) {
if (err) return onErr(err);
plugin.options = opts;
plugin.elId = Tributary.newPluginId();
Tributary.plugins[plugin.id] = plugin;
var q = queue();
q.defer(loadCss, plugin);
q.defer(loadHtml, plugin);
q.defer(loadScript, plugin);
q.awaitAll(function(err) {
if (err) return cb(err);
Tributary.activatePlugin(tributary, plugin.id);
cb(null, plugin.id);
});
});
};
render: function() {
// Dynamically calculate map dimensions
$('.view-map').height(window.innerHeight);
var height = window.innerHeight;
var width = $('.view-map').width();
this.svg = d3.select('.view-map').append('svg')
.attr('height', height - 20)
.attr('width', width - 20);
this.projection = d3.geo.mercator()
.scale(width / 6.5)
.translate([width / 2, height / 1.8]);
var path = d3.geo.path().projection(this.projection);
var g = this.svg.append('g');
// Filter effect for map circles
var glowFilter = this.svg.append('defs')
.append('filter')
.attr('id', 'glow');
glowFilter.append('feGaussianBlur')
.attr('stdDeviation', 4.5)
.attr('result', 'coloredBlur');
var merge = glowFilter.append('feMerge');
merge.append('feMergeNode')
.attr('in', 'coloredBlur');
merge.append('feMergeNode')
.attr('in', 'SourceGraphic');
// Retrieve topology from file and create map
d3.json('data/world-110m2.json', function(error, topology) {
g.selectAll('path')
.data(topojson.feature(topology, topology.objects.countries).features)
.enter()
.append('path')
.attr('d', path);
});
return this;
},
TwoAxisFocus.prototype.get = function(chartid, url, params){
d3.json(url.concat("?", $.param(params)),
function(error, result) {
result.data.forEach(function(d){
d.values.forEach(function(v){
v.x = new Date(v.x * 1000);
});
});
this.chart.yDomain1(result.yAxis1.bounds);
this.chart.yDomain2(result.yAxis2.bounds);
this.chart.yDomainC(result.yAxis2.bounds);
d3.select("#".concat(chartid, " svg"))
.datum(result.data)
.call(this.chart);
nv.utils.windowResize(this.chart.update);
}.bind(this));
};
API.get = function(uri, params, done) {
// console.info('[API] get("%s", %s)', uri, JSON.stringify(params));
if (arguments.length === 2) {
done = params;
params = addAPIKey({});
} else if (params) {
params = addAPIKey(params);
}
if (params) uri = join([uri, params], '?');
var url = API.url ? join([API.url, uri], '/') : uri;
console.info('[API] get: "%s"', url);
return d3.json(url, function(error, data) {
if (data && data.errors && data.errors.length) {
error = data.errors[0];
}
return done(error, data);
});
};
$('#home-page').each(function () {
// Render the dependency counts graph
d3.json('dependency-counts.json', function (err, data) {
if (err) return console.error('Failed to get dependency counts', err)
david.renderDependencyCountsGraph(data)
})
var url = $('.badge-maker span')
var badge = $('.badge-maker img')
// Update the image when the user changes the url
url.on('input', function () {
badge.attr('src', url.text() + '.svg')
})
// Red text if the url isn"t good for it.
badge.error(function () {
url.addClass('nope')
badge.hide()
})
// Green text if it is... wait a minute should this be tied to repo health not.
badge.load(function () {
if (badge.attr('src') === '/img/status/outofdate.svg') return
url.removeClass('nope')
badge.show()
})
/* RSS feed */
$.getFeed({
url: '/news/rss.xml',
success: function (feed) {
var entry = feed.items[0]
entry.shortDesc = $('<div/>').html(entry.description).text().substr(0, 200)
entry.datetime = new Date(entry.updated).toISOString()
entry.formattedDate = moment(new Date(entry.updated)).format('MMMM Do YYYY, HH:mm')
var tpl = fs.readFileSync(path.join(__dirname, '..', '..', 'dist', 'inc', 'news.html'), {encoding: 'utf8'})
$('#stats').append(Handlebars.compile(tpl)(entry))
}
})
})
Template.hello.onCreated(function () {
// counter starts at 0
var canvas = d3.select('body').append('svg')
.attr('width',500)
.attr('height',500)
.append('g')
.attr("transform", "translate(50,50)");
var tree = d3.layout.tree()
.size([400,400]);
console.log("a;ldkfj");
d3.json("../../../../../mydata.json", function(data) {
console.log(data);
var nodes = tree.nodes(data);
var links = tree.links(nodes);
console.log(nodes);
var node = canvas.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class","node")
.attr("transform", function(d) {return "translate (" + d.x + "," + d.y + ")"; })
node.append("circle")
.attr("r",5)
.attr("fill","steelblue");
node.append("text")
.text(function (d) {return d.name})
var diagnoal = d3.svg.diagonal();
canvas.selectAll(".link")
.data(links)
.enter()
.append("path")
.attr("class","link")
.attr("fill","none")
.attr("stroke","#ADADAD")
.attr("d",diagnoal);
});
});
drawFrames(frames) {
var guide = this.config.guide;
if (typeof (guide.sourcemap) === 'string') {
d3.json(guide.sourcemap, (e, topoJSONData) => {
if (e) {
throw e;
}
this._drawMap(frames, topoJSONData);
});
} else {
this._drawMap(frames, guide.sourcemap);
}
}
var promise = new P(function (resolve) {
d3.json('data/topo/world-50m.json', function (data) {
// compute important arcs
var presimplified = topojson.presimplify(data);
// transform all MutliPolygon as an array of Polygon
// as it, we just have Polygons
data.objects.countries.geometries = _.flatten(data.objects.countries.geometries.map(function(g){
// possibly non unique country id : cid
g.cid = g.id;
// multi polygons
if(g.type === 'MultiPolygon'){
return _.range(g.arcs.length).map(function(p, i){
return _.extend({}, g, {
type: 'Polygon',
arcs: g.arcs[i],
// unique id
id: g.id + '_' + i
});
});
}
// simple polygons
else return _.extend({}, g, {
// unique id
id: g.id + '_0'
});
}), true);
// remove too small pieces without neighbour
// first, find all polygons without neighbours
var path = d3.geo.path()
.projection(simplify(.1, projection));
var features = topojson.feature(data, data.objects.countries).features;
var neighbors = topojson.neighbors(data.objects.countries.geometries);
data.objects.countries.geometries = data.objects.countries.geometries.filter(function(g, i){
return neighbors[i].length > 0 // neighbours
|| path.area(features[i]) > 100; // not too small
});
resolve(presimplified);
});
});
function refresh() {
d3.json(slice.jsonEndpoint(), function (error, payload) {
var fd = payload.form_data;
if (error) {
slice.error(error.responseText);
return '';
}
var div = d3.select(slice.selector);
div.selectAll('*').remove();
var extent = null;
if (fd.horizon_color_scale === 'overall') {
var allValues = [];
payload.data.forEach(function (d) {
allValues = allValues.concat(d.values);
});
extent = d3.extent(allValues, function (d) { return d.y; });
} else if (fd.horizon_color_scale === 'change') {
payload.data.forEach(function (series) {
var t0y = series.values[0].y; // value at time 0
series.values.forEach(function (d, i) {
d.y = d.y - t0y;
});
});
}
div.selectAll(".horizon")
.data(payload.data)
.enter()
.append('div')
.attr('class', 'horizon')
.each(function (d, i) {
horizonChart()
.height(fd.series_height)
.width(slice.width())
.extent(extent)
.title(d.key)
.call(this, d.values, i);
});
slice.done();
});
}
ExpressionBar.prototype.loadExpression = function(url) {
if (typeof url === 'undefined') {
return ;
}
var self = this;
self.pb.show();
d3.json(url, function(error, json) {
if (error) {
console.warn(error);
return;
}
self.data = new dataContainer.ExpressionData(json, self.opt);
if(typeof self.data.compare === 'undefined'){
self.data.compare = '';
}
self.pb.hide();
self.dataLoaded();
});
};
query.exec(function(err, data) {
if (!err) {
d3.json(data, function (flights_data) {
//Step1: Create the dc.js chart objects & ling to div
var lineChart = dc.lineChart("#dc-line-chart");
var rowChart = dc.rowChart("#dc-row-graph");
//Step2: Run data through crossfilter
var fcf = crossfilter(flights_data);
//Step3: Create Dimension that we'll need
var CompFilter = CompDimension.group();
var PriceDimension = fcf.dimension(function(p){return p.flights.dtPrice});
var PriceFilter = CompDimension.group();
//Step4: Create the Visualisations
lineChart.width(230)
.height(200)
.dimension(PriceDimension)
.group(PriceFilter)
.x(d3.scale.linear().domain([400, 1500]))
.valueAccessor(function(d) {
return d.value;
})
.renderHorizontalGridLines(true)
.elasticY(true)
.xAxis().tickFormat(function(v) {return v;}); ;
rowChart.width(340)
.height(850)
.dimension(CompDimension)
.group(CompFilter)
.renderLabel(true)
.colors(["#a60000","#ff0000", "#ff4040","#ff7373","#67e667","#39e639","#00cc00"])
.colorDomain([0, 0]);
console.log(CompFilter.top(1)[0].value);
dc.renderAll();
});
};
});
loadPorject: function (file) {
NProgress.start();
var that = this;
var first = true;
d3.json(file, function (project) {
// Update width and height according to window size.
var height = Ember.$(window).height() - 140;
var ratio = height / project.height;
var width = project.width * ratio;
that.set('width', width);
that.set('height', height);
that.set('scale', ratio);
d3.select(".dotplot-view-main > svg")
.attr('width', width)
.attr('height', height);
project.frames.forEach(function (frameData) {
// Create a new frame record.
var frame = that.get('store')
.createRecord('frame', frameData);
if (first) {
that.send('frameTransition', frame);
first = false;
}
NProgress.inc();
});
NProgress.done();
});
},
const speciesTree = function(tree_svg,treeJsonPath, handleResult){
var treeplot = d3.select("#"+tree_svg);
treeplot.attr("width", panXDashboard.winInnerWidth/3.);
treeplot.attr("height", panXDashboard.winInnerWidth/3.);
var myTree;
speciesTreeCallbacks.onBranchClick = function (d){
const dt = 1000;
if (myTree.panZoom){
myTree.panZoom.reset();
}
applyChangeToTree(myTree,
function(){zoomIntoClade(myTree, d.terminal?d.parent:d, dt, true);}
,dt);
const metaTableID=panXMetaTable.meta_table_id;
const tipList=filterMetaDataTable(metaTableID, myTree);
const clusterTableId=panXClusterTable.cluster_table_id;
//# temporarily not filter clustertable when zooming into clade
//filterClusterDataTable(clusterTableId, myTree);
};
//console.log("loading speciesTree", treeJsonPath);
d3.json(treeJsonPath, function(err, data){
if (data){
myTree = phyloTree(data, {svg:treeplot, margins:{top:10, bottom:10, left:10, right:10},
scaleBar:true, autoTipSize:false, tipStrokeWidth:0.5,
callbacks:speciesTreeCallbacks, orientation:{x:1, y:1}}
);
}else{
console.log("error loading speciesTree data",err);
}
drawTree(myTree);
tipLabels(myTree, tipText, tipFontSize(myTree), 3, 8);
myTree.showTipLabels=true;
// add a look up for tips
handleResult(myTree);
});
}
export function drawScaledGroupedBarChart() {
const options = {
groupByVariable: 'value',
barColors: ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f'],
baseWidth: '100%',
baseHeight: '100%'
}
d3.json('src/response-distribution.json', function(error, data) {
data.forEach(d => {
if (d.type === 'numeric') {
d.responseCounts.forEach(e => {
e.value = `${e.x0} to ${e.x1}`;
delete e.x0;
delete e.x1;
})
}
})
data.forEach((d, i) => {
d3.select('#root').append('h4')
.text(data[i].column);
const selector = `${data[i].column}`;
console.log('selector', selector);
d3.select('#root')
.append('svg')
.attr('width', 300)
.attr('height', 400)
.attr('id', (d, i) => selector);
plot(`#${selector}`, data[i].responseCounts, options)
})
})
}
//----- Runtime -----
function app() {
logger.log('app', 'Loaded');
d3.json(DATA, function(error, data) {
if (error) return console.warn(error);
UI.load(data, render);
window.addEventListener('resize', function() {
UI.load(data, render);
});
function render(options) {
chart.draw(process(data, options.filter), options, changeNodes);
}
function changeNodes(removed, type, options) {
if (_.isEqual(type, 'target')) {
options.shelf.candidates = _.remove(options.filter.candidates, function(d) {
return !_.isUndefined(_.find(removed[0], function(o) {
return _.isEqual(o.__data__.meta.target_id, d);
}));
});
}
if (_.isEqual(type, 'source')) {
options.shelf.answers = _.remove(options.filter.answers, function(d) {
return !_.isUndefined(_.find(removed[0], function(o) {
return _.isEqual(o.__data__.meta.source_rank, d);
}));
});
}
UI.load(data, render, options);
}
});
}
function d3MapAddTopoJSONLayer(newTopoLayer, newTopoLayerName, newTopoLayerClass, renderType, specificFeature, renderFrequency,cartoLayer) {
d3.json(newTopoLayer, function(error, topoData) {
var layerDataType = "topojson";
for (var x in topoData.objects) {
if (x == specificFeature || specificFeature == "all") {
if (!cartoLayer) {
cartoLayer = Layer()
.type("topojson")
.path(newTopoLayer)
.label(newTopoLayerName)
.cssClass(newTopoLayerClass)
}
var topoLayerData = topojson.feature(topoData, topoData.objects[x]).features;
processFeatures(topoLayerData, newTopoLayerName, newTopoLayerClass, renderType, renderFrequency,cartoLayer);
}
}
})
}
$(document).ready(function () {
d3.json('/caravel/activity_per_day', function (json) {
var ext = d3.extent(d3.values(json));
var cal = new CalHeatMap();
var range = 10;
var legendBounds = [];
var step = (ext[1] - ext[0]) / (range - 1);
for (var i = 0; i< range; i++) {
legendBounds.push(i * step + ext[0]);
}
cal.init({
start: new Date().setFullYear(new Date().getFullYear() - 1),
range: 13,
data: json,
legend: legendBounds,
legendColors: ['#D6E685', '#1E6823'], // Based on github's colors
domain: "month",
subDomain: "day",
itemName: "action",
tooltip: true
});
});
modelViewTable('#dash_table', 'DashboardModelViewAsync', 'changed_on', 'desc');
});
}
////////////////////////////////////////////////////////////////////////////////
// Callback to handle AJAX request errors
////////////////////////////////////////////////////////////////////////////////
var jsonError = function(error) {
console.log(error);
}
////////////////////////////////////////////////////////////////////////////////
// Load data
////////////////////////////////////////////////////////////////////////////////
d3.json('./datasets/global-temperature.json', function(error, result) {
// Error checking.
if (error) {
// Error function.
jsonError(error);
} else {
// If no error occurrs, run the jsonSuccess function.
jsonSuccess(result);
}
});
d3.json('/json/events.json', (error, json) => {
var data = _munge(json)
x.domain(data.map((d) => d.id))
x1.domain(TOPICS).rangeRoundBands([0, x.rangeBand()])
y.domain([0, d3.max(data, (d) => d.max)])
var svg = d3.select('#attendance-histogram').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`)
svg.append('g')
.attr('class', 'x axis')
.attr('transform', `translate(0, ${height})`)
.call(xAxis)
svg.append('g')
.attr('class', 'y axis')
.call(yAxis)
.append('text')
.attr('transform', 'rotate(-90)')
.attr('y', 6)
.attr('dy', '.71em')
.style('text-anchor', 'end')
.text('Attendance by topic')
var bin = svg.selectAll('.bin')
.data(data)
.enter().append('g')
.attr('class', 'bin')
.attr('transform', (d) => `translate(${x(d.id)}, 0)`)
bin.selectAll('rect')
.data((d) => d.topics)
.enter().append('rect')
.attr('x', (d, i) => x1(d.name))
.attr('width', x1.rangeBand())
.attr('y', (d) => y(d.total))
.attr('height', (d) => height - y(d.total))
.style('fill', (d) => color(d.name))
})
zoommap: function() {
//Width and height
var w = 800;
var h = 600;
//Define map projection
var projection = d3.geo.mercator()
.translate([0, 0])
.scale([1]);
//Define path generator
var path = d3.geo.path()
.projection(projection);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var g = svg.append("g")
.style("stroke-width", "1px");
var active = d3.select(null);
//Load in GeoJSON data
d3.json("/data/aus_lga.json", function(json) {
// Calculate bounding box transforms for entire collection
var b = path.bounds(json),
s = .95 / Math.max((b[1][0] - b[0][0]) / w, (b[1][1] - b[0][1]) /
h),
t = [(w - s * (b[1][0] + b[0][0])) / 2, (h - s * (b[1][1] + b[0]
[1])) / 2];
// Update the projection
projection.scale(s)
.translate(t);
//Bind data and create one path per GeoJSON feature
g.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.on("click", clicked)
.style("stroke-width", "1")
.style("stroke", "steelblue")
.style("fill", "white");
});
function clicked(d) {
if (active.node() === this) return reset();
active.classed("active", false);
active = d3.select(this)
.classed("active", true);
var bounds = path.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
//scale = .9 / Math.max(dx / w, dy / h),
scale = Math.max(1, Math.min(8, 0.9 / Math.max(dx / w, dy / h)));
translate = [w / 2 - scale * x, h / 2 - scale * y];
strokeWidth = (1 / scale);
console.log(scale);
g.transition()
.duration(750)
.style("stroke-width", 1 + "px")
.attr("transform", "translate(" + translate + ")scale(" + scale +")");
}
function reset() {
active.classed("active", false);
active = d3.select(null);
g.transition()
.duration(750)
.style("stroke-width", "1px")
.attr("transform", "");
}
}
function refresh() {
var width = slice.width();
var height = slice.height();
var hmWidth = width - (margins.l + margins.r);
var hmHeight = height - (margins.b + margins.t);
var fp = d3.format('.3p');
d3.json(slice.jsonEndpoint(), function (error, payload) {
var matrix = {};
if (error) {
slice.error(error.responseText);
return '';
}
var fd = payload.form_data;
var data = payload.data;
function ordScale(k, rangeBands, reverse) {
if (reverse === undefined) {
reverse = false;
}
var domain = {};
$.each(data, function (i, d) {
domain[d[k]] = true;
});
domain = Object.keys(domain).sort(function (a, b) {
return b - a;
});
if (reverse) {
domain.reverse();
}
if (rangeBands === undefined) {
return d3.scale.ordinal().domain(domain).range(d3.range(domain.length));
} else {
return d3.scale.ordinal().domain(domain).rangeBands(rangeBands);
}
}
var xScale = ordScale('x');
var yScale = ordScale('y', undefined, true);
var xRbScale = ordScale('x', [0, hmWidth]);
var yRbScale = ordScale('y', [hmHeight, 0]);
var X = 0,
Y = 1;
var heatmapDim = [xRbScale.domain().length, yRbScale.domain().length];
var color = px.color.colorScalerFactory(fd.linear_color_scheme);
var scale = [
d3.scale.linear()
.domain([0, heatmapDim[X]])
.range([0, hmWidth]),
d3.scale.linear()
.domain([0, heatmapDim[Y]])
.range([0, hmHeight])
];
var container = d3.select(slice.selector)
.style("left", "0px")
.style("position", "relative")
.style("top", "0px");
var canvas = container.append("canvas")
.attr("width", heatmapDim[X])
.attr("height", heatmapDim[Y])
.style("width", hmWidth + "px")
.style("height", hmHeight + "px")
.style("image-rendering", fd.canvas_image_rendering)
.style("left", margins.l + "px")
.style("top", margins.t + "px")
.style("position", "absolute");
var svg = container.append("svg")
.attr("width", width)
.attr("height", height)
.style("left", "0px")
.style("top", "0px")
.style("position", "absolute");
var rect = svg.append('g')
.attr("transform", "translate(" + margins.l + "," + margins.t + ")")
.append('rect')
.style('fill-opacity', 0)
.attr('stroke', 'black')
.attr("width", hmWidth)
.attr("height", hmHeight);
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset(function () {
var k = d3.mouse(this);
var x = k[0] - (hmWidth / 2);
return [k[1] - 20, x];
})
.html(function (d) {
var k = d3.mouse(this);
var m = Math.floor(scale[0].invert(k[0]));
var n = Math.floor(scale[1].invert(k[1]));
if (m in matrix && n in matrix[m]) {
var obj = matrix[m][n];
var s = "";
s += "<div><b>" + fd.all_columns_x + ": </b>" + obj.x + "<div>";
s += "<div><b>" + fd.all_columns_y + ": </b>" + obj.y + "<div>";
s += "<div><b>" + fd.metric + ": </b>" + obj.v + "<div>";
s += "<div><b>%: </b>" + fp(obj.perc) + "<div>";
return s;
}
});
rect.call(tip);
var xAxis = d3.svg.axis()
.scale(xRbScale)
.tickValues(xRbScale.domain().filter(
function (d, i) {
return !(i % (parseInt(fd.xscale_interval, 10)));
}))
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yRbScale)
.tickValues(yRbScale.domain().filter(
function (d, i) {
return !(i % (parseInt(fd.yscale_interval, 10)));
}))
.orient("left");
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + margins.l + "," + (margins.t + hmHeight) + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("transform", "rotate(-45)")
.style("font-weight", "bold");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + margins.l + ", 0)")
.call(yAxis);
rect.on('mousemove', tip.show);
rect.on('mouseout', tip.hide);
var context = canvas.node().getContext("2d");
context.imageSmoothingEnabled = false;
createImageObj();
// Compute the pixel colors; scaled by CSS.
function createImageObj() {
var imageObj = new Image();
var image = context.createImageData(heatmapDim[0], heatmapDim[1]);
var pixs = {};
$.each(data, function (i, d) {
var c = d3.rgb(color(d.perc));
var x = xScale(d.x);
var y = yScale(d.y);
pixs[x + (y * xScale.domain().length)] = c;
if (matrix[x] === undefined) {
matrix[x] = {};
}
if (matrix[x][y] === undefined) {
matrix[x][y] = d;
}
});
var p = -1;
for (var i = 0; i < heatmapDim[0] * heatmapDim[1]; i++) {
var c = pixs[i];
var alpha = 255;
if (c === undefined) {
c = d3.rgb('#F00');
alpha = 0;
}
image.data[++p] = c.r;
image.data[++p] = c.g;
image.data[++p] = c.b;
image.data[++p] = alpha;
}
context.putImageData(image, 0, 0);
imageObj.src = canvas.node().toDataURL();
}
slice.done();
});
}
return new Promise(function(resolve, reject) {
d3.json(path, function(err, data) {
if (err || !data) { reject(err); }
else { resolve(data); }
})
})
function main(){
var graphics = doc.graphics;
var width = 180;
var height = 100;
var dotRadius = 2;
var partyLabel = {
width: 38,
height: 10
};
var margin = {
top: partyLabel.height,
left: dotRadius,
bottom: partyLabel.height / 2,
right: partyLabel.width
};
var slopeHeight = height - (margin.top + margin.bottom);
var slopeWidth = width - (margin.left + margin.right);
var slopeScale = d3.scale.linear()
.domain([0,76])
.range([slopeHeight,0]);
var layout = graphics.slope.layout()
.start(function(d){
return d.resultnow;
})
.end(function(d){
return d.resultprediction;
});
var SVGSlope = graphics.slope.svg()
.width(slopeWidth)
.radius(dotRadius)
.endClass(function(d){
return ' end-point ' + parties.className(d.data.party);
})
.startClass(function(d){
return parties.className(d.data.party) + ' start-point';
})
.slopeClass(function(d){
return parties.className(d.data.party) + ' slope';
})
.labelClass(function(d){
return parties.className(d.data.party) + ' slope-label';
})
.label(function(d,i){
if( d.data.winner ){
return parties.shortName(d.data.party);
}
})
.scale(slopeScale);
var slopeContainers = d3.selectAll('.constituency-group__slope-graphic').datum( function(){
var datum = doc.data.constituencyLookup[this.dataset.constituency];
datum.axes = (Number(this.dataset.order) === 0);
return datum;
});
slopeContainers.append('svg').attr({
class: 'slope-chart',
'data-constituency': function(d) { return d.id; },
width: width,
height: height
})
.append('g').attr({
transform: 'translate(' + margin.left + ',' + margin.top + ')'
})
.each(function(d,i){
if(d.axes){
var axis = d3.select(this).append('g')
.attr({
class:'slope-axes'
}).selectAll('g').data(['Last vote','Polling'])
.enter()
.append('g')
.attr({
'transform':function(d,i){
return 'translate('+(i*width)+',0)';
},
'class':'slope-axis'
});
axis.append('line').attr({
class:'axis-line',
x1:0, y1:3,
x2:0, y2:height
});
axis.append('text')
.attr({
'class':'axis-label'
})
.text(function(d){ return d; });
}
d3.select(this).selectAll('g.slope')
.data( layout(d.parties) )
.call(SVGSlope, d.axes);
});
redrawSlopes();
var resize = debounce(function(e) {
redrawSlopes();
}, 200);
window.addEventListener('resize', resize, false);
function redrawSlopes(){
//Resize the SVG
var el = d3.select('.constituency-group__slope-graphic').node();
var size = el.getBoundingClientRect();
var overhang = 12;
slopeWidth = size.width + overhang - (margin.left + margin.right);
slopeHeight = size.height - (margin.top + margin.bottom);
slopeScale.range([slopeHeight,0]);
SVGSlope
.width(slopeWidth)
.scale(slopeScale);
d3.selectAll('svg.slope-chart').each(function(d, i) {
var w = slopeWidth + margin.left + margin.right;
var h = slopeHeight + margin.top + margin.bottom;
var svg = d3.select(this);
svg.selectAll('g.slope-axis')
.attr('transform',function(d,i){
return 'translate('+(i*slopeWidth)+',0)';
});
svg.selectAll('g.slope').call(SVGSlope.reposition);
svg.attr({
width: w,
height: h
});
});
}
//decorate the results table
d3.select('.result-table')
.call(doc.graphics.resultTableDecorator);
//decorate the coalition table
d3.select('.coalition-table')
.call(doc.graphics.coalitionsTableDecorator);
//load and draw the map
d3.json(mapData,function(map){
d3.selectAll('.constituency-group__locator-map-ratio').datum( function(){
return battlegrounds[this.dataset.group];
}).each(function(g,i){
var locator = graphics.constituencyLocator()
.width(this.offsetWidth)
.height(this.offsetHeight)
.map(map)
.locations(g.constituencies);
d3.select(this).call(locator);
});
});
}
//setup United States Map
const map = d3.select('#map')
.append('svg')
.attr('width', 665)
.attr('height', 420)
.style('float', 'left')
.style('padding-top', '2px');
d3.json("us-states.json", function(json) {
map.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr('class', 'state')
.attr("d", path)
.on('click', e => {
visualizePlantData(e.properties.name);
showSpecies('clear');
showSelectedCommonName('clear');
});
});
function visualizePlantData(state) {
d3.selectAll('.circleContainer').remove();
state = fixStateName(state);
var dataset;
var max;
d3.csv(state, function(error, data) {
componentDidMount: function() {
this.serverRequest = d3.json('/cars.json')
},
componentDidMount() {
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.time.scale()
.range([0, width]);
var parseDate = d3.time.format("%d/%m/%Y").parse;
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("middle");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left").innerTickSize(-width)
.outerTickSize(0)
.tickPadding(10);
var yScale = d3.scale.linear();
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.itemCount); });
var svg = d3.select("div#svg-alfresco").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json(this.props.url, function(error, data) {
if (error) throw error;
color.domain(d3.keys(data[0]).filter(function(key) {
return key !== "date";
}));
//Check if data is return or an error msg.
if(data.msg){
return
}
data.forEach(function(d) {
d.date = parseDate(d.date);
});
var lines = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {
date: d.date,
itemCount: +d[name]
};
})
};
});
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain([
d3.min(lines, function(c) { return d3.min(c.values, function(v) {
return v.itemCount; });
}),
d3.max(lines, function(c) { return d3.max(c.values, function(v) {
return v.itemCount;
});
})
]);
function Y0() {
return (height/2)+6;
}
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// zero line
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + Y0() + ")")
.call(xAxis.tickFormat("").tickSize(0));
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
var lines = svg.selectAll(".lines")
.data(lines)
.enter().append("g")
.attr("class", "lines");
lines.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);
}).each(function(d){
if(d.name === "plannedDefectReduction" || d.name === "actualDefectReduction"){
d3.select(this).style('stroke', 'orange');
}
}).each(function(d){
if("plannedDefectReduction" === d.name || "planTestRun" === d.name){
d3.select(this).style('stroke-dasharray',('3, 3'));
}
});
var legend = svg.selectAll(".legend")
.data(color.domain().slice())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) {
return "translate(0," + i * 20 + ")";
});
legend.append("line")
.attr("x1", width - 28)
.attr("x2", width)
.attr("y1", 10)
.attr("y2", 10)
.each(function(name){
if("testNotRun" === name || "planTestRun" === name){
d3.select(this).style('stroke', 'steelblue');
} else {
d3.select(this).style('stroke', 'orange');
}
})
.each(function(d){
if("plannedDefectReduction" === d || "planTestRun" === d){
d3.select(this).style("stroke-dasharray","5,5");
}
});
legend.append("text")
.attr("x", width - 34)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) {
var label = ""
switch (d) {
case "plannedDefectReduction":
label = "Plan for Defect Reduction";
break;
case "actualDefectReduction":
label = "Actual Defect Reduction";
break;
case "planTestRun":
label = "Plan for tests to be run (x100)";
break;
case "testNotRun":
label = "Actual Tests not yet Run (x100)";
break;
default:
label = ""
}
return label;
});
});
}
},
updateDatetimeLocation: function(datetime) {
this.setState({
datetimeLocation: datetime
}, function() {
// this.log('Global example state changed:', JSON.stringify(this.state));
});
}
});
var dataUrl = process.env.DATA;
if (_.isEmpty(dataUrl)) {
dataUrl = 'device-data.json';
}
dataUrl = 'data/' + dataUrl;
d3.json(dataUrl, function(err, data) {
if (err) {
throw new Error('Could not fetch data file at ' + dataUrl);
}
var chartData = preprocess.processData(data);
React.renderComponent(
/* jshint ignore:start */
<Example chartData={chartData}/>,
/* jshint ignore:end */
document.body
);
});