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 ); });