Commit eb7a216e authored by Elango Bharathi's avatar Elango Bharathi Committed by Elango Dhandapani
Browse files

tc360 reproduced with sanddance

parent 14449d39
Pipeline #47533 passed with stage
in 2 minutes and 9 seconds
......@@ -23,12 +23,24 @@
.container {
padding-left: 25px;
}
.xtext, .ytext, .sizetext{
.xtext, .ytext, .sizetext, .cpacktext{
font-size:10.5px;
}
.legendtext{
font-size:12px;
}
div.tooltip {
position: absolute;
text-align: center;
width: 100px;
height: 50px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
</style>
</head>
<body>
......@@ -70,6 +82,119 @@
.style('text-anchor', 'middle')
.attr('dy', '.71em')
var hexpacks_annotations = [
{
x: 190.5, y: 190.22,
dx: -50, dy: 130,
curvepath: 'M-40,150 T20,150 T80,150 T125,180',
className: 'mfg',
connector: { end: 'arrow' },
subject: { radius: 67.31 },
note: { title: 'Most Favorable Group: 26 Countries', label: '' }
},
{
x: 35.5, y: 285.22,
dx: 0, dy: 405,
curvepath: 'M180,415 T90,415 T0,415 T-30,380',
className: 'sf',
connector: { end: 'arrow' },
subject: { radius: 112.31 },
note: { title: 'Somewhat Favorable: Scope for progress: 64 Countries', label: '', wrap:160 }
},
{
x: 333.5, y: 232.22,
dx: 312.6, dy: 365,
curvepath: 'M475,350 T405,350 T335,350 T320,320',
className: 'lf',
connector: { end: 'arrow' },
subject: { radius: 74.31},
note: { title: 'Least Favorable: Tough Challenges: 33 Countries', label: '' }
},
{
x: 225.5, y: 325.22,
dx: 292.5, dy: 415,
curvepath: 'M425,430 T345,430 T262.5,430 T240,395',
className: 'f',
connector: { end: 'arrow' },
subject: { radius: 68.31},
note: { title: 'Favorable: Strong in Tech & Innovation: 27 Countries', label: '', wrap:150 }
}
]
svg_hexpacks = svg.append('g')
.attr('opacity', 0)
svg_hexpacks.append("svg:defs").append("svg:marker")
.attr("id", "triangle")
.attr("refX", 6)
.attr("refY", 6)
.attr("markerUnits", "strokeWidth")
.attr("markerWidth", 12)
.attr("markerHeight", 12)
.attr("orient", "auto")
.attr("viewBox", "0 0 12 12")
.append("path")
.attr("d", "M2,2 L10,6 L2,10 L6,6 L2,2")
.style("fill", "black");
hexpacks_annotations.forEach( function(d,i) {
svg_hexpacks.append('circle')
.attr('class', 'manual')
.attr('cx', function(){
return d.x
})
.attr('cy', function(){
return d.y
})
.attr('r', function(){
return d['subject']['radius']
})
.attr('opacity', 0.5)
.style('fill', 'none')
.attr('stroke-dasharray', '25,25')
.attr('stroke-dashoffset', 100)
.transition()
.duration(3000)
.ease(d3.easeLinear)
.attr('stroke','#000')
.attr('stroke-width',1)
.attr('stroke-dasharray', '2,2')
.attr('stroke-dashoffset', 0)
svg_hexpacks.append('text')
.attr('class', 'cpacktext')
.text(function() {
return d.note.title
})
.attr('x', function(){
return d.dx;
})
.attr('y', function(){
return d.dy;
})
.call(wrap, 150)
svg_hexpacks.append("path")
.attr("class", "cpack")
.attr("id", function(){
return d.className
})
.attr("d", function(){
return d.curvepath
})
.attr("fill","none")
.attr("stroke-dasharray", "25,25")
.attr("stroke-dashoffset", 100)
.transition()
.duration(3000)
.ease(d3.easeLinear)
.attr("stroke","#000")
.attr("stroke-width",1)
.attr("stroke-dasharray", "2,2")
.attr('stroke-dashoffset', 0)
.attr("marker-end","url(#triangle)")
})
var svg_legend = d3.select('.legend')
.attr('width', 300)
.attr('height', height + margin.top + margin.bottom)
......@@ -95,13 +220,13 @@
var y = d3.scaleLinear().range([height, 0]);
var sanddances = {}
var sanddances_hexpack = []
var selection
var duration = 1000
d3.json('tc360-data.json', function(error, data) {
var default_indicator = 'Availability of latest technologies';
//TODO: Consider using g1.scale
var region_color_dict = {
'East Asia & Pacific': '#000000',
'Europe & Central Asia': '#9564BF',
......@@ -112,13 +237,29 @@
'Sub-Saharan Africa': '#FF7F00'
}
selection = svg.selectAll('circle').data(data).enter()
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
selection = svg.append('g').selectAll('circle').data(data).enter()
.append('circle')
.attr('fill', function(d) { return region_color_dict[d.Region] })
.attr('stroke', 'white')
.attr('cx', 0)
.attr('cy', 0)
.on('mouseover', function(d) { console.log(d.Country, ',', d.Region) })
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("opacity", .9);
div.html(d.Country + '<hr style="border-top: 1px;" />' + d.Region)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});
state(
{
......@@ -129,16 +270,113 @@
layout: 'spiral',
data: data,
duration: duration,
spiral_size: 1,
spiral_size: 1.25,
spiral_angle: 15,
width: 200,
height: 200
}
)
state(
d3.select('.states').append('a').text('hexpack')
.on('click', function() {
d3.select('#title').text('hexpack')
if (d3.select('.legendgroup').empty())
generate_color_legend(region_color_dict)
show_hexpack_layout()
hide_scatter()
sanddances_hexpack.map(function(state) {
selection.call(state)
})
})
state_hexpack(
{
name: 'hexpack 1',
sel_size: 'Availability of latest technologies'
},
{},
{
layout: 'hexpack',
data: data,
duration: duration,
filter: function(d) { return d['cluster'] === 2 },
group: function (d) { return d.Region === 'East Asia & Pacific' ? 0 :
d.Region === 'Europe & Central Asia' ? 1 :
d.Region === 'Middle East & North Africa' ? 2 :
d.Region === 'North America' ? 3 : 4
},
facets: [
{ x: 120.5, y: 120, width: 75, height: 75 },
{ x: 130.5, y: 180, width: 90, height: 90 },
{ x: 170, y: 130, width: 50, height: 50 },
{ x: 200, y: 170, width: 50, height: 50 },
],
}
)
state_hexpack(
{
name: 'hexpack 2',
sel_size: 'Availability of latest technologies'
},
{},
{
layout: 'hexpack',
data: data,
duration: duration,
filter: function(d) { return d['cluster'] === 0 },
group: function (d) { return d.Region === 'East Asia & Pacific' ? 0 :
d.Region === 'Europe & Central Asia' ? 1 :
d.Region === 'Latin America & Caribbean' ? 2 :
d.Region === 'Middle East & North Africa' ? 3 :
d.Region === 'South Asia' ? 4 :
d.Region === 'Sub-Saharan Africa' ? 5 : 6
},
facets: [
{ x: -20, y: 200, width: 40, height: 40 },
{ x: 30, y: 200, width: 90, height: 90 },
{ x: -40, y: 240, width: 70, height: 70 },
{ x: -40, y: 320, width: 40, height: 40 },
{ x: 0, y: 340, width: 40, height: 40 },
{ x: 60, y: 300, width: 70, height: 70 }
],
}
)
state_hexpack(
{
name: 'hexpack 3',
sel_size: 'Availability of latest technologies'
},
{},
{
name: 'hexpack',
layout: 'hexpack',
data: data,
duration: duration,
filter: function(d) { return d['cluster'] === 3 },
group: function (d) { return d.Region === 'East Asia & Pacific' ? 0 :
d.Region === 'Europe & Central Asia' ? 1 :
d.Region === 'Latin America & Caribbean' ? 2 :
d.Region === 'Middle East & North Africa' ? 3 :
d.Region === 'South Asia' ? 4 :
d.Region === 'Sub-Saharan Africa' ? 5 : 6
},
facets: [
{ x: 170, y: 280, width: 40, height: 40 },
{ x: 200, y: 250, width: 80, height: 80 },
{ x: 170, y: 320, width: 50, height: 50 },
{ x: 230, y: 320, width: 50, height: 50 },
{ x: 200, y: 370, width: 10, height: 10 },
{ x: 220, y: 360, width: 40, height: 40 },
],
}
)
state_hexpack(
{
name: 'hexpack 4',
sel_size: 'Availability of latest technologies'
},
{},
......@@ -146,23 +384,21 @@
layout: 'hexpack',
data: data,
duration: duration,
// filter: function(d) { return d['Business and Innovation Environment'] > 5 },
filter: function(d) { return d['cluster'] === 1 },
group: function (d) { return d.Region === 'East Asia & Pacific' ? 0 :
d.Region === 'Europe & Central Asia' ? 1 :
d.Region === 'Latin America & Caribbean' ? 2 :
d.Region === 'Middle East & North Africa' ? 3 :
d.Region === 'North America' ? 4 :
d.Region === 'South Asia' ? 5 :
d.Region === 'Sub-Saharan Africa' ? 6 : 7
d.Region === 'South Asia' ? 4 :
d.Region === 'Sub-Saharan Africa' ? 5 : 6
},
facets: [
{ x: 0, y: 0, width: 100, height: 100 },
{ x: 110, y: 0, width: 100, height: 100 },
{ x: 220, y: 0, width: 100, height: 100 },
{ x: 0, y: 110, width: 100, height: 100 },
{ x: 110, y: 110, width: 100, height: 100 },
{ x: 220, y: 110, width: 100, height: 100 },
{ x: 0, y: 220, width: 100, height: 100 },
{ x: 290, y: 180, width: 20, height: 20 },
{ x: 340, y: 170, width: 10, height: 10 },
{ x: 270, y: 210, width: 40, height: 40 },
{ x: 350, y: 210, width: 40, height: 40 },
{ x: 270, y: 250, width: 30, height: 30 },
{ x: 320, y: 250, width: 60, height: 60 },
],
}
)
......@@ -250,8 +486,11 @@
.range([2, 10]);
if (typeof attrs != 'undefined') {
options.x = function(d) { return x(d[sel_x]) }
options.y = function(d) { return y(d[sel_y]) }
if (name !== 'spiral') {
options.x = function(d) { return x(d[sel_x]) }
options.y = function(d) { return y(d[sel_y]) }
}
attrs.r = name === 'spiral' ? 7 : function(d) { return rScale(d[sel_size]) }
d3.select('.states').append('a').text(name)
.on('click', function() { state(params) })
......@@ -260,10 +499,11 @@
}
d3.select('#title').text(name)
hide_hexpack_layout()
if (d3.select('.legendgroup').empty())
generate_color_legend(region_color_dict)
if (name !== 'spiral' && name !== 'hexpack')
if (name !== 'spiral')
show_scatter(sel_x, sel_y, sel_size)
else
hide_scatter()
......@@ -271,6 +511,21 @@
selection.call(sanddances[name])
}
function state_hexpack(params, attrs, options) {
var sel_size = params.sel_size,
rScale = d3.scaleLinear()
.domain([
d3.min(data, function(d) { return +d[sel_size]; }),
d3.max(data, function(d) { return +d[sel_size]; })
])
.range([2, 10]);
if (typeof attrs != 'undefined') {
attrs.r = function(d) { return rScale(d[sel_size]) }
sanddances_hexpack.push(g1.sanddance(attrs, options))
}
}
function show_scatter(sel_x, sel_y, sel_size) {
x.domain([d3.min(data, function(d) { return +d[sel_x]; }), d3.max(data, function(d) { return +d[sel_x]; })]);
y.domain([d3.min(data, function(d) { return +d[sel_y]; }), d3.max(data, function(d) { return +d[sel_y]; })]);
......@@ -316,25 +571,25 @@
d3.select('.xaxis')
.transition()
.ease(d3.easeLinear)
.duration(1000)
.duration(duration)
.attr('opacity', 0)
d3.select('.yaxis')
.transition()
.ease(d3.easeLinear)
.duration(1000)
.duration(duration)
.attr('opacity', 0)
d3.select('.xaxislabel')
.transition()
.ease(d3.easeLinear)
.duration(1000)
.duration(duration)
.attr('opacity', 0)
d3.select('.yaxislabel')
.transition()
.ease(d3.easeLinear)
.duration(1000)
.duration(duration)
.attr('opacity', 0)
d3.select('.xtext')
......@@ -345,7 +600,22 @@
d3.select('.sizetext')
.attr('opacity', 0)
}
function show_hexpack_layout() {
svg_hexpacks
.transition()
.ease(d3.easeLinear)
.duration(duration)
.attr('opacity', 1)
}
function hide_hexpack_layout() {
svg_hexpacks
.transition()
.ease(d3.easeLinear)
.duration(duration)
.attr('opacity', 0)
}
function generate_color_legend(legend_obj) {
......@@ -383,6 +653,48 @@
})
function wrap (text, width) {
text.each(function() {
var breakChars = ['/', '&', '-'],
text = d3.select(this),
textContent = text.text(),
spanContent;
breakChars.forEach(char => {
// Add a space after each break char for the function to use to determine line breaks
textContent = textContent.replace(char, char + ' ');
});
var words = textContent.split(/\s+/).reverse(),
word,
line = [],
lineNumber = 0,
lineHeight = 1.1, // ems
x = text.attr('x'),
y = text.attr('y'),
dy = parseFloat(text.attr('dy') || 0),
tspan = text.text(null).append('tspan').attr('x', x).attr('y', y).attr('dy', dy + 'em');
while (word = words.pop()) {
line.push(word);
tspan.text(line.join(' '));
if (tspan.node().getComputedTextLength() > width) {
line.pop();
spanContent = line.join(' ');
breakChars.forEach(char => {
// Remove spaces trailing breakChars that were added above
spanContent = spanContent.replace(char + ' ', char);
});
tspan.text(spanContent);
line = [word];
tspan = text.append('tspan').attr('x', x).attr('y', y).attr('dy', ++lineNumber * lineHeight + dy + 'em').text(word);
}
}
});
}
</script>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment