pFad - Phone/Frame/Anonymizer/Declutterfier! Saves Data!

URL: http://github.com/plotly/plotly.js/pull/7653.diff

Custom Markers — SVG path strings

1. Basic Custom Markers

Precomputed SVG paths at r=20. Mix with built-in symbol names.

+// Heart shape at r=20
+var HEART = 'M0,-8C-12,-16 -24,-5.33 -24,0C-24,8 0,16 0,24C0,16 24,8 24,0C24,-5.33 12,-16 0,-8Z';
+
+// 5-point star at r=20
+var STAR = 'M0,-20L4.70,-6.47L19.02,-6.18L7.61,2.47L11.76,16.18' +
+           'L0,8L-11.76,16.18L-7.61,2.47L-19.02,-6.18L-4.70,-6.47Z';
+
+Plotly.newPlot('plot1', [{
+    x: [1, 2, 3, 4, 5],
+    y: [2, 3, 4, 3, 2],
+    mode: 'markers+lines',
+    marker: {
+        // mix path strings and built-in symbol names
+        symbol: [HEART, STAR, 'circle', STAR, HEART],
+        size: 25,
+        color: ['red', 'gold', 'blue', 'gold', 'red']
+    }
+}]);

2. Per-Point Shapes Driven by Data

Build a per-point symbol array from your data instead of using a function.

+var DIAMOND     = 'M20,0L0,20L-20,0L0,-20Z';
+var BIG_DIAMOND = 'M28,0L0,28L-28,0L0,-28Z';  // 1.4× size
+var STAR = '...';  // (same as Demo 1)
+
+var types = ['normal', 'big', 'star', 'normal'];
+var symbols = types.map(function(t) {
+    if (t === 'big')  return BIG_DIAMOND;
+    if (t === 'star') return STAR;
+    return DIAMOND;
+});
+
+Plotly.newPlot('plot2', [{
+    x: [1, 2, 3, 4],
+    y: [1, 1, 1, 1],
+    mode: 'markers',
+    marker: { symbol: symbols, size: 25, color: '#10b981' }
+}]);

3. Weather Map with Rotation

Per-point symbols + marker.angle for wind direction rotation via SVG.

+// Paths at r=20 for each weather type
+var SUN_PATH   = 'M10,0A10,10 0 1,1 0,-10A10,10 0 0,1 10,0Z' + /* rays... */;
+var CLOUD_PATH = 'M-12,4A7,7 0 1,1 -2,-4A8,8 0 1,1 10,-2A6,6 0 1,1 14,4L-12,4Z';
+var WIND_PATHS = {
+    1: 'M0,24L0,-24M0,-24L12,-18',
+    2: 'M0,24L0,-24M0,-24L12,-18M0,-18L12,-12',
+    3: 'M0,24L0,-24M0,-24L12,-18M0,-18L12,-12M0,-12L12,-6'
+};
+
+var symbols = locations.map(function(l) {
+    if (l.weather.type === 'sunny')  return SUN_PATH;
+    if (l.weather.type === 'cloudy') return CLOUD_PATH;
+    return WIND_PATHS[l.weather.speed];
+});
+
+Plotly.newPlot('plot3', [{
+    mode: 'markers+text',
+    marker: {
+        symbol: symbols,
+        angle: locations.map(l => l.weather.direction || 0),  // SVG rotate()
+        size: 30   // scale = 30/20 = 1.5×
+    }
+}]);

Weather Map Demo

Custom markers using static SVG path strings at r=20, scaled by size/20.