test1={colorScale.domain([0, Math.max(...FeatureData.map(getFeatureVal))]);
Globe_map
.polygonsData(FeatureData)
.polygonAltitude(0.03)
.polygonCapColor(feat => colorScale(getFeatureVal(feat)))
.polygonSideColor(() => 'rgba(0, 100, 0, 0.15)')
.polygonStrokeColor(() => '#111')
.polygonLabel(({ FeatureData, countrys_id ,production,consumption,time})=> {
const formatVal = prop => `<b>${production[prop]===""?`0`:production[prop] }</b>`;
const formatVal_consum = prop => `<b>${consumption[prop]===""?`0`:consumption[prop]}</b>`;
return`
<b>${FeatureData ? FeatureData.id :countrys_id.name} </b> <br />
${(!production
? [['production', 0],
['consumtion',0]]
: [ ['production',formatVal(time)],
['consumption',formatVal_consum(time)]
]
).map(([label, val]) => `${label}: <i>${val}</i>`)
.join('<br />')
}
` })
.onPolygonHover(hoverD => Globe_map
.polygonAltitude(d => d === hoverD ? 0.1 : 0.03)
.polygonCapColor(d => d === hoverD ? 'steelblue' : colorScale(getFeatureVal(d))))
.onPolygonClick(clickD =>Globe_map
.polygonAltitude(d => d === clickD ? 0.1 : 0.03)
.polygonCapColor(d => d === clickD ? '#B0CC35' : colorScale(getFeatureVal(d))))
.polygonsTransitionDuration(300);
}
height = 500
Globe_map = Globe()
.height(465)
.width(525)
.globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
.backgroundImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/night-sky.png')
Globe = require('globe.gl')
production_2 = indexBy(production,d=>d.name,false)
speed = 0.0001
timeWindow = 0.2
vertexShader = `
attribute vec3 atDepth;
attribute float size;
attribute float time;
varying vec3 vColor;
uniform float progress;
float timeWindow = ${timeWindow};
// Simplex 2D noise
//
vec3 permute(vec3 x) { return mod(((x*34.0)+1.0)*x, 289.0); }
float snoise(vec2 v){
const vec4 C = vec4(0.211324865405187, 0.366025403784439,
-0.577350269189626, 0.024390243902439);
vec2 i = floor(v + dot(v, C.yy) );
vec2 x0 = v - i + dot(i, C.xx);
vec2 i1;
i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
vec4 x12 = x0.xyxy + C.xxzz;
x12.xy -= i1;
i = mod(i, 289.0);
vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))
+ i.x + vec3(0.0, i1.x, 1.0 ));
vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy),
dot(x12.zw,x12.zw)), 0.0);
m = m*m ;
m = m*m ;
vec3 x = 2.0 * fract(p * C.www) - 1.0;
vec3 h = abs(x) - 0.5;
vec3 ox = floor(x + 0.5);
vec3 a0 = x - ox;
m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );
vec3 g;
g.x = a0.x * x0.x + h.x * x0.y;
g.yz = a0.yz * x12.xz + h.yz * x12.yw;
return 130.0 * dot(m, g);
}
float random (float seed) {
return fract(sin(seed)*100000.0);
}
float nearTime(float eventTime, float progress) {
float distance = abs(eventTime - (progress - floor(progress)));
if (distance <= timeWindow) {
return cos((1.0 - (distance / timeWindow)) * 3.1415);
}
return 0.0;
}
void main() {
vColor = color;
float nearTime = nearTime(time, progress);
gl_PointSize = max(size, size * nearTime);
float noise = snoise(vec2(size, progress));
float xShake = snoise(vec2(progress * 0.1/${speed}, atDepth.x));
float yShake = snoise(vec2(progress * 0.1/${speed}, atDepth.y));
float zShake = snoise(vec2(progress * 0.1/${speed}, atDepth.z));
vec3 shake = vec3(xShake, yShake, zShake);
vec3 newPosition = atDepth + shake * nearTime;
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition , 1.0);
}
`;
fragmentShader = `
varying vec3 vColor;
void main() {
gl_FragColor = vec4(vColor, 1.0);
}
`;
names_pro={
var names=new Set();
for (const j of production){
names.add(j.name)
}
return names
}
names_con={
var names=new Set();
for (const j of consumption){
names.add(j.name)
}
return names
}
data_pro={
const data_name =[];
var names={};
for (const j of production){
names={};
names.name=j.name
names.value=j[time]
data_name.push(names)
}
return data_name
}
data_con={
const data_name =[];
var names={};
for (const j of consumption){
names={};
names.name=j.name
names.value=j[time]
data_name.push(names)
}
return data_name
}
datevalues_pro = Array.from(d3.rollup(data_pro, ([d]) => d.value, d => +time, d => d.name))
.map(([date, data]) => [time, data])
.sort(([a], [b]) => d3.ascending(a, b))
datevalues_con = Array.from(d3.rollup(data_con, ([d]) => d.value, d => +time, d => d.name))
.map(([date, data]) => [time, data])
.sort(([a], [b]) => d3.ascending(a, b))
data_rank10_con= data_con.sort(sortBy("value")).slice(-10,-1);
names_10_pro={
var names=new Set();
for (const j of data_rank10_pro){
names.add(j.name)
}
return names
}
function sortBy(field) {
return function(a,b) {
return a[field] - b[field];
}
}
data_echyear_con={
const data_name =[];
var names={};
for (const j of consumption){
var flag=1965;
for(flag;flag<=2020;flag++){
if(j.name==name){
names.year=flag
names.value=Number(j[flag])
names={}
data_name.push(names)
}
}
}
return data_name.slice(0,-1)
}
data_echyear_pro={
const data_name =[];
var names={};
for (const j of production){
var flag=1964;
for(flag;flag<=2020;flag++){
if(j.name==name){
names.year=flag
names.value=Number(j[flag])
names={}
data_name.push(names)
}
}
}
return data_name.slice(0,-1)
}
data_year={
const data_name =[];
var names={};
names.name=name
names.type="pro"
names.conuts=data_echyear_pro
data_name.push(names)
names={}
names.name=name
names.type="con"
names.conuts=data_echyear_con
data_name.push(names)
return data_name
}
max=d3.max(data_country_years)
data_rank10_pro.columns=["name","value"]
type=["pro","con"]
viewof choice = Inputs.select(new Map([["production", production], ["con", consumption]]), {value: 12, label: "choice"})
tooltip = d3
.select('body')
.append('div')
.attr('class', 'd3-tooltip')
.style('position', 'absolute')
.style('z-index', '10')
.style('visibility', 'hidden')
.style('padding', '10px')
.style('background', 'rgba(0,0,0,0.6)')
.style('border-radius', '4px')
.style('color', '#fff')
.text('a simple tooltip');
hoverColor = '#eec42d';
barChart = {
var margin = ({top: 10, right: 0, bottom: 50, left: 50})
var color = "orange"
var height =560-margin.left-margin.right;
var width = 800-margin.top-margin.bottom;
const countries_of_color = d3.scaleOrdinal().domain(names_10_pro).range(d3.schemeYlGn[9]);
var x = d3.scaleBand()
.domain(d3.range(data_rank10_pro.length))
.range([margin.left, width - margin.right])
.padding(0.05)
var y = d3.scaleLinear()
.domain([0, d3.max(data_rank10_pro, d => d.value)]).nice()
.range([height - margin.bottom, margin.top])
var xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(i => data_rank10_pro[i].name).tickSizeOuter(0))
var yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, data_rank10_pro.format))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(data_rank10_pro.y))
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.selectAll("rect")
.data(data_rank10_pro)
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", d => y(d.value))
.attr('fill', d=> countries_of_color(d.name))
.attr("height", d => y(0) - y(d.value))
.attr("width", x.bandwidth())
.on('mouseover', function (event,d, i) {
tooltip
.html(
`<div>Country: ${d.name}</div><div>Value: ${d.value}</div>`
)
.style('visibility', 'visible');
d3.select(this).transition().attr('fill', hoverColor);
})
.on('mousemove', function (event) {
tooltip
.style('top', event.pageY - 10 + 'px')
.style('left', event.pageX + 10 + 'px');
})
.on('mouseout', function (event) {
tooltip.html(``).style('visibility', 'hidden');
d3.select(this).transition().attr('fill', d=> countries_of_color(d.name));
});
svg.append("g")
.call(yAxis);
svg.append("g")
.call(xAxis);
return svg.node();
}
leg=Swatches(d3.scaleOrdinal(["产量", "消耗量", ], ["#74C476", "orange"]))
path = d3.geoPath(projection)
projection = d3.geoEqualEarth()
color6 = d3.scaleOrdinal()
.domain(type)
.range(["#74C476", "orange"]);
function swatches({color, ...options}) {
return Swatches(color, options);
}
// Copyright 2021, Observable Inc.
// Released under the ISC license.
// https://observablehq.com/@d3/color-legend
function Swatches(color, {
columns = null,
format,
unknown: formatUnknown,
swatchSize = 15,
swatchWidth = swatchSize,
swatchHeight = swatchSize,
marginLeft = 0
} = {}) {
const id = `-swatches-${Math.random().toString(16).slice(2)}`;
const unknown = formatUnknown == null ? undefined : color.unknown();
const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown];
const domain = color.domain().concat(unknowns);
if (format === undefined) format = x => x === unknown ? formatUnknown : x;
function entity(character) {
return `&#${character.charCodeAt(0).toString()};`;
}
if (columns !== null) return htl.html`<div style="display: flex; align-items: center; margin-left: ${+marginLeft}px; min-height: 33px; font: 10px sans-serif;">
<style>
.${id}-item {
break-inside: avoid;
display: flex;
align-items: center;
padding-bottom: 1px;
}
.${id}-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - ${+swatchWidth}px - 0.5em);
}
.${id}-swatch {
width: ${+swatchWidth}px;
height: ${+swatchHeight}px;
margin: 0 0.5em 0 0;
}
</style>
<div style=${{width: "100%", columns}}>${domain.map(value => {
const label = `${format(value)}`;
return htl.html`<div class=${id}-item>
<div class=${id}-swatch style=${{background: color(value)}}></div>
<div class=${id}-label title=${label}>${label}</div>
</div>`;
})}
</div>
</div>`;
return htl.html`<div style="display: flex; align-items: center; min-height: 33px; margin-left: ${+marginLeft}px; font: 10px sans-serif;">
<style>
.${id} {
display: inline-flex;
align-items: center;
margin-right: 1em;
}
.${id}::before {
content: "";
width: ${+swatchWidth}px;
height: ${+swatchHeight}px;
margin-right: 0.5em;
background: var(--color);
}
</style>
<div>${domain.map(value => htl.html`<span class="${id}" style="--color: ${color(value)}">${format(value)}</span>`)}</div>`;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
