Example #1
0
 afterAll(function() {
   d3.select('#' + id).remove();
 })
Example #2
0
var d3 = require('d3');
var chroniton = require('../');


d3.select(document.body).append('h3').text('Defaults');
d3.select(document.body)
    .append('div')
    .call(chroniton());

d3.select(document.body).append('h3').text('Custom Label Format');
d3.select(document.body)
    .append('div')
    .call(
      chroniton()
        .labelFormat(d3.time.format('%b %e'))
        .width(500));

d3.select(document.body).append('h3').text('Specifying the date Domain');
d3.select(document.body)
    .append('div')
    .call(
      chroniton()
        .domain([new Date(+new Date() - 60 * 1000), new Date()])
        .labelFormat(d3.time.format('%X'))
        .width(500));

(function() {
d3.select(document.body).append('h3').text('Play button');
d3.select(document.body)
    .append('div')
    .call(
Example #3
0
  render() {

    var wf = this.props.data;
    if(wf == null) {
      wf = {};
    }
    if(wf.tasks == null){
      wf.tasks = [];
    }
    let tasks = wf['tasks'];
    tasks.push({taskType:'final'});
    //let tasks = wf['tasks'].map(task => {return task.taskType;});
    var g = new dagreD3.graphlib.Graph().setGraph({rankdir: 'TD'});


    tasks.forEach(function(task) {
      let shape = 'rect';
      if(task.taskType == 'decision'){
        shape = 'diamond';
      }else if(task.taskType == 'final'){
        shape = 'circle';
      }
      let output = JSON.stringify(task.outputData);
      g.setNode(task.taskType, { label: task.taskType, shape: shape, output: output});

    });


    for(let i = 1; i < tasks.length; i++){
      let label = '';
      if(tasks[i-1].taskType == 'decision'){
        label = 'Case = ' + "''" || tasks[i-1].outputData.caseOutput;
      }else if( (i < tasks.length - 1) && tasks[i].taskType == 'decision'){
        label =  JSON.stringify(tasks[i-1].outputData);
      }
      g.setEdge(tasks[i-1].taskType, tasks[i].taskType, { label: label  });
    }

    g.nodes().forEach(function(v) {
      var node = g.node(v);
      node.rx = node.ry = 5;
    });

// Add some custom colors based on state
    //g.node('CLOSED').style = "fill: #f77";
    //g.node('ESTAB').style = "fill: #7f7";

    var svg = d3.select("svg"),
      inner = svg.select("g");

    // Create the renderer
    var render = new dagreD3.render();
    // Run the renderer. This is what draws the final edges.
    render(inner, g);
    //inner.selectAll("g.node").attr("title", function(v) { return styleTooltip(v, g.node(v).output) });

    return (
      <div className="ui-content container-fluid">
        <svg width="100%" height="600">
          <g transform="translate(20,20)"></g>
        </svg>
      </div>
    );
  }
Example #4
0
      selection.each(function (data, index) {
        // Allows chart to accept an array or object
        data = accessor.call(this, data, index);

        width = this.getBoundingClientRect().width;


        var adjustedWidth = width - margin.left - margin.right;
        var adjustedHeight = height - margin.top - margin.bottom;

        xScale = xScaleOpts.scale || d3.time.scale.utc();
        xScale.domain(xScaleOpts.domain || d3.extent(d3.merge(data), xValue));

        if (typeof xScale.rangeBands === "function") {
          xScale.rangeBands([0, adjustedWidth, 0.1]);
        } else {
          xScale.range([0, adjustedWidth]);
        }

        var yScaleDomain = yScaleOpts.domain || d3.extent(d3.merge(data), yValue);
        if (yScaleDomain[0] === yScaleDomain[1]) {
          --yScaleDomain[0];
          ++yScaleDomain[1];
        }
        yScale = yScaleOpts.scale || d3.scale.linear();
        yScale.domain(yScaleDomain)
          .range([adjustedHeight, 0]);

        if (xScaleOpts.nice) { xScale.nice(); }
        if (yScaleOpts.nice) { yScale.nice(); }

        var svgEvents = events().listeners(listeners).xScale(xScale);

        var svg = d3.select(this).selectAll("svg")
          .call(svgEvents)
          .data([data]);

        if(!svg.size()) {
          svg.enter().append("svg")
            .call(svgEvents);
        }
        svg.attr("width", width)
            .attr("height", height);


        svg.selectAll("g").remove();
        var g = svg.append("g");
        g.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

        // Brush
        if (listeners.brush && listeners.brush.length) {
          var brush = brushComponent()
            .height(adjustedHeight)
            .xScale(xScale)
            .brushend(listeners.brush);

          g.call(brush);
        }

        var X = scaleValue(xScale, xValue);
        var Y = scaleValue(yScale, yValue);
        var line = d3.svg.line(data).x(X).y(Y)
          .interpolate(interpolate)
          .tension(tension)
          .defined(defined);

        var linePath = path()
          .pathGenerator(line)
          .class(lines.lineClass)
          .stroke(function (d, i, j) {
            return color(lines.stroke.call(null, d, i, j));
          })
          .strokeWidth(lines.strokeWidth)
          .opacity(lines.opacity);

        if (axisX.show) {
          var xAxis = axis()
            .scale(xScale)
            .chartDimension(adjustedHeight)
            .class(axisX.gClass)
            .transform(axisX.transform || "translate(0," + (yScale.range()[0] + 1) + ")")
            .tick(axisX.tick)
            .title(axisX.title);

          g.call(xAxis);
        }

        if (axisY.show) {
          var yAxis = axis()
            .scale(yScale)
            .chartDimension(adjustedWidth)
            .orient("left")
            .class(axisY.gClass)
            .transform(axisY.transform || "translate(-1,0)")
            .tick(axisY.tick)
            .title(axisY.title);

          g.call(yAxis);
        }

        g.append("g")
          .data([data])
          .attr("class", lines.groupClass)
          .call(linePath);

        if (zeroLine.add) {
          var zLine = zeroAxisLine()
            .class(zeroLine.lineClass)
            .x1(function () { return xScale.range()[0]; })
            .x2(function () { return xScale.range()[1]; })
            .y1(function () { return yScale(0); })
            .y2(function () { return yScale(0); })
            .stroke(zeroLine.stroke)
            .strokeWidth(zeroLine.strokeWidth)
            .opacity(zeroLine.opacity);

          g.call(zLine);
        }

        if (circles.show) {
          var clippath = clip()
            .width(clipPath.width || adjustedWidth)
            .height(clipPath.height || adjustedHeight);

          var points = circle()
            .cx(X)
            .cy(Y)
            .radius(circles.radius)
            .class(circles.circleClass)
            .fill(function (d, i, j) {
              return circles.fill.call(null, d, i, j);
            })
            .stroke(circles.stroke ? circles.stroke : circles.fill)
            .strokeWidth(circles.strokeWidth)
            .opacity(circles.opacity);

          g.call(clippath)
            .append("g")
            .attr("clip-path", "url(#" + clippath.id() + ")")
            .selectAll("gCircles")
            .data(function (d) { return d; })
            .enter().append("g")
            .attr("class", circles.groupClass)
            .datum(function (d) { return d; })
            .call(points);
        }
      });
function countryMapChart(slice, payload) {
  // CONSTANTS
  const fd = payload.form_data;
  let path;
  let g;
  let bigText;
  let resultText;
  const container = slice.container;
  const data = payload.data;
  const format = d3.format(fd.number_format);

  const colorScaler = colorScalerFactory(fd.linear_color_scheme, data, v => v.metric);
  const colorMap = {};
  data.forEach((d) => {
    colorMap[d.country_id] = colorScaler(d.metric);
  });
  const colorFn = d => colorMap[d.properties.ISO] || 'none';

  let centered;
  path = d3.geo.path();
  d3.select(slice.selector).selectAll('*').remove();
  const div = d3.select(slice.selector)
    .append('svg:svg')
    .attr('width', slice.width())
    .attr('height', slice.height())
    .attr('preserveAspectRatio', 'xMidYMid meet');

  container.css('height', slice.height());
  container.css('width', slice.width());

  const clicked = function (d) {
    let x;
    let y;
    let k;
    let bigTextX;
    let bigTextY;
    let bigTextSize;
    let resultTextX;
    let resultTextY;

    if (d && centered !== d) {
      const centroid = path.centroid(d);
      x = centroid[0];
      y = centroid[1];
      bigTextX = centroid[0];
      bigTextY = centroid[1] - 40;
      resultTextX = centroid[0];
      resultTextY = centroid[1] - 40;
      bigTextSize = '6px';
      k = 4;
      centered = d;
    } else {
      x = slice.width() / 2;
      y = slice.height() / 2;
      bigTextX = 0;
      bigTextY = 0;
      resultTextX = 0;
      resultTextY = 0;
      bigTextSize = '30px';
      k = 1;
      centered = null;
    }

    g.transition()
      .duration(750)
      .attr('transform', 'translate(' + slice.width() / 2 + ',' + slice.height() / 2 + ')scale(' + k + ')translate(' + -x + ',' + -y + ')');
    bigText.transition()
      .duration(750)
      .attr('transform', 'translate(0,0)translate(' + bigTextX + ',' + bigTextY + ')')
      .style('font-size', bigTextSize);
    resultText.transition()
      .duration(750)
      .attr('transform', 'translate(0,0)translate(' + resultTextX + ',' + resultTextY + ')');
  };

  const selectAndDisplayNameOfRegion = function (feature) {
    let name = '';
    if (feature && feature.properties) {
      if (feature.properties.ID_2) {
        name = feature.properties.NAME_2;
      } else {
        name = feature.properties.NAME_1;
      }
    }
    bigText.text(name);
  };

  const updateMetrics = function (region) {
    if (region.length > 0) {
      resultText.text(format(region[0].metric));
    }
  };

  const mouseenter = function (d) {
    // Darken color
    let c = colorFn(d);
    if (c !== 'none') {
      c = d3.rgb(c).darker().toString();
    }
    d3.select(this).style('fill', c);
    selectAndDisplayNameOfRegion(d);
    const result = data.filter(region => region.country_id === d.properties.ISO);
    updateMetrics(result);
  };

  const mouseout = function () {
    d3.select(this).style('fill', colorFn);
    bigText.text('');
    resultText.text('');
  };

  div.append('rect')
    .attr('class', 'background')
    .attr('width', slice.width())
    .attr('height', slice.height())
    .on('click', clicked);

  g = div.append('g');
  const mapLayer = g.append('g')
    .classed('map-layer', true);
  bigText = g.append('text')
    .classed('big-text', true)
    .attr('x', 20)
    .attr('y', 45);
  resultText = g.append('text')
    .classed('result-text', true)
    .attr('x', 20)
    .attr('y', 60);

  const url = `/static/assets/visualizations/countries/${fd.select_country.toLowerCase()}.geojson`;
  d3.json(url, function (error, mapData) {
    const features = mapData.features;
    const center = d3.geo.centroid(mapData);
    let scale = 150;
    let offset = [slice.width() / 2, slice.height() / 2];
    let projection = d3.geo.mercator().scale(scale).center(center)
      .translate(offset);

    path = path.projection(projection);

    const bounds = path.bounds(mapData);
    const hscale = scale * slice.width() / (bounds[1][0] - bounds[0][0]);
    const vscale = scale * slice.height() / (bounds[1][1] - bounds[0][1]);
    scale = (hscale < vscale) ? hscale : vscale;
    const offsetWidth = slice.width() - (bounds[0][0] + bounds[1][0]) / 2;
    const offsetHeigth = slice.height() - (bounds[0][1] + bounds[1][1]) / 2;
    offset = [offsetWidth, offsetHeigth];
    projection = d3.geo.mercator().center(center).scale(scale).translate(offset);
    path = path.projection(projection);

    // Draw each province as a path
    mapLayer.selectAll('path')
      .data(features)
      .enter().append('path')
      .attr('d', path)
      .attr('class', 'region')
      .attr('vector-effect', 'non-scaling-stroke')
      .style('fill', colorFn)
      .on('mouseenter', mouseenter)
      .on('mouseout', mouseout)
      .on('click', clicked);
  });
  container.show();
}
Example #6
0
 beforeEach(function() {
     this.el3 = d3.select(createGraphDiv());
 });
Example #7
0
    //this.tooltip.remove();
    //(because it is appended to body)
  },

  // updateFunction routine (mandatory), will be called on new data
  // (and usually after mainFunction)
  updateFunction(data, params) {

    let self = this;
    self.par = Object.assign({}, this.defaultParams, params);

    // here is where you do some D3 magic...
    // (see the examples) (for code, not magic)
    // make sure to use D3's enter/update/exit pattern with proper joins, to
    // get the full power of data updates.
    d3.select('something');

    // if you want to pass events to the parent reactComponent, you could do something like:
    // .on('mouseover', (d) => {
    //   self.mouseoverBar.call(self, d, otherArguments)
    //  })
  },

  onEvent(obj) {
    //this function is called when this or another component fires
    //an event (an action) to the redux store
    //d is the data object of the item that triggered the event
    //e is the event name
    let {d, e} = obj;
    let self = this;
    switch (e) {
Example #8
0
 beforeEach(function() {
     el = document.createElement('div');
     sel = d3.select(el);
 });
Example #9
0
 d3.select(gd).selectAll('text').each(function() {
     expect(d3.select(this).style('visibility')).toEqual('visible');
 });
import * as d3 from 'd3'

let w = 100
let h = 100

let svg = d3.select("body")
    .append("svg")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("viewBox", "0 0 " + w + " " + h)

let graph = d3.forceSimulation()
    .force("link", d3.forceLink()
        .id(d => d.id)
        .distance(d => d.value / 250))
    .force("centre", d3.forceCenter(w / 2, h / 2))
    .force("size", d3.forceCollide()
        .radius(1)
        .strength(1))
    .alphaDecay(0.001)

let links = false

d3.json('data/capital_distances.json', (e, data) => {
    if (e) throw e

    if (links) {
        let link = svg.append("g")
            .attr("class", "links")
            .selectAll("line")
            .data(data.links)
d3.json('data/capital_distances.json', (e, data) => {
    if (e) throw e

    if (links) {
        let link = svg.append("g")
            .attr("class", "links")
            .selectAll("line")
            .data(data.links)
            .enter()
            .append("line")
            .attr("stroke-width", d => d.value / 14000)
    }

    let countryList = new Set()
    for (let item of data.links) {
        countryList.add(item.source)
        countryList.add(item.target)
    }
    let nodeData = []
    for (let item of countryList) {
        nodeData.push({
            "id": item
        })
    }

    let node = svg.append("g")
        .attr("class", "nodes")
        .selectAll("circle")
        .data(nodeData)
        .enter()
        .append("circle")
        .attr("r", 1)
        .attr("cx", () => Math.random() * w)
        .attr("cy", () => Math.random() * h)
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended))

    node.append("title").html(d => d.id)

    graph.nodes(nodeData)
        .on("tick", () => {
            if (links) {
                link.attr("x1", d => d.source.x)
                    .attr("y1", d => d.source.y)
                    .attr("x2", d => d.target.x)
                    .attr("y2", d => d.target.y)
            }
            node.attr("cx", d => d.x)
                .attr("cy", d => d.y)
        })

    graph.force("link")
        .links(data.links)

    resize(graph);
    d3.select(window).on("resize", resize);

    function resize() {
        w = window.innerWidth
        h = window.innerHeight;
        svg.attr("width", w).attr("height", h);
    }
})
Example #12
0
 .on('dragend', function(d) {
   d3.select(this).classed('dragging', false);
 });
    };
  },

  componentDidMount() {
    this.addEventListeners();
  },

  componentWillUnmount() {
    this.removeEventListeners();
  },

  addEventListeners() {
    var node = React.findDOMNode(this.refs.node);
    var mouse = [];

    d3.select(node)
      .on(Events.MOUSE_MOVE, () => {
        mouse = d3.mouse(node);
        Dispatcher[Events.MOUSE_MOVE]({
          type: Events.MOUSE_MOVE,
          activeIndex: Math.floor(mouse[0] / this.props.tickWidth),
          x: mouse[0],
          y: mouse[1]
        });
      })
      .on(Events.MOUSE_OUT, () => {
        mouse = d3.mouse(node);
        Dispatcher[Events.MOUSE_OUT]({
          type: Events.MOUSE_OUT,
          activeIndex: -1,
          x: mouse[0],
Example #14
0
function count(id, selector, length) {
  expect(d3.select("#" + id)
          .selectAll(selector)[0].length).toEqual(length);
}
Example #15
0
	function initInfo (container, graphJsonUrl) {
		graphJsonUrl = graphJsonUrl || 'graph.json';

		$('.dep-table table', container).stacktable();

		/* d3 graph */

		function createNode (dep) {
			return {
				name: dep.name,
				version: dep.version,
				children: null
			};
		}

		/**
		 * Transform data from possibly cyclic structure into max 10 levels deep visual structure
		 */
		function transformData (rootDep, callback) {

			var transformsCount = 0
				, rootNode = createNode(rootDep);

			// Avoid 'too much recursion' errors
			function scheduleTransform (dep, node, level, maxLevel) {
				setTimeout(function () {
					transform(dep, node, level, maxLevel);
					transformsCount--;

					if (!transformsCount) {
						callback(rootNode);
					}
				}, 0);
			}

			function transform (dep, parentNode, level, maxLevel) {
				level = level || 0;
				maxLevel = maxLevel || 10;

				$.each(dep.deps, function(depName, depDep) {
					var node = createNode(depDep);

					if (level < maxLevel) {
						transformsCount++;
						scheduleTransform(depDep, node, level + 1, maxLevel);
					}

					if (!parentNode.children) {
						parentNode.children = [];
					}

					parentNode.children.push(node);
				});

				if (parentNode.children) {
					parentNode.children = parentNode.children.sort(function(a, b) {
						if (a.name < b.name) {
							return -1;
						} else if (a.name > b.name) {
							return 1;
						} else {
							return 0;
						}
					});
				}
			}

			transform(rootDep, rootNode);
		}

		var m = [20, 120, 20, 120]
			, w = parseInt($(window).width() - $('#main').position().left, 10) - m[1] - m[3]
			, h = 768 - m[0] - m[2]
			, i = 0
			, root = null
			, tree = d3.layout.tree().size([h, w])
			, diagonal = d3.svg.diagonal().projection(function(d) { return [d.y, d.x] });

		var vis = d3.select($('.dep-graph', container)[0]).append('svg:svg')
			.attr('width', w + m[1] + m[3])
			.attr('height', h + m[0] + m[2])
			.append('svg:g')
			.attr('transform', 'translate(' + m[3] + ',' + m[0] + ')');

		function update (source) {

			var duration = d3.event && d3.event.altKey ? 5000 : 500;

			// Compute the new tree layout.
			var nodes = tree.nodes(root).reverse();

			// Normalize for fixed-depth.
			nodes.forEach(function(d) {
				d.y = d.depth * 180;
			});

			// Update the nodes...
			var node = vis.selectAll('g.node').data(nodes, function(d) {
					return d.id ? d.id : d.id = ++i;
				});

			// Enter any new nodes at the parent's previous position.
			var nodeEnter = node.enter().append('svg:g').attr('class', 'node').attr('transform', function () {
					return 'translate(' + source.y0 + ',' + source.x0 + ')';
				}).on('click', function(d) {
					toggle(d);
					update(d);
				});

			nodeEnter.append('svg:circle').attr('r', 0.000001).style('fill', function(d) {
				return d._children ? '#ccc' : '#fff';
			});

			nodeEnter.append('svg:text').attr('x', function(d) {
				return d.children || d._children ? -10 : 10;
			}).attr('dy', '.25em').attr('text-anchor', function(d) {
				return d.children || d._children ? 'end' : 'start';
			}).text(function(d) {
				return d.name + ' ' + d.version;
			}).style('fill-opacity', 0.000001);

			// Transition nodes to their new position.
			var nodeUpdate = node.transition().duration(duration).attr('transform', function(d) {
					return 'translate(' + d.y + ',' + d.x + ')';
				});

			nodeUpdate.select('circle').attr('r', 4.5).style('fill', function(d) {
				return d._children ? '#ccc' : '#fff';
			});

			nodeUpdate.select('text').style('fill-opacity', 1);
			var nodeExit = node.exit().transition().duration(duration).attr('transform', function () {
					return 'translate(' + source.y + ',' + source.x + ')';
				}).remove();

			// Transition exiting nodes to the parent's new position.
			nodeExit.select('circle').attr('r', 0.000001);

			nodeExit.select('text').style('fill-opacity', 0.000001);

			// Update the links...
			var link = vis.selectAll('path.link').data(tree.links(nodes), function(d) {
					return d.target.id;
				});

			// Enter any new links at the parent's previous position.
			link.enter().insert('svg:path', 'g').attr('class', 'link').attr('d', function () {
				var o = {
						x: source.x0,
						y: source.y0
					};
				return diagonal({
					source: o,
					target: o
				});
			}).transition().duration(duration).attr('d', diagonal);

			// Transition links to their new position.
			link.transition().duration(duration).attr('d', diagonal);

			// Transition exiting nodes to the parent's new position.
			link.exit().transition().duration(duration).attr('d', function () {
				var o = {
						x: source.x,
						y: source.y
					};
				return diagonal({
					source: o,
					target: o
				});
			}).remove();

			// Stash the old positions for transition.
			nodes.forEach(function(d) {
				d.x0 = d.x;
				d.y0 = d.y;
			});
		}

		// Toggle children.
		function toggle (d) {
			if (d.children) {
				d._children = d.children;
				d.children = null;
			} else {
				d.children = d._children;
				d._children = null;
			}
		}

		// Load the graph data and render when change view
		var graphLoaded = false
			, graphContainer = $('.dep-graph', container)
			, tableContainer = $('.dep-table', container);

		graphContainer.hide();

		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(node) {
					root = node;
					root.x0 = h / 2;
					root.y0 = 0;

					function toggleAll (d) {
						if (d.children) {
							d.children.forEach(toggleAll);
							toggle(d);
						}
					}

					// Initialize the display to show a few nodes.
					root.children.forEach(toggleAll);
					update(root);
					loading.remove();
				});
			});
		}

		var viewSwitchers = $('.switch a', container);

		viewSwitchers.click(function(event) {
			event.preventDefault();
			merge(state, $.deparam.fragment($(this).attr('href')));
			$.bbq.pushState(state);
		});

		function onHashChange () {
			merge(state, $.bbq.getState());

			viewSwitchers.removeClass('selected');

			if (state.view !== 'tree') {
				graphContainer.hide();
				tableContainer.fadeIn();
				viewSwitchers.first().addClass('selected');
			} else {
				tableContainer.hide();
				graphContainer.fadeIn();
				viewSwitchers.last().addClass('selected');

				if (!graphLoaded) {
					graphLoaded = true;
					initGraph();
				}
			}
		}

		/* Init changes links */

		$('.changes', container).click(function(event) {
			event.preventDefault();
			var row = $(this).closest('tr'),
				container = $('<div class="changes-popup"/>').append(david.createLoadingEl());

			var name, from, to;

			if (row.closest('table').is('.stacktable')) {
				name = $('a:first-child', row).text();
				from = $('.st-val', row.next()).text();
				to = $('.st-val', row.next().next()).text();
			} else {
				name = $('.dep a:first-child', row).text();
				from = $('.required', row).text();
				to = $('.stable', row).text();
			}

			$.fancybox.open(container);

			$.ajax({
				url: '/package/' + name + '/changes.json',
				dataType: 'json',
				data: {from: from, to: to},
				success: function(data) {
					data.from = from;
					data.to = to;

					var tpl = fs.readFileSync(__dirname + '/../../dist/inc/changes.html');
					container.html(Handlebars.compile(tpl)(data));
					$.fancybox.update();
				},
				error: function () {
					container.html(fs.readFileSync(__dirname + '/../../dist/inc/changelog-er.html'));
					$.fancybox.update();
				}
			});
		});

		$(window).bind('hashchange', onHashChange);

		onHashChange();
	}
Example #16
0
 .each(function() {
     d3.select(this)
         .call(drawTexts, gd)
         .call(setupTraceToggle, gd);
 });
Example #17
0
var addDataList = function(dataListSelector) {
  d3.select(dataListSelector).html(dataListSortedNames);
}
Example #18
0
    function render() {
        var selection = d3.select(this),
            p = preset.apply(this, arguments),
            geom = geometry.apply(this, arguments),
            picon = p.icon || (geom === 'line' ? 'other-line' : 'marker-stroked'),
            isMaki = dataFeatureIcons.hasOwnProperty(picon + '-24');

        if (picon === 'dentist') {
            isMaki = true;  // workaround for dentist icon missing in `maki-sprite.json`
        }

        function tag_classes(p) {
            var s = '';
            for (var i in p.tags) {
                s += ' tag-' + i;
                if (p.tags[i] !== '*') {
                    s += ' tag-' + i + '-' + p.tags[i];
                }
            }
            return s;
        }

        var fill = selection.selectAll('.preset-icon-fill')
            .data([0]);

        fill = fill.enter()
            .append('div')
            .merge(fill);

        fill
            .attr('class', function() {
                return 'preset-icon-fill preset-icon-fill-' + geom + tag_classes(p);
            });

        var frame = selection.selectAll('.preset-icon-frame')
            .data([0]);

        frame = frame.enter()
            .append('div')
            .call(svgIcon('#preset-icon-frame'))
            .merge(frame);

        frame
            .attr('class', function() {
                return 'preset-icon-frame ' + (geom === 'area' ? '' : 'hide');
            });


        var icon = selection.selectAll('.preset-icon')
            .data([0]);

        icon = icon.enter()
            .append('div')
            .attr('class', 'preset-icon')
            .call(svgIcon(''))
            .merge(icon);

        icon
            .attr('class', 'preset-icon preset-icon-' + (isMaki ? '32' : (geom === 'area' ? '44' : '60')));

        icon.selectAll('svg')
            .attr('class', function() {
                return 'icon ' + picon + tag_classes(p);
            });

        icon.selectAll('use')       // workaround: maki parking-24 broken?
            .attr('href', '#' + picon + (isMaki ? (picon === 'parking' ? '-18' : '-24') : ''));
    }
Example #19
0
 /**
  * Removes all DOM elements from the HTML element provided
  *
  * @method removeAll
  * @param el {HTMLElement} Reference to the HTML Element that
  * contains the chart
  * @returns {D3.Selection|D3.Transition.Transition} With the chart
  * child element removed
  */
 removeAll(el) {
   return d3.select(el).selectAll('*').remove();
 }
Example #20
0
CodeHeatmap.prototype.hideTooltip_ = function(element, tooltip) {
  d3.select(element).attr('class', 'src-line-normal');
  tooltip.attr('class', 'tooltip tooltip-invisible');
};
Example #21
0
 _unhighlight: function(e) {
     d3.select(e.currentTarget).classed('rowchart__bar--highlight', false);
 },
    it('should put scatterternary trace in \'frontplot\' node', function() {
        var nodes = d3.select('.frontplot').selectAll('.scatter');

        expect(nodes.size()).toEqual(1);
    });
 const mouseout = function () {
   d3.select(this).style('fill', colorFn);
   bigText.text('');
   resultText.text('');
 };
Example #24
0
 return function () {
   d3.select(this).classed('dragged', start);
 };
  renderD3(props) {
    let nodeMap = {};
    let svg = d3.select(this.svg);
    let data = props.data;
    let max = _.maxBy(data, 'value');
    let width = 800, height = 600; // 3200 2400
    let config = props.config;
    let flagOpts = {
      width: 14, height: 14, transform: [20, 13],
      left: width - 250, top: 18,
    }

    let abbrs = _.groupBy(data, 'abbr');
    let areaTotal = _.get(abbrs, 'AREA_TOT.0.value');
    if (!areaTotal) {
      svg.select('g.links').selectAll('.link').data([]).exit().remove();
      svg.select('g.nodes').selectAll('.node').data([]).exit().remove();
      return;
    };

    let rect = svg.select('g.rects').selectAll('.rect');

    rect.select('rect')
      .attr({
        width: height / 4,
        height: height / 4,
        rx: height / 40,
        stroke: "black",
        fill: "white",
      })
      .style({
        "stroke-width": 4,
      });
    rect.select('text').attr({
      transform: 'translate(30, ' + (height / 9)  + ')',
    })

    let sun = svg.select('g.sun').attr({
      transform: 'translate(70, ' + (height * 2 / 3)  + ')',
    });
    sun.select('circle').attr({
      r: 50,
      fill: 'yellow',
    });
    sun.select('text')
      .attr({
        transform: 'translate(-20, 10)',
      })
      .text(data[0].year);

    let placeInfo = svg.select('g.place').attr({
      transform: 'translate(20, ' + ((height * 2 / 3) + 70)  + ')',
    });
    placeInfo.select('.place-name').text(data[0].place);

    data = _.filter(data, function(d) {
      return [
        'SR', 'UPH', 'LP', 'LBP', 'TP', 'BR', 'FW', 'FP', 'LBS',
        'LBW', 'FCSI', 'ASI', 'L', 'FCI', 'EI', 'TIC',
      ].indexOf(d.abbr) !== -1;
    });

    let flag = svg.select('g.flags')
      .attr({
        'transform':
          `translate(-${height/16}, -${height/16})`,
      })
      .selectAll('.flag').data(data);

    let flagEnter = flag.enter().append('g').attr('class', 'flag');
    flagEnter.append('text').attr({
      'transform':
        `translate(${flagOpts.transform[0]}, ${flagOpts.transform[1]})`,
    });

    flag.attr({
      transform: function(d, i) {
        let {left, top} = flagOpts;
        top = height - top * ((data || []).length - i);
        return `translate(${left}, ${top})`;
      },
    });
    flag.select('text').text(function(d) {
      return d.abbr + ': ' + d.energy;
    });
    flag.exit().remove();


    let nodes = _.map(data, function(n) {
      if (!config[n.abbr]) {
        config[n.abbr] = {};
      }
      let c = config[n.abbr];
      let node = {
        ...n,
        value: (n.value / areaTotal) || 0,
        x: c.x || width/2,
        y: c.y || height/2,
      };
      nodeMap[n.abbr] = node;
      return node;
    });

    if (!config.links) {
      config.links = [
        ['LP', 'TP', []],
        ['LBP', 'TP', []],
        ['TP', 'BR', []],
        ['TP', 'FP', []],
        ['BR', 'TIC', []],
        ['FP', 'ASI', []],
        ['ASI', 'EI', []],
      ];
    }
    let links = _.map(config.links, function(link) {
      let l = {
        source: nodeMap[link[0]],
        target: nodeMap[link[1]],
        path: link[2],
        value: Math.max(nodeMap[link[1]].value, 1),
      };
      if (_.isEmpty(l.source.sourceLinks)) {
        l.source.sourceLinks = [];
      }
      l.source.sourceLinks.push(l);
      if (_.isEmpty(l.source.targetLinks)) {
        l.source.targetLinks = [];
      }
      l.source.targetLinks.push(l);
      return l;
    });
/** play with links to remove BR to TIC link **/
let brticIndex = _.findIndex(links, function(link){
  return (link.source.abbr == "BR" && link.target.abbr == "TIC")
});
let tpbrIndex = _.findIndex(links, function(link){
  return (link.source.abbr == "TP" && link.target.abbr == "BR")
});
//console.log(tpbrIndex);
/*
links[tpbrIndex].path = _.concat(links[tpbrIndex].path, links[brticIndex].path);
links[tpbrIndex].target.x = links[brticIndex].target.x;
links[tpbrIndex].target.y = links[brticIndex].target.y;
links = _.remove(links, function(link){
  return !(link.source.abbr == "BR" && link.target.abbr == "TIC")
});
*/
links[brticIndex].value = links[tpbrIndex].value;
/*
links[brticIndex].target.abbr = links[tpbrIndex].target.abbr;
links[brticIndex].target.value = links[tpbrIndex].target.value;
*/
//console.log(links);
/** end of remove BR to TIC link **/

    let path = function(d) {
      let x0 = d.source.x
        , y0 = d.source.y
        , x3 = d.target.x
        , y3 = d.target.y
      ;
      return d3.svg.line().interpolate('cardinal')([
        [x0, y0], ...(d.path || []), [x3, y3]
      ]);
    };

    let link = svg.select('g.links').selectAll('.link').data(links);

    let linkEnter = link.enter().append('path')
      .attr({
        'class': 'link',
      })
      .on('contextmenu', function(d) {
        d3.event.preventDefault();
        let { layerX, layerY } = d3.event;
        let coords  = _.sortBy(d.path, function([x, y]) {
          return (x - layerX) * (x - layerX) + (y - layerY) * (y - layerY);
        });
        let coord = _.first(coords);
        if (coord) {
          _.remove(d.path, function(c) {
            return c[0] === coord[0] && c[1] === coord[1];
          });
        }
        d3.select(this).attr('d', path);
      })
      .on('dblclick', function(d) {
        let { layerX, layerY } = d3.event;
        if (!d.path) {
          d.path = [];
        }
        d.path.push([layerX, layerY]);
      })
      .call(
        d3.behavior.drag().origin((d)=>d)
        .on('drag', function(d) {
          let { layerX, layerY } = d3.event.sourceEvent;
          let { dx, dy} = d3.event;
          let coords  = _.sortBy(d.path, function([x, y]) {
            return (x - layerX) * (x - layerX) + (y - layerY) * (y - layerY);
          });
          let coord = _.first(coords);
          if (coord) {
            coord[0] += dx;
            coord[1] += dy;
          }
          d3.select(this).attr('d', path);
        })
      )
    ;
    link
      .attr({
        d: path,
      })
      .style("stroke-width", function(d) {
        return Math.max(1, d.value);
      })
      .attr("fill", "none")
      .attr("stroke", "#F28017")
    ;

    link.exit().remove();
    svg.selectAll('g.node').remove();
    let node = svg.select('g.nodes').selectAll(".node").data(nodes);
    let nodeEnter = node.enter().append('g')
      .attr({
        'class': 'node',
      })
      .call(
        d3.behavior.drag().origin((d)=>d)
        .on('dragstart', function() {this.parentNode.appendChild(this);})
        .on('drag', function(d) {
          let { dx, dy } = d3.event;
          d.x += dx;
          d.y += dy;
          config[d.abbr].x = d.x;
          config[d.abbr].y = d.y;
          link.attr('d', path);
          d3.select(this).attr('transform', function(d) {
            return 'translate(' + d.x  + ',' + d.y + ')';
          });
          props.onConfigChange(config);
        })
      )
    ;

    nodeEnter.append('text')
      .text((d)=> { return d.abbr !== "TIC" ? d.abbr + ' ' + Math.round(d.value * 10) / 10 : '' });
    node.attr({
      'transform': (d)=>'translate(' + d.x  + ',' + d.y + ')',
    });

    node.exit().remove();

    node.each(function() {
      this.parentNode.appendChild(this);
    });
  }
Example #26
0
 return function (d) {
   d3.select(this)
     .classed('selected', over);
 };
Example #27
0
/* Modified from http://bl.ocks.org/ganeshv/6a8e9ada3ab7f2d88022 */
function treemap(slice, payload) {
  const div = d3.select(slice.selector);
  const _draw = function (data, eltWidth, eltHeight, formData) {
    const margin = { top: 0, right: 0, bottom: 0, left: 0 };
    const navBarHeight = 36;
    const navBarTitleSize = navBarHeight / 3;
    const navBarBuffer = 10;
    const width = eltWidth - margin.left - margin.right;
    const height = (eltHeight - navBarHeight - navBarBuffer -
                 margin.top - margin.bottom);
    const formatNumber = d3.format(formData.number_format);
    let transitioning;

    const x = d3.scale.linear()
        .domain([0, width])
        .range([0, width]);

    const y = d3.scale.linear()
        .domain([0, height])
        .range([0, height]);

    const treemap = d3.layout.treemap()
        .children(function (d, depth) { return depth ? null : d._children; })
        .sort(function (a, b) { return a.value - b.value; })
        .ratio(formData.treemap_ratio)
        .mode('squarify')
        .round(false);

    const svg = div.append('svg')
        .attr('class', 'treemap')
        .attr('width', eltWidth)
        .attr('height', eltHeight);

    const chartContainer = svg.append('g')
        .attr('transform', 'translate(' + margin.left + ',' +
                           (margin.top + navBarHeight + navBarBuffer) + ')')
        .style('shape-rendering', 'crispEdges');

    const grandparent = svg.append('g')
        .attr('class', 'grandparent')
        .attr('transform', 'translate(0,' + (margin.top + (navBarBuffer / 2)) + ')');

    grandparent.append('rect')
        .attr('width', width)
        .attr('height', navBarHeight);

    grandparent.append('text')
        .attr('x', width / 2)
        .attr('y', (navBarHeight / 2) + (navBarTitleSize / 2))
        .style('font-size', navBarTitleSize + 'px')
        .style('text-anchor', 'middle');

    const initialize = function (root) {
      root.x = 0;
      root.y = 0;
      root.dx = width;
      root.dy = height;
      root.depth = 0;
    };

    // Aggregate the values for internal nodes. This is normally done by the
    // treemap layout, but not here because of our custom implementation.
    // We also take a snapshot of the original children (_children) to avoid
    // the children being overwritten when when layout is computed.
    const accumulate = function (d) {
      d._children = d.children;
      if (d._children) {
        d.value = d.children.reduce(function (p, v) { return p + accumulate(v); }, 0);
      }
      return d.value;
    };

    // Compute the treemap layout recursively such that each group of siblings
    // uses the same size (1x1) rather than the dimensions of the parent cell.
    // This optimizes the layout for the current zoom state. Note that a wrapper
    // object is created for the parent node for each group of siblings so that
    // the parents dimensions are not discarded as we recurse. Since each group
    // of sibling was laid out in 1x1, we must rescale to fit using absolute
    // coordinates. This lets us use a viewport to zoom.
    const layout = function (d) {
      if (d._children) {
        treemap.nodes({ _children: d._children });
        d._children.forEach(function (c) {
          c.x = d.x + (c.x * d.dx);
          c.y = d.y + (c.y * d.dy);
          c.dx *= d.dx;
          c.dy *= d.dy;
          c.parent = d;
          layout(c);
        });
      }
    };

    const display = function (d) {
      const transition = function (d) {
        if (transitioning || !d) { return; }
        transitioning = true;

        const g2 = display(d);
        const t1 = g1.transition().duration(750);
        const t2 = g2.transition().duration(750);

        // Update the domain only after entering new elements.
        x.domain([d.x, d.x + d.dx]);
        y.domain([d.y, d.y + d.dy]);

        // Enable anti-aliasing during the transition.
        chartContainer.style('shape-rendering', null);

        // Draw child nodes on top of parent nodes.
        chartContainer.selectAll('.depth').sort(function (a, b) { return a.depth - b.depth; });

        // Fade-in entering text.
        g2.selectAll('text').style('fill-opacity', 0);

        // Transition to the new view.
        t1.selectAll('.ptext').call(text).style('fill-opacity', 0);
        t1.selectAll('.ctext').call(text2).style('fill-opacity', 0);
        t2.selectAll('.ptext').call(text).style('fill-opacity', 1);
        t2.selectAll('.ctext').call(text2).style('fill-opacity', 1);
        t1.selectAll('rect').call(rect);
        t2.selectAll('rect').call(rect);

        // Remove the old node when the transition is finished.
        t1.remove().each('end', function () {
          chartContainer.style('shape-rendering', 'crispEdges');
          transitioning = false;
        });
      };

      grandparent
          .datum(d.parent)
          .on('click', transition)
        .select('text')
          .text(name(d));

      const g1 = chartContainer.append('g')
          .datum(d)
          .attr('class', 'depth');

      const g = g1.selectAll('g')
          .data(d._children)
        .enter()
        .append('g');

      g.filter(function (d) { return d._children; })
          .classed('children', true)
          .on('click', transition);

      const children = g.selectAll('.child')
          .data(function (d) { return d._children || [d]; })
        .enter()
        .append('g');

      children.append('rect')
          .attr('class', 'child')
          .call(rect)
        .append('title')
          .text(function (d) { return d.name + ' (' + formatNumber(d.value) + ')'; });

      children.append('text')
          .attr('class', 'ctext')
          .text(function (d) { return d.name; })
          .call(text2);

      g.append('rect')
          .attr('class', 'parent')
          .call(rect);

      const t = g.append('text')
          .attr('class', 'ptext')
          .attr('dy', '.75em');

      t.append('tspan')
          .text(function (d) { return d.name; });
      t.append('tspan')
          .attr('dy', '1.0em')
          .text(function (d) { return formatNumber(d.value); });
      t.call(text);
      g.selectAll('rect')
          .style('fill', function (d) { return getColorFromScheme(d.name, formData.color_scheme); });

      return g;
    };

    const text = function (selection) {
      selection.selectAll('tspan')
          .attr('x', function (d) { return x(d.x) + 6; });
      selection.attr('x', function (d) { return x(d.x) + 6; })
          .attr('y', function (d) { return y(d.y) + 6; })
          .style('opacity', function (d) {
            return this.getComputedTextLength() < x(d.x + d.dx) - x(d.x) ? 1 : 0;
          });
    };

    const text2 = function (selection) {
      selection.attr('x', function (d) { return x(d.x + d.dx) - this.getComputedTextLength() - 6; })
          .attr('y', function (d) { return y(d.y + d.dy) - 6; })
          .style('opacity', function (d) {
            return this.getComputedTextLength() < x(d.x + d.dx) - x(d.x) ? 1 : 0;
          });
    };

    const rect = function (selection) {
      selection.attr('x', function (d) { return x(d.x); })
               .attr('y', function (d) { return y(d.y); })
               .attr('width', function (d) { return x(d.x + d.dx) - x(d.x); })
               .attr('height', function (d) { return y(d.y + d.dy) - y(d.y); });
    };

    const name = function (d) {
      return d.parent
          ? name(d.parent) + ' / ' + d.name + ' (' + formatNumber(d.value) + ')'
          : (slice.datasource.verbose_map[d.name] || d.name) + ' (' + formatNumber(d.value) + ')';
    };

    initialize(data);
    accumulate(data);
    layout(data);
    display(data);
  };


  div.selectAll('*').remove();
  const width = slice.width();
  const height = slice.height() / payload.data.length;
  for (let i = 0, l = payload.data.length; i < l; i += 1) {
    _draw(payload.data[i], width, height, slice.formData);
  }
}
Example #28
0
require("jsdom");
var d3 = require("d3");
var _ = require("underscore");
var fs = require("fs");


var size = 200;

var body = d3.select("body").html("");

var svg = body.append("svg")
    .attr("width",size)
    .attr("height",size);

var data = _.range(20).map(function(t){
                               var x = Math.cos(2*Math.PI*t/20);
                               var y = Math.sin(2*Math.PI*t/20);
                               return [x,y];
                           });

var x = d3.scale.linear().domain([-1.2,1.2]).range([0,size]);
var y = d3.scale.linear().domain([-1.2,1.2]).range([size,0]);
var color = d3.scale.category20();

svg.selectAll("circle").data(data).enter()
    .append("circle")
    .attr({
              cx: function(d){
                  return x(d[0]);
              },
              cy:function(d){
Example #29
0
 elements.map(e => d3.select(e).classed('ds-selected', false));
Example #30
0
  writingGraph(node, props) {
    var div = d3.select(node);
    div.select('svg').remove();

    var data = [{ type: 'Analytical' ,value: props.analytical }, 
                { type: 'Confidence', value: props.confident }, 
                { type: 'Tentative', value: props.tentative }];

    var colors = ["#969696", "#de9ed6", "#9c9ede"];

    var margin = {top: 10, right: 0, bottom: 0, left: 0},

      width = 350,
      height = 173 - margin.top - margin.bottom;

    var formatPercent = d3.format(".0%");

    var x = d3.scale.ordinal()
      .rangeRoundBands([0, width], .1);

    var y = d3.scale.linear()
      .range([height, 0]);

    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");


    var tip = d3tip()
    .attr('class', 'd3-tip')
    .offset([-10, 0])
    .html(function(d) {
      return "<span style='color:white'>" + Math.round(d.value) + "%</span>";
    });

    var svg = d3.select(node).append("svg")
        .attr("viewBox", "0 0 455 225")
        .append("g")
        .attr("transform", "translate(52,10)");

    svg.call(tip);


    x.domain(data.map(function(d) { return d.type; }));
    y.domain([0, d3.max(data, function(d) { return d.value; })]);

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0,175)")
        .call(xAxis);


    svg.selectAll(".bar")
        .data(data)
      .enter().append("rect")
        .attr("fill", function(d, i){
          return colors[i];
        })
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide)        
        .attr("x", function(d) { return x(d.type); })
        .attr("width", x.rangeBand())
        .attr("y", function(d) { return y(d.value); })
        .attr("height", 0)
        .transition()
        .duration(900)
        .attr("height", function(d) { return height - y(d.value); });

        svg.selectAll(".bar").on('mouseover', tip.show)
        .on('mouseout', tip.hide)

      function type(d) {
        d.value = +d.value;
        return d;
      }
  }