body {
font-family: Sans-serif;
font-size: 18px;
fill: #fff
}
.slice {
cursor: pointer;
}
.slice .main-arc {
stroke: #fff;
stroke-width: 3px;
}
.slice .hidden-arc {
fill: none;
}
.slice text {
pointer-events: none;
dominant-baseline: middle;
text-anchor: middle;
}
#sequence {
align-items: center;
display: flex;
justify-content: center;
}
#legend {
padding: 10px 0 0 3px;
}
#sequence text,
#legend text {
font-weight: 600;
fill: ##256bca;
}
div.tooltip {
position: absolute;
text-align: center;
width: 150px;
height: 60px;
padding: 2px;
font: 12px sans-serif;
background:white;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
.logoDynamic {
max-width: 60px;
max-height: 40px;
}
var mydata=
{
"name": "IP Research and Analytics Offerings",
"color": "#107895",
"root": true,
"size": 0,
"children": [
{
"name": "IP Intelligence Services",
"size": 1,
"color": "#083044",
"children": [
{
"name": "Quick Knock out Searches",
"color": "#0d3d54",
"link": "/ip-services/mcswift/",
"size": 1
},
{
"name": "Patent to Product Mapping",
"color": "#0d3d54",
"link": "/ip-services/mcmapp/",
"size": 1
},
{
"name": "Technology Scouting",
"color": "#0d3d54",
"link": "/ip-services/mcscout/",
"size": 1
},
{
"name": "Prior Art Searches",
"color": "#0d3d54",
"size": 1,
"children": [
{
"name": "State of the art search",
"color": "#3a6377",
"size": 1,
"link": "/service/state-of-the-art-search/"
},
{
"name": "Patentability Search",
"color": "#3a6377",
"size": 1,
"link": "/service/patentability-search-mc-prior/"
},
{
"name": "Invalidity/ Validity/ Opposition search",
"color": "#3a6377",
"size": 1,
"link": "/service/invalidity-validity-opposition-search/"
},
{
"name": "Freedom to Operate Search",
"color": "#3a6377",
"size": 1,
"link": "/service/freedom-to-operate-search/"
}
]
},
{
"name": "Patent Landscape Search",
"size": 1,
"color": "#0d3d54",
"children": [
{
"name": "Technology Landscape & Whitespace analysis",
"color": "#3a6377",
"size": 1,
"link": "/service/technology-landscape-whitespace-analysis/"
},
{
"name": "Semi-Automated Landscape/Portfolio analysis",
"color": "#3a6377",
"size": 1,
"link": "/service/semi-automated-landscape-portfolio-analysis/"
},
{
"name": "Potential Licensee Search",
"color": "#3a6377",
"size": 1,
"link": "/service/potential-licensee-search/"
},
{
"name": "Portfolio Analysis",
"color": "#3a6377",
"size": 1,
"link": "/service/portfolio-analysis-mcscape/"
},
{
"name": "Market & Product Intelligence",
"color": "#3a6377",
"size": 1,
"link": "/service/market-product-intelligence-mcscape/"
}
]
},
{
"name": "Patent/ Technology Tracking",
"color": "#0d3d54",
"size": 1,
"children": [
{
"name": "Technology Monitoring",
"color": "#3a6377",
"size": 1,
"link": "/service/technology-monitoring/"
},
{
"name": "Legal Status Tracking",
"color": "#3a6377",
"size": 1,
"link": "/service/legal-status-tracking/"
},
{
"name": "Competitor monitoring",
"color": "#3a6377",
"size": 1,
"link": "/service/competitor-monitoring/"
}
]
},
{
"name": " Specialized Services",
"color": "#0d3d54",
"size": 1,
"children": [
{
"name": "Sequence Search",
"color": "#3a6377",
"size": 1,
"link": "/service/sequence-search-specialised-services/"
},
{
"name": "Trademark search",
"color": "#3a6377",
"size": 1,
"link": "/service/trademark-search/"
},
{
"name": "Structure search",
"color": "#3a6377",
"size": 1,
"link": "/service/structure-search-specialised-services/"
},
{
"name": "Phamacointelligence",
"color": "#3a6377",
"size": 1,
"link": "/service/phamacointelligence/"
},
{
"name": "DRAFT RIGHT",
"color": "#3a6377",
"size": 1,
"link": "/service/draft-right/"
},
{
"name": "Design search",
"color": "#3a6377",
"size": 1,
"link": "/service/design-search/"
}
]
}
]
},
{
"name": "Prodcuts",
"size": 1,
"color": "#2ca02c",
"children": [
{
"name": "MCPaIRS",
"color": "#58bd58",
"link": "/product/mcpairs/",
"size": 1
},
{
"name": "MCPAT",
"color": "#58bd58",
"link": "/product/mcpat/",
"size": 1
},
{
"name": "MCDESiGN",
"color": "#58bd58",
"link": "/product/mcdesign/",
"size": 1
},
{
"name": "IPLS",
"color": "#58bd58",
"link": "/product/ipls/",
"size": 1
}
]
},
{
"name": "Technology Sectors",
"size": 1,
"color": "#c2551a",
"children": [
{
"name": "ICT & Electronics",
"color": "#db611e",
"size": 1,
"children": [
{
"name": "Telecommunication Systems",
"color": "#f16b24",
"size": 1,
"link": "/project/ict-electronics/"
},
{
"name": "Power Systems",
"color": "#f16b24",
"size": 1,
"link": "/project/ict-electronics/"
},
{
"name": "Software Applications",
"color": "#f16b24",
"size": 1,
"link": "/project/ict-electronics/"
},
{
"name": "Embedded Systems",
"color": "#f16b24",
"size": 1,
"link": "/project/ict-electronics/"
},
{
"name": "Aeronautical",
"color": "#f16b24",
"size": 1,
"link": "/project/ict-electronics/"
},
{
"name": "More...",
"color": "#f16b24",
"size": 1,
"link": "/project/ict-electronics/"
}
]
},
{
"name": "Chemical & Oil",
"color": "#db611e",
"size": 1,
"children": [
{
"name": "Polymers",
"color": "#f16b24",
"size": 1,
"link": "/project/chemical-oil/"
},
{
"name": "Adhesives",
"color": "#f16b24",
"size": 1,
"link": "/project/chemical-oil/"
},
{
"name": "Nanotechnology",
"color": "#f16b24",
"size": 1,
"link": "/project/chemical-oil/"
},
{
"name": "Dyes & Paints",
"color": "#f16b24",
"size": 1,
"link": "/project/chemical-oil/"
},
{
"name": "Petrochemicals",
"color": "#f16b24",
"size": 1,
"link": "/project/chemical-oil/"
},
{
"name": "More...",
"color": "#f16b24",
"size": 1,
"link": "/project/chemical-oil/"
}
]
},
{
"name": "Bio Science & Health Care",
"color": "#db611e",
"size": 1,
"children": [
{
"name": "Bio Chemistry",
"color": "#f16b24",
"size": 1,
"link": "/project/bio-science-health-care/"
},
{
"name": "Drug discovery",
"color": "#f16b24",
"size": 1,
"link": "/project/bio-science-health-care/"
},
{
"name": "FMCG",
"color": "#f16b24",
"size": 1,
"link": "/project/bio-science-health-care/"
},
{
"name": "Agriculture",
"color": "#f16b24",
"size": 1,
"link": "/project/bio-science-health-care/"
},
{
"name": "Biotechnology",
"color": "#f16b24",
"size": 1,
"link": "/project/bio-science-health-care/"
},
{
"name": "More...",
"color": "#f16b24",
"size": 1,
"link": "/project/bio-science-health-care/"
}
]
}
]
}
]
}
const width = 500,
height = 800,
maxRadius = 400;
const formatNumber = d3.format(',d');
const x = d3.scaleLinear()
.range([0, 2 * Math.PI])
.clamp(true);
const y = d3.scaleSqrt()
.range([maxRadius * .1, maxRadius]);
const color = d3.scaleOrdinal(d3.schemeCategory20);
const partition = d3.partition();
const arc = d3.arc()
.startAngle(d => x(d.x0))
.endAngle(d => x(d.x1))
.innerRadius(d => Math.max(0, y(d.y0)))
.outerRadius(d => Math.max(0, y(d.y1)));
const middleArcLine = d => {
const halfPi = Math.PI / 2;
const angles = [x(d.x0) - halfPi, x(d.x1) - halfPi];
const r = Math.max(0, (y(d.y0) + y(d.y1)) / 2);
const middleAngle = (angles[1] + angles[0]) / 2;
const invertDirection = middleAngle > 0 && middleAngle {
const CHAR_SPACE = 6;
const deltaAngle = x(d.x1) - x(d.x0);
const r = Math.max(0, (y(d.y0) + y(d.y1)) / 2);
const perimeter = r * deltaAngle;
return d.data.name.length * CHAR_SPACE focusOn()); // Reset zoom on canvas click
root = d3.hierarchy(mydata);
root.sum(d => d.size);
const slice = svg.selectAll('g.slice')
.data(partition(root).descendants());
slice.exit().remove();
const newSlice = slice.enter()
.append('g').attr('class', 'slice')
.on('click', d => {
d3.event.stopPropagation();
if(d.data.link)
{
window.open(d.data.link , '_blank');
}
else {
focusOn(d);
}
})
var imageEnter = svg.append("image")
.attr("xlink:href", "/wp-content/uploads/sites/3/2021/01/Sun-burst.png")
.attr("width", 100)
.attr("height", 70)
.attr("x", function (d) {
return -50; // calculate x
}).attr("y", function (d) {
return -30; // calculate y
});
newSlice.append('title')
.text(d => d.data.name);
newSlice.append('path')
.attr('class', 'main-arc')
.style('fill', d => {
return d.data.color;
}
)
.attr('d', arc);
newSlice.append('path')
.attr('class', 'hidden-arc')
.attr('id', (_, i) => `hiddenArc${i}`)
.attr('d', middleArcLine);
const text = newSlice.append('text')
.attr('display', d => textFits(d) ? null : 'none');
// Add white contour
text.append('textPath')
.attr('startOffset', '50%')
.attr('xlink:href', (_, i) => `#hiddenArc${i}`)
.text(d => d.data.name)
.style('fill', 'none')
// .style('stroke', '#fff')
//.style('stroke-width', 5)
.style('stroke-linejoin', 'round');
text.append('textPath')
.attr('startOffset', '50%')
.attr('xlink:href', (_, i) => `#hiddenArc${i}`)
.text(d => d.data.name);
//});
function focusOn(d = { x0: 0, x1: 1, y0: 0, y1: 1 }) {
// Reset to top-level if no data point specified
const transition = svg.transition()
.duration(750)
.tween('scale', () => {
const xd = d3.interpolate(x.domain(), [d.x0, d.x1]),
yd = d3.interpolate(y.domain(), [d.y0, 1]);
return t => { x.domain(xd(t)); y.domain(yd(t)); };
});
transition.selectAll('path.main-arc')
.attrTween('d', d => () => arc(d));
transition.selectAll('path.hidden-arc')
.attrTween('d', d => () => middleArcLine(d));
transition.selectAll('text')
.attrTween('display', d => () => textFits(d) ? null : 'none')
.attrTween('overflow', d => () => textFits(d) ? null : 'hidden')
.attrTween('text-overflow', d => () => textFits(d) ? null : 'ellipsis')
;
moveStackToFront(d);
//
function moveStackToFront(elD) {
svg.selectAll('.slice').filter(d => d === elD)
.each(function (d) {
this.parentNode.appendChild(this);
if (d.parent) { moveStackToFront(d.parent); }
})
}
}
