Develop Reference

trying to create line down a graph in nivo at set time intervals

I'm using nivo charts to visualize some sick datasets.
The example is like this,
import { ResponsiveLine } from '#nivo/line'
const MyResponsiveLine = ({ data /* see data tab */ }) => (
<ResponsiveLine
data={data}
margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
xScale={{ type: 'point' }}
yScale={{ type: 'linear', min: 'auto', max: 'auto', stacked: true, reverse: false }}
yFormat=" >-.2f"
axisTop={null}
axisRight={null}
axisBottom={{
orient: 'bottom',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'transportation',
legendOffset: 36,
legendPosition: 'middle'
}}
axisLeft={{
orient: 'left',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'count',
legendOffset: -40,
legendPosition: 'middle'
}}
pointSize={10}
pointColor={{ theme: 'background' }}
pointBorderWidth={2}
pointBorderColor={{ from: 'serieColor' }}
pointLabelYOffset={-12}
useMesh={true}
legends={[
{
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 0,
itemDirection: 'left-to-right',
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: 'circle',
symbolBorderColor: 'rgba(0, 0, 0, .5)',
effects: [
{
on: 'hover',
style: {
itemBackground: 'rgba(0, 0, 0, .03)',
itemOpacity: 1
}
}
]
}
]}
/>
)
With the data simply like this,
0: 0
1: 0
2: 0
3: 0
4: 0
5: 0
6: 0
7: 0
8: 0
9: 0
10: 0
11: 0
12: 0
13: 0
14: 0
15: -4.1524
16: -2.1525
17: -3.12351
18: 5.123123
19: 3.123123
20: 0.6547929999999998
21: 0.414856
22: -1.1863169999999998
23: 0.7934469999999998
I want to really simply add in a at time 10, 14, 18 a line for when i exercise. Ideally, I'd like to be able to shade the area beneath that line for 4 hours afterwards, in a sort of parabola (or a specific shape really), having the shading finish at 4 hours after.
I'm quite lost on how to achieve this with Nivo Charts. I suppose this isn't a normal functionality but was wondering if there was something I was missing that I could work in?
A good example of what I'm trying to achieve is like this sandbox,
https://codesandbox.io/s/simple-composed-chart-forked-b0bfi
I'd be happy to use this sandboxes code if it could be a bit more visually appealing, ideally like to stick with nivo though!
Thanks!

