How to use the d3.select function in d3

To help you get started, we’ve selected a few d3 examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github tensorflow / playground / src / playground.ts View on Github external
let cy = nodeIndexScale(0) + RECT_SIZE / 2;
  node2coord[node.id] = {cx, cy};
  // Draw links.
  for (let i = 0; i < node.inputLinks.length; i++) {
    let link = node.inputLinks[i];
    drawLink(link, node2coord, network, container, i === 0, i,
        node.inputLinks.length);
  }
  // Adjust the height of the svg.
  svg.attr("height", maxY);

  // Adjust the height of the features column.
  let height = Math.max(
    getRelativeHeight(calloutThumb),
    getRelativeHeight(calloutWeights),
    getRelativeHeight(d3.select("#network"))
  );
  d3.select(".column.features").style("height", height + "px");
}
github springload / reusable-d3-charts / src / charts / InteractiveLineChart.js View on Github external
drawCursor(state, scales) {
        const svg = d3.select(this.el);

        const cursors = svg.selectAll('.cursors');
        const cursor = cursors.selectAll('.cursor')
            .data([state.data[state.active]]);

        const symbol = d3.svg.symbol()
            .type(() => 'triangle-up')
            .size(() => 50);

        cursor.enter().append('path');

        cursor.attr('class', 'cursor')
            .attr('transform', d => `translate(${scales.x(d.date)},${scales.y(d.value)})`)
            .attr('d', symbol);

        cursor.exit()
github sghall / subunit / demos / js / zombies-rotating.js View on Github external
d3.json('data/zombies.json', function (err, data) {

  d3.select("#loading").transition().duration(500)
    .style("opacity", 0).remove();

  var uvsMap = uvMapper(data.images);

  var options = {map: sprite, side: THREE.DoubleSide};
  var material = new THREE.MeshLambertMaterial(options);

  var root = SubUnit.select(scene);

  var zombies = root.selectAll(".zombie")
    .data(data.images).enter()
    .append("mesh")
      .attr("tags", "zombie")
      .attr("material", material)
      .attr("geometry", function (d) {
        var geometry = new THREE.PlaneBufferGeometry(300, 430);
github ebi-uniprot / ProtVista / src / FeaturesViewer.js View on Github external
jQuery.when.apply(null, delegates).done(function () {
            var rejected = _.filter(loaders, function (loader) {
                return loader.state() === 'rejected';
            });
            if ((rejected.length === loaders.length) || (fv.data.length === 0)) {
                d3.select(opts.el).selectAll('*').remove();
                d3.select(opts.el).html('');
                if (rejected.length === loaders.length) {
                    d3.select(opts.el).text('Sorry, data could not be retrieved at this time, please try again later.');
                    fv.dispatcher.noDataRetrieved();
                } else if (fv.data.length === 0) {
                    d3.select(opts.el).text('There are no features available for this protein.');
                    fv.dispatcher.noDataAvailable();
                }
            } else if (opts.selectedFeature){
                fv.selectFeature(opts.selectedFeature);
            }
        });
    };
github osmlab / osm-deep-history / index.js View on Github external
d3.select(window).on('load', function () {
    var hash = document.location.hash;
    if (hash) {
        var match = /^#\/(node|way|relation)\/(\d*)/.exec(hash);
        if (match) {
            d3.select('#type').property('value', match[1]);
            d3.select('#id').property('value', match[2]);
            clickGo();
        } else {
            document.location.hash = "";
        }
    }
});
github Mindmapp / mmp / src / node.js View on Github external
function updateName( sel, v, vis ) {
    if ( sel.name != v || vis ) {
        this.childNodes[1].innerHTML = v;
        d3.select( this.childNodes[0] ).attr('d', draw.background );
        d3.selectAll('.branch').attr('d', draw.branch );
        if ( !vis ) sel.name = v;
    } else return false;
}
github hpcc-systems / Visualization / src / map / Choropleth.ts View on Github external
export function Choropleth() {
    Layer.call(this);
    Utility.SimpleSelectionMixin.call(this);

    this._dataMap = {};
    this._path = d3.select(null);
}
Choropleth.prototype = Object.create(Layer.prototype);
github ebi-uniprot / ProtVista / src / FeaturesViewer.js View on Github external
var updateViewportFromChart = function (fv) {
    fv.viewport.extent(fv.xScale.domain());
    d3.select('.up_pftv_viewport').call(fv.viewport);
    fv.viewport.updateTrapezoid();
};
github wangqianwen0418 / DNN-Genealogy / src / components / CorpusCompare.tsx View on Github external
componentWillUnmount() {
        window.removeEventListener("resize", this.draw)
        d3.select(".toolTip").remove()
    }