function initializeBreadcrumbTrail() { // Add the svg area. let trail = d3.select("#sequence").append("svg:svg") .attr("width", width) .attr("height", 50) .attr("id", "trail"); // Add the label at the end, for the percentage. trail.append("svg:text") .attr("id", "endlabel") .style("fill", "#3f51b5"); //controls the color of the percentage }
//.style("filter" , "url(#glow)"); //Append the circles blobWrapper.selectAll(".radarCircle") .data(function(d,i) { return d; }) .enter().append("circle") .attr("class", "radarCircle") .attr("r", cfg.dotRadius) .attr("cx", function(d,i){ return rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2); }) .attr("cy", function(d,i){ return rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2); }) .style("fill", function(d,i,j) { return cfg.color(j); }) .style("fill-opacity", 0.8);
svg.selectAll(".node") .data(nodes) .enter().append("g") .attr("class", "nodeRT") .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
// add labels enterText.append('text') .attr('x', (d, i) => this.state.padding.left + i * this.state.rectStep) .attr('y', d => this.props.height - d) .attr('dx', this.state.rectWidth / 2) .attr('text-anchor', 'middle') .style('fill', 'white') .style('font-size', '14px') .text(d => d);
svg.selectAll(".label") .data(graph.nodes) .enter().append("text") .attr("class", "label") .style('fill', 'black') .text(function (d) { return d.name; }) .call(cola.drag)
svg.selectAll(".layer") .data(layers) .enter().append("path") .attr("class", "layer") .attr("d", function(d) { return area(d.values); }) .style("fill", function(d, i) { return z(i); });
g.selectAll("ellipse") .data([-150, 150]) .enter().append("ellipse") .attr("cx", function(d) { return d; }) .attr("cy", 0) .attr("rx", 10) .attr("ry", 7) .attr("fill", "#bbb");
// could use transparent gradient overlay to vary raindrop color svg.selectAll("path") .data(d3.range(2000)) .enter().append("path") .attr("class", "pathRD") .attr("fill", "url(#gradient)") .attr("d", function() { return raindrop(10 + Math.random() * 250); }) .attr("transform", function(d) { return "rotate(" + d + ")" + "translate(" + (height / 3.8 + Math.random() * height / 5.2) + ",0)" + "rotate(90)"; });
g.append("rect") .attr("rx", 6) .attr("ry", 6) .attr("x", -12.5) .attr("y", -12.5) .attr("width", 25) .attr("height", 25) .attr("transform", function(d, i) { return "scale(" + (1 - d / 25) * 20 + ")"; }) .style("fill", d3.scale.category20c());
svg.selectAll(".group") .data(graph.groups) .enter().append("rect") .attr("rx", 8).attr("ry", 8) .attr("class", "group") .style("fill", function (d, i) { return color(i); })
birthyear.selectAll("rect") .data((birthyear) => (data.get(year).get(birthyear)) || [0, 0]) .enter().append("rect") .attr("x", -barWidth / 2) .attr("width", barWidth) .attr("y", y) .attr("height", (value) => height - y(value))
// This is the SVG Canvas where the visualization is drawn // We can make height, width and id into dynamic properties setContext() { const { height, width, id} = this.props; return d3.select(this.refs.arc).append('svg') .attr('height', height) .attr('width', width) .attr('id', id) .append('g') .attr('transform', `translate(${height / 2}, ${width / 2})`); // Backticks are important! (Weird) }