You can do this using a custom area layer. https://nivo.rocks/storybook/?path=/story/line--custom-layers
Here is a working example based on your initial example. The added area layer parts are commented:
import { ResponsiveLine } from '#nivo/line'
/* Added these two imports */
import { Defs } from '#nivo/core'
import { area, curveMonotoneX } from 'd3-shape'
function App() {
let data = [{
id:"data",
data: [
{ x:0, y:0 },
{ x:1, y:0 },
{ x:2, y:0 },
{ x:3, y:0 },
{ x:4, y:0 },
{ x:5, y:0 },
{ x:6, y:0 },
{ x:7, y:0 },
{ x:8, y:0 },
{ x:9, y:0 },
{ x:10, y: 0 },
{ x:11, y: 0 },
{ x:12, y: 0 },
{ x:13, y: 0 },
{ x:14, y: 0 },
{ x:15, y: -4.1524 },
{ x:16, y: -2.1525 },
{ x:17, y: -3.12351 },
{ x:18, y: 5.123123 },
{ x:19, y: 3.123123 },
{ x:20, y: 0.6547929999999998 },
{ x:21, y: 0.414856 },
{ x:22, y: -1.1863169999999998 },
{ x:23, y: 0.7934469999999998 }]
}];
/* Added this AreaLayer function */
function createAreaLayer(startingXCoordinate) {
let areaData = [
{data: {x: startingXCoordinate, y: 5}},
{data: {x: startingXCoordinate + 0.5, y: repeatRoot(10, 1) - 1}},
{data: {x: startingXCoordinate + 1, y: repeatRoot(10, 2) - 1}},
{data: {x: startingXCoordinate + 1.5, y: repeatRoot(10, 3) - 1}},
{data: {x: startingXCoordinate + 2, y: repeatRoot(10, 4) - 1}},
{data: {x: startingXCoordinate + 2.5, y: repeatRoot(10, 5) - 1}},
{data: {x: startingXCoordinate + 3, y: repeatRoot(10, 6) - 1}},
{data: {x: startingXCoordinate + 3.5, y: repeatRoot(10, 7) - 1}},
{data: {x: startingXCoordinate + 4, y: 0}},
];
function repeatRoot(number, times) {
if (times === 1) {
return Math.sqrt(number);
} else {
return Math.sqrt(repeatRoot(number, times - 1));
}
}
function interpolatedXScale(xScale, x) {
const floorX = Math.floor(x);
const decimalPart = x - floorX;
return xScale(floorX) + (xScale(floorX + 1) - xScale(floorX)) * decimalPart;
}
return function({series, xScale, yScale, innerHeight}) {
const areaGenerator = area()
.x(d => interpolatedXScale(xScale, d.data.x))
.y0(yScale(0))
.y1(d => yScale(d.data.y))
.curve(curveMonotoneX);
return (
<>
<Defs
defs={[
{
id: 'pattern',
type: 'patternLines',
background: 'transparent',
color: '#3daff7',
lineWidth: 1,
spacing: 6,
rotation: -45,
},
]}
/>
<path
d={areaGenerator(areaData)}
fill="url(#pattern)"
fillOpacity={0.6}
stroke="#3daff7"
strokeWidth={2}
/>
</>
)
};
}
return (
<div style={{height:"500px"}}>
<ResponsiveLine
data={data}
margin={{
top: 0,
right: 50,
bottom: 50,
left: 50
}}
yScale={{
type: "linear",
stacked: false
}}
xScale={{ type: 'point' }}
yFormat=" >-.2f"
axisTop={null}
axisRight={null}
axisBottom={{
orient: 'bottom',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'transportation',
legendOffset: 36,
legendPosition: 'middle'
}}
axisLeft={{
orient: 'left',
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'count',
legendOffset: -40,
legendPosition: 'middle'
}}
pointSize={10}
pointColor={{ theme: 'background' }}
pointBorderWidth={2}
pointBorderColor={{ from: 'serieColor' }}
pointLabelYOffset={-12}
useMesh={true}
legends={[
{
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 100,
translateY: 0,
itemsSpacing: 0,
itemDirection: 'left-to-right',
itemWidth: 80,
itemHeight: 20,
itemOpacity: 0.75,
symbolSize: 12,
symbolShape: 'circle',
symbolBorderColor: 'rgba(0, 0, 0, .5)',
effects: [
{
on: 'hover',
style: {
itemBackground: 'rgba(0, 0, 0, .03)',
itemOpacity: 1
}
}
]
},
]}
/* Added this layers attribute */
layers={[
'grid',
'markers',
'areas',
createAreaLayer(10),
createAreaLayer(14),
createAreaLayer(18),
'lines',
'slices',
'axes',
'points',
'legends',
]}
/>
</div>
);
}
export default App;

Someone have an idea how i can calculate the position?

So I have triangles and getting Information of which triangles is on what Connection.
like so:
[
{id:3
connected:[2,1,null]}
{id:1
connected:[null,null,3]}
{id:2
connected:[4,3,null]}
{id:4
connected:[2,null,null]}
]
It would look like this:
I need some method to calculate the X- and Y-position and rotation
When i hard code it would look like this:
[
{
id: 3,
x: 200,
y: 200,
radius: 100,
rotation: 0,
},
{
id: 1,
x: 300,
y: 150,
radius: 100,
rotation: 180,
},
{
id: 2,
x: 200,
y: 310,
radius: 100,
rotation: 180,
},
{
id: 4,
x: 300,
y: 360,
radius: 100,
rotation: 0,
},
]

How to add a name or label to shapes in plotly?

I have created a simple plotly line graph as follows:
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var layout = {
xaxis:{
title:"x-axis",
tickangle:45,
rangemode:'nonnegative',
autorange:true,
exponentformat: "none"
},
yaxis:{
title: "Time",
tickangle:45,
rangemode:'nonnegative',
range:[0,20],
autorange: false
},
shapes: [
{
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold1,
x1: 1,
y1: threshold1,
line:{
color: 'rgb(255, 0, 0)',
width: 2,
dash:'dot'
},
},
{
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold2,
x1: 1,
y1: threshold2,
line:{
color: 'rgb(0, 255, 0)',
width: 2,
dash:'dot'
},
}
]
};
Plotly.newPlot(myDiv,[trace1],layout);
Now, I want to add a name or label to the threshold1 and threshold2 that I have created in 'shapes' under 'layout'. I searched the plotly JS documentation but did'nt get anything useful there. How can I do this. Any help would be appreciated.

