Explore all D3 open source software, libraries, packages, source code, cloud functions and APIs.

Popular New Releases in D3

d3

Chart.js

v3.7.1

echarts

5.3.2

visx

charts

Frappe Charts v1.6.1

Popular Libraries in D3

d3

by d3 doticonjavascriptdoticon

star image 100859 doticonISC

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

Chart.js

by chartjs doticonjavascriptdoticon

star image 56282 doticonMIT

Simple HTML5 Charts using the <canvas> tag

echarts

by apache doticontypescriptdoticon

star image 50600 doticonApache-2.0

Apache ECharts is a powerful, interactive charting and data visualization library for browser

particles.js

by VincentGarreau doticonjavascriptdoticon

star image 24617 doticonMIT

A lightweight JavaScript library for creating particles

recharts

by recharts doticontypescriptdoticon

star image 18061 doticonMIT

Redefined chart library built with React and D3

visx

by airbnb doticontypescriptdoticon

star image 14692 doticonMIT

🐯 visx | visualization components

charts

by frappe doticonjavascriptdoticon

star image 13951 doticonMIT

Simple, responsive, modern SVG Charts with zero dependencies

webpack-bundle-analyzer

by webpack-contrib doticonjavascriptdoticon

star image 11681 doticonMIT

Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap

apexcharts.js

by apexcharts doticonjavascriptdoticon

star image 11322 doticonMIT

📊 Interactive JavaScript Charts built on SVG

Trending New libraries in D3

city-roads

by anvaka doticonjavascriptdoticon

star image 3941 doticonMIT

Visualization of all roads within any city

imove

by ykfe doticontypescriptdoticon

star image 2765 doticonMIT

Move your mouse, generate code from flow chart

markmap

by gera2ld doticontypescriptdoticon

star image 2408 doticonMIT

Visualize your Markdown as mindmaps with Markmap.

LogicFlow

by didi doticontypescriptdoticon

star image 2251 doticonApache-2.0

A front-end framework for process visualization.

FlowChar

by Gusabary doticonc++doticon

star image 420 doticonMIT

A tiny tool for conversion from pseudo-code to flowchart in character format.

svg-path-visualizer

by mathieudutour doticontypescriptdoticon

star image 337 doticon

Enter a SVG path data to visualize it and discover all its different commands

mafs

by stevenpetryk doticontypescriptdoticon

star image 311 doticonMIT

React components for math visualization

covid-19

by rozierguillaume doticonhtmldoticon

star image 291 doticonMIT

How does COVID-19 spread around the world? Charts, data, dashboards and interpretations...

livewire-calendar

by asantibanez doticonphpdoticon

star image 273 doticonMIT

Laravel Livewire component to show Events in a good looking monthly calendar

Top Authors in D3

1

vasturiano

17 Libraries

star icon1604

2

plotly

13 Libraries

star icon1935

3

anvaka

12 Libraries

star icon5194

4

FormidableLabs

11 Libraries

star icon12092

5

PacktPublishing

9 Libraries

star icon60

6

Swizec

7 Libraries

star icon425

7

fusioncharts

6 Libraries

star icon257

8

pubnub

6 Libraries

star icon1057

9

syncfusion

6 Libraries

star icon82

10

JohnCoene

5 Libraries

star icon184

1

17 Libraries

star icon1604

2

13 Libraries

star icon1935

3

12 Libraries

star icon5194

4

11 Libraries

star icon12092

5

9 Libraries

star icon60

6

7 Libraries

star icon425

7

6 Libraries

star icon257

8

6 Libraries

star icon1057

9

6 Libraries

star icon82

10

5 Libraries

star icon184

Trending Kits in D3

No Trending Kits are available at this moment for D3

Trending Discussions on D3

PIP failed to build package cytoolz

Proper way to perform unsigned&lt;-&gt;signed conversion

Aligning Natural Earth Geojson and Raster to render in D3

R two regressions from one table

How can I create a doughnut chart with rounded edges only on one end of each segment?

Is it possible to not reorder elements when using d3.join?

How to create a single column from multiple?

Angular TSLint - Cannot find builder &quot;@angular-devkit/build-angular:tslint&quot;

Fisheye effect D3js image slideshow works on rects/objects but not image files, Error: &lt;image&gt; attribute x: Expected length, &quot;NaN&quot;

Compare two collections.defaultdict and remove similar values

QUESTION

PIP failed to build package cytoolz

Asked 2022-Mar-26 at 18:26

I'm trying to install eth-brownie using 'pipx install eth-brownie' but I get an error saying

1pip failed to build package: cytoolz
2Some possibly relevant errors from pip install:
3    build\lib.win-amd64-3.10\cytoolz\functoolz.cp310-win_amd64.pyd : fatal error LNK1120: 1 unresolved externals
4    error: command 'C:\\Program Files (x86)\\Microsoft Visual Studio\\2019\\BuildTools\\VC\\Tools\\MSVC\\14.29.30133\\bin\\HostX86\\x64\\link.exe' failed with exit code 1120
5

I've had a look at the log file and it shows that it failed to build cytoolz. It also mentions "ALERT: Cython not installed. Building without Cython.". From my limited understanding Cytoolz is apart of Cython so i think the reason why the installation for eth-brownie failed is because it could not build cytoolz as it was trying to build it without Cython. The thing is I already have cython installed:

1pip failed to build package: cytoolz
2Some possibly relevant errors from pip install:
3    build\lib.win-amd64-3.10\cytoolz\functoolz.cp310-win_amd64.pyd : fatal error LNK1120: 1 unresolved externals
4    error: command 'C:\\Program Files (x86)\\Microsoft Visual Studio\\2019\\BuildTools\\VC\\Tools\\MSVC\\14.29.30133\\bin\\HostX86\\x64\\link.exe' failed with exit code 1120
5C:\Users\alaiy&gt;pip install cython
6Requirement already satisfied: cython in c:\python310\lib\site-packages (0.29.24)
7

Extract from the log file (I can paste the whole thing but its lengthy):

1pip failed to build package: cytoolz
2Some possibly relevant errors from pip install:
3    build\lib.win-amd64-3.10\cytoolz\functoolz.cp310-win_amd64.pyd : fatal error LNK1120: 1 unresolved externals
4    error: command 'C:\\Program Files (x86)\\Microsoft Visual Studio\\2019\\BuildTools\\VC\\Tools\\MSVC\\14.29.30133\\bin\\HostX86\\x64\\link.exe' failed with exit code 1120
5C:\Users\alaiy&gt;pip install cython
6Requirement already satisfied: cython in c:\python310\lib\site-packages (0.29.24)
7Building wheels for collected packages: bitarray, cytoolz, lru-dict, parsimonious, psutil, pygments-lexer-solidity, varint, websockets, wrapt
8  Building wheel for bitarray (setup.py): started
9  Building wheel for bitarray (setup.py): finished with status 'done'
10  Created wheel for bitarray: filename=bitarray-1.2.2-cp310-cp310-win_amd64.whl size=55783 sha256=d4ae97234d659ed9ff1f0c0201e82c7e321bd3f4e122f6c2caee225172e7bfb2
11  Stored in directory: c:\users\alaiy\appdata\local\pip\cache\wheels\1d\29\a8\5364620332cc833df35535f54074cf1e51f94d07d2a660bd6d
12  Building wheel for cytoolz (setup.py): started
13  Building wheel for cytoolz (setup.py): finished with status 'error'
14  Running setup.py clean for cytoolz
15  Building wheel for lru-dict (setup.py): started
16  Building wheel for lru-dict (setup.py): finished with status 'done'
17  Created wheel for lru-dict: filename=lru_dict-1.1.7-cp310-cp310-win_amd64.whl size=12674 sha256=6a7e7b2068eb8481650e0a2ae64c94223b3d2c018f163c5a0e7c1d442077450a
18  Stored in directory: c:\users\alaiy\appdata\local\pip\cache\wheels\47\0a\dc\b156cb52954bbc1c31b4766ca3f0ed9eae9b218812bca89d7b
19  Building wheel for parsimonious (setup.py): started
20  Building wheel for parsimonious (setup.py): finished with status 'done'
21  Created wheel for parsimonious: filename=parsimonious-0.8.1-py3-none-any.whl size=42724 sha256=f9235a9614af0f5204d6bb35b8bd30b9456eae3021b5c2a9904345ad7d07a49d
22  Stored in directory: c:\users\alaiy\appdata\local\pip\cache\wheels\b1\12\f1\7a2f39b30d6780ae9f2be9a52056595e0d97c1b4531d183085
23  Building wheel for psutil (setup.py): started
24  Building wheel for psutil (setup.py): finished with status 'done'
25  Created wheel for psutil: filename=psutil-5.8.0-cp310-cp310-win_amd64.whl size=246135 sha256=834ab1fd1dd0c18e574fc0fbf07922e605169ac68be70b8a64fb90c49ad4ae9b
26  Stored in directory: c:\users\alaiy\appdata\local\pip\cache\wheels\12\a3\6d\615295409067d58a62a069d30d296d61d3ac132605e3a9555c
27  Building wheel for pygments-lexer-solidity (setup.py): started
28  Building wheel for pygments-lexer-solidity (setup.py): finished with status 'done'
29  Created wheel for pygments-lexer-solidity: filename=pygments_lexer_solidity-0.7.0-py3-none-any.whl size=7321 sha256=46355292f790d07d941a745cd58b64c5592e4c24357f7cc80fe200c39ab88d32
30  Stored in directory: c:\users\alaiy\appdata\local\pip\cache\wheels\36\fd\bc\6ff4fe156d46016eca64c9652a1cd7af6411070c88acbeabf5
31  Building wheel for varint (setup.py): started
32  Building wheel for varint (setup.py): finished with status 'done'
33  Created wheel for varint: filename=varint-1.0.2-py3-none-any.whl size=1979 sha256=36b744b26ba7534a494757e16ab6e171d9bb60a4fe4663557d57034f1150b678
34  Stored in directory: c:\users\alaiy\appdata\local\pip\cache\wheels\39\48\5e\33919c52a2a695a512ca394a5308dd12626a40bbcd288de814
35  Building wheel for websockets (setup.py): started
36  Building wheel for websockets (setup.py): finished with status 'done'
37  Created wheel for websockets: filename=websockets-9.1-cp310-cp310-win_amd64.whl size=91765 sha256=a00a9c801269ea2b86d72c0b0b654dc67672519721afeac8f912a157e52901c0
38  Stored in directory: c:\users\alaiy\appdata\local\pip\cache\wheels\79\f7\4e\873eca27ecd6d7230caff265283a5a5112ad4cd1d945c022dd
39  Building wheel for wrapt (setup.py): started
40  Building wheel for wrapt (setup.py): finished with status 'done'
41  Created wheel for wrapt: filename=wrapt-1.12.1-cp310-cp310-win_amd64.whl size=33740 sha256=ccd729b6e3915164ac4994aef731f21cd232466b3f6c4823c9fda14b07e821c3
42  Stored in directory: c:\users\alaiy\appdata\local\pip\cache\wheels\8e\61\d3\d9e7053100177668fa43216a8082868c55015f8706abd974f2
43Successfully built bitarray lru-dict parsimonious psutil pygments-lexer-solidity varint websockets wrapt
44Failed to build cytoolz
45Installing collected packages: toolz, eth-typing, eth-hash, cytoolz, six, pyparsing, eth-utils, varint, urllib3, toml, rlp, pyrsistent, pycryptodome, py, pluggy, parsimonious, packaging, netaddr, multidict, iniconfig, idna, hexbytes, eth-keys, colorama, charset-normalizer, certifi, base58, attrs, atomicwrites, yarl, typing-extensions, requests, python-dateutil, pytest, multiaddr, jsonschema, inflection, eth-rlp, eth-keyfile, eth-abi, chardet, bitarray, async-timeout, websockets, wcwidth, tomli, sortedcontainers, semantic-version, regex, pywin32, pytest-forked, pyjwt, pygments, protobuf, platformdirs, pathspec, mythx-models, mypy-extensions, lru-dict, ipfshttpclient, execnet, eth-account, dataclassy, click, asttokens, aiohttp, wrapt, web3, vyper, vvm, tqdm, pyyaml, pythx, python-dotenv, pytest-xdist, pygments-lexer-solidity, py-solc-x, py-solc-ast, psutil, prompt-toolkit, lazy-object-proxy, hypothesis, eth-event, eip712, black, eth-brownie
46    Running setup.py install for cytoolz: started
47    Running setup.py install for cytoolz: finished with status 'error'
48
49PIP STDERR
50----------
51WARNING: The candidate selected for download or install is a yanked version: 'protobuf' candidate (version 3.18.0 at https://files.pythonhosted.org/packages/74/4e/9f3cb458266ef5cdeaa1e72a90b9eda100e3d1803cbd7ec02f0846da83c3/protobuf-3.18.0-py2.py3-none-any.whl#sha256=615099e52e9fbc9fde00177267a94ca820ecf4e80093e390753568b7d8cb3c1a (from https://pypi.org/simple/protobuf/))
52Reason for being yanked: This version claims to support Python 2 but does not
53  ERROR: Command errored out with exit status 1:
54   command: 'C:\Users\alaiy\.local\pipx\venvs\eth-brownie\Scripts\python.exe' -u -c 'import io, os, sys, setuptools, tokenize; sys.argv[0] = '&quot;'&quot;'C:\\Users\\alaiy\\AppData\\Local\\Temp\\pip-install-d1bskwa2\\cytoolz_f765f335272241adba2138f1920a35cd\\setup.py'&quot;'&quot;'; __file__='&quot;'&quot;'C:\\Users\\alaiy\\AppData\\Local\\Temp\\pip-install-d1bskwa2\\cytoolz_f765f335272241adba2138f1920a35cd\\setup.py'&quot;'&quot;';f = getattr(tokenize, '&quot;'&quot;'open'&quot;'&quot;', open)(__file__) if os.path.exists(__file__) else io.StringIO('&quot;'&quot;'from setuptools import setup; setup()'&quot;'&quot;');code = f.read().replace('&quot;'&quot;'\r\n'&quot;'&quot;', '&quot;'&quot;'\n'&quot;'&quot;');f.close();exec(compile(code, __file__, '&quot;'&quot;'exec'&quot;'&quot;'))' bdist_wheel -d 'C:\Users\alaiy\AppData\Local\Temp\pip-wheel-pxzumeav'
55       cwd: C:\Users\alaiy\AppData\Local\Temp\pip-install-d1bskwa2\cytoolz_f765f335272241adba2138f1920a35cd\
56  Complete output (70 lines):
57  ALERT: Cython not installed.  Building without Cython.
58  running bdist_wheel
59  running build
60  running build_py
61  creating build
62  creating build\lib.win-amd64-3.10
63  creating build\lib.win-amd64-3.10\cytoolz
64  copying cytoolz\compatibility.py -&gt; build\lib.win-amd64-3.10\cytoolz
65  copying cytoolz\utils_test.py -&gt; build\lib.win-amd64-3.10\cytoolz
66

Any help would be appreciated!

Edit: Found a solution. Cython appears to not be supported on Python 3.10 (ref https://github.com/eth-brownie/brownie/issues/1300 and https://github.com/cython/cython/issues/4046). I downgraded to Python 3.9.7 and eth-brownie installation worked!)

ANSWER

Answered 2022-Jan-02 at 09:59

I used pip install eth-brownie and it worked fine, I didnt need to downgrade. Im new to this maybe I could be wrong but it worked fine with me.

Source https://stackoverflow.com/questions/69875694

QUESTION

Proper way to perform unsigned&lt;-&gt;signed conversion

Asked 2022-Mar-21 at 19:12

Context

I have a char variable on which I need to apply a transformation (for example, add an offset). The result of the transformation may or may not overflow.
I don't really care of the actual value of the variable after the transformation is performed.
The only guarantee I want to have is that I must be able to retrieve the original value if I perform the transformation again but in the opposite way (for example, substract the offset).

Basically:

1char a = 42;
2a += 140; // overflows (undefined behaviour)
3a -= 140; // must be equal to 42
4

Problem

I know that signed types overflow is undefined behaviour but it's not the case for unsigned types overflows. I have then chosen to add an intermediate step in the process to perform the conversion.

It would then become:

  1. char -> unsigned char conversion
  2. Apply the tranformation (resp. the reversed transformation)
  3. unsigned char -> char conversion

This way, I have the garantee that the potential overflow will only occur for an unsigned type.

Question

My question is, what is the proper way to perform such a conversion ?

Three possibilities come in my mind. I can either:

  • implicit conversion
  • static_cast
  • reinterpret_cast

Which one is valid (not undefined behaviour) ? Which one should I use (correct behaviour) ?

My guess is that I need to use reinterpret_cast since I don't care of actual value, the only guarantee I want is that the value in memory remains the same (i.e. the bits don't change) so that it can be reversible.

On the other hand, I'm not sure if the implicit conversion or the static_cast won't trigger undefined behaviour in the case where the value is not representable in the destination type (out of range).

I couldn't find anything explicitly stating it is or is not undefined behaviour, I just found this Microsoft documentation where they did it with implicit conversions without any mention of undefined behaviour.


Here is an example, to illustrate:

1char a = 42;
2a += 140; // overflows (undefined behaviour)
3a -= 140; // must be equal to 42
4char a = -4;                                             // out of unsigned char range
5unsigned char b1 = a;                                    // (A)
6unsigned char b2 = static_cast&lt;unsigned char&gt;(a);        // (B)
7unsigned char b3 = reinterpret_cast&lt;unsigned char&amp;&gt;(a);  // (C)
8
9std::cout &lt;&lt; (b1 == b2 &amp;&amp; b2 == b3) &lt;&lt; '\n';
10
11unsigned char c = 252;                                   // out of (signed) char range
12char d1 = c;                                             // (A')
13char d2 = static_cast&lt;char&gt;(c);                          // (B')
14char d3 = reinterpret_cast&lt;char&amp;&gt;(c);                    // (C')
15
16std::cout &lt;&lt; (d1 == d2 &amp;&amp; d2 == d3) &lt;&lt; '\n';
17

The output is:

true
true

Unless undefined behaviour is triggered, the three methods seem to work.

Are (A) and (B) (resp. (A') and (B')) undefined behaviour if the value is not representable in the destination type ?

Is (C) (resp. (C')) well defined ?

ANSWER

Answered 2022-Mar-21 at 15:37

I know that signed types overflow is undefined behaviour,

True, but does not apply here.

a += 140; is not signed integer overflow, not UB. That is like a = a + 140; a + 140 does not overflow when a is 8-bit signed char or unsigned char.

The issue is what happens when the sum a + 140 is out of char range and assigned to a char.

Otherwise, the new type is signed and the value cannot be represented in it; either the result is implementation-defined or an implementation-defined signal is raised. C17dr § 6.3.1.3 3

It is implementation defined behavior, when char is signed and 8-bit - to assign a value outside the char range.

Usually the implementation defined behavior is a wrap and fully defined so a += 140; is fine as is.

Alternatively the implementation defined behavior might have been to cap the value to the char range when char is signed.

1char a = 42;
2a += 140; // overflows (undefined behaviour)
3a -= 140; // must be equal to 42
4char a = -4;                                             // out of unsigned char range
5unsigned char b1 = a;                                    // (A)
6unsigned char b2 = static_cast&lt;unsigned char&gt;(a);        // (B)
7unsigned char b3 = reinterpret_cast&lt;unsigned char&amp;&gt;(a);  // (C)
8
9std::cout &lt;&lt; (b1 == b2 &amp;&amp; b2 == b3) &lt;&lt; '\n';
10
11unsigned char c = 252;                                   // out of (signed) char range
12char d1 = c;                                             // (A')
13char d2 = static_cast&lt;char&gt;(c);                          // (B')
14char d3 = reinterpret_cast&lt;char&amp;&gt;(c);                    // (C')
15
16std::cout &lt;&lt; (d1 == d2 &amp;&amp; d2 == d3) &lt;&lt; '\n';
17char a = 42;
18a += 140;
19// Might act as if
20a = max(min(a + 140, CHAR_MAX), CHAR_MIN);
21a = 127;   
22

To avoid implementation defined behavior, perform the + or - on a accessed as a unsigned char

1char a = 42;
2a += 140; // overflows (undefined behaviour)
3a -= 140; // must be equal to 42
4char a = -4;                                             // out of unsigned char range
5unsigned char b1 = a;                                    // (A)
6unsigned char b2 = static_cast&lt;unsigned char&gt;(a);        // (B)
7unsigned char b3 = reinterpret_cast&lt;unsigned char&amp;&gt;(a);  // (C)
8
9std::cout &lt;&lt; (b1 == b2 &amp;&amp; b2 == b3) &lt;&lt; '\n';
10
11unsigned char c = 252;                                   // out of (signed) char range
12char d1 = c;                                             // (A')
13char d2 = static_cast&lt;char&gt;(c);                          // (B')
14char d3 = reinterpret_cast&lt;char&amp;&gt;(c);                    // (C')
15
16std::cout &lt;&lt; (d1 == d2 &amp;&amp; d2 == d3) &lt;&lt; '\n';
17char a = 42;
18a += 140;
19// Might act as if
20a = max(min(a + 140, CHAR_MAX), CHAR_MIN);
21a = 127;   
22*((unsigned char *)&amp;a) += small_offset;
23

Or just use unsigned char a and avoid all this. unsigned char is defined to wrap.

Source https://stackoverflow.com/questions/71558263

QUESTION

Aligning Natural Earth Geojson and Raster to render in D3

Asked 2022-Mar-20 at 08:06

I am trying to render the world map with elevation data using D3.

For this I use Natural Earth 50m land geojson : https://github.com/martynafford/natural-earth-geojson/tree/master/50m/physical

And Natural Earth elevation raster data : https://www.naturalearthdata.com/downloads/50m-raster-data/50m-shaded-relief/

I am using this tutorial : https://datawanderings.com/2020/08/08/raster-backgrounds/

So I first found the bounds of the geojson :

1ogrinfo ne_50m_land.json -so -al | grep Extent  
2Extent: (-180.000000, -89.998926) - (180.000000, 83.599609)
3

I then cut the TIF file :

1ogrinfo ne_50m_land.json -so -al | grep Extent  
2Extent: (-180.000000, -89.998926) - (180.000000, 83.599609)
3gdal_translate -projwin -180.000000 83.599609 180.000000 -89.998926 SR_50M.tif SR_50M-box.tif
4

And project into Mercator projection :

1ogrinfo ne_50m_land.json -so -al | grep Extent  
2Extent: (-180.000000, -89.998926) - (180.000000, 83.599609)
3gdal_translate -projwin -180.000000 83.599609 180.000000 -89.998926 SR_50M.tif SR_50M-box.tif
4gdalwarp -overwrite -s_srs &quot;+proj=longlat +datum=WGS84 +no_defs&quot; -t_srs EPSG:3395 SR_50M-box.tif SR_50M-proj.tif
5

Finally I export to PNG :

1ogrinfo ne_50m_land.json -so -al | grep Extent  
2Extent: (-180.000000, -89.998926) - (180.000000, 83.599609)
3gdal_translate -projwin -180.000000 83.599609 180.000000 -89.998926 SR_50M.tif SR_50M-box.tif
4gdalwarp -overwrite -s_srs &quot;+proj=longlat +datum=WGS84 +no_defs&quot; -t_srs EPSG:3395 SR_50M-box.tif SR_50M-proj.tif
5gdal_translate -of PNG SR_50M-proj.tif SR_50M.png
6

Then I render everything using D3

1ogrinfo ne_50m_land.json -so -al | grep Extent  
2Extent: (-180.000000, -89.998926) - (180.000000, 83.599609)
3gdal_translate -projwin -180.000000 83.599609 180.000000 -89.998926 SR_50M.tif SR_50M-box.tif
4gdalwarp -overwrite -s_srs &quot;+proj=longlat +datum=WGS84 +no_defs&quot; -t_srs EPSG:3395 SR_50M-box.tif SR_50M-proj.tif
5gdal_translate -of PNG SR_50M-proj.tif SR_50M.png
6   this.projection = d3.geoMercator()
7        .translate([0, 0])
8        .scale(1)
9
10
11   this.rasterImage = new Image();
12   this.rasterImage.src = raster;
13
14   this.path = d3.geoPath(this.projection, this.ctx);
15   this.bb = this.path.bounds(this.land);
16
17   const s = 1 / Math.max((this.bb[1][0] - this.bb[0][0]) / this.getWidth(), (this.bb[1][1] - this.bb[0][1]) / this.getHeight());
18    // transform
19   const t = [(this.getWidth() - s * (this.bb[1][0] + this.bb[0][0])) / 2, (this.getHeight() - s * (this.bb[1][1] + this.bb[0][1])) / 2];
20
21    // update projection
22   this.projection
23       .scale(s)
24       .translate(t);
25
26   this.raster_width = (this.bb[1][0] - this.bb[0][0]) * s;
27   this.raster_height = (this.bb[1][1] - this.bb[0][1]) * s;
28
29   this.rtranslate_x = (this.getWidth() - this.raster_width) / 2;
30   this.rtranslate_y = (this.getHeight() - this.raster_height) / 2;
31
32   this.ctx.beginPath();
33   this.path(this.land);
34   this.ctx.fill();
35
36   this.ctx.save();
37   this.ctx.globalAlpha = 0.8;
38   this.ctx.translate(this.rtranslate_x, this.rtranslate_y);
39   this.ctx.drawImage(this.rasterImage, 0, 0, this.raster_width, this.raster_height);
40   this.ctx.restore();
41

However at the end, the geojson land and the raster are not aligned :

result

I tried to first project and then cut, or to use Pseudo-Mercator or Mercator when projection, but nothing works.. Anyone have an idea ?

ANSWER

Answered 2022-Mar-20 at 08:06

A Mercator is usually clipped at roughly 85 degrees North/South (~85.05113 N/S) - as further than this you get a map that is taller than it is wide, and one that gets much much taller for every extra degree north/south included in the extent..

D3 clips features using this limit:

The spherical Mercator projection. Defines a default projection.clipExtent such that the world is projected to a square, clipped to approximately ±85° latitude.

The northern bounds are fine, but the southern bounds of the geojson is -89.998926 degrees which you use to cut the image. But as D3 clips the geojson, your stretching the image by a different amount as compared with the geojson, hence the issue you see.

The solution should be to clip the image to a bounds that is representative of the limits of what D3 will render for a Mercator (85.05113 degrees south) not the limits of the data itself.

I haven't looked up how faithfully gdal implements EPSG:3395 as the definition provides for a projected bounds of 80 degrees south and 84 degrees north - though looking at the image, this doesn't appear to be an issue.

You can also use the cleaner fitSize methods for D3 projections (d3v4+):

1ogrinfo ne_50m_land.json -so -al | grep Extent  
2Extent: (-180.000000, -89.998926) - (180.000000, 83.599609)
3gdal_translate -projwin -180.000000 83.599609 180.000000 -89.998926 SR_50M.tif SR_50M-box.tif
4gdalwarp -overwrite -s_srs &quot;+proj=longlat +datum=WGS84 +no_defs&quot; -t_srs EPSG:3395 SR_50M-box.tif SR_50M-proj.tif
5gdal_translate -of PNG SR_50M-proj.tif SR_50M.png
6   this.projection = d3.geoMercator()
7        .translate([0, 0])
8        .scale(1)
9
10
11   this.rasterImage = new Image();
12   this.rasterImage.src = raster;
13
14   this.path = d3.geoPath(this.projection, this.ctx);
15   this.bb = this.path.bounds(this.land);
16
17   const s = 1 / Math.max((this.bb[1][0] - this.bb[0][0]) / this.getWidth(), (this.bb[1][1] - this.bb[0][1]) / this.getHeight());
18    // transform
19   const t = [(this.getWidth() - s * (this.bb[1][0] + this.bb[0][0])) / 2, (this.getHeight() - s * (this.bb[1][1] + this.bb[0][1])) / 2];
20
21    // update projection
22   this.projection
23       .scale(s)
24       .translate(t);
25
26   this.raster_width = (this.bb[1][0] - this.bb[0][0]) * s;
27   this.raster_height = (this.bb[1][1] - this.bb[0][1]) * s;
28
29   this.rtranslate_x = (this.getWidth() - this.raster_width) / 2;
30   this.rtranslate_y = (this.getHeight() - this.raster_height) / 2;
31
32   this.ctx.beginPath();
33   this.path(this.land);
34   this.ctx.fill();
35
36   this.ctx.save();
37   this.ctx.globalAlpha = 0.8;
38   this.ctx.translate(this.rtranslate_x, this.rtranslate_y);
39   this.ctx.drawImage(this.rasterImage, 0, 0, this.raster_width, this.raster_height);
40   this.ctx.restore();
41 projection.fitSize([width,height],geojsonObject)
42

Which will set scale and translate for you given a provided width/height.

Source https://stackoverflow.com/questions/71510235

QUESTION

R two regressions from one table

Asked 2022-Mar-19 at 16:01

I am trying to plot two different regression lines (with the formula: salary = beta0 + beta1D3 + beta2spending + beta3*(spending*D3) + w) into one scatter plot by deviding the data I have into two subsets as seen in the following code:

1salary = data$salary
2spending = data$spending
3D1 = data$North
4D2 = data$South
5D3 = data$West
6
7subsetWest = subset(data, D3 == 1)
8subsetRest = subset(data, D3 == 0)
9
10abab = lm(salary ~ 1 + spending + 1*spending, data=subsetWest) #red line
11caca = lm(salary ~ 0 + spending + 0*spending, data=subsetRest) #blue line
12
13
14plot(spending,salary)
15
16points(subsetWest$spending, subsetWest$salary, pch=25, col = &quot;red&quot;)
17points(subsetRest$spending, subsetRest$salary, pch=10, col = &quot;blue&quot;)
18
19abline(abab, col = &quot;red&quot;)
20abline(caca, col = &quot;blue&quot;)
21

This is a sample of my data table: [enter image description here][1] [1]: https://i.stack.imgur.com/LowYo.png

And this is the plot I get when running the code:

[enter image description here][2] [2]: https://i.stack.imgur.com/It8ai.png

My problem is that the intercept for my second regression is wrong, in fact I do not even get an intercept when looking at the summary, unlike with the first regression.

Does anybody see where my problem is or does anybody know an alternative way of plotting the two regression lines?

Help would be much appreciated. Thank you very much!

This is the whole table:

1salary = data$salary
2spending = data$spending
3D1 = data$North
4D2 = data$South
5D3 = data$West
6
7subsetWest = subset(data, D3 == 1)
8subsetRest = subset(data, D3 == 0)
9
10abab = lm(salary ~ 1 + spending + 1*spending, data=subsetWest) #red line
11caca = lm(salary ~ 0 + spending + 0*spending, data=subsetRest) #blue line
12
13
14plot(spending,salary)
15
16points(subsetWest$spending, subsetWest$salary, pch=25, col = &quot;red&quot;)
17points(subsetRest$spending, subsetRest$salary, pch=10, col = &quot;blue&quot;)
18
19abline(abab, col = &quot;red&quot;)
20abline(caca, col = &quot;blue&quot;)
21structure(list(salary = c(39166L, 40526L, 40650L, 53600L, 58940L, 
2253220L, 61356L, 54340L, 51706L, 49000L, 48548L, 54340L, 60336L, 
2353050L, 54720L, 43380L, 43948L, 41632L, 36190L, 41878L, 45288L, 
2449248L, 54372L, 67980L, 46764L, 41254L, 45590L, 43140L, 44160L, 
2544500L, 41880L, 43600L, 45868L, 36886L, 39076L, 40920L, 42838L, 
2650320L, 44964L, 41938L, 54448L, 51784L, 45288L, 49280L, 44682L, 
2751220L, 52030L, 51576L, 58264L, 51690L), spending = c(6692L, 
286228L, 7108L, 9284L, 9338L, 9776L, 11420L, 11072L, 8336L, 7094L, 
296318L, 7242L, 7564L, 8494L, 7964L, 7136L, 6310L, 6118L, 5934L, 
306570L, 7828L, 9034L, 8698L, 10040L, 7188L, 5642L, 6732L, 5840L, 
315960L, 7462L, 5706L, 5066L, 5458L, 4610L, 5284L, 6248L, 5504L, 
326858L, 7894L, 5018L, 10880L, 8084L, 6804L, 5658L, 4594L, 5864L, 
337410L, 8246L, 7216L, 7532L), North = c(1L, 1L, 1L, 1L, 1L, 1L, 
341L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 0L, 
350L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 
360L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L), South = c(0L, 
370L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 
380L, 0L, 0L, 0L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
391L, 1L, 1L, 1L, 1L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 
400L), West = c(0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 
410L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 
420L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 0L, 1L, 1L, 1L, 1L, 1L, 1L, 
431L, 1L, 1L, 1L, 1L, 1L)), class = &quot;data.frame&quot;, row.names = c(NA, 
44-50L))
45

ANSWER

Answered 2022-Mar-19 at 14:50

My problem is that the intercept for my second regression is wrong, in fact I do not even get an intercept when looking at the summary, unlike with the first regression.

That is because your second model specifies no intercept, since you use ... ~ 0 + ...

Also, your first model doesn't make sense because it includes spending twice. The second entry for spending will be ignored by lm

Source https://stackoverflow.com/questions/71539104

QUESTION

How can I create a doughnut chart with rounded edges only on one end of each segment?

Asked 2022-Feb-28 at 08:52

I'm trying to build a doughnut chart with rounded edges only on one side. My problem is that I have both sided rounded and not just on the one side. Also can't figure out how to do more foreground arcs not just one.

1    const tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
2    const arc = d3.arc()
3        .innerRadius(80)
4        .outerRadius(100)
5        .startAngle(0)
6        .cornerRadius(15);
7    const svg = d3.select(&quot;svg&quot;),
8        width = +svg.attr(&quot;width&quot;),
9        height = +svg.attr(&quot;height&quot;),
10        g = svg.append(&quot;g&quot;).attr(&quot;transform&quot;, &quot;translate(&quot; + width / 2 + &quot;,&quot; + height / 2 + &quot;)&quot;);
11

Background arc, but I'm not sure if this is even needed?

1    const tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
2    const arc = d3.arc()
3        .innerRadius(80)
4        .outerRadius(100)
5        .startAngle(0)
6        .cornerRadius(15);
7    const svg = d3.select(&quot;svg&quot;),
8        width = +svg.attr(&quot;width&quot;),
9        height = +svg.attr(&quot;height&quot;),
10        g = svg.append(&quot;g&quot;).attr(&quot;transform&quot;, &quot;translate(&quot; + width / 2 + &quot;,&quot; + height / 2 + &quot;)&quot;);
11const background = g.append(&quot;path&quot;)
12        .datum({endAngle: tau})
13        .style(&quot;fill&quot;, &quot;#ddd&quot;)
14        .attr(&quot;d&quot;, arc);
15
16    const data = [ .51];
17    const c = d3.scaleThreshold()
18          .domain([.200,.205,.300,.310, .501, 1])
19          .range([&quot;green&quot;,&quot;#ddd&quot;, &quot;orange&quot;,&quot;#ddd&quot;, &quot;red&quot;]);
20    Const pie = d3.pie()
21          .sort(null)
22          .value(function(d) {
23            return d;
24          });
25

Only have one foreground, but need to be able to have multiple:

1    const tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
2    const arc = d3.arc()
3        .innerRadius(80)
4        .outerRadius(100)
5        .startAngle(0)
6        .cornerRadius(15);
7    const svg = d3.select(&quot;svg&quot;),
8        width = +svg.attr(&quot;width&quot;),
9        height = +svg.attr(&quot;height&quot;),
10        g = svg.append(&quot;g&quot;).attr(&quot;transform&quot;, &quot;translate(&quot; + width / 2 + &quot;,&quot; + height / 2 + &quot;)&quot;);
11const background = g.append(&quot;path&quot;)
12        .datum({endAngle: tau})
13        .style(&quot;fill&quot;, &quot;#ddd&quot;)
14        .attr(&quot;d&quot;, arc);
15
16    const data = [ .51];
17    const c = d3.scaleThreshold()
18          .domain([.200,.205,.300,.310, .501, 1])
19          .range([&quot;green&quot;,&quot;#ddd&quot;, &quot;orange&quot;,&quot;#ddd&quot;, &quot;red&quot;]);
20    Const pie = d3.pie()
21          .sort(null)
22          .value(function(d) {
23            return d;
24          });
25 const  foreground = g.selectAll('.arc')
26        .data(pie(data))
27        .enter()
28        .append(&quot;path&quot;)
29        .attr(&quot;class&quot;, &quot;arc&quot;)
30        .datum({endAngle: 3.8})
31        .style(&quot;fill&quot;, function(d) {
32            return c(d.value);
33          })
34        .attr(&quot;d&quot;, arc)
35

What am I doing wrong?

1    const tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
2    const arc = d3.arc()
3        .innerRadius(80)
4        .outerRadius(100)
5        .startAngle(0)
6        .cornerRadius(15);
7    const svg = d3.select(&quot;svg&quot;),
8        width = +svg.attr(&quot;width&quot;),
9        height = +svg.attr(&quot;height&quot;),
10        g = svg.append(&quot;g&quot;).attr(&quot;transform&quot;, &quot;translate(&quot; + width / 2 + &quot;,&quot; + height / 2 + &quot;)&quot;);
11const background = g.append(&quot;path&quot;)
12        .datum({endAngle: tau})
13        .style(&quot;fill&quot;, &quot;#ddd&quot;)
14        .attr(&quot;d&quot;, arc);
15
16    const data = [ .51];
17    const c = d3.scaleThreshold()
18          .domain([.200,.205,.300,.310, .501, 1])
19          .range([&quot;green&quot;,&quot;#ddd&quot;, &quot;orange&quot;,&quot;#ddd&quot;, &quot;red&quot;]);
20    Const pie = d3.pie()
21          .sort(null)
22          .value(function(d) {
23            return d;
24          });
25 const  foreground = g.selectAll('.arc')
26        .data(pie(data))
27        .enter()
28        .append(&quot;path&quot;)
29        .attr(&quot;class&quot;, &quot;arc&quot;)
30        .datum({endAngle: 3.8})
31        .style(&quot;fill&quot;, function(d) {
32            return c(d.value);
33          })
34        .attr(&quot;d&quot;, arc)
35var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
36
37// An arc function with all values bound except the endAngle. So, to compute an
38// SVG path string for a given angle, we pass an object with an endAngle
39// property to the `arc` function, and it will return the corresponding string.
40var arc = d3.arc()
41    .innerRadius(80)
42    .outerRadius(100)
43    .startAngle(0)
44    .cornerRadius(15);
45
46// Get the SVG container, and apply a transform such that the origin is the
47// center of the canvas. This way, we don’t need to position arcs individually.
48var svg = d3.select("svg"),
49    width = +svg.attr("width"),
50    height = +svg.attr("height"),
51    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
52
53// Add the background arc, from 0 to 100% (tau).
54var background = g.append("path")
55    .datum({endAngle: tau})
56    .style("fill", "#ddd")
57    .attr("d", arc);
58
59var data = [ .51];
60var c = d3.scaleThreshold()
61      .domain([.200,.205,.300,.310, .501, 1])
62      .range(["green","#ddd", "orange","#ddd", "red"]);
63var pie = d3.pie()
64      .sort(null)
65      .value(function(d) {
66        return d;
67      });
68// Add the foreground arc in orange, currently showing 12.7%.
69var foreground = g.selectAll('.arc')
70    .data(pie(data))
71    .enter()
72    .append("path")
73    .attr("class", "arc")
74    .datum({endAngle: 3.8})
75    .style("fill", function(d) {
76        return c(d.value);
77      })
78    .attr("d", arc)
1    const tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
2    const arc = d3.arc()
3        .innerRadius(80)
4        .outerRadius(100)
5        .startAngle(0)
6        .cornerRadius(15);
7    const svg = d3.select(&quot;svg&quot;),
8        width = +svg.attr(&quot;width&quot;),
9        height = +svg.attr(&quot;height&quot;),
10        g = svg.append(&quot;g&quot;).attr(&quot;transform&quot;, &quot;translate(&quot; + width / 2 + &quot;,&quot; + height / 2 + &quot;)&quot;);
11const background = g.append(&quot;path&quot;)
12        .datum({endAngle: tau})
13        .style(&quot;fill&quot;, &quot;#ddd&quot;)
14        .attr(&quot;d&quot;, arc);
15
16    const data = [ .51];
17    const c = d3.scaleThreshold()
18          .domain([.200,.205,.300,.310, .501, 1])
19          .range([&quot;green&quot;,&quot;#ddd&quot;, &quot;orange&quot;,&quot;#ddd&quot;, &quot;red&quot;]);
20    Const pie = d3.pie()
21          .sort(null)
22          .value(function(d) {
23            return d;
24          });
25 const  foreground = g.selectAll('.arc')
26        .data(pie(data))
27        .enter()
28        .append(&quot;path&quot;)
29        .attr(&quot;class&quot;, &quot;arc&quot;)
30        .datum({endAngle: 3.8})
31        .style(&quot;fill&quot;, function(d) {
32            return c(d.value);
33          })
34        .attr(&quot;d&quot;, arc)
35var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
36
37// An arc function with all values bound except the endAngle. So, to compute an
38// SVG path string for a given angle, we pass an object with an endAngle
39// property to the `arc` function, and it will return the corresponding string.
40var arc = d3.arc()
41    .innerRadius(80)
42    .outerRadius(100)
43    .startAngle(0)
44    .cornerRadius(15);
45
46// Get the SVG container, and apply a transform such that the origin is the
47// center of the canvas. This way, we don’t need to position arcs individually.
48var svg = d3.select("svg"),
49    width = +svg.attr("width"),
50    height = +svg.attr("height"),
51    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
52
53// Add the background arc, from 0 to 100% (tau).
54var background = g.append("path")
55    .datum({endAngle: tau})
56    .style("fill", "#ddd")
57    .attr("d", arc);
58
59var data = [ .51];
60var c = d3.scaleThreshold()
61      .domain([.200,.205,.300,.310, .501, 1])
62      .range(["green","#ddd", "orange","#ddd", "red"]);
63var pie = d3.pie()
64      .sort(null)
65      .value(function(d) {
66        return d;
67      });
68// Add the foreground arc in orange, currently showing 12.7%.
69var foreground = g.selectAll('.arc')
70    .data(pie(data))
71    .enter()
72    .append("path")
73    .attr("class", "arc")
74    .datum({endAngle: 3.8})
75    .style("fill", function(d) {
76        return c(d.value);
77      })
78    .attr("d", arc)&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;
79&lt;svg width="960" height="500"&gt;&lt;/svg&gt;

ANSWER

Answered 2022-Feb-28 at 08:52

The documentation states, that the corner radius is applied to both ends of the arc. Additionally, you want the arcs to overlap, which is also not the case.

You can add the one-sided rounded corners the following way:

  1. Use arcs arc with no corner radius for the data.
  2. Add additional path objects corner just for the rounded corner. These need to be shifted to the end of each arc.
  3. Since corner has rounded corners on both sides, add a clipPath that clips half of this arc. The clipPath contains a path for every corner. This is essential for arcs smaller than two times the length of the rounded corners.
  4. raise all elements of corner to the front and then sort them descending by index, so that they overlap the right way.

1    const tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
2    const arc = d3.arc()
3        .innerRadius(80)
4        .outerRadius(100)
5        .startAngle(0)
6        .cornerRadius(15);
7    const svg = d3.select(&quot;svg&quot;),
8        width = +svg.attr(&quot;width&quot;),
9        height = +svg.attr(&quot;height&quot;),
10        g = svg.append(&quot;g&quot;).attr(&quot;transform&quot;, &quot;translate(&quot; + width / 2 + &quot;,&quot; + height / 2 + &quot;)&quot;);
11const background = g.append(&quot;path&quot;)
12        .datum({endAngle: tau})
13        .style(&quot;fill&quot;, &quot;#ddd&quot;)
14        .attr(&quot;d&quot;, arc);
15
16    const data = [ .51];
17    const c = d3.scaleThreshold()
18          .domain([.200,.205,.300,.310, .501, 1])
19          .range([&quot;green&quot;,&quot;#ddd&quot;, &quot;orange&quot;,&quot;#ddd&quot;, &quot;red&quot;]);
20    Const pie = d3.pie()
21          .sort(null)
22          .value(function(d) {
23            return d;
24          });
25 const  foreground = g.selectAll('.arc')
26        .data(pie(data))
27        .enter()
28        .append(&quot;path&quot;)
29        .attr(&quot;class&quot;, &quot;arc&quot;)
30        .datum({endAngle: 3.8})
31        .style(&quot;fill&quot;, function(d) {
32            return c(d.value);
33          })
34        .attr(&quot;d&quot;, arc)
35var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
36
37// An arc function with all values bound except the endAngle. So, to compute an
38// SVG path string for a given angle, we pass an object with an endAngle
39// property to the `arc` function, and it will return the corresponding string.
40var arc = d3.arc()
41    .innerRadius(80)
42    .outerRadius(100)
43    .startAngle(0)
44    .cornerRadius(15);
45
46// Get the SVG container, and apply a transform such that the origin is the
47// center of the canvas. This way, we don’t need to position arcs individually.
48var svg = d3.select("svg"),
49    width = +svg.attr("width"),
50    height = +svg.attr("height"),
51    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
52
53// Add the background arc, from 0 to 100% (tau).
54var background = g.append("path")
55    .datum({endAngle: tau})
56    .style("fill", "#ddd")
57    .attr("d", arc);
58
59var data = [ .51];
60var c = d3.scaleThreshold()
61      .domain([.200,.205,.300,.310, .501, 1])
62      .range(["green","#ddd", "orange","#ddd", "red"]);
63var pie = d3.pie()
64      .sort(null)
65      .value(function(d) {
66        return d;
67      });
68// Add the foreground arc in orange, currently showing 12.7%.
69var foreground = g.selectAll('.arc')
70    .data(pie(data))
71    .enter()
72    .append("path")
73    .attr("class", "arc")
74    .datum({endAngle: 3.8})
75    .style("fill", function(d) {
76        return c(d.value);
77      })
78    .attr("d", arc)&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;
79&lt;svg width="960" height="500"&gt;&lt;/svg&gt;const arc = d3.arc()
80    .innerRadius(50)
81    .outerRadius(70);
82const arc_corner = d3.arc()
83    .innerRadius(50)
84    .outerRadius(70)
85    .cornerRadius(10);
86
87const svg = d3.select("svg"),
88    width = +svg.attr("width"),
89    height = +svg.attr("height"),
90    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
91
92const clipPath = g.append("clipPath")
93  .attr("id", "clip_corners");
94
95const c = d3.scaleQuantile()
96  .range(["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"]);
97
98const pie = d3.pie().value(d =&gt; d);
99
100function render(values) {
101  c.domain(values);
102  const arcs = pie(values);
103  const corners = pie(values).map(d =&gt; {
104    d.startAngle = d.endAngle - 0.2;
105    d.endAngle = d.endAngle + 0.2;
106    return d;
107  });
108  const clip = pie(values).map(d =&gt; {
109    d.startAngle = d.endAngle - 0.01;
110    d.endAngle = d.endAngle + 0.2;
111    return d;
112  });
113
114  g.selectAll(".arc")
115      .data(arcs)
116      .join("path")
117        .attr("class", "arc")
118        .style("fill", d =&gt; c(d.value))
119        .attr("d", arc);
120
121  clipPath.selectAll("path")
122    .data(clip)
123    .join("path")
124      .attr("d", arc);
125
126  g.selectAll(".corner")
127    .data(corners)
128    .join("path")
129      .raise()
130      .attr("class", "corner")
131      .attr("clip-path", "url(#clip_corner)")
132      .style("fill", d =&gt; c(d.value))
133      .attr("d", arc_corner)
134      .sort((a, b) =&gt; b.index - a.index);
135}
136
137function randomData() {
138  const num = Math.ceil(8 * Math.random()) + 2;
139  const values = Array(num).fill(0).map(d =&gt; Math.random());
140  render(values);
141}
142
143d3.select("#random_data")
144  .on("click", randomData);
145
146 randomData();
1    const tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
2    const arc = d3.arc()
3        .innerRadius(80)
4        .outerRadius(100)
5        .startAngle(0)
6        .cornerRadius(15);
7    const svg = d3.select(&quot;svg&quot;),
8        width = +svg.attr(&quot;width&quot;),
9        height = +svg.attr(&quot;height&quot;),
10        g = svg.append(&quot;g&quot;).attr(&quot;transform&quot;, &quot;translate(&quot; + width / 2 + &quot;,&quot; + height / 2 + &quot;)&quot;);
11const background = g.append(&quot;path&quot;)
12        .datum({endAngle: tau})
13        .style(&quot;fill&quot;, &quot;#ddd&quot;)
14        .attr(&quot;d&quot;, arc);
15
16    const data = [ .51];
17    const c = d3.scaleThreshold()
18          .domain([.200,.205,.300,.310, .501, 1])
19          .range([&quot;green&quot;,&quot;#ddd&quot;, &quot;orange&quot;,&quot;#ddd&quot;, &quot;red&quot;]);
20    Const pie = d3.pie()
21          .sort(null)
22          .value(function(d) {
23            return d;
24          });
25 const  foreground = g.selectAll('.arc')
26        .data(pie(data))
27        .enter()
28        .append(&quot;path&quot;)
29        .attr(&quot;class&quot;, &quot;arc&quot;)
30        .datum({endAngle: 3.8})
31        .style(&quot;fill&quot;, function(d) {
32            return c(d.value);
33          })
34        .attr(&quot;d&quot;, arc)
35var tau = 2 * Math.PI; // http://tauday.com/tau-manifesto
36
37// An arc function with all values bound except the endAngle. So, to compute an
38// SVG path string for a given angle, we pass an object with an endAngle
39// property to the `arc` function, and it will return the corresponding string.
40var arc = d3.arc()
41    .innerRadius(80)
42    .outerRadius(100)
43    .startAngle(0)
44    .cornerRadius(15);
45
46// Get the SVG container, and apply a transform such that the origin is the
47// center of the canvas. This way, we don’t need to position arcs individually.
48var svg = d3.select("svg"),
49    width = +svg.attr("width"),
50    height = +svg.attr("height"),
51    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
52
53// Add the background arc, from 0 to 100% (tau).
54var background = g.append("path")
55    .datum({endAngle: tau})
56    .style("fill", "#ddd")
57    .attr("d", arc);
58
59var data = [ .51];
60var c = d3.scaleThreshold()
61      .domain([.200,.205,.300,.310, .501, 1])
62      .range(["green","#ddd", "orange","#ddd", "red"]);
63var pie = d3.pie()
64      .sort(null)
65      .value(function(d) {
66        return d;
67      });
68// Add the foreground arc in orange, currently showing 12.7%.
69var foreground = g.selectAll('.arc')
70    .data(pie(data))
71    .enter()
72    .append("path")
73    .attr("class", "arc")
74    .datum({endAngle: 3.8})
75    .style("fill", function(d) {
76        return c(d.value);
77      })
78    .attr("d", arc)&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;
79&lt;svg width="960" height="500"&gt;&lt;/svg&gt;const arc = d3.arc()
80    .innerRadius(50)
81    .outerRadius(70);
82const arc_corner = d3.arc()
83    .innerRadius(50)
84    .outerRadius(70)
85    .cornerRadius(10);
86
87const svg = d3.select("svg"),
88    width = +svg.attr("width"),
89    height = +svg.attr("height"),
90    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
91
92const clipPath = g.append("clipPath")
93  .attr("id", "clip_corners");
94
95const c = d3.scaleQuantile()
96  .range(["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"]);
97
98const pie = d3.pie().value(d =&gt; d);
99
100function render(values) {
101  c.domain(values);
102  const arcs = pie(values);
103  const corners = pie(values).map(d =&gt; {
104    d.startAngle = d.endAngle - 0.2;
105    d.endAngle = d.endAngle + 0.2;
106    return d;
107  });
108  const clip = pie(values).map(d =&gt; {
109    d.startAngle = d.endAngle - 0.01;
110    d.endAngle = d.endAngle + 0.2;
111    return d;
112  });
113
114  g.selectAll(".arc")
115      .data(arcs)
116      .join("path")
117        .attr("class", "arc")
118        .style("fill", d =&gt; c(d.value))
119        .attr("d", arc);
120
121  clipPath.selectAll("path")
122    .data(clip)
123    .join("path")
124      .attr("d", arc);
125
126  g.selectAll(".corner")
127    .data(corners)
128    .join("path")
129      .raise()
130      .attr("class", "corner")
131      .attr("clip-path", "url(#clip_corner)")
132      .style("fill", d =&gt; c(d.value))
133      .attr("d", arc_corner)
134      .sort((a, b) =&gt; b.index - a.index);
135}
136
137function randomData() {
138  const num = Math.ceil(8 * Math.random()) + 2;
139  const values = Array(num).fill(0).map(d =&gt; Math.random());
140  render(values);
141}
142
143d3.select("#random_data")
144  .on("click", randomData);
145
146 randomData();&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js"&gt;&lt;/script&gt;
147&lt;button id="random_data"&gt;
148Random data
149&lt;/button&gt;
150&lt;svg width="150" height="150"&gt;&lt;/svg&gt;

I changed the dependency to the current version of d3.

Source https://stackoverflow.com/questions/71258718

QUESTION

Is it possible to not reorder elements when using d3.join?

Asked 2022-Feb-18 at 23:13

In d3, we may change the order of elements in a selection, for example by using raise.

Yet, when we rebind the data and use join, this order is discarded.

This does not happen when we use "the old way" of binding data, using enter and merge.

See following fiddle where you can click a circle (for example the blue one) to bring it to front. When you click "redraw", the circles go back to their original z-ordering when using join, but not when using enter and merge.

Can I achive that the circles keep their z-ordering and still use join?

1const data = [{
2  id: 1,
3  v: 10,
4  c: 'red'
5}, {
6  id: 2,
7  v: 30,
8  c: 'blue'
9}, {
10  id: 3,
11  v: 60,
12  c: 'green'
13}]
14
15let nDrawCall = 0
16
17function redraw() {
18  nDrawCall++
19  //svg1 with old enter-merge pattern that works
20  const circles = d3.select('#svg1')
21    .selectAll('circle')
22    .data(data, d =&gt; d.id)
23  circles
24    .enter()
25    .append('circle')
26    .on('click', function() {
27      d3.select(this).raise()
28    })
29    .merge(circles)
30    .attr('cx', d =&gt; d.v * nDrawCall)
31    .attr('cy', d =&gt; d.v)
32    .attr('r', d =&gt; d.v)
33    .attr('fill', d =&gt; d.c)
34    
35  //svg2 with new join pattern that sadly reorders
36  d3.select('#svg2')
37    .selectAll('circle')
38    .data(data, d =&gt; d.id)
39    .join(enter =&gt; enter
40      .append('circle')
41      .on('click', function() {
42        d3.select(this).raise()
43      })
44    )
45    .attr('cx', d =&gt; d.v * nDrawCall)
46    .attr('cy', d =&gt; d.v)
47    .attr('r', d =&gt; d.v)
48    .attr('fill', d =&gt; d.c)
49}
50
51function reset() {
52  nDrawCall = 0
53  redraw()
54}
55
56redraw()
57
58/*
59while (true) {
60  iter++
61  console.log(iter)
62  sleepFor(500)
63}
64*/
1const data = [{
2  id: 1,
3  v: 10,
4  c: 'red'
5}, {
6  id: 2,
7  v: 30,
8  c: 'blue'
9}, {
10  id: 3,
11  v: 60,
12  c: 'green'
13}]
14
15let nDrawCall = 0
16
17function redraw() {
18  nDrawCall++
19  //svg1 with old enter-merge pattern that works
20  const circles = d3.select('#svg1')
21    .selectAll('circle')
22    .data(data, d =&gt; d.id)
23  circles
24    .enter()
25    .append('circle')
26    .on('click', function() {
27      d3.select(this).raise()
28    })
29    .merge(circles)
30    .attr('cx', d =&gt; d.v * nDrawCall)
31    .attr('cy', d =&gt; d.v)
32    .attr('r', d =&gt; d.v)
33    .attr('fill', d =&gt; d.c)
34    
35  //svg2 with new join pattern that sadly reorders
36  d3.select('#svg2')
37    .selectAll('circle')
38    .data(data, d =&gt; d.id)
39    .join(enter =&gt; enter
40      .append('circle')
41      .on('click', function() {
42        d3.select(this).raise()
43      })
44    )
45    .attr('cx', d =&gt; d.v * nDrawCall)
46    .attr('cy', d =&gt; d.v)
47    .attr('r', d =&gt; d.v)
48    .attr('fill', d =&gt; d.c)
49}
50
51function reset() {
52  nDrawCall = 0
53  redraw()
54}
55
56redraw()
57
58/*
59while (true) {
60  iter++
61  console.log(iter)
62  sleepFor(500)
63}
64*/svg {
65  height: 100px;
66  width: 100%;
67}
1const data = [{
2  id: 1,
3  v: 10,
4  c: 'red'
5}, {
6  id: 2,
7  v: 30,
8  c: 'blue'
9}, {
10  id: 3,
11  v: 60,
12  c: 'green'
13}]
14
15let nDrawCall = 0
16
17function redraw() {
18  nDrawCall++
19  //svg1 with old enter-merge pattern that works
20  const circles = d3.select('#svg1')
21    .selectAll('circle')
22    .data(data, d =&gt; d.id)
23  circles
24    .enter()
25    .append('circle')
26    .on('click', function() {
27      d3.select(this).raise()
28    })
29    .merge(circles)
30    .attr('cx', d =&gt; d.v * nDrawCall)
31    .attr('cy', d =&gt; d.v)
32    .attr('r', d =&gt; d.v)
33    .attr('fill', d =&gt; d.c)
34    
35  //svg2 with new join pattern that sadly reorders
36  d3.select('#svg2')
37    .selectAll('circle')
38    .data(data, d =&gt; d.id)
39    .join(enter =&gt; enter
40      .append('circle')
41      .on('click', function() {
42        d3.select(this).raise()
43      })
44    )
45    .attr('cx', d =&gt; d.v * nDrawCall)
46    .attr('cy', d =&gt; d.v)
47    .attr('r', d =&gt; d.v)
48    .attr('fill', d =&gt; d.c)
49}
50
51function reset() {
52  nDrawCall = 0
53  redraw()
54}
55
56redraw()
57
58/*
59while (true) {
60  iter++
61  console.log(iter)
62  sleepFor(500)
63}
64*/svg {
65  height: 100px;
66  width: 100%;
67}&lt;html&gt;
68  &lt;head&gt;
69  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js"&gt;&lt;/script&gt;
70  &lt;/head&gt;
71  &lt;body&gt;
72    &lt;button onclick="redraw()"&gt;
73      Redraw
74    &lt;/button&gt;
75    &lt;button onclick="reset()"&gt;
76      Reset
77    &lt;/button&gt;
78    &lt;div&gt;
79      &lt;svg id="svg1" /&gt;  
80      &lt;svg id="svg2" /&gt;
81    &lt;/div&gt;
82  &lt;/body&gt;
83
84&lt;/html&gt;

ANSWER

Answered 2022-Feb-18 at 23:13

join does an implicit order after merging the enter- and update-selection, see https://github.com/d3/d3-selection/blob/91245ee124ec4dd491e498ecbdc9679d75332b49/src/selection/join.js#L14.

The selection order after the data binding in your example is still red, blue, green even if the document order is changed. So the circles are reordered to the original order using join.

You can get around that by changing the data binding reflecting the change in the document order. I did that here, by moving the datum of the clicked circle to the end of the data array.

1const data = [{
2  id: 1,
3  v: 10,
4  c: 'red'
5}, {
6  id: 2,
7  v: 30,
8  c: 'blue'
9}, {
10  id: 3,
11  v: 60,
12  c: 'green'
13}]
14
15let nDrawCall = 0
16
17function redraw() {
18  nDrawCall++
19  //svg1 with old enter-merge pattern that works
20  const circles = d3.select('#svg1')
21    .selectAll('circle')
22    .data(data, d =&gt; d.id)
23  circles
24    .enter()
25    .append('circle')
26    .on('click', function() {
27      d3.select(this).raise()
28    })
29    .merge(circles)
30    .attr('cx', d =&gt; d.v * nDrawCall)
31    .attr('cy', d =&gt; d.v)
32    .attr('r', d =&gt; d.v)
33    .attr('fill', d =&gt; d.c)
34    
35  //svg2 with new join pattern that sadly reorders
36  d3.select('#svg2')
37    .selectAll('circle')
38    .data(data, d =&gt; d.id)
39    .join(enter =&gt; enter
40      .append('circle')
41      .on('click', function() {
42        d3.select(this).raise()
43      })
44    )
45    .attr('cx', d =&gt; d.v * nDrawCall)
46    .attr('cy', d =&gt; d.v)
47    .attr('r', d =&gt; d.v)
48    .attr('fill', d =&gt; d.c)
49}
50
51function reset() {
52  nDrawCall = 0
53  redraw()
54}
55
56redraw()
57
58/*
59while (true) {
60  iter++
61  console.log(iter)
62  sleepFor(500)
63}
64*/svg {
65  height: 100px;
66  width: 100%;
67}&lt;html&gt;
68  &lt;head&gt;
69  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js"&gt;&lt;/script&gt;
70  &lt;/head&gt;
71  &lt;body&gt;
72    &lt;button onclick="redraw()"&gt;
73      Redraw
74    &lt;/button&gt;
75    &lt;button onclick="reset()"&gt;
76      Reset
77    &lt;/button&gt;
78    &lt;div&gt;
79      &lt;svg id="svg1" /&gt;  
80      &lt;svg id="svg2" /&gt;
81    &lt;/div&gt;
82  &lt;/body&gt;
83
84&lt;/html&gt;let data = [{
85  id: 1,
86  v: 10,
87  c: 'red'
88}, {
89  id: 2,
90  v: 30,
91  c: 'blue'
92}, {
93  id: 3,
94  v: 60,
95  c: 'green'
96}]
97
98let nDrawCall = 0
99
100function redraw() {
101  nDrawCall++
102  d3.select('#svg2')
103    .selectAll('circle')
104    .data(data, d =&gt; d.id)
105    .join(enter =&gt; enter
106      .append('circle')
107      .on('click', function() {
108        const circle = d3.select(this).raise();
109        data.push(data.splice(data.indexOf(circle.datum()), 1)[0]);
110      })
111    )
112    .attr('cx', d =&gt; d.v * nDrawCall)
113    .attr('cy', d =&gt; d.v)
114    .attr('r', d =&gt; d.v)
115    .attr('fill', d =&gt; d.c)
116}
117
118function reset() {
119  nDrawCall = 0
120  redraw()
121}
122
123redraw()
1const data = [{
2  id: 1,
3  v: 10,
4  c: 'red'
5}, {
6  id: 2,
7  v: 30,
8  c: 'blue'
9}, {
10  id: 3,
11  v: 60,
12  c: 'green'
13}]
14
15let nDrawCall = 0
16
17function redraw() {
18  nDrawCall++
19  //svg1 with old enter-merge pattern that works
20  const circles = d3.select('#svg1')
21    .selectAll('circle')
22    .data(data, d =&gt; d.id)
23  circles
24    .enter()
25    .append('circle')
26    .on('click', function() {
27      d3.select(this).raise()
28    })
29    .merge(circles)
30    .attr('cx', d =&gt; d.v * nDrawCall)
31    .attr('cy', d =&gt; d.v)
32    .attr('r', d =&gt; d.v)
33    .attr('fill', d =&gt; d.c)
34    
35  //svg2 with new join pattern that sadly reorders
36  d3.select('#svg2')
37    .selectAll('circle')
38    .data(data, d =&gt; d.id)
39    .join(enter =&gt; enter
40      .append('circle')
41      .on('click', function() {
42        d3.select(this).raise()
43      })
44    )
45    .attr('cx', d =&gt; d.v * nDrawCall)
46    .attr('cy', d =&gt; d.v)
47    .attr('r', d =&gt; d.v)
48    .attr('fill', d =&gt; d.c)
49}
50
51function reset() {
52  nDrawCall = 0
53  redraw()
54}
55
56redraw()
57
58/*
59while (true) {
60  iter++
61  console.log(iter)
62  sleepFor(500)
63}
64*/svg {
65  height: 100px;
66  width: 100%;
67}&lt;html&gt;
68  &lt;head&gt;
69  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js"&gt;&lt;/script&gt;
70  &lt;/head&gt;
71  &lt;body&gt;
72    &lt;button onclick="redraw()"&gt;
73      Redraw
74    &lt;/button&gt;
75    &lt;button onclick="reset()"&gt;
76      Reset
77    &lt;/button&gt;
78    &lt;div&gt;
79      &lt;svg id="svg1" /&gt;  
80      &lt;svg id="svg2" /&gt;
81    &lt;/div&gt;
82  &lt;/body&gt;
83
84&lt;/html&gt;let data = [{
85  id: 1,
86  v: 10,
87  c: 'red'
88}, {
89  id: 2,
90  v: 30,
91  c: 'blue'
92}, {
93  id: 3,
94  v: 60,
95  c: 'green'
96}]
97
98let nDrawCall = 0
99
100function redraw() {
101  nDrawCall++
102  d3.select('#svg2')
103    .selectAll('circle')
104    .data(data, d =&gt; d.id)
105    .join(enter =&gt; enter
106      .append('circle')
107      .on('click', function() {
108        const circle = d3.select(this).raise();
109        data.push(data.splice(data.indexOf(circle.datum()), 1)[0]);
110      })
111    )
112    .attr('cx', d =&gt; d.v * nDrawCall)
113    .attr('cy', d =&gt; d.v)
114    .attr('r', d =&gt; d.v)
115    .attr('fill', d =&gt; d.c)
116}
117
118function reset() {
119  nDrawCall = 0
120  redraw()
121}
122
123redraw()svg {
124  height: 100px;
125  width: 100%;
126}
1const data = [{
2  id: 1,
3  v: 10,
4  c: 'red'
5}, {
6  id: 2,
7  v: 30,
8  c: 'blue'
9}, {
10  id: 3,
11  v: 60,
12  c: 'green'
13}]
14
15let nDrawCall = 0
16
17function redraw() {
18  nDrawCall++
19  //svg1 with old enter-merge pattern that works
20  const circles = d3.select('#svg1')
21    .selectAll('circle')
22    .data(data, d =&gt; d.id)
23  circles
24    .enter()
25    .append('circle')
26    .on('click', function() {
27      d3.select(this).raise()
28    })
29    .merge(circles)
30    .attr('cx', d =&gt; d.v * nDrawCall)
31    .attr('cy', d =&gt; d.v)
32    .attr('r', d =&gt; d.v)
33    .attr('fill', d =&gt; d.c)
34    
35  //svg2 with new join pattern that sadly reorders
36  d3.select('#svg2')
37    .selectAll('circle')
38    .data(data, d =&gt; d.id)
39    .join(enter =&gt; enter
40      .append('circle')
41      .on('click', function() {
42        d3.select(this).raise()
43      })
44    )
45    .attr('cx', d =&gt; d.v * nDrawCall)
46    .attr('cy', d =&gt; d.v)
47    .attr('r', d =&gt; d.v)
48    .attr('fill', d =&gt; d.c)
49}
50
51function reset() {
52  nDrawCall = 0
53  redraw()
54}
55
56redraw()
57
58/*
59while (true) {
60  iter++
61  console.log(iter)
62  sleepFor(500)
63}
64*/svg {
65  height: 100px;
66  width: 100%;
67}&lt;html&gt;
68  &lt;head&gt;
69  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js"&gt;&lt;/script&gt;
70  &lt;/head&gt;
71  &lt;body&gt;
72    &lt;button onclick="redraw()"&gt;
73      Redraw
74    &lt;/button&gt;
75    &lt;button onclick="reset()"&gt;
76      Reset
77    &lt;/button&gt;
78    &lt;div&gt;
79      &lt;svg id="svg1" /&gt;  
80      &lt;svg id="svg2" /&gt;
81    &lt;/div&gt;
82  &lt;/body&gt;
83
84&lt;/html&gt;let data = [{
85  id: 1,
86  v: 10,
87  c: 'red'
88}, {
89  id: 2,
90  v: 30,
91  c: 'blue'
92}, {
93  id: 3,
94  v: 60,
95  c: 'green'
96}]
97
98let nDrawCall = 0
99
100function redraw() {
101  nDrawCall++
102  d3.select('#svg2')
103    .selectAll('circle')
104    .data(data, d =&gt; d.id)
105    .join(enter =&gt; enter
106      .append('circle')
107      .on('click', function() {
108        const circle = d3.select(this).raise();
109        data.push(data.splice(data.indexOf(circle.datum()), 1)[0]);
110      })
111    )
112    .attr('cx', d =&gt; d.v * nDrawCall)
113    .attr('cy', d =&gt; d.v)
114    .attr('r', d =&gt; d.v)
115    .attr('fill', d =&gt; d.c)
116}
117
118function reset() {
119  nDrawCall = 0
120  redraw()
121}
122
123redraw()svg {
124  height: 100px;
125  width: 100%;
126}&lt;html&gt;
127  &lt;head&gt;
128  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js"&gt;&lt;/script&gt;
129  &lt;/head&gt;
130  &lt;body&gt;
131    &lt;button onclick="redraw()"&gt;
132      Redraw
133    &lt;/button&gt;
134    &lt;button onclick="reset()"&gt;
135      Reset
136    &lt;/button&gt;
137    &lt;div&gt;
138      &lt;svg id="svg2" /&gt;
139    &lt;/div&gt;
140  &lt;/body&gt;
141
142&lt;/html&gt;

Source https://stackoverflow.com/questions/71179024

QUESTION

How to create a single column from multiple?

Asked 2022-Jan-30 at 22:10

I have df1:

1Account   Score1 Score2 Score3 Score4 Score5 Score6  Random Random2
223        F30    G1     G5     H10    J18    NULL    3      4
342        NULL   NULL   NULL   NULL   NULL   NULL    5      6
456        D10    D11    NULL   NULL   NULL   NULL    6      2
559        X14    D3     F4     A11    A12    A13     8      2
641        D11    D12    NULL   NULL   NULL   NULL    7      7
745        C3     C10    R4     T5     NULL   NULL    1      1
830        C4     NULL   NULL   NULL   NULL   NULL    1      5
933        D2     D3     NULL   NULL   NULL   NULL    3      4
10

I would like to make a new data frame that takes the values from the 6 score columns and puts them into a single column named Score. If there are multiple scores, then I would want multiple rows of data.

I would like the output df2 to look like:

1Account   Score1 Score2 Score3 Score4 Score5 Score6  Random Random2
223        F30    G1     G5     H10    J18    NULL    3      4
342        NULL   NULL   NULL   NULL   NULL   NULL    5      6
456        D10    D11    NULL   NULL   NULL   NULL    6      2
559        X14    D3     F4     A11    A12    A13     8      2
641        D11    D12    NULL   NULL   NULL   NULL    7      7
745        C3     C10    R4     T5     NULL   NULL    1      1
830        C4     NULL   NULL   NULL   NULL   NULL    1      5
933        D2     D3     NULL   NULL   NULL   NULL    3      4
10Account   Score
1123        F30
1223        G1
1323        G5
1423        H10
1523        J18
1656        D10
1756        D11
1859        X14
1959        D3
2059        F4
2159        A11
2259        A12
2359        A13
2441        D11
2541        D12
2645        C3
2745        C10 
2845        R4
2945        T5
3030        C4
3133        D2
3233        D3
33

ANSWER

Answered 2022-Jan-30 at 21:02

If the values are "NULL", then we can select the columns of interest, convert to long format with pivot_longer and filter out the "NULL" elements

1Account   Score1 Score2 Score3 Score4 Score5 Score6  Random Random2
223        F30    G1     G5     H10    J18    NULL    3      4
342        NULL   NULL   NULL   NULL   NULL   NULL    5      6
456        D10    D11    NULL   NULL   NULL   NULL    6      2
559        X14    D3     F4     A11    A12    A13     8      2
641        D11    D12    NULL   NULL   NULL   NULL    7      7
745        C3     C10    R4     T5     NULL   NULL    1      1
830        C4     NULL   NULL   NULL   NULL   NULL    1      5
933        D2     D3     NULL   NULL   NULL   NULL    3      4
10Account   Score
1123        F30
1223        G1
1323        G5
1423        H10
1523        J18
1656        D10
1756        D11
1859        X14
1959        D3
2059        F4
2159        A11
2259        A12
2359        A13
2441        D11
2541        D12
2645        C3
2745        C10 
2845        R4
2945        T5
3030        C4
3133        D2
3233        D3
33library(dplyr)
34library(tidyr)
35df1 %&gt;% 
36   select(Account, starts_with(&quot;Score&quot;)) %&gt;% 
37   pivot_longer(cols = -Account, names_to = NULL, values_to = &quot;Score&quot;) %&gt;% 
38   filter(Score != &quot;NULL&quot;)
39

-output

1Account   Score1 Score2 Score3 Score4 Score5 Score6  Random Random2
223        F30    G1     G5     H10    J18    NULL    3      4
342        NULL   NULL   NULL   NULL   NULL   NULL    5      6
456        D10    D11    NULL   NULL   NULL   NULL    6      2
559        X14    D3     F4     A11    A12    A13     8      2
641        D11    D12    NULL   NULL   NULL   NULL    7      7
745        C3     C10    R4     T5     NULL   NULL    1      1
830        C4     NULL   NULL   NULL   NULL   NULL    1      5
933        D2     D3     NULL   NULL   NULL   NULL    3      4
10Account   Score
1123        F30
1223        G1
1323        G5
1423        H10
1523        J18
1656        D10
1756        D11
1859        X14
1959        D3
2059        F4
2159        A11
2259        A12
2359        A13
2441        D11
2541        D12
2645        C3
2745        C10 
2845        R4
2945        T5
3030        C4
3133        D2
3233        D3
33library(dplyr)
34library(tidyr)
35df1 %&gt;% 
36   select(Account, starts_with(&quot;Score&quot;)) %&gt;% 
37   pivot_longer(cols = -Account, names_to = NULL, values_to = &quot;Score&quot;) %&gt;% 
38   filter(Score != &quot;NULL&quot;)
39# A tibble: 22 × 2
40   Account Score
41     &lt;int&gt; &lt;chr&gt;
42 1      23 F30  
43 2      23 G1   
44 3      23 G5   
45 4      23 H10  
46 5      23 J18  
47 6      56 D10  
48 7      56 D11  
49 8      59 X14  
50 9      59 D3   
5110      59 F4   
52# … with 12 more rows
53
data
1Account   Score1 Score2 Score3 Score4 Score5 Score6  Random Random2
223        F30    G1     G5     H10    J18    NULL    3      4
342        NULL   NULL   NULL   NULL   NULL   NULL    5      6
456        D10    D11    NULL   NULL   NULL   NULL    6      2
559        X14    D3     F4     A11    A12    A13     8      2
641        D11    D12    NULL   NULL   NULL   NULL    7      7
745        C3     C10    R4     T5     NULL   NULL    1      1
830        C4     NULL   NULL   NULL   NULL   NULL    1      5
933        D2     D3     NULL   NULL   NULL   NULL    3      4
10Account   Score
1123        F30
1223        G1
1323        G5
1423        H10
1523        J18
1656        D10
1756        D11
1859        X14
1959        D3
2059        F4
2159        A11
2259        A12
2359        A13
2441        D11
2541        D12
2645        C3
2745        C10 
2845        R4
2945        T5
3030        C4
3133        D2
3233        D3
33library(dplyr)
34library(tidyr)
35df1 %&gt;% 
36   select(Account, starts_with(&quot;Score&quot;)) %&gt;% 
37   pivot_longer(cols = -Account, names_to = NULL, values_to = &quot;Score&quot;) %&gt;% 
38   filter(Score != &quot;NULL&quot;)
39# A tibble: 22 × 2
40   Account Score
41     &lt;int&gt; &lt;chr&gt;
42 1      23 F30  
43 2      23 G1   
44 3      23 G5   
45 4      23 H10  
46 5      23 J18  
47 6      56 D10  
48 7      56 D11  
49 8      59 X14  
50 9      59 D3   
5110      59 F4   
52# … with 12 more rows
53df1 &lt;- structure(list(Account = c(23L, 42L, 56L, 59L, 41L, 45L, 30L, 
5433L), Score1 = c(&quot;F30&quot;, &quot;NULL&quot;, &quot;D10&quot;, &quot;X14&quot;, &quot;D11&quot;, &quot;C3&quot;, &quot;C4&quot;, 
55&quot;D2&quot;), Score2 = c(&quot;G1&quot;, &quot;NULL&quot;, &quot;D11&quot;, &quot;D3&quot;, &quot;D12&quot;, &quot;C10&quot;, &quot;NULL&quot;, 
56&quot;D3&quot;), Score3 = c(&quot;G5&quot;, &quot;NULL&quot;, &quot;NULL&quot;, &quot;F4&quot;, &quot;NULL&quot;, &quot;R4&quot;, &quot;NULL&quot;, 
57&quot;NULL&quot;), Score4 = c(&quot;H10&quot;, &quot;NULL&quot;, &quot;NULL&quot;, &quot;A11&quot;, &quot;NULL&quot;, &quot;T5&quot;, 
58&quot;NULL&quot;, &quot;NULL&quot;), Score5 = c(&quot;J18&quot;, &quot;NULL&quot;, &quot;NULL&quot;, &quot;A12&quot;, &quot;NULL&quot;, 
59&quot;NULL&quot;, &quot;NULL&quot;, &quot;NULL&quot;), Score6 = c(&quot;NULL&quot;, &quot;NULL&quot;, &quot;NULL&quot;, &quot;A13&quot;, 
60&quot;NULL&quot;, &quot;NULL&quot;, &quot;NULL&quot;, &quot;NULL&quot;), Random = c(3L, 5L, 6L, 8L, 7L, 
611L, 1L, 3L), Random2 = c(4L, 6L, 2L, 2L, 7L, 1L, 5L, 4L)),
62 class = &quot;data.frame&quot;, row.names = c(NA, 
63-8L))
64

Source https://stackoverflow.com/questions/70918854

QUESTION

Angular TSLint - Cannot find builder &quot;@angular-devkit/build-angular:tslint&quot;

Asked 2022-Jan-04 at 13:18

When I try to run command ng lint --fix cli throws this error:

1An unhandled exception occurred: Cannot find builder &quot;@angular-devkit/build-angular:tslint&quot;.
2See &quot;C:\Users\MOE89A~1.ZAR\AppData\Local\Temp\ng-Ijc3an\angular-errors.log&quot; for further details.
3

My lint confing in angular.json:

1An unhandled exception occurred: Cannot find builder &quot;@angular-devkit/build-angular:tslint&quot;.
2See &quot;C:\Users\MOE89A~1.ZAR\AppData\Local\Temp\ng-Ijc3an\angular-errors.log&quot; for further details.
3&quot;lint&quot;: {
4  &quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
5  &quot;options&quot;: {
6    &quot;tsConfig&quot;: [
7      &quot;projects/wepod-app/tsconfig.app.json&quot;,
8      &quot;projects/wepod-app/tsconfig.spec.json&quot;,
9      &quot;projects/wepod-app/e2e/tsconfig.json&quot;
10    ],
11    &quot;exclude&quot;: [
12      &quot;**/node_modules/**&quot;
13    ]
14  }
15},
16

My package.json:

1An unhandled exception occurred: Cannot find builder &quot;@angular-devkit/build-angular:tslint&quot;.
2See &quot;C:\Users\MOE89A~1.ZAR\AppData\Local\Temp\ng-Ijc3an\angular-errors.log&quot; for further details.
3&quot;lint&quot;: {
4  &quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
5  &quot;options&quot;: {
6    &quot;tsConfig&quot;: [
7      &quot;projects/wepod-app/tsconfig.app.json&quot;,
8      &quot;projects/wepod-app/tsconfig.spec.json&quot;,
9      &quot;projects/wepod-app/e2e/tsconfig.json&quot;
10    ],
11    &quot;exclude&quot;: [
12      &quot;**/node_modules/**&quot;
13    ]
14  }
15},
16{
17  &quot;name&quot;: &quot;wepod-clients&quot;,
18  &quot;version&quot;: &quot;3.2.3&quot;,
19  &quot;scripts&quot;: {
20    &quot;ng&quot;: &quot;ng&quot;,
21    &quot;start&quot;: &quot;node patch.js &amp;&amp; ng serve&quot;,
22    &quot;build&quot;: &quot;node patch.js &amp;&amp; node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng run wepod-app:app-shell:production &amp;&amp; ng run wepod-app:auth-standalone:production&quot;,
23    &quot;server&quot;: &quot;npm run build &amp;&amp; http-server -p 9090 -c-1 dist&quot;,
24    &quot;test&quot;: &quot;ng test&quot;,
25    &quot;lint&quot;: &quot;ng lint --fix&quot;,
26    &quot;e2e&quot;: &quot;ng e2e&quot;,
27    &quot;postinstall&quot;: &quot;node patch.js &amp;&amp; ngcc&quot;,
28    &quot;postbuild&quot;: &quot;node post-build.js&quot;,
29    &quot;prepare&quot;: &quot;husky install&quot;,
30    &quot;build-latest&quot;: &quot;git pull origin production &amp;&amp; npm run build&quot;
31  },
32  &quot;private&quot;: true,
33  &quot;dependencies&quot;: {
34    &quot;@angular/animations&quot;: &quot;^13.0.0&quot;,
35    &quot;@angular/cdk&quot;: &quot;^13.0.0&quot;,
36    &quot;@angular/cli&quot;: &quot;^13.0.1&quot;,
37    &quot;@angular/common&quot;: &quot;^13.0.0&quot;,
38    &quot;@angular/compiler&quot;: &quot;^13.0.0&quot;,
39    &quot;@angular/core&quot;: &quot;^13.0.0&quot;,
40    &quot;@angular/forms&quot;: &quot;^13.0.0&quot;,
41    &quot;@angular/localize&quot;: &quot;^13.0.0&quot;,
42    &quot;@angular/platform-browser&quot;: &quot;^13.0.0&quot;,
43    &quot;@angular/platform-browser-dynamic&quot;: &quot;^13.0.0&quot;,
44    &quot;@angular/platform-server&quot;: &quot;^13.0.0&quot;,
45    &quot;@angular/router&quot;: &quot;^13.0.0&quot;,
46    &quot;@angular/service-worker&quot;: &quot;^13.0.0&quot;,
47    &quot;@types/video.js&quot;: &quot;^7.3.27&quot;,
48    &quot;animate.css&quot;: &quot;^4.1.1&quot;,
49    &quot;assert&quot;: &quot;^2.0.0&quot;,
50    &quot;bowser&quot;: &quot;^2.11.0&quot;,
51    &quot;buffer&quot;: &quot;^6.0.3&quot;,
52    &quot;bundle-loader&quot;: &quot;^0.5.6&quot;,
53    &quot;compare-version&quot;: &quot;^0.1.2&quot;,
54    &quot;constants-browserify&quot;: &quot;^1.0.0&quot;,
55    &quot;crypto-browserify&quot;: &quot;^3.12.0&quot;,
56    &quot;crypto-js&quot;: &quot;^4.1.1&quot;,
57    &quot;d3&quot;: &quot;^6.5.0&quot;,
58    &quot;hammerjs&quot;: &quot;^2.0.8&quot;,
59    &quot;https-browserify&quot;: &quot;^1.0.0&quot;,
60    &quot;jalali-moment&quot;: &quot;^3.3.10&quot;,
61    &quot;lottie-web&quot;: &quot;^5.7.13&quot;,
62    &quot;lzutf8&quot;: &quot;^0.6.0&quot;,
63    &quot;net&quot;: &quot;^1.0.2&quot;,
64    &quot;ng-gallery&quot;: &quot;^5.1.1&quot;,
65    &quot;ng2-jalali-date-picker&quot;: &quot;^2.4.2&quot;,
66    &quot;ngx-device-detector&quot;: &quot;^1.5.2&quot;,
67    &quot;ngx-doughnut-chart&quot;: &quot;0.0.4&quot;,
68    &quot;ngx-infinite-scroll&quot;: &quot;^8.0.2&quot;,
69    &quot;ngx-lottie&quot;: &quot;^7.0.4&quot;,
70    &quot;ngx-owl-carousel-o&quot;: &quot;^3.1.1&quot;,
71    &quot;ngx-skeleton-loader&quot;: &quot;^2.10.1&quot;,
72    &quot;ngx-toastr&quot;: &quot;^12.1.0&quot;,
73    &quot;os-browserify&quot;: &quot;^0.3.0&quot;,
74    &quot;podchat-browser&quot;: &quot;^10.14.13&quot;,
75    &quot;rxjs&quot;: &quot;^6.6.7&quot;,
76    &quot;stream-browserify&quot;: &quot;^3.0.0&quot;,
77    &quot;stream-http&quot;: &quot;^3.2.0&quot;,
78    &quot;tls&quot;: &quot;0.0.1&quot;,
79    &quot;tslib&quot;: &quot;^2.0.0&quot;,
80    &quot;uuid&quot;: &quot;^8.3.2&quot;,
81    &quot;video.js&quot;: &quot;^7.15.4&quot;,
82    &quot;videojs-record&quot;: &quot;^4.5.0&quot;,
83    &quot;zone.js&quot;: &quot;~0.11.4&quot;
84  },
85  &quot;devDependencies&quot;: {
86    &quot;@angular-devkit/build-angular&quot;: &quot;^13.0.1&quot;,
87    &quot;@angular-devkit/core&quot;: &quot;^13.0.1&quot;,
88    &quot;@angular/compiler-cli&quot;: &quot;^13.0.0&quot;,
89    &quot;@angular/language-service&quot;: &quot;^13.0.0&quot;,
90    &quot;@egjs/hammerjs&quot;: &quot;^2.0.17&quot;,
91    &quot;@types/hammerjs&quot;: &quot;^2.0.40&quot;,
92    &quot;@types/jasmine&quot;: &quot;~3.6.0&quot;,
93    &quot;@types/jasminewd2&quot;: &quot;^2.0.10&quot;,
94    &quot;@types/node&quot;: &quot;^12.20.36&quot;,
95    &quot;codelyzer&quot;: &quot;^6.0.0&quot;,
96    &quot;colors&quot;: &quot;^1.4.0&quot;,
97    &quot;git-tag-version&quot;: &quot;^1.3.1&quot;,
98    &quot;gulp&quot;: &quot;^4.0.2&quot;,
99    &quot;gulp-gzip&quot;: &quot;^1.4.2&quot;,
100    &quot;http-server&quot;: &quot;^14.0.0&quot;,
101    &quot;husky&quot;: &quot;^7.0.4&quot;,
102    &quot;jasmine-core&quot;: &quot;~3.6.0&quot;,
103    &quot;jasmine-spec-reporter&quot;: &quot;~5.0.0&quot;,
104    &quot;karma&quot;: &quot;^6.3.7&quot;,
105    &quot;karma-chrome-launcher&quot;: &quot;~3.1.0&quot;,
106    &quot;karma-coverage-istanbul-reporter&quot;: &quot;^2.1.0&quot;,
107    &quot;karma-jasmine&quot;: &quot;~4.0.0&quot;,
108    &quot;karma-jasmine-html-reporter&quot;: &quot;^1.5.0&quot;,
109    &quot;protractor&quot;: &quot;^7.0.0&quot;,
110    &quot;ts-node&quot;: &quot;^8.10.2&quot;,
111    &quot;tslint&quot;: &quot;^6.1.3&quot;,
112    &quot;typescript&quot;: &quot;4.4.4&quot;,
113    &quot;zip-dir&quot;: &quot;^2.0.0&quot;
114  },
115  &quot;browser&quot;: {
116    &quot;fs&quot;: false,
117    &quot;path&quot;: false,
118    &quot;os&quot;: false
119  }
120}
121

ANSWER

Answered 2021-Nov-28 at 10:34

From v13 angular doesn't use tslint anymore due to deprecation.

Run ng add @angular-eslint/schematics to add eslint to your application.

It will use tslint-to-eslint-config to migrate you to eslint automatically.

It will generate a .eslintrc.json file and migrate tslint.json to it.

Nothing else is needed to be done.

Source https://stackoverflow.com/questions/70141707

QUESTION

Fisheye effect D3js image slideshow works on rects/objects but not image files, Error: &lt;image&gt; attribute x: Expected length, &quot;NaN&quot;

Asked 2021-Dec-05 at 17:50

My issue is that the animation works fine when the images have no content to them as below, but once they are loaded I get the following error: Error: <image> attribute x: Expected length, "NaN".

Here is a code snippet:

1var data = ['https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg'];
2
3var w = window,
4  d = document,
5  e = d.documentElement,
6  g = d.getElementsByTagName('body')[0],
7  wid = 400
8y = 400;
9
10var svg = d3.select("body").append("svg")
11  .attr("width", wid)
12  .attr("height", "400")
13  .on('mousemove', () =&gt; {
14    let x = event.x - 20;
15    d3.selectAll('.content')
16      .attr('x', (d, i) =&gt; fisheye(d, x))
17  })
18  .on('mouseleave', () =&gt; {
19    d3.selectAll('.content').transition().attr(
20      'x', (d, i) =&gt; xScale(i))
21  })
22
23var chart = svg.append('g')
24  .classed('group', true)
25
26
27let xScale = d3.scaleBand().domain(d3.range(5)).range([0, wid]).padding(0)
28
29let rects = svg.selectAll('content')
30  .data(
31    d3.range(5)
32    //data //(uncomment this, and comment line above to try loading images)
33  )
34
35rects.exit().remove();
36
37rects.enter()
38  .append("svg:image")
39  .attr("xlink:href", d =&gt; d)
40  .attr("class", "content")
41  .attr("y", 0)
42  .attr("x", (d, i) =&gt; xScale(i))
43  .attr("width", "300px")
44  .style("opacity", 1)
45  .attr("stroke", "white")
46  .style('fill', 'rgb(81, 170, 232)')
47  .attr("height", 400);
48
49let distortion = 10;
50
51function fisheye(_, a) {
52  let x = xScale(_),
53    left = x &lt; a,
54    range = d3.extent(xScale.range()),
55    min = range[0],
56    max = range[1],
57    m = left ? a - min : max - a;
58  if (m === 0) m = max - min;
59
60  return (left ? -1 : 1) * m * (distortion + 1) / (distortion + (m / Math.abs(x - a))) + a;
61}
1var data = ['https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg'];
2
3var w = window,
4  d = document,
5  e = d.documentElement,
6  g = d.getElementsByTagName('body')[0],
7  wid = 400
8y = 400;
9
10var svg = d3.select("body").append("svg")
11  .attr("width", wid)
12  .attr("height", "400")
13  .on('mousemove', () =&gt; {
14    let x = event.x - 20;
15    d3.selectAll('.content')
16      .attr('x', (d, i) =&gt; fisheye(d, x))
17  })
18  .on('mouseleave', () =&gt; {
19    d3.selectAll('.content').transition().attr(
20      'x', (d, i) =&gt; xScale(i))
21  })
22
23var chart = svg.append('g')
24  .classed('group', true)
25
26
27let xScale = d3.scaleBand().domain(d3.range(5)).range([0, wid]).padding(0)
28
29let rects = svg.selectAll('content')
30  .data(
31    d3.range(5)
32    //data //(uncomment this, and comment line above to try loading images)
33  )
34
35rects.exit().remove();
36
37rects.enter()
38  .append("svg:image")
39  .attr("xlink:href", d =&gt; d)
40  .attr("class", "content")
41  .attr("y", 0)
42  .attr("x", (d, i) =&gt; xScale(i))
43  .attr("width", "300px")
44  .style("opacity", 1)
45  .attr("stroke", "white")
46  .style('fill', 'rgb(81, 170, 232)')
47  .attr("height", 400);
48
49let distortion = 10;
50
51function fisheye(_, a) {
52  let x = xScale(_),
53    left = x &lt; a,
54    range = d3.extent(xScale.range()),
55    min = range[0],
56    max = range[1],
57    m = left ? a - min : max - a;
58  if (m === 0) m = max - min;
59
60  return (left ? -1 : 1) * m * (distortion + 1) / (distortion + (m / Math.abs(x - a))) + a;
61}&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;

I'm trying to make something that looks like this: https://www.nytimes.com/newsgraphics/2013/09/13/fashion-week-editors-picks/index.html

I would really appreciate some help on getting that snippet to work and if possible as smoothly as this website link! That was made by the Bosstock himself and I'm a d3 newbie so I'm quite out of my depth.

ANSWER

Answered 2021-Dec-05 at 16:55

I figured out my issue-

1var data = ['https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg', 'https://cdn.britannica.com/60/8160-050-08CCEABC/German-shepherd.jpg'];
2
3var w = window,
4  d = document,
5  e = d.documentElement,
6  g = d.getElementsByTagName('body')[0],
7  wid = 400
8y = 400;
9
10var svg = d3.select("body").append("svg")
11  .attr("width", wid)
12  .attr("height", "400")
13  .on('mousemove', () =&gt; {
14    let x = event.x - 20;
15    d3.selectAll('.content')
16      .attr('x', (d, i) =&gt; fisheye(d, x))
17  })
18  .on('mouseleave', () =&gt; {
19    d3.selectAll('.content').transition().attr(
20      'x', (d, i) =&gt; xScale(i))
21  })
22
23var chart = svg.append('g')
24  .classed('group', true)
25
26
27let xScale = d3.scaleBand().domain(d3.range(5)).range([0, wid]).padding(0)
28
29let rects = svg.selectAll('content')
30  .data(
31    d3.range(5)
32    //data //(uncomment this, and comment line above to try loading images)
33  )
34
35rects.exit().remove();
36
37rects.enter()
38  .append("svg:image")
39  .attr("xlink:href", d =&gt; d)
40  .attr("class", "content")
41  .attr("y", 0)
42  .attr("x", (d, i) =&gt; xScale(i))
43  .attr("width", "300px")
44  .style("opacity", 1)
45  .attr("stroke", "white")
46  .style('fill', 'rgb(81, 170, 232)')
47  .attr("height", 400);
48
49let distortion = 10;
50
51function fisheye(_, a) {
52  let x = xScale(_),
53    left = x &lt; a,
54    range = d3.extent(xScale.range()),
55    min = range[0],
56    max = range[1],
57    m = left ? a - min : max - a;
58  if (m === 0) m = max - min;
59
60  return (left ? -1 : 1) * m * (distortion + 1) / (distortion + (m / Math.abs(x - a))) + a;
61}&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;let xScale = d3.scaleBand().domain(data).range([0,wid]).padding(0)
62

The domain was d3.range(5) rather than my data variable.

Source https://stackoverflow.com/questions/70207464

QUESTION

Compare two collections.defaultdict and remove similar values

Asked 2021-Nov-15 at 12:38

I have two collections.defaultdict and trying to remove values from d1 that are also in d2.

1from collections import Counter, defaultdict
2d1 = Counter({'hi': 22, 'bye': 55, 'ok': 33})
3d2 = Counter({'hi': 10, 'hello': 233, 'nvm': 96})
4

Ideal result:

1from collections import Counter, defaultdict
2d1 = Counter({'hi': 22, 'bye': 55, 'ok': 33})
3d2 = Counter({'hi': 10, 'hello': 233, 'nvm': 96})
4d3 = set()
5d3 = ({'bye':55, 'ok':33})
6

So far I have tried:

1from collections import Counter, defaultdict
2d1 = Counter({'hi': 22, 'bye': 55, 'ok': 33})
3d2 = Counter({'hi': 10, 'hello': 233, 'nvm': 96})
4d3 = set()
5d3 = ({'bye':55, 'ok':33})
6d3 = set()
7d3 = d1 - d2
8print(d3)
9Counter({'bye': 55, 'ok': 33, 'hi': 12}) 
10

But this keeps the same value of 'hi' even though I want to remove all similar ones.

ANSWER

Answered 2021-Oct-20 at 15:20

Use a dictionary comprehension

1from collections import Counter, defaultdict
2d1 = Counter({'hi': 22, 'bye': 55, 'ok': 33})
3d2 = Counter({'hi': 10, 'hello': 233, 'nvm': 96})
4d3 = set()
5d3 = ({'bye':55, 'ok':33})
6d3 = set()
7d3 = d1 - d2
8print(d3)
9Counter({'bye': 55, 'ok': 33, 'hi': 12}) 
10d3 = {k: v for k, v in d1.items() if k not in d2}
11print(d3)
12

Result:

1from collections import Counter, defaultdict
2d1 = Counter({'hi': 22, 'bye': 55, 'ok': 33})
3d2 = Counter({'hi': 10, 'hello': 233, 'nvm': 96})
4d3 = set()
5d3 = ({'bye':55, 'ok':33})
6d3 = set()
7d3 = d1 - d2
8print(d3)
9Counter({'bye': 55, 'ok': 33, 'hi': 12}) 
10d3 = {k: v for k, v in d1.items() if k not in d2}
11print(d3)
12{'bye': 55, 'ok': 33}
13

Source https://stackoverflow.com/questions/69648693

Community Discussions contain sources that include Stack Exchange Network

Tutorials and Learning Resources in D3

Tutorials and Learning Resources are not available at this moment for D3

Share this Page

share link

Get latest updates on D3