You could create another trace with mode: 'text'. There is certainly more than one way of doing it but this one is simple and does not need complicated data replication.
var threshold1 = 12;
var threshold2 = 16;
var offset = 0.75;
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var trace2 = {
x: [Math.min.apply(Math, trace1.x) + offset,
Math.max.apply(Math, trace1.x) - offset],
y: [threshold1 - offset, threshold2 - offset],
mode: 'text',
text: ['lower threshold', 'upper threshold'],
showlegend: false
}
var layout = {
xaxis: {
title: "x-axis",
tickangle: 45,
rangemode: 'nonnegative',
autorange: true,
exponentformat: "none"
},
yaxis: {
title: "Time",
tickangle: 45,
rangemode: 'nonnegative',
range: [0, 20],
autorange: false
},
shapes: [{
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold1,
x1: 1,
y1: threshold1,
line: {
color: 'rgb(255, 0, 0)',
width: 2,
dash: 'dot'
},
}, {
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold2,
x1: 1,
y1: threshold2,
line: {
color: 'rgb(0, 255, 0)',
width: 2,
dash: 'dot'
},
}]
};
Plotly.newPlot(myDiv, [trace1, trace2], layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>

You can use annotations:
layout.annotations = [
{
showarrow: false,
text: "Your text here",
align: "right",
x: 1,
xanchor: "right",
y: threshold1,
yanchor: "bottom"
},
{
showarrow: false,
text: "Your second text here",
align: "right",
x: 1,
xanchor: "right",
y: threshold2,
yanchor: "bottom"
}
],

Add just name property to your trace like
name = 'Xyz'
This Link might help you to fix it out.

Animate "fillLinearGradientColorStops" of a shape

How can I animate fillLinearGradientColorStops of a KineticJS Rect? I tried using a tween but surely it doesn't work.
The rectangle:
var rect = new Kinetic.Rect({
x: 20,
y: 20,
width: 100,
height: 100,
fillLinearGradientStartPoint: { x: -50, y: -50 },
fillLinearGradientEndPoint: { x: 50, y: 50 },
fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
});
The tween:
var tween = new Kinetic.Tween({
node: rect,
duration: 2,
easing: Kinetic.Easings.Linear,
fillLinearGradientColorStops: [0, 'black', 1, 'green']
});
tween.play();
Please see the fiddle http://jsfiddle.net/ZdCmS/. Is it not possible?

From there: https://github.com/ericdrowell/KineticJS/issues/901
You can use an external tweening library, like GreenSock (http://www.greensock.com/gsap-js/) with it's ColorProps plugin (http://api.greensock.com/js/com/greensock/plugins/ColorPropsPlugin.html) to tween colors and then apply them to the Kinetic shape on each frame update: http://jsfiddle.net/ZH2AS/2/
No plans for direct support of tweening color stops on a gradient fill.
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var linearGradPentagon = new Kinetic.RegularPolygon({
x: 150,
y: stage.height() / 2,
sides: 5,
radius: 70,
fillLinearGradientStartPoint: {
x: -50,
y: -50
},
fillLinearGradientEndPoint: {
x: 50,
y: 50
},
fillLinearGradientColorStops: [0, 'white', 1, 'black'],
stroke: 'black',
strokeWidth: 4,
draggable: true
});
layer.add(linearGradPentagon);
stage.add(layer);
//activate ColorPropsPlugin
TweenPlugin.activate([ColorPropsPlugin]);
//object to store color values
var tmpColors = {
color0: 'white',
color1: 'black'
};
//tween the color values in tmpColors
TweenMax.to(tmpColors, 5, {
colorProps: {
color0: 'black',
color1: 'red'
},
yoyo: true,
repeat: 5,
ease:Linear.easeNone,
onUpdate: applyProps
});
function applyProps() {
linearGradPentagon.setAttrs({
fillLinearGradientColorStops: [0, tmpColors.color0, 1, tmpColors.color1]
});
layer.batchDraw();
}

How to create a shiny logo like Google Chromebooks website

http://www.google.com/chromebook/#features
When you hover the logo, you can see a shiny animation.
I have looked into the source code but it doesn't look like done with :hover
any idea about how they do it?
Thank you very much

It's using the CHEDDAR Canvas Animation Framework by Eric Lee. Cheddar is based off of Cake.js by Ilmari Heikkinen http://code.google.com/p/cakejs/
This file : http://www.gstatic.com/chromebook/js/third_party/chromeicons-main.min.js

Look at the HTML source. It's done using a <canvas>.
<div id="header-logo">
<noscript>
<a data-g-label="MAIN-NAV-HOME" href="index.html" id="header-logo-noscript">
<img alt="Chrome" src="static/images/chromelogo-124x34.png">
</a>
</noscript>
<canvas height="40" id="canvas-logo" width="123">
<a data-g-label="MAIN-NAV-HOME" href="index.html">
<img alt="Chrome" src="static/images/chromelogo-124x34.png">
</a>
</canvas>
</div>
The relevant script appears to be chromeicons-main.min.js.

It's done with a canvas element.

Firebug says it's a canvas, which means HTML5.
The script http://www.gstatic.com/chromebook/js/third_party/chromeicons-main.min.js appears to contain a "canvas animation framework" that does the job.

If you look sources, you will see they use CHEDDAR Canvas Animation Framework to animate this logo.

looks like some canvas stuff to me. (nice beginner tutorial here)

This appears to be the relevant portion of chromeicons-main.min.js. for the chrome logo itself.
ChromeLogo = CClass(CanvasNode, {
center_gradient: new Gradient({
type: "radial",
startX: 7,
startY: -7,
endRadius: 14,
colorStops: [
[1, "#005791"],
[0.62, "#2284DC"],
[0, "#86B9E2"]
]
}),
center_back: new Gradient({
type: "radial",
endRadius: 14,
colorStops: [
[0, "#D2D2D2"],
[1, "#FFFFFF"]
]
}),
top_gradient: new Gradient({
type: "radial",
endRadius: 16,
colorStops: [
[0.15, "#F37C65"],
[1, [243, 124, 90, 0]]
]
}),
highlight_gradient3: new Gradient({
type: "radial",
startX: 0,
startY: 0,
endRadius: 40,
colorStops: [
[1, "rgba(255,255,255,0)"],
[0.4, "rgba(255,255,255,.4)"],
[0, "rgba(255,255,255,0)"]
]
}),
highlight_gradient4: new Gradient({
type: "radial",
startX: 0,
startY: 0,
endRadius: 8,
colorStops: [
[1, "rgba(255,255,255,0)"],
[0.4, "rgba(255,255,255,.5)"],
[0, "rgba(255,255,255,0)"]
]
}),
highlight_gradient5: new Gradient({
type: "radial",
startX: 0,
startY: 0,
endRadius: 8,
colorStops: [
[1, "rgba(255,255,255,0)"],
[0.5, "rgba(255,255,255,.9)"],
[0, "rgba(255,255,255,0)"]
]
}),
initialize: function () {
CanvasNode.initialize.call(this);
this.scale = 0.78;
this.catchMouse = false;
this.textGlow = new Circle(30, {
fill: this.highlight_gradient5,
x: 22,
y: 23,
zIndex: 2
});
this.append(this.textGlow);
this.center = new Circle(7.5, {
fill: this.center_gradient,
x: 22,
y: 23,
zIndex: 4,
clip: true
});
this.centerBack = new Circle(9, {
fill: this.center_back,
x: 22,
y: 23,
zIndex: 3
});
this.border = new CanvasNode({
zIndex: 2
});
this.mask = new CanvasNode({
x: 22,
y: 23
});
this.ch3 = new Circle(8, {
fill: this.highlight_gradient4,
scale: 0.1,
opacity: 0,
compositeOperation: "lighter"
});
this.center.append(this.ch3);
this.red = _iconController.asset("logo_red");
this.red.childNodes[0].clip = true;
this.red.setProps({
x: -17,
y: -20,
clip: true
});
this.redShadow = _iconController.asset("shadow_red");
this.redShadow.setProps({
x: -17,
y: -13,
zIndex: 2
});
this.rh3 = new Circle(40, {
fill: this.highlight_gradient3,
scale: 0.1,
opacity: 1,
compositeOperation: "lighter",
x: 17,
y: 20,
zIndex: 4
});
this.red.childNodes[0].append(this.rh3);
this.yellow = _iconController.asset("logo_yellow");
this.yellow.setProps({
x: -1.5,
y: -9
});
this.yellow.childNodes[0].clip = true;
this.yellowShadow = _iconController.asset("shadow_yellow");
this.yellowShadow.setProps({
zIndex: 2,
x: 1,
y: -9
});
this.yh3 = new Circle(40, {
fill: this.highlight_gradient3,
scale: 0.1,
opacity: 1,
compositeOperation: "lighter",
x: 1.5,
y: 9,
zIndex: 4
});
this.yellow.childNodes[0].append(this.yh3);
this.green = _iconController.asset("logo_green");
this.green.setProps({
x: -20,
y: -11
});
this.green.childNodes[0].clip = true;
this.greenShadow = _iconController.asset("shadow_green");
this.greenShadow.setProps({
x: -2,
y: 5,
zIndex: 2
});
this.gh3 = new Circle(40, {
fill: this.highlight_gradient3,
scale: 0.1,
opacity: 1,
compositeOperation: "lighter",
x: 20,
y: 11.5,
zIndex: 4
});
this.green.childNodes[0].append(this.gh3);
this.top = new Circle(19, {
fill: false,
clip: true,
x: 24,
y: 23,
zIndex: 5
});
this.topGrad = new Circle(19, {
fill: this.top_gradient,
x: -2,
y: -24
});
this.mask.append(this.red, this.redShadow, this.yellow, this.yellowShadow, this.green, this.greenShadow);
this.border.append(this.mask);
this.top.append(this.topGrad);
this.append(this.border, this.centerBack, this.center, this.top);
this.text = _iconController.asset("logo_text");
this.text.setProps({
x: 49,
y: 8
});
for (var a = 0; a < this.text.childNodes[0].childNodes.length; a++) {
this.text.childNodes[0].childNodes[a].opacity = 1
}
this.append(this.text)
},
mouseOver: function () {
this.canvas.play();
_tw.removeTweensOf([this.textGlow, this.rh3, this.yh3, this.gh3, this.ch3]);
this.textGlow.scale = this.ch3.scale = this.rh3.scale = this.gh3.scale = this.yh3.scale = 0.1;
this.textGlow.opacity = this.rh3.opacity = this.gh3.opacity = this.yh3.opacity = 1;
var a = new Array(0, 0.1, 0.2, 0.3);
var b = shuffle(a);
_tw.addTween(this.center, {
time: 0.1,
scale: 1.02,
transition: "easeOutQuad"
});
_tw.addTween(this.centerBack, {
time: 0.1,
scale: 1.02,
transition: "easeOutQuad"
});
_tw.addTween(this.mask, {
time: 0.1,
scale: 1.02,
transition: "easeOutQuad",
onComplete: function (c) {
_tw.addTween(c.center, {
time: 0.5,
scale: 1,
transition: "easeInOutBack"
});
_tw.addTween(c.centerBack, {
time: 0.55,
scale: 1,
transition: "easeInOutBack"
});
_tw.addTween(c.mask, {
time: 0.55,
scale: 1,
transition: "easeInOutBack"
})
},
onCompleteParams: [this]
});
_tw.addTween(this.rh3, {
time: 2,
delay: b[0],
scale: 4,
opacity: 0,
transition: "easeOutCubic"
});
_tw.addTween(this.yh3, {
time: 2,
delay: b[1],
scale: 4,
opacity: 0,
transition: "easeOutCubic"
});
_tw.addTween(this.gh3, {
time: 2,
delay: b[2],
scale: 4,
opacity: 0,
transition: "easeOutCubic"
});
_tw.addTween(this.ch3, {
time: 0.2,
delay: b[3],
scale: 10,
opacity: 1,
transition: "linear",
onComplete: function (c) {
_tw.addTween(c.ch3, {
time: 0.25,
opacity: 0
})
},
onCompleteParams: [this]
});
_tw.addTween(this.textGlow, {
time: 10,
delay: 0.5,
scale: 120,
opacity: 0.2,
onComplete: function (c) {
c.canvas.stop()
},
onCompleteParams: [this]
})
},
mouseOut: function () {}
});
_iconController.initializeIcon("canvas-logo", ChromeLogo);