# https://d3-graph-gallery.com llms-full.txt

## Data Visualization Techniques
Distribution

* * *

[![](https://d3-graph-gallery.com/img/section/Violin150.png)](https://d3-graph-gallery.com/violin.html)

Violin

[![](https://d3-graph-gallery.com/img/section/Density150.png)](https://d3-graph-gallery.com/density.html)

Density

[![](https://d3-graph-gallery.com/img/section/Histogram150.png)](https://d3-graph-gallery.com/histogram.html)

Histogram

[![](https://d3-graph-gallery.com/img/section/Box1150.png)](https://d3-graph-gallery.com/boxplot.html)

Boxplot

[![](https://d3-graph-gallery.com/img/section/Joyplot150.png)](https://d3-graph-gallery.com/ridgeline.html)

Ridgeline

Correlation

* * *

[![](https://d3-graph-gallery.com/img/section/ScatterPlot150.png)](https://d3-graph-gallery.com/scatter.html)

Scatter

[![](https://d3-graph-gallery.com/img/section/Heatmap150.png)](https://d3-graph-gallery.com/heatmap.html)

Heatmap

[![](https://d3-graph-gallery.com/img/section/Correlogram150.png)](https://d3-graph-gallery.com/correlogram.html)

Correlogram

[![](https://d3-graph-gallery.com/img/section/BubblePlot150.png)](https://d3-graph-gallery.com/bubble.html)

Bubble

[![](https://d3-graph-gallery.com/img/section/ScatterConnected150.png)](https://d3-graph-gallery.com/connectedscatter.html)

Connected scatter

[![](https://d3-graph-gallery.com/img/section/2dDensity150.png)](https://d3-graph-gallery.com/density2d.html)

Density 2d

Ranking

* * *

[![](https://d3-graph-gallery.com/img/section/Bar150.png)](https://d3-graph-gallery.com/barplot.html)

Barplot

[![](https://d3-graph-gallery.com/img/section/Spider150.png)](https://d3-graph-gallery.com/spider.html)

Spider / Radar

[![](https://d3-graph-gallery.com/img/section/Wordcloud150.png)](https://d3-graph-gallery.com/wordcloud.html)

Wordcloud

[![](https://d3-graph-gallery.com/img/section/Parallel1150.png)](https://d3-graph-gallery.com/parallel.html)

Parallel

[![](https://d3-graph-gallery.com/img/section/Lollipop150.png)](https://d3-graph-gallery.com/lollipop.html)

Lollipop

[![](https://d3-graph-gallery.com/img/section/CircularBarplot150.png)](https://d3-graph-gallery.com/circular_barplot.html)

Circular Barplot

Part of a whole

* * *

[![](https://d3-graph-gallery.com/img/section/Tree150.png)](https://d3-graph-gallery.com/treemap.html)

Treemap

[![](https://d3-graph-gallery.com/img/section/Doughnut150.png)](https://d3-graph-gallery.com/donut.html)

Doughnut

[![](https://d3-graph-gallery.com/img/section/Pie150.png)](https://d3-graph-gallery.com/pie.html)

Pie chart

[![](https://d3-graph-gallery.com/img/section/Dendrogram150.png)](https://d3-graph-gallery.com/dendrogram.html)

Dendrogram

[![](https://d3-graph-gallery.com/img/section/CircularPacking150.png)](https://d3-graph-gallery.com/circularpacking.html)

Circular packing

Evolution

* * *

[![](https://d3-graph-gallery.com/img/section/Line150.png)](https://d3-graph-gallery.com/line.html)

Line plot

[![](https://d3-graph-gallery.com/img/section/Area150.png)](https://d3-graph-gallery.com/area.html)

Area

[![](https://d3-graph-gallery.com/img/section/StackedArea150.png)](https://d3-graph-gallery.com/stackedarea.html)

Stacked area

[![](https://d3-graph-gallery.com/img/section/Stream150.png)](https://d3-graph-gallery.com/streamgraph.html)

Streamchart

Map

* * *

[![](https://d3-graph-gallery.com/img/section/Map150.png)](https://d3-graph-gallery.com/backgroundmap.html)

Map

[![](https://d3-graph-gallery.com/img/section/Choropleth150.png)](https://d3-graph-gallery.com/choropleth.html)

Choropleth

[![](https://d3-graph-gallery.com/img/section/MapHexbin150.png)](https://d3-graph-gallery.com/hexbinmap.html)

Hexbin map

[![](https://d3-graph-gallery.com/img/section/Cartogram150.png)](https://d3-graph-gallery.com/cartogram.html)

Cartogram

[![](https://d3-graph-gallery.com/img/section/ConnectedMap150.png)](https://d3-graph-gallery.com/connectionmap.html)

Connection

[![](https://d3-graph-gallery.com/img/section/BubbleMap150.png)](https://d3-graph-gallery.com/bubblemap.html)

Bubble map

Flow

* * *

[![](https://d3-graph-gallery.com/img/section/Chord150.png)](https://d3-graph-gallery.com/chord.html)

Chord diagram

[![](https://d3-graph-gallery.com/img/section/Network150.png)](https://d3-graph-gallery.com/network.html)

Network

[![](https://d3-graph-gallery.com/img/section/Sankey150.png)](https://d3-graph-gallery.com/sankey.html)

Sankey

[![](https://d3-graph-gallery.com/img/section/Arc150.png)](https://d3-graph-gallery.com/arc.html)

Arc diagram

[![](https://d3-graph-gallery.com/img/section/Bundle150.png)](https://d3-graph-gallery.com/bundle.html)

Edge bundling

General knowledge

* * *

[![](https://d3-graph-gallery.com/img/section/Basic150.png)](https://d3-graph-gallery.com/intro_d3js.html)

Basics

[![](https://d3-graph-gallery.com/img/section/Colours150.png)](https://d3-graph-gallery.com/custom.html)

Custom

[![](https://d3-graph-gallery.com/img/section/anim150.gif)](https://d3-graph-gallery.com/interactivity.html)

Interactivity

[![](https://d3-graph-gallery.com/img/section/Shapehelper150.png)](https://d3-graph-gallery.com/graph/shape.html)

Shape helpers

[![](https://d3-graph-gallery.com/img/section/Bad150.png)](https://www.data-to-viz.com/caveats.html)

Caveats

[![](https://d3-graph-gallery.com/img/section/DataArt1150.png)](https://www.data-to-art.com/)

Data art

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.5126155410343751)

Prebid User Sync

![](https://idsync.rlcdn.com/420486.gif?partner_uid=2BF379BE-1BC1-4D91-9E24-39039550BF72)[iframe](cid:frame-3B6FFA8C6CABA8A8DB498A606C9A56E8@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=2BF379BE-1BC1-4D91-9E24-39039550BF72&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=2BF379BE-1BC1-4D91-9E24-39039550BF72&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=MkJGMzc5QkUtMUJDMS00RDkxLTlFMjQtMzkwMzk1NTBCRjcy&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=K_N5vhvBTZGeJDkDlVC_cg%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=2BF379BE-1BC1-4D91-9E24-39039550BF72&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/2BF379BE-1BC1-4D91-9E24-39039550BF72?gdpr=0&gdpr_consent=)[iframe](cid:frame-2DE1C3613E5F55C3301B41DF06A0EC6A@mhtml.blink)

match.deepintent.com

# This site can’t be reached

**match.deepintent.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**match.deepintent.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/bounce?%2Fgetuid%3Fhttps%3A%2F%2Fsimage2.pubmatic.com%2FAdServer%2FPug%3Fvcode%3Dbz0yJnR5cGU9MSZjb2RlPTc4JnRsPTE1NzY4MDA%3D%26piggybackCookie%3D%24UID%26gdpr%3D0%26gdpr\_consent%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/bounce?%2Fgetuid%3Fhttps%3A%2F%2Fsimage2.pubmatic.com%2FAdServer%2FPug%3Fvcode%3Dbz0yJnR5cGU9MSZjb2RlPTc4JnRsPTE1NzY4MDA%3D%26piggybackCookie%3D%24UID%26gdpr%3D0%26gdpr\_consent%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=92283042357996752911&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=92283042357996752911)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/92283042357996752911?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=92283042357996752911&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=92283042357996752911)

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

rtb.gumgum.com

# This site can’t be reached

The webpage at **https://rtb.gumgum.com/usync/amzns2s?r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dgg.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://rtb.gumgum.com/usync/amzns2s?r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dgg.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.sharethrough.com

# This site can’t be reached

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://aa.agkn.com/adscores/g.pixel?sid=9212308278&puid=2BF379BE-1BC1-4D91-9E24-39039550BF72)![](https://sync.crwdcntrl.net/qmap?c=240&tp=PUBM&tpid=2BF379BE-1BC1-4D91-9E24-39039550BF72&gdpr=0&gdpr_consent=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3371&partner_device_id=2BF379BE-1BC1-4D91-9E24-39039550BF72)![](https://i.liadm.com/s/75145?bidder_id=195755&bidder_uuid=2BF379BE-1BC1-4D91-9E24-39039550BF72)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)![](https://pubmatic-match.dotomi.com/match/bounce/current?networkId=17100&version=1&nuid=2BF379BE-1BC1-4D91-9E24-39039550BF72&gdpr=0&gdpr_consent=)[iframe](cid:frame-594648FD58F5AB03E0B7585DAFCD3617@mhtml.blink)[iframe](cid:frame-7C07A1E8AC6D3F006C6AC5DC8F41F26D@mhtml.blink)![](https://rtb.adentifi.com/CookieSyncPubMatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-B2B64E197246CE249B272260B0C79C40@mhtml.blink)[iframe](cid:frame-33E6036390A554173BF4D1FAADA0A5F1@mhtml.blink)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-FC7BD07E70C437DAB6E66B0B92B89123@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=255abdfe-36c6-42e2-b2fe-61ab44815fbf%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)

Topics Frame

Pixels![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/e062326e-33c7-e917-d7d5-4ce0f9ce5c46?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=74a5542a-a36b-7b5e-e602-5a150699910f&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NThjYTg3ZTAtNmExYy0yNWZhLWYzZTItMDBhY2NjN2I1ZjZm)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

Pixels![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/e062326e-33c7-e917-d7d5-4ce0f9ce5c46?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=74a5542a-a36b-7b5e-e602-5a150699910f&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NThjYTg3ZTAtNmExYy0yNWZhLWYzZTItMDBhY2NjN2I1ZjZm)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=92283042357996752911&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=92283042357996752911)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)

![](https://sync.crwdcntrl.net/qmap?c=2700&tp=UNDR&gdpr=&gdpr_consent=&tpid=9rtfulk2as2yjw5kds024emo8)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3484&partner_device_id=9rtfulk2as2yjw5kds024emo8)![](https://idsync.rlcdn.com/403716.gif?partner_uid=9rtfulk2as2yjw5kds024emo8)![](https://dpm.demdex.net/ibs:dpid=152416&dpuuid=9rtfulk2as2yjw5kds024emo8)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=92283042357996752911&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=92283042357996752911)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)

User-Sync

![](https://sync.crwdcntrl.net/qmap?c=2700&tp=UNDR&gdpr=&gdpr_consent=&tpid=9rtfulk2as2yjw5kds024emo8)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3484&partner_device_id=9rtfulk2as2yjw5kds024emo8)![](https://idsync.rlcdn.com/403716.gif?partner_uid=9rtfulk2as2yjw5kds024emo8)![](https://dpm.demdex.net/ibs:dpid=152416&dpuuid=9rtfulk2as2yjw5kds024emo8)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=125&redir=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D54%26uid%3D%7BuserId%7D)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

## Bubble Chart Tutorial
Step by step

* * *

Building a bubble chart basically follows the same process as for a
[scatterplot](https://d3-graph-gallery.com/scatter.html), except that another scale is
used to map a variable to bubble size. Thus, have a look to the
[scatterplot section](https://d3-graph-gallery.com/scatter.html) for more examples.


[Most basic\\
\\
* * *\\
\\
The most basic bubble plot you can do in d3.js. Keeping only\\
the core code.\\
\\
Input format: `.csv`.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/bubble_basic.png)](https://d3-graph-gallery.com/graph/bubble_basic.html)

[Colored bubble\\
\\
* * *\\
\\
A fourth categoric variable is mapped to the bubbles, giving\\
a supplementary information.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/bubble_color.png)](https://d3-graph-gallery.com/graph/bubble_color.html)

[Add tooltip\\
\\
* * *\\
\\
Add a tooltip to each circle of the chart with a hover\\
effect. Allows to give detail for each data point.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/bubble_tooltip.png)](https://d3-graph-gallery.com/graph/bubble_tooltip.html)

[Legend\\
\\
* * *\\
\\
How to build a nice legend to illustrate bubble size.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/bubble_legend.png)](https://d3-graph-gallery.com/graph/bubble_legend.html)

Template

* * *

Here is the [template](https://d3-graph-gallery.com/graph/bubble_template.html) I use to
start a bubble chart project. Legend describes both size and color.
Hover the legend to highlight the corresponding group.
Hover a bubble to get country name.


[Get code](https://d3-graph-gallery.com/graph/bubble_template.html)

05,00010,00015,00020,00025,00030,00035,00040,00045,00050,000Gdp per Capita354045505560657075808590Life expectancy102001000Population (M)AsiaEuropeAmericasAfricaOceania

Selection of blocks

* * *

A selection of blocks involving bubble charts

[Double bubble chart\\
\\
* * *\\
\\
Two bubble chart next to each other.\\
\\
Hovering a\\
bubble on one also highlight the group on the other.\\
\\
\\
![double bubble plot](https://d3-graph-gallery.com/img/block/block_bubbleDouble.png)](https://bl.ocks.org/tlfrd/aa1bb8f6f3dae3148345fbb54305bdf7)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/ScatterPlot150.png)](https://d3-graph-gallery.com/scatter.html)

Scatter

[![](https://d3-graph-gallery.com/img/section/Heatmap150.png)](https://d3-graph-gallery.com/bubble#heatmap)

Heatmap

[![](https://d3-graph-gallery.com/img/section/Correlogram150.png)](https://d3-graph-gallery.com/correlogram.html)

Correlogram

[![](https://d3-graph-gallery.com/img/section/BubblePlot150.png)](https://d3-graph-gallery.com/bubble.html)

Bubble

[![](https://d3-graph-gallery.com/img/section/ScatterConnected150.png)](https://d3-graph-gallery.com/connectedscatter.html)

Connected scatter

[![](https://d3-graph-gallery.com/img/section/2dDensity150.png)](https://d3-graph-gallery.com/density2d.html)

Density 2d

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-DX-atNxdDJNrcyebZGQCnTrxakL65c8AykjbvJebZEcD8w22fASEoa-JUhHdyL5GbS97CpBLE8wXJpM32Ggofs_KmtSqz6SvlwPH3uGMBBfUNvw0Q)

![](https://cm.g.doubleclick.net/pixel?google_nid=casale_media2_dsp_secure&google_cm&google_dbm)![](https://dsum-sec.casalemedia.com/rrum?ixi=0&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dsp_secure%26google_cm%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_cm&google_dbm)![](https://ib.adnxs.com/getuid?https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_hm=${BASE64_UID_ENC})

[![Advertisement](https://s0.2mdn.net/simgad/18288936050731167112)](https://ad.doubleclick.net/pcs/click? &sai=AMfl-YScBachrOpi1QfAKc8DNteYa0Bf4kcjUiz98u28TYFvxfD3S8CBcG7mzOKs_QmIpug3kRkBJlg64ARf9_r1GweJbNXpJI-NmwjTTesYVDGR2chXFMATm_10qAxrtmSS8btFTPEFwD12xxTumrTnRCHkTePdQSUr0x-fCxB-ViDNZPvqOgTWW15VWRLismbrvK1mleKszKa0jv5o_l9NfVYIvZP2GBJ9PflJ5QgGEeCer5Fy4wCA1yo3u53uIW6ANFscHuZOg8s-qFy-vJ-WVVedKqffnigGks4WiKuRg0xlsnRWMA0YpWWVyqrobXdudiNmJ4tBqxtr7tcSwA6iSgz0a_c&sig=Cg0ArKJSzM3sqzf1mHYa&fbs_aeid=%5Bgw_fbsaeid%5D&crd=aHR0cHM6Ly96b3JvLmNvbQ&urlfix=1&adurl=http://zoro.com/heating-cooling/c/30/%3Fdclid%3D%25edclid!)

pagead2.googlesyndication.com

# This site can’t be reached

The webpage at **https://pagead2.googlesyndication.com/pagead/s/cookie\_push\_onload.html#aHR0cHM6Ly9jbXMucXVhbnRzZXJ2ZS5jb20vZHBpeGVsP2E9cC1uNXZ2THZSZGpnMGVrJmVpZD0wJnFjX2dvb2dsZV9wdXNoPSZnb29nbGVfcHVzaD1BWGNvT21RS1V1Yjg3dGVodzBDVXY1TjR2LW9CeGdGOHNKWmZOXzJ0clZIcHBobVI5Y0EwcHpvbDBidXY4TUQyemx6c2pmWWpJSHUtVmlzRzg0dXFlN2NuS21lYzNISmlvQWc=, ,aHR0cHM6Ly9weC5hZHMubGlua2VkaW4uY29tL3NldHVpZD9wYXJ0bmVyPWdvb2dsZWFkeGRiJmdvb2dsZV9wdXNoPUFYY29PbVFob0VrVWJyell0ZV9kMUdEdXA1ZzhQa1ZUSmtJcFdlNkJfTWRRb0pGTkk0Z2lGYVBCcnBONS1DOW5oU1hQeHhaakxUYUh4cUJHbkhsbmE1UEpqRFJVbDZQaXBlaU0=,aHR0cHM6Ly94LmJpZHN3aXRjaC5uZXQvc3luYz9zc3A9Z29vZ2xlJmdvb2dsZV9wdXNoPUFYY29PbVR6UFBtVjVjc1ZLTV9EVzdwTVRvTU1iQmJLNUNiUkktRjdXR2oxeTYydkFLeVctdXpKZjhjcGp4NWhRRjJyLU0xUE1zRDVuUkVWZVBxU3o0VWhWVlJZSU85T3VsVQ==,aHR0cHM6Ly9ydGIubWZhZHNydnIuY29tL3N5bmM\_c3NwPWdvb2dsZSZzc3BfaW5pdD1zdGVwMSZnb29nbGVfcHVzaD1BWGNvT21RWVc3alpNQWg2cXJadzVSdENic2E5Mk9mdnRTTGVJNFNLNlpkeENtS2Y5SGlKOG42dTRXSnlQNE1CcVlMdEV3cXBVQUVNOUlPX1E5NFVnZ041NEFRamtJdkJoUEFnREE=,aHR0cHM6Ly9tYXRjaC5zaGFyZXRocm91Z2guY29tL0U0cm9vQXRBL3YxP2dvb2dsZV9wdXNoPUFYY29PbVRQdVdCNmFWWUwtOWszMDJzYzAxX0xwTmxnZ1pZQWd5enFYU1RxQnBud3NHd3k2UXhuZmVqQTBqLXVYT0tHUklRdmQ0bWJTMUQ2Q0JfbVJudlcwYnBjZlFUQzhmdlEzUQ==,aHR0cHM6Ly9iZWFjb24ubHlueC5jb2duaXRpdmxhYnMuY29tL2FkeC5naWY\_Z29vZ2xlX3B1c2g9QVhjb09tUklZMFdoZVdnZF9EZW5lenlKUVBvbE5NUElEc3B2TW5oMVlOc0tvUDNOTlRBTlVfM1BtcGl3SzdiOFF6eXN1ajB1WHdubGFQOEpBdEJzLTA2VVdlQnBmMktWV0xvd3JB,aHR0cHM6Ly9jbS5nLmRvdWJsZWNsaWNrLm5ldC9waXhlbC9hdHRyP2Q9QUhORjEzS2hwQXlrMGJKWktONEMwNHRRMndkQTB4UkJJVlc3Q1FaUm9rMkNhN1NrNnZPZDBYZmtXREdKY2tkZlZOdFB2WkYwRE1kOGtYYXo=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://pagead2.googlesyndication.com/pagead/s/cookie\_push\_onload.html#aHR0cHM6Ly9jbXMucXVhbnRzZXJ2ZS5jb20vZHBpeGVsP2E9cC1uNXZ2THZSZGpnMGVrJmVpZD0wJnFjX2dvb2dsZV9wdXNoPSZnb29nbGVfcHVzaD1BWGNvT21RS1V1Yjg3dGVodzBDVXY1TjR2LW9CeGdGOHNKWmZOXzJ0clZIcHBobVI5Y0EwcHpvbDBidXY4TUQyemx6c2pmWWpJSHUtVmlzRzg0dXFlN2NuS21lYzNISmlvQWc=, ,aHR0cHM6Ly9weC5hZHMubGlua2VkaW4uY29tL3NldHVpZD9wYXJ0bmVyPWdvb2dsZWFkeGRiJmdvb2dsZV9wdXNoPUFYY29PbVFob0VrVWJyell0ZV9kMUdEdXA1ZzhQa1ZUSmtJcFdlNkJfTWRRb0pGTkk0Z2lGYVBCcnBONS1DOW5oU1hQeHhaakxUYUh4cUJHbkhsbmE1UEpqRFJVbDZQaXBlaU0=,aHR0cHM6Ly94LmJpZHN3aXRjaC5uZXQvc3luYz9zc3A9Z29vZ2xlJmdvb2dsZV9wdXNoPUFYY29PbVR6UFBtVjVjc1ZLTV9EVzdwTVRvTU1iQmJLNUNiUkktRjdXR2oxeTYydkFLeVctdXpKZjhjcGp4NWhRRjJyLU0xUE1zRDVuUkVWZVBxU3o0VWhWVlJZSU85T3VsVQ==,aHR0cHM6Ly9ydGIubWZhZHNydnIuY29tL3N5bmM\_c3NwPWdvb2dsZSZzc3BfaW5pdD1zdGVwMSZnb29nbGVfcHVzaD1BWGNvT21RWVc3alpNQWg2cXJadzVSdENic2E5Mk9mdnRTTGVJNFNLNlpkeENtS2Y5SGlKOG42dTRXSnlQNE1CcVlMdEV3cXBVQUVNOUlPX1E5NFVnZ041NEFRamtJdkJoUEFnREE=,aHR0cHM6Ly9tYXRjaC5zaGFyZXRocm91Z2guY29tL0U0cm9vQXRBL3YxP2dvb2dsZV9wdXNoPUFYY29PbVRQdVdCNmFWWUwtOWszMDJzYzAxX0xwTmxnZ1pZQWd5enFYU1RxQnBud3NHd3k2UXhuZmVqQTBqLXVYT0tHUklRdmQ0bWJTMUQ2Q0JfbVJudlcwYnBjZlFUQzhmdlEzUQ==,aHR0cHM6Ly9iZWFjb24ubHlueC5jb2duaXRpdmxhYnMuY29tL2FkeC5naWY\_Z29vZ2xlX3B1c2g9QVhjb09tUklZMFdoZVdnZF9EZW5lenlKUVBvbE5NUElEc3B2TW5oMVlOc0tvUDNOTlRBTlVfM1BtcGl3SzdiOFF6eXN1ajB1WHdubGFQOEpBdEJzLTA2VVdlQnBmMktWV0xvd3JB,aHR0cHM6Ly9jbS5nLmRvdWJsZWNsaWNrLm5ldC9waXhlbC9hdHRyP2Q9QUhORjEzS2hwQXlrMGJKWktONEMwNHRRMndkQTB4UkJJVlc3Q1FaUm9rMkNhN1NrNnZPZDBYZmtXREdKY2tkZlZOdFB2WkYwRE1kOGtYYXo=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaQshDoJDyxEkM477a4z32o6DY3o3UnKexXeQLWuhhyknTjtWM8cFC5rFRoCUyIwroLLHyiHBqfhsttFDU76hqpfEBNSfQ)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-BXejZbadYDtMNlNZskQ0flHcWtt5pZWlUfkG4tbC3Q8muumLZL1h0U2l4WBvLOH5kqGje6IXBGri_wTuopQ04Nhab3GIkNlB9vyWTn8Yovn4sVGgY)

googleads.g.doubleclick.net

# This site can’t be reached

**googleads.g.doubleclick.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**googleads.g.doubleclick.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[![Advertisement](https://s0.2mdn.net/simgad/18288936050731167112)](https://ad.doubleclick.net/pcs/click? &sai=AMfl-YTHUoZ5T5sfBbj3PivSv-P8zydCxK232pmBpKM883Q-Jh5C45oYP584UntUST7dsderTiLjy9IWkiqLX6Z3MT-wUxq0fLwBEZ-UDwgRc0WvMh2r23f4p1AFbUHDasf90mwbgJmWt6pRp-ljAyqBopN8T_mMRsmJw1tHFmBVqEDudepqnSBKOanW83a5BJzTnZrZbUFyTgHdzsCKZzhgGhpPdgb2SvUpf7qO2Jr5Oln3TsY7G1D3TkQ5Dpg70vO3kVPwgBvVQcEgEilSzdTvd7Tps0osX7LzmFI78Dhfg1vxRylLYYu3L6XNAOSbimnYm-B24IClaATE6y63WtQ_jYtSw2c&sig=Cg0ArKJSzMGG7cg8EzVU&fbs_aeid=%5Bgw_fbsaeid%5D&crd=aHR0cHM6Ly96b3JvLmNvbQ&urlfix=1&adurl=http://zoro.com/heating-cooling/c/30/%3Fdclid%3D%25edclid!)

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaTTLv4kdafn62gQh5Xh2hr3mMG4-gmQ7fJgOcbRFUEZmuR8regC2K_co7TE5LV1TeHiA59JFkiaAiKFx5JCCZUAVizOBw)

Prebid User Sync

![](https://idsync.rlcdn.com/420486.gif?partner_uid=5570C49D-9A2D-4DDD-89B6-7C483FC3BBE4)[iframe](cid:frame-8616ECBFE9289F997B7FF3E2700843B7@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=5570C49D-9A2D-4DDD-89B6-7C483FC3BBE4&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=5570C49D-9A2D-4DDD-89B6-7C483FC3BBE4&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=NTU3MEM0OUQtOUEyRC00RERELTg5QjYtN0M0ODNGQzNCQkU0&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=VXDEnZotTd2JtnxIP8O75A%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=5570C49D-9A2D-4DDD-89B6-7C483FC3BBE4&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/5570C49D-9A2D-4DDD-89B6-7C483FC3BBE4?gdpr=0&gdpr_consent=)[iframe](cid:frame-D53323EABA1D54F04B9C2EA782C7E3E1@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)[iframe](cid:frame-AFFB5917C973F2D11422B75EF7A41F4B@mhtml.blink)

cdn.undertone.com

# This site can’t be reached

**cdn.undertone.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**cdn.undertone.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=521181652744809333629&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=521181652744809333629)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/521181652744809333629?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=521181652744809333629&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=521181652744809333629)

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=614d1c10-6a2a-4d05-bd90-969630ac463e)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/cc54f59b-4319-eca5-e7cb-40764ea049fa?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=589393df-d3b5-7eec-d61c-5683b1f784b3&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NzRmYzQwMTUtMWFjMi0yMDQ4LWMzZmMtMGMzYTdiMTU0YWQz)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)[iframe](cid:frame-E85A6493EDA5F497EDE8C321B5C25046@mhtml.blink)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_712c5652-8ab6-4b3a-8d22-9157b969457a&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-3AE39489CFB27EE1BE556482DBCEB223@mhtml.blink)[iframe](cid:frame-8571BBCE2AB7B4BB2E86728F53063693@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)[iframe](cid:frame-3E3C6612C3968615AFC426EF782C2E6C@mhtml.blink)[iframe](cid:frame-6D2A33FE775AF7A883330EFB98DD03B4@mhtml.blink)[iframe](cid:frame-E149BD3390F3ABA744F409674A5C5D15@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_712c5652-8ab6-4b3a-8d22-9157b969457a)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.1589234958127992)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_712c5652-8ab6-4b3a-8d22-9157b969457a&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-94AAEBEF108B6C43D346F933565E7873@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-E46BEFA2BA0914368159F254D8ED05DE@mhtml.blink)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.adsrvr.org

# This site can’t be reached

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-E9CDD90DA4CD842FD04DBE1D56373637@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_712c5652-8ab6-4b3a-8d22-9157b969457a&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_712c5652-8ab6-4b3a-8d22-9157b969457a)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=a8a640fd-2a28-40a9-8019-32cf41ec65d5)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=YThhNjQwZmQtMmEyOC00MGE5LTgwMTktMzJjZjQxZWM2NWQ1)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://cms.quantserve.com/pixel/p-_jQ037pSmtjhN.gif?idmatch=1&gdpr=0&gdpr_consent=)![](https://c1.adform.net/serving/cookie/match?party=1294&gdpr=0&gdpr_consent=)

![](https://aa.agkn.com/adscores/g.pixel?sid=9212308278&puid=5570C49D-9A2D-4DDD-89B6-7C483FC3BBE4)![](https://sync.crwdcntrl.net/qmap?c=240&tp=PUBM&tpid=5570C49D-9A2D-4DDD-89B6-7C483FC3BBE4&gdpr=0&gdpr_consent=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3371&partner_device_id=5570C49D-9A2D-4DDD-89B6-7C483FC3BBE4)![](https://i.liadm.com/s/75145?bidder_id=195755&bidder_uuid=5570C49D-9A2D-4DDD-89B6-7C483FC3BBE4)[iframe](cid:frame-1573A891F308A881E5DBEA97D0B10CDA@mhtml.blink)![](https://pubmatic-match.dotomi.com/match/bounce/current?networkId=17100&version=1&nuid=5570C49D-9A2D-4DDD-89B6-7C483FC3BBE4&gdpr=0&gdpr_consent=)[iframe](cid:frame-1DC6889D8D4D2D922BB9B2361B86E250@mhtml.blink)[iframe](cid:frame-44E3592CFA7485B2A8356346FD1E0FD5@mhtml.blink)![](https://rtb.adentifi.com/CookieSyncPubMatic&gdpr=0&gdpr_consent=)

pixel-sync.sitescout.com

# This site can’t be reached

The webpage at **https://pixel-sync.sitescout.com/dmp/pixelSync?nid=3&gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://pixel-sync.sitescout.com/dmp/pixelSync?nid=3&gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-D062791FF2682B4C94C09973A31C40B5@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIDkVLRm87d)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIDkVLRm87d)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-D5B69051BA514BD42158FB6CA109D23B@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-B715E0C2283C7AE098273E970610FE13@mhtml.blink)

feed.pghub.io

# This site can’t be reached

The webpage at **https://feed.pghub.io/tag?us\_privacy=1YNY&referrer\_url=&page\_url=https%3A%2F%2Fd3-graph-gallery.com%2Fbubble&owner=P%26G&bp\_id=cafemedia&ch=%7B"architecture"%3A""%2C"bitness"%3A""%2C"brands"%3A%5B%5D%2C"fullVersionList"%3A%5B%5D%2C"mobile"%3Afalse%2C"model"%3A""%2C"platform"%3A""%2C"platformVersion"%3A""%7D&initiator=js** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://feed.pghub.io/tag?us\_privacy=1YNY&referrer\_url=&page\_url=https%3A%2F%2Fd3-graph-gallery.com%2Fbubble&owner=P%26G&bp\_id=cafemedia&ch=%7B"architecture"%3A""%2C"bitness"%3A""%2C"brands"%3A%5B%5D%2C"fullVersionList"%3A%5B%5D%2C"mobile"%3Afalse%2C"model"%3A""%2C"platform"%3A""%2C"platformVersion"%3A""%7D&initiator=js** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876H8AoJKYAPJK_AG054gAABmoAAAIB&gdpr_consent=&us_privacy=1YNY&gdpr=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale?us_privacy=1YNY)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876H8AoJKYAPJK-AG054gAA%261642&gpdr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D&us_privacy=1YNY)![](https://s.c.appier.net/index?userId=Z876H8AoJKYAPJK-AG054gAA%261642&gdpr=&us_privacy=1YNY)![](https://c1.adform.net/serving/cookie/match?party=29&us_privacy=1YNY)![](https://ad.turn.com/r/cs?pid=21&us_privacy=1YNY)![](https://dmp.brand-display.com/cm/api/index?cm_dsp_id=191&cm_user_id=%3cIndex_user_id%3e&us_privacy=1YNY)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=Z876H8AoJKYAPJK-AG054gAA%261642)

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D1YNY%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ?us_privacy=1YNY)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D&us_privacy=1YNY)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID&us_privacy=1YNY)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776&us_privacy=1YNY)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=&us_privacy=1YNY)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D&us_privacy=1YNY)

## Interactive Line Charts
Step by step

* * *

Line chart are built thanks to the `d3.line()` helper
function. I strongly advise to have a look to the
[basics of this function](https://www.d3-graph-gallery.com/graph/shape.html#myline)
before trying to build your first chart. First example here is the
[most basic line plot](https://d3-graph-gallery.com/graph/line_basic.html) you can do.
Next one shows how to display
[several groups](https://d3-graph-gallery.com/graph/line_several_group.html), and how to
use [small multiple](https://d3-graph-gallery.com/graph/line_smallmultiple.html) to
avoid the
[spaghetti chart](https://www.data-to-viz.com/caveat/spaghetti.html).


[Most basic\\
\\
* * *\\
\\
The most basic line chart you can do in d3.js. Keeping only\\
the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/line_basic.png)](https://d3-graph-gallery.com/graph/line_basic.html)

[Several groups\\
\\
* * *\\
\\
Learn how to represent several groups on the line plot. This\\
requires to group the data using the d3.nest function.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/line_several_group.png)](https://d3-graph-gallery.com/graph/line_several_group.html)

[Small multiple\\
\\
* * *\\
\\
Learn how to apply the small multiple technique on line\\
plot. It allows to avoid the spaghetti plot where lines\\
become unreadable.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/line_smallmultiple.png)](https://d3-graph-gallery.com/graph/line_smallmultiple.html)

[Confidence interval\\
\\
* * *\\
\\
Display confidence interval around main trend\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/line_confidence_interval.png)](https://d3-graph-gallery.com/graph/line_confidence_interval.html)

[Color gradient\\
\\
* * *\\
\\
How to apply a color gradient on the line that is a unique\\
svg element\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/line_color_gradient_svg.png)](https://d3-graph-gallery.com/graph/line_color_gradient_svg.html)

Interactivity: switch data

* * *

Three examples showing how to switch from one data series to
another with smooth transition. Three situations are described.
1/ series are stored in
[different input file](https://d3-graph-gallery.com/graph/line_change_data.html).
2/ series are stored in the same dataset, each in a
[different columns](https://d3-graph-gallery.com/graph/line_select.html) (wide format).
3/ same dataset, same column: long or tidy format.


[1/ Transition between\\
\\
input data\\
\\
* * *\\
\\
Add a button that allows to go from one dataset to another\\
with a smooth transition. Useful to understand how to build\\
a `update()` function.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/line_change_data.gif)](https://d3-graph-gallery.com/graph/line_change_data.html)

[2/ Transition between\\
\\
column of input\\
\\
* * *\\
\\
Dropdown button controls which columns of the dataset is\\
displayed on the chart.\\
\\
Wide format\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/line_select.gif)](https://d3-graph-gallery.com/graph/line_select.html)

[3/ Transition between\\
\\
value of a column\\
\\
* * *\\
\\
Dropdown button controls which value of a column is\\
displayed on the chart.\\
\\
Long format\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/line_filter.gif)](https://d3-graph-gallery.com/graph/line_filter.html)

Interactivity: other

* * *

Interactivity can also be useful to zoom on a part of the chart or
highlight a specific set of the chart


[Brush for zooming\\
\\
* * *\\
\\
How to use Brush to zoom on a specific part of the line\\
chart.\\
\\
Double click to reinitialize\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/line_brushZoom.gif)](https://d3-graph-gallery.com/graph/line_brushZoom.html)

[Add cursor for exact value\\
\\
* * *\\
\\
Recover the closest X position in the dataset and display\\
its exact value\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/line_cursor.gif)](https://d3-graph-gallery.com/graph/line_cursor.html)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Line150.png)](https://d3-graph-gallery.com/line.html)

Line plot

[![](https://d3-graph-gallery.com/img/section/Area150.png)](https://d3-graph-gallery.com/area.html)

Area

[![](https://d3-graph-gallery.com/img/section/StackedArea150.png)](https://d3-graph-gallery.com/stackedarea.html)

Stacked area

[![](https://d3-graph-gallery.com/img/section/Stream150.png)](https://d3-graph-gallery.com/streamgraph.html)

Streamchart

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

SafeFrame Container

![](https://rtb.ads.us-east.travelaudience.com/el.ashx?__trackerRequestId=0.3665710090566962&adPos=&ai1=1%3B30000848%3B16%3B1%3B%3B%3B0%3B-1%3B%3B%3B%3BhSIlf3eRj4MqalmvabA9Wg%3D%3D%3B60037521%3B999%252c1%3B%3B%3B2%3B4%3B50007721%3B_RU74FKXdO5Kw__7k6Nbcw%3D%3D%3BUSD%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B70026041%3B5PUKUMTPRqhwvHR9h8s9VWuc7F53z0bH_uKgNg%3BEUR%3B2%3B%3B%3B%3B%3B0%3B%3B&aid=&an=&ask=&at=1&bc=1&bd=bidder-rtb-production-5594dc4f74-t8dn7&bnr=0&brq=5PUKUMTPRqhwvHR9h8s9VWuc7F53z0bH_uKgNg&cis=1&di=&did=-1&dnt=&dv=1&ed=&ev=ic&fm=320x50&gcpm=154771&gctr=&ia=0&id5Decr=&id5Encr=&id5PID=&id5Src=&iid=&ilt=&ir=0&ld=&mai=&mat=1&mid=&na=&no=&oo=&pb=90000&pos_old=&rg=2&rts=&salt=06&sc=&site=d3-graph-gallery.com&ssp=0&sv=1&tsf=&ua=&uc=US&ucy=&uuid=E6561E2E-F0D7-4124-9414-039DEFB2A98A&view=&vrt=&vw=&wp=Z876HwALV9UBy5XNABSdOUh-jp2azkO6SjGxSA)[![](https://static.travelaudience.com/img/import/LaPazDMO/Ingle%CC%81s/320x50.gif)](https://rtb.ads.us-east.travelaudience.com/ct? &redirect=https%3A%2F%2Fwww.alaskaair.com%2Fen%2Fflights-to-la-paz%3Futm_source%3DDigital%2BLa%2BPaz%26utm_medium%3DBanner%26utm_campaign%3DLa%2BPaz%2BCo-op)

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaSufLHzHBn_wLoNAscvylN27s7JbGH7wNxNTf1yEYMcvn6AxBS2SfyLd6YCbgR4zC2Jvw_4XpI0CSmoOrQEJ-BbiLgysg)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.16751222009822064)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=2380550337268594185279&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=2380550337268594185279)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/2380550337268594185279?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=2380550337268594185279&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=2380550337268594185279)

![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://match.adsrvr.org/track/cmf/casale)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876H8AoIp4AEGpxAU15yAAA%262585&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876H8AoIp4AEGpxAU15yAAAChkAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://s.c.appier.net/index?userId=Z876H8AoIp4AEGpxAU15yAAA%262585&gdpr=&us_privacy=)![](https://cms.quantserve.com/pixel/p-Z8PuJEk6U7Hyq.gif?idmatch=0)![](https://dsp.360yield.com/dsp_match/275?ssp=10&gdpr=&gdpr_consent=&r=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fcm_dsp_id%3D15%26external_user_id%3D%7BDSP_USER_ID%7D&userId=Z876H8AoIp4AEGpxAU15yAAA%262585&us_privacy=)![](https://dmp.brand-display.com/cm/api/index?cm_dsp_id=191&cm_user_id=%3cIndex_user_id%3e)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876H8AoIp4AEGpxAU15yAAA%262585)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=2380550337268594185279&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=2380550337268594185279)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=2380550337268594185279)

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)[iframe](cid:frame-3A37EF4823A5A416D95CF4AF5B6037BB@mhtml.blink)[iframe](cid:frame-08B6E95E552E1F817302E3B0C2F6EF6A@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

User-Sync

![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)[iframe](cid:frame-A39D1457166BF03C68043F9DEB9FD96C@mhtml.blink)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)

[iframe](cid:frame-A59AF6EFDFB58A3C8EE923C54DE7FD20@mhtml.blink)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_08a1ed72-b2bd-415e-b36b-f1c2b572ed1d)

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

SafeFrame Container

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaQ9xSGCfBgEsSHVmr2hLa0i1cIFJTWXXqJtQKGLY5Tzy3A_uNIC6QBAi6AYgTVhUAB4Diiol7YaZypFQbmk4ceo-uq13w)

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_08a1ed72-b2bd-415e-b36b-f1c2b572ed1d&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-FB31E0C38C557BAB85D8ADD7D6B38473@mhtml.blink)

![](https://aa.agkn.com/adscores/g.pixel?sid=9212308278&puid=9799FFFE-2392-424F-B49B-A21A8873513B)![](https://sync.crwdcntrl.net/qmap?c=240&tp=PUBM&tpid=9799FFFE-2392-424F-B49B-A21A8873513B&gdpr=0&gdpr_consent=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3371&partner_device_id=9799FFFE-2392-424F-B49B-A21A8873513B)![](https://i.liadm.com/s/75145?bidder_id=195755&bidder_uuid=9799FFFE-2392-424F-B49B-A21A8873513B)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/9799FFFE-2392-424F-B49B-A21A8873513B?gdpr=0&gdpr_consent=)[iframe](cid:frame-DCA734BD6C8FB1AE6C4D973CDBE135E4@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)[iframe](cid:frame-0FD081446ABC26D2A94FA985BD4E5361@mhtml.blink)[iframe](cid:frame-A1E750BED3C68C4E437D1BD91A413662@mhtml.blink)![](https://pubmatic-match.dotomi.com/match/bounce/current?networkId=17100&version=1&nuid=9799FFFE-2392-424F-B49B-A21A8873513B&gdpr=0&gdpr_consent=)[iframe](cid:frame-1C3D51434B5ACDF3CEF3C6092C6FEA35@mhtml.blink)[iframe](cid:frame-12B72CC3153430EE9D5999E78CC58DC9@mhtml.blink)![](https://rtb.adentifi.com/CookieSyncPubMatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-EB9A8AE264C5E08F2C8C0B3B86F8B4D4@mhtml.blink)[iframe](cid:frame-4C0DF91DDC3F99FC757F07972C6EB0B4@mhtml.blink)

[iframe](cid:frame-4F72131B98CCF79A3C770EACA0D378A0@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-CBA4A4F3BA296AC6F531E0B123031E06@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_08a1ed72-b2bd-415e-b36b-f1c2b572ed1d&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_08a1ed72-b2bd-415e-b36b-f1c2b572ed1d)

ssum-sec.casalemedia.com

# This site can’t be reached

**ssum-sec.casalemedia.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ssum-sec.casalemedia.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.sharethrough.com

# This site can’t be reached

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=9799FFFE-2392-424F-B49B-A21A8873513B)[iframe](cid:frame-A4DA6D6F3A37597BF3F19425DA28F43A@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=9799FFFE-2392-424F-B49B-A21A8873513B&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=9799FFFE-2392-424F-B49B-A21A8873513B&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=OTc5OUZGRkUtMjM5Mi00MjRGLUI0OUItQTIxQTg4NzM1MTNC&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=l5n__iOSQk-0m6IaiHNROw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=9799FFFE-2392-424F-B49B-A21A8873513B&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-9564B399267818FBB71CADF5A9F528E8@mhtml.blink)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=af030741-9160-cbbf-0c17-f1d4702b6757)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/63121d78-1d66-e20c-fdce-65b6e74f61fe?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=f7d57b3c-8dca-7045-cc19-73431818acb7&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZGJiYWE4ZjYtNDRiZC0yZWUxLWQ5ZjktMjlmYWQyZmE2MmQ3)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-6F3FB83A9981C9D6B266ABE0B756E822@mhtml.blink)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=ac048eb2-b420-49e2-b6fd-cfa17cc24fe5%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)

Topics Frame

gum.criteo.com

# This site can’t be reached

**gum.criteo.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**gum.criteo.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

**ads.pubmatic.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ads.pubmatic.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pm.w55c.net/ping_match.gif?st=TRIPLELIFT&rurl=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D6019%26xuid%3D_wfivefivec_%26dongle%3D465e%26gdpr=0%26gdpr_consent=)![](https://sync.mathtag.com/sync/img?mt_exid=62&redir=%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3690%26xuid%3D%5BMM_UUID%5D%26dongle%3D3995%26gdpr=0%26gdpr_consent=)![](https://sync-tm.everesttech.net/upi/pid/RVF22VSl?redir=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3657%26xuid%3D%24%7BTM_USER_ID%7D%26dongle%3D3c0a%26gdpr=0%26gdpr_consent=)![](https://cms.quantserve.com/pixel/p-VtN-a_yLd-GB-.gif?idmatch=0&gdpr=0&gdpr_consent=)![](https://us.creativecdn.com/cm-notify?pi=triplelift&gdpr=0&gdpr_consent=)![](https://dis.criteo.com/dis/usersync.aspx?r=44&p=75&cp=triplelift&cu=1&gdpr=0&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&url=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D2711%26xuid%3D%40%40CRITEO_USERID%40%40%26dongle%3D013b)![](https://ib.adnxs.com/getuid?https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3335%26xuid%3D%24UID%26dongle%3D4d58%26gdpr=0%26gdpr_consent=)![](https://rtb.adentifi.com/CookieSyncTripleLift?gdpr=0&gdpr_consent=)![](https://ib.adnxs.com/prebid/setuid?bidder=triplelift_native&gdpr=0&gdpr_consent=&uid=2380550337268594185279)![](https://ib.adnxs.com/prebid/setuid?bidder=triplelift&gdpr=0&gdpr_consent=&uid=2380550337268594185279)

![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

u.openx.net

# This site can’t be reached

**u.openx.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**u.openx.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=f88b7ece-c02b-44e7-b7af-10d4c341ceae)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

User-Sync

![](https://pm.w55c.net/ping_match.gif?st=TRIPLELIFT&rurl=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D6019%26xuid%3D_wfivefivec_%26dongle%3D465e%26gdpr=0%26gdpr_consent=)![](https://sync.mathtag.com/sync/img?mt_exid=62&redir=%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3690%26xuid%3D%5BMM_UUID%5D%26dongle%3D3995%26gdpr=0%26gdpr_consent=)![](https://sync-tm.everesttech.net/upi/pid/RVF22VSl?redir=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3657%26xuid%3D%24%7BTM_USER_ID%7D%26dongle%3D3c0a%26gdpr=0%26gdpr_consent=)![](https://cms.quantserve.com/pixel/p-VtN-a_yLd-GB-.gif?idmatch=0&gdpr=0&gdpr_consent=)![](https://us.creativecdn.com/cm-notify?pi=triplelift&gdpr=0&gdpr_consent=)![](https://dis.criteo.com/dis/usersync.aspx?r=44&p=75&cp=triplelift&cu=1&gdpr=0&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&url=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D2711%26xuid%3D%40%40CRITEO_USERID%40%40%26dongle%3D013b)![](https://ib.adnxs.com/getuid?https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3335%26xuid%3D%24UID%26dongle%3D4d58%26gdpr=0%26gdpr_consent=)![](https://rtb.adentifi.com/CookieSyncTripleLift?gdpr=0&gdpr_consent=)![](https://ib.adnxs.com/prebid/setuid?bidder=triplelift_native&gdpr=0&gdpr_consent=&uid=2380550337268594185279)![](https://ib.adnxs.com/prebid/setuid?bidder=triplelift&gdpr=0&gdpr_consent=&uid=2380550337268594185279)

## Ridgeline Chart Guide
Step by step

* * *

In term of code, a ridgeline chart is simply a set of many
[density plots](https://d3-graph-gallery.com/density.html). Thus, starting by learning
the [basics of density chart](https://d3-graph-gallery.com/density.html) is probably a
good idea.


[Most basic\\
\\
* * *\\
\\
The most basic ridgeline chart you can do in d3.js. Keeping\\
only the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/ridgeline_basic.png)](https://d3-graph-gallery.com/graph/ridgeline_basic.html)

[Template\\
\\
* * *\\
\\
A ready to go ridgeline plot in d3.js. Just load your data\\
and get a clean chart..\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/ridgeline_template.png)](https://d3-graph-gallery.com/graph/ridgeline_template.html)

[Animation at start\\
\\
* * *\\
\\
Just a basic demo on how to animate the chart at loading\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/ridgeline_animation.gif)](https://d3-graph-gallery.com/graph/ridgeline_animation.html)

Selection of blocks

* * *

A selection of examples showing the application of the basic concept
to real life dataset.


[Pick time of day for sports\\
\\
* * *\\
\\
A good looking ridgeline plot by Andrew Mollica showing the\\
umber of participants for a few sports throughout the day.\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_ridgeline.png)](https://bl.ocks.org/armollica/3b5f83836c1de5cca7b1d35409a013e3)

[Ridge line or Joy plot\\
\\
* * *\\
\\
An implementation by Mike Bostock. \\
\\
Use d3.v5. It\\
is an observable notebooks -> even better.\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_ridgelineMBostock.png)](https://beta.observablehq.com/@mbostock/d3-ridgeline-plot)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Violin150.png)](https://d3-graph-gallery.com/violin.html)

Violin

[![](https://d3-graph-gallery.com/img/section/Density150.png)](https://d3-graph-gallery.com/density.html)

Density

[![](https://d3-graph-gallery.com/img/section/Histogram150.png)](https://d3-graph-gallery.com/histogram.html)

Histogram

[![](https://d3-graph-gallery.com/img/section/Box1150.png)](https://d3-graph-gallery.com/boxplot.html)

Boxplot

[![](https://d3-graph-gallery.com/img/section/Joyplot150.png)](https://d3-graph-gallery.com/ridgeline.html)

Ridgeline

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-BW11Qbql2CnSSz0sgOI18Q7KTa-GYlIr1yar6QmRCuPtDx9hBTjm0uBFFXS2m8G3JfkRi5ad7kQN8wpGWjpllP8fWsg773Ux_IeZDKIqFuZtnb3iA)

![](https://cm.g.doubleclick.net/pixel?google_nid=casale_media2_dsp_secure&google_cm&google_dbm)![](https://dsum-sec.casalemedia.com/rrum?ixi=0&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dsp_secure%26google_cm%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_cm&google_dbm)![](https://ib.adnxs.com/getuid?https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_hm=${BASE64_UID_ENC})

[iframe](cid:frame-50B6D41B77297D1ADE0D17D224508F30@mhtml.blink)

![](https://ad.doubleclick.net/ddm/activity/attribution_src_register; )

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaTsOZIxzYmVWPNZoKBwYAXpLqwE07QQ9wkM_ZQ2kHchsUOFI-CKm447EMd_7edwtX2MHK1Sgcwhao4u7EyC8klzpkqY2w)

[iframe](cid:frame-7F86CE349CA4458B8E8363944233F47A@mhtml.blink)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-B_xXCXSBE_jOFAi6mp0s2nQb1SU7miHYCOJIGNATaUVUO98a7g1dZ2PlpdLZ2nqznlvPgOFJvgFtEk9X3-wTCIJcSLJiYbloTDSpKmT6ULGVk_u-Y)

![](https://cm.g.doubleclick.net/pixel?google_nid=casale_media2_dsp_secure&google_cm&google_dbm)![](https://dsum-sec.casalemedia.com/rrum?ixi=0&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dsp_secure%26google_cm%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_cm&google_dbm)![](https://ib.adnxs.com/getuid?https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_hm=${BASE64_UID_ENC})

[iframe](cid:frame-2DE0EEFC833BA15B8FD4A66CC693A5F4@mhtml.blink)

![](https://ad.doubleclick.net/ddm/activity/attribution_src_register; )

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaTtcXIXn4-jwb1G5gIr-DUYvR8Eatfg9s4y1StYq7gdLwaCHTSrKMXxIdBvVu-Bc5eNSyMv3fK37P2vHIiwfYQpEeH2hA)

[iframe](cid:frame-0B05DA80E2005353295CA580C89F54AF@mhtml.blink)[iframe](cid:frame-DC49EA21F62FB6357260FBB966D3B458@mhtml.blink)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.8277413912083693)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=4415630967375770403432&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=4415630967375770403432)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/4415630967375770403432?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=4415630967375770403432&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=4415630967375770403432)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=4415630967375770403432&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=4415630967375770403432)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=4415630967375770403432)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

SafeFrame Container

![](https://rtb.ads.us-east.travelaudience.com/el.ashx?__trackerRequestId=0.07341194740786199&adPos=&ai1=1%3B30000848%3B16%3B1%3B%3B%3B0%3B-1%3B%3B%3B%3BhSIlf3eRj4MqalmvabA9Wg%3D%3D%3B60037521%3B999%252c1%3B%3B%3B2%3B4%3B50007721%3B_RU74FKXdO5Kw__7k6Nbcw%3D%3D%3BUSD%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B70026041%3BA0bT6Lolb6SGw83h2jw0bK_hRoNToCvDlp9veQ%3BEUR%3B2%3B%3B%3B%3B%3B0%3B%3B&aid=&an=&ask=&at=1&bc=1&bd=bidder-rtb-production-5594dc4f74-5jfd4&bnr=0&brq=A0bT6Lolb6SGw83h2jw0bK_hRoNToCvDlp9veQ&cis=1&di=&did=-1&dnt=&dv=1&ed=&ev=ic&fm=320x50&gcpm=197306&gctr=&ia=0&id5Decr=&id5Encr=&id5PID=&id5Src=&iid=&ilt=&ir=0&ld=&mai=&mat=1&mid=&na=&no=&oo=&pb=90000&pos_old=&rg=2&rts=&salt=06&sc=&site=d3-graph-gallery.com&ssp=0&sv=2&tsf=&ua=&uc=US&ucy=&uuid=36604AB0-9395-415A-90CD-4CF2FA9F6D54&view=&vrt=&vw=&wp=Z876HwAEoasE0b36AAIDDgj9awPIcooPpLpX1g)[![](https://static.travelaudience.com/img/import/LaPazDMO/Ingle%CC%81s/320x50.gif)](https://rtb.ads.us-east.travelaudience.com/ct? &redirect=https%3A%2F%2Fwww.alaskaair.com%2Fen%2Fflights-to-la-paz%3Futm_source%3DDigital%2BLa%2BPaz%26utm_medium%3DBanner%26utm_campaign%3DLa%2BPaz%2BCo-op)

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaSNYAcK6GUjhwaAFDNVyuvMWznLon-fMxorCkRXiqFsyNULPl7JzQ3rTd2kS1Ebk5_0suhGnRf0_KC8yR1v3zfs2jyzkg)

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_ec80d9a9-08ac-4e5c-aaf2-fc7f0dc32a43&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-A197DECC76BF85C093BFC96EA5C81AC3@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

**cm.g.doubleclick.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**cm.g.doubleclick.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://aa.agkn.com/adscores/g.pixel?sid=9212308278&puid=041AEB71-F1E8-4FE7-AD64-932A87FFD969)![](https://sync.crwdcntrl.net/qmap?c=240&tp=PUBM&tpid=041AEB71-F1E8-4FE7-AD64-932A87FFD969&gdpr=0&gdpr_consent=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3371&partner_device_id=041AEB71-F1E8-4FE7-AD64-932A87FFD969)![](https://i.liadm.com/s/75145?bidder_id=195755&bidder_uuid=041AEB71-F1E8-4FE7-AD64-932A87FFD969)[iframe](cid:frame-7C284939777517555084E1CAF890CBC6@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)[iframe](cid:frame-FE7D6C1DABACE68D2E08D652B2F22AD4@mhtml.blink)[iframe](cid:frame-6A317C58CF085098BFEF4EBC393680F9@mhtml.blink)![](https://pubmatic-match.dotomi.com/match/bounce/current?networkId=17100&version=1&nuid=041AEB71-F1E8-4FE7-AD64-932A87FFD969&gdpr=0&gdpr_consent=)[iframe](cid:frame-7E92274137AFEFD0558B2FB994945D06@mhtml.blink)[iframe](cid:frame-E062240B0ACD959C95670ED26D0C5197@mhtml.blink)![](https://rtb.adentifi.com/CookieSyncPubMatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-CFB4D77C123F717766A089FEB2F46BD0@mhtml.blink)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=3&gdpr=0&gdpr_consent=)[iframe](cid:frame-7A3EDB42E2797613448C12979BA0FBF6@mhtml.blink)

[iframe](cid:frame-B7700B02AC9F9993D571EF4C2D5B6A08@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-C1D76B0BD25817C7012487D727B5052A@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_ec80d9a9-08ac-4e5c-aaf2-fc7f0dc32a43&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_ec80d9a9-08ac-4e5c-aaf2-fc7f0dc32a43)

![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876HsAoImAAKkzeAPFF8QAAB_8AAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876HsAoImAAKkzeAPFF8QAAB_8AAAIB&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876HsAoImAAKkzeAPFF8QAA%262047&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://ssbsync.smartadserver.com/api/sync?callerId=82&gdpr=$%7bGDPR%7d&gdpr_consent=$%7bGDPR_CONSENT%7d)![](https://rtb.adentifi.com/CookieIndex)![](https://beacon.lynx.cognitivlabs.com/ix.gif)![](https://sync.srv.stackadapt.com/sync?nid=68)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876HsAoImAAKkzeAPFF8QAAB_8AAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=6ab21a88-eddd-478d-9c5c-d98c6686bd0d)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=NmFiMjFhODgtZWRkZC00NzhkLTljNWMtZDk4YzY2ODZiZDBk)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://s.ad.smaato.net/c/?adExInit=s&redir=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DxTFJbLbs37tyhbKsPP9VC2cm%26source_user_id%3D%24UID)![](https://match.prod.bidr.io/cookie-sync/shr?gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=041AEB71-F1E8-4FE7-AD64-932A87FFD969)[iframe](cid:frame-6BE41F8B3930A6BEF4E8D33DEE90C002@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=041AEB71-F1E8-4FE7-AD64-932A87FFD969&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=041AEB71-F1E8-4FE7-AD64-932A87FFD969&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=BBrrcfHoT-etZJMqh__ZaQ%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=041AEB71-F1E8-4FE7-AD64-932A87FFD969&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/041AEB71-F1E8-4FE7-AD64-932A87FFD969?gdpr=0&gdpr_consent=)[iframe](cid:frame-705403B782BC0F2E19DE0EF1E65A8DE0@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHI2KHAswVmH)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHI2KHAswVmH)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHI2KHAswVmH)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

**u.openx.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**u.openx.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

**ib.adnxs.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ib.adnxs.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-9ABBEE12BC6AB98E67FAF6376FDB7BA3@mhtml.blink)

Topics Frame

User-Sync

## Dendrograms with D3.js
A note on input data format

* * *

Building dendrogram with `d3.js` requires to have an input
at the `Json` format, like
[here](https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_dendrogram.json). The
[d3r package](https://github.com/timelyportfolio/d3r) makes
it a breeze to get this format from a `R` data frame.


``` js
# This is R code

# create a simple hierarchy
data <- data.frame(
  level1="CEO",
  level2=c( rep("boss1",4), rep("boss2",4)),
  level3=paste0("mister_", letters[1:8])
)

# transform it to json format
library(d3r)
data_json <- d3_nest(data)

# Save in a json file
write(data_json, "data_ready.json")

```

You're now ready to use the file called
`data_ready.json` in your d3.js chart


Step by step

* * *

Building a dendrogram with d3.js always follows the same steps.
First, a cluster layout must be defined with
`d3.cluster()`. Second, data is provided to this
layout thanks to `d3.hierarchy()`. We now have an object
with nodes coordinates. Lastly, we can use it to add nodes
with `append('circle')` and links with
`append('path')`.


[Most basic dendrogram\\
\\
* * *\\
\\
Most basic dendrogram. Built from a Json file.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/dendrogram_basic.png)](https://d3-graph-gallery.com/graph/dendrogram_basic.html)

[Basic radial dendrogram\\
\\
* * *\\
\\
Very basic as well, but uses a radial layout instead of\\
the linear\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/dendrogram_radial_basic.png)](https://d3-graph-gallery.com/graph/dendrogram_radial_basic.html)

Selection of blocks

* * *

A few blocks with more complicated codes to showcase what's possible
to do with hierarchical edge bundling.


[Transition tree / dendrogram\\
\\
* * *\\
\\
A block illustrating the difference between tree and\\
dendrogram, with smooth transition between both.\\
\\
\\
![Hierarchical edge bundling](https://d3-graph-gallery.com/img/block/block_dendrogramTransition.png)](https://bl.ocks.org/mbostock/e9ba78a2c1070980d1b530800ce7fa2b)

[Dendrogram and barplot\\
\\
* * *\\
\\
A block showing how to add a barplot next to dendrogram\\
leaves.\\
\\
\\
![Dendrogram and barplot](https://d3-graph-gallery.com/img/block/block_dendrogramBarplot.png)](https://bl.ocks.org/lorenzopub/dfd90f8a3a8c76de939f857de24e7d89)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Chord150.png)](https://d3-graph-gallery.com/chord.html)

Chord diagram

[![](https://d3-graph-gallery.com/img/section/Network150.png)](https://d3-graph-gallery.com/network.html)

Network

[![](https://d3-graph-gallery.com/img/section/Sankey150.png)](https://d3-graph-gallery.com/sankey.html)

Sankey

[![](https://d3-graph-gallery.com/img/section/Arc150.png)](https://d3-graph-gallery.com/arc.html)

Arc diagram

[![](https://d3-graph-gallery.com/img/section/Bundle150.png)](https://d3-graph-gallery.com/bundle.html)

Edge bundling

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

[iframe](https://cb56a763ae5b887faec20cadef7248ca.safeframe.googlesyndication.com/safeframe/1-0-41/html/container.html)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.9826488858775497)[iframe](https://ads.adthrive.com/builds/prebid/load-cookie.html?endpoint=https://prebid.production.adthrive.com/cookie_sync&max_sync_count=15&coop_sync=true&bidders=undertone,gumgum,appnexus,adf,colossus,ix,kargo,openx,pubmatic,rubicon,triplelift,triplelift_native,33across,conversant,epsilon,unruly,yieldmo,resetDigital,grid,yahoossp,improvedigital,aidem,criteo&args=account:1234)[iframe](about:blank)[iframe](https://ads.adthrive.com/builds/core/e5cd633/html/i.html)[iframe](https://ads.adthrive.com/builds/core/e5cd633/html/rnf.html)[iframe](https://gpsb-reims.criteo.com/paapi/join_ig?advertiser_id=500002_500329&ig_name=r6NnpiEx)![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

[iframe](https://cb56a763ae5b887faec20cadef7248ca.safeframe.googlesyndication.com/safeframe/1-0-41/html/container.html)

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

[iframe](https://ads.optable.co/ca/paapi/v1/dsp/ig/join?origin=da215d57-dd2c-41a8-b7e0-0f68f321aa3d&vid=v%3A7hGHIQ0lsCjAunrQdxyPmZ)

[iframe](https://s.amazon-adsystem.com/iu3?cm3ppd=1&d=dtb-pub&csif=t&dl=gg_n-index_n-sharethrough_pm-db5_ym_rbd_ox-db5_an-db5_n-opera3pb_3lift)[iframe](https://feed.pghub.io/tag?us_privacy=1YNY&referrer_url=&page_url=https%3A%2F%2Fd3-graph-gallery.com%2Fdendrogram&owner=P%26G&bp_id=cafemedia&ch=%7B%22architecture%22%3A%22%22%2C%22bitness%22%3A%22%22%2C%22brands%22%3A%5B%5D%2C%22fullVersionList%22%3A%5B%5D%2C%22mobile%22%3Afalse%2C%22model%22%3A%22%22%2C%22platform%22%3A%22%22%2C%22platformVersion%22%3A%22%22%7D&initiator=js)[iframe](https://securepubads.g.doubleclick.net/static/topics/topics_frame.html)[iframe](https://ssp-sync.criteo.com/user-sync/iframe?gdprapplies=&gdpr=&ccpa=1YNY&gpp=&gpp_sid=&redir=https%3A%2F%2Fpbs-raptive-us.ay.delivery%2Fsetuid%3Fbidder%3Dcriteo%26gdpr%3D%26gdpr_consent%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24%7BCRITEO_USER_ID%7D&profile=230)[iframe](https://u.openx.net/w/1.0/cm?id=891039ac-a916-42bb-a651-4be9e3b201da&ph=a3aece0c-9e80-4316-8deb-faf804779bd1&gdpr=&gdpr_consent=&r=https%3A%2F%2Fpbs-raptive-us.ay.delivery%2Fsetuid%3Fbidder%3Dopenx%26gdpr%3D%26gdpr_consent%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%7BOPENX_ID%7D)[iframe](https://eb2.3lift.com/sync?gdpr=&cmp_cs=&us_privacy=1YNY&gpp=&gpp_sid=&redir=https%3A%2F%2Fpbs-raptive-us.ay.delivery%2Fsetuid%3Fbidder%3Dtriplelift%26gdpr%3D%26gdpr_consent%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UID)[iframe](https://cdn.undertone.com/js/usersync.html?gdpr=&gdpr_consent=&us_privacy=1YNY&redirect=https%3A%2F%2Fpbs-raptive-us.ay.delivery%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UID)[iframe](https://ssc-cms.33across.com/ps/?m=xch&rt=html&gdpr=&gdpr_consent=&us_privacy=1YNY&ru=https%3A%2F%2Fpbs-raptive-us.ay.delivery%2Fsetuid%3Fbidder%3D33across%26gdpr%3D%26gdpr_consent%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D33XUSERID33X&id=zzz000000000002zzz)

## Spider Chart Resources
Step by step

* * *

_Coming soon..._

Existing Functions

* * *

Spider charts can be tedious to implement in d3 due to the high number
of elements composing them. Fortunately, open source functions are
available on the web, making it easier and faster to build spider
chart. Below are 2 examples using a function first coded by Alvaro
Graves then revisited by Nadieh Bremer.


[Initial radar chart function\\
\\
* * *\\
\\
Alvaro Graves was the first building a function for radar\\
chart.\\
\\
Click to visit the github repo and find a\\
few examples.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/block_spider_alangrafu.png)](https://github.com/alangrafu/radar-chart-d3)

[Radar Chart Redesign\\
\\
* * *\\
\\
Nadieh Bremer revisited the previous chart with a more\\
straightforward code and a different look.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/block_spider_bremer.png)](http://bl.ocks.org/nbremer/21746a9668ffdf6d8242)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Bar150.png)](https://d3-graph-gallery.com/barplot.html)

Barplot

[![](https://d3-graph-gallery.com/img/section/Spider150.png)](https://d3-graph-gallery.com/spider.html)

Spider / Radar

[![](https://d3-graph-gallery.com/img/section/Wordcloud150.png)](https://d3-graph-gallery.com/wordcloud.html)

Wordcloud

[![](https://d3-graph-gallery.com/img/section/Parallel1150.png)](https://d3-graph-gallery.com/parallel.html)

Parallel

[![](https://d3-graph-gallery.com/img/section/Lollipop150.png)](https://d3-graph-gallery.com/lollipop.html)

Lollipop

[![](https://d3-graph-gallery.com/img/section/CircularBarplot150.png)](https://d3-graph-gallery.com/circular_barplot.html)

Circular Barplot

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.9846766892823997)

Prebid User Sync

User-Sync

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-BtNQi_OTbRpFRvrusQ7vhyXgySxnwZP9irq-178hgPRjprkK2hYC-F_9gOrDJHHD-RJQWSJGCcXdDo6rO0FUUWUbVYgwyHMrvCOCWjnt1yhiMggDA)

![](https://cm.g.doubleclick.net/pixel?google_nid=casale_media2_dsp_secure&google_cm&google_dbm)![](https://dsum-sec.casalemedia.com/rrum?ixi=0&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dsp_secure%26google_cm%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_cm&google_dbm)![](https://ib.adnxs.com/getuid?https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_hm=${BASE64_UID_ENC})

![](https://s0.2mdn.net/dynamic/2/11200426/dyle7zu5kwqf5.cloudfront.net/e1e6aecf-1af0-4af9-9f72-5394f134c9b8/baseimage.png_1727464554239_baseimage.png)

![](https://s0.2mdn.net/dynamic/2/11200426/app.smartly.io/warren/images/637844fa-7164-422b-9624-be8aa6ebbd7e/blob-C025541_ENG_MULTI_MLT_EVG_SUP_ANB_728X90_DCO_EVERGREEN_KA1_1727464554239_blob.jpeg)

![](https://s0.2mdn.net/dynamic/2/11200426/app.smartly.io/warren/images/6b003948-ad4b-4ee8-b094-393d768d5f9f/blob-C025541_ENG_MULTI_MLT_EVG_SUP_ANB_728X90_DCO_EVERGREEN_KA2_1727464554239_blob.jpeg)

![](https://s0.2mdn.net/dynamic/2/11200426/app.smartly.io/warren/images/30a0c1e3-4641-4fca-b383-794965c92c13/blob-C025541_ENG_MULTI_MLT_EVG_SUP_ANB_728X90_DCO_EVERGREEN_KA3_1727464554239_blob.jpeg)

![](https://s0.2mdn.net/dynamic/2/11200426/dyle7zu5kwqf5.cloudfront.net/e1e6aecf-1af0-4af9-9f72-5394f134c9b8/baseimage2.png_1727464554239_baseimage2.png)

NOW STREAMING

![](https://s0.2mdn.net/sadbundle/6597256511888304002/728x90-HBOmax-728x90/logo.svg)

SIGN UP NOW

PLANS START AT $999/MONTH

![](https://s0.2mdn.net/dynamic/2/11200426/dyle7zu5kwqf5.cloudfront.net/e1e6aecf-1af0-4af9-9f72-5394f134c9b8/fullImage.png_1727464554239_fullImage.png)

![](https://s0.2mdn.net/dynamic/2/11200426/dyle7zu5kwqf5.cloudfront.net/e1e6aecf-1af0-4af9-9f72-5394f134c9b8/baseimage.png_1727464554239_baseimage.png)

![](https://s0.2mdn.net/dynamic/2/11200426/dyle7zu5kwqf5.cloudfront.net/e1e6aecf-1af0-4af9-9f72-5394f134c9b8/baseimage.png_1727464554239_baseimage.png)

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaSCGB16FmvC1YBzchyYYHQplHGeqb0S0-ZtCKV-m-MtReOLISgroZxr6rWFTDGnjRMMKHDxdnDzrKyWCAxGrOmxeftbCQ)

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_bc59e4cd-f88f-48de-bd7a-9a98c32f31ca&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9iYzU5ZTRjZC1mODhmLTQ4ZGUtYmQ3YS05YTk4YzMyZjMxY2E=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9iYzU5ZTRjZC1mODhmLTQ4ZGUtYmQ3YS05YTk4YzMyZjMxY2E=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-F1447700E0583890DC27008CEBA10A5C@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-CA0E1E7F75C23219F78CD3AC768BE05A@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_bc59e4cd-f88f-48de-bd7a-9a98c32f31ca&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_bc59e4cd-f88f-48de-bd7a-9a98c32f31ca)

![](https://match.adsrvr.org/track/cmf/casale)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876H9HM4UQAKAFZAIaBfwAACVIAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876H9HM4UQAKAFZAIaBfwAACVIAAAAB&gpp=&gpp_sid=)![](https://csync.loopme.me/?pubid=11466&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D24%26external_user_id%3D%7Bviewer_token%7D&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://s.company-target.com/s/ix?cm_dsp_id=18&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://beacon.lynx.cognitivlabs.com/ix.gif)![](https://creativecdn.com/cm-notify?pi=index&gpdr=&gdpr_consent=&us_privacy=&user_id=Z876H9HM4UQAKAFZAIaBfwAA%262386)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876H9HM4UQAKAFZAIaBfwAACVIAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=2cb42dc9-fbe8-4210-a518-96cea887e4d9)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=MmNiNDJkYzktZmJlOC00MjEwLWE1MTgtOTZjZWE4ODdlNGQ5)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ssbsync.smartadserver.com/api/sync?callerId=47&gdpr=0&gdpr_consent=)![](https://ssbsync.smartadserver.com/api/sync?callerId=47&gdpr=0&gdpr_consent=)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIKOlt3U2p1)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIKOlt3U2p1)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=e34279ea-0399-c9fd-2af0-e4214892fdfe)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/2f5363d3-8f9f-e04e-db29-7043dff6fb57?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=bb940597-1f33-7207-eafe-66b620a1361e&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=OTdmYmQ2NWQtZDY0NC0yY2EzLWZmMWUtM2MwZmVhNDNmODdl)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/bounce?%2Fgetuid%3Fhttps%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fid%3D%24UID%26ex%3Dappnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/bounce?%2Fgetuid%3Fhttps%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fid%3D%24UID%26ex%3Dappnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?ld=1&gdpr=0&cmp\_cs=&us\_privacy=&redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?ld=1&gdpr=0&cmp\_cs=&us\_privacy=&redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=a6c0777c-d1f9-4a8f-8a4c-8c36c4008ca1%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)

Topics Frame

## Donut Chart Examples
Note

* * *

It is of interest to note that donut chart and
[pie chart](https://d3-graph-gallery.com/pie.html) are built using exactly the same
process in d3.js. Thus, you probably want to visit the
[pie section](https://d3-graph-gallery.com/pie.html) for more examples


[Pie chart section](https://d3-graph-gallery.com/pie.html)

Step by step

* * *

[Most basic\\
\\
* * *\\
\\
The most basic donut chart you can do in d3.js. Keeping only\\
the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/donut_basic.png)](https://d3-graph-gallery.com/graph/donut_basic.html)

[Add annotation\\
\\
* * *\\
\\
Add annotation outside the chart using polylines\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/donut_label.png)](https://d3-graph-gallery.com/graph/donut_label.html)

Selection of blocks

* * *

A selection of examples showing the application of the basic concept
to real life dataset.


[Pie chart with annotation\\
\\
* * *\\
\\
A pie chart by Mike Bostock with fancy annotation for each\\
group.\\
\\
\\
![network graph les miserables](https://d3-graph-gallery.com/img/block/block_pieChart.png)](https://beta.observablehq.com/@mbostock/d3-pie-chart)

[Clean layout\\
\\
* * *\\
\\
Clean labeling of groups. Use d3 v3 though.\\
\\
\\
![network graph les miserables](https://d3-graph-gallery.com/img/block/block_pieChartAnimation.png)](http://bl.ocks.org/dbuezas/9306799)

[Pie chart with animation\\
\\
* * *\\
\\
Good illustration on how to animate transition between 2\\
input data.\\
\\
\\
![network graph les miserables](https://d3-graph-gallery.com/img/block/block_pieChartAnim.png)](https://bl.ocks.org/tezzutezzu/c2653d42ffb4ecc01ffe2d6c97b2ee5e)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Tree150.png)](https://d3-graph-gallery.com/treemap.html)

Treemap

[![](https://d3-graph-gallery.com/img/section/Doughnut150.png)](https://d3-graph-gallery.com/donut.html)

Doughnut

[![](https://d3-graph-gallery.com/img/section/Pie150.png)](https://d3-graph-gallery.com/pie.html)

Pie chart

[![](https://d3-graph-gallery.com/img/section/Dendrogram150.png)](https://d3-graph-gallery.com/dendrogram.html)

Dendrogram

[![](https://d3-graph-gallery.com/img/section/CircularPacking150.png)](https://d3-graph-gallery.com/circularpacking.html)

Circular packing

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.6381897888070711)

Prebid User Sync

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=605fc124-5c46-4e18-8a6a-3e6b3361adf5)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/cd4628af-7575-efb8-d031-e88b4d6da231?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=59814eeb-e5d9-7df1-e1e6-fe7eb23a6f78&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NzVlZTlkMjEtMmNhZS0yMzU1LWY0MDYtYTRjNzc4ZDhhMTE4)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=3907119263889549174789&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=3907119263889549174789)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/3907119263889549174789?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=3907119263889549174789&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3907119263889549174789)

![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876INHM5W8ABxtRAQtM8wAAFqkAAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://secure.adnxs.com/getuid?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=46&external_user_id=$UID)![](https://cms.quantserve.com/pixel/p-Z8PuJEk6U7Hyq.gif?idmatch=0)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876INHM5W8ABxtRAQtM8wAAFqkAAAIB&gpp=&gpp_sid=)![](https://sync.mathtag.com/sync/img?mt_exid=15&redir=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fcm_dsp_id%3D3%26external_user_id%3D%5BMM_UUID%5D&us_privacy=&gdpr=&gdpr_consent=)![](https://csync.loopme.me/?pubid=11466&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D24%26external_user_id%3D%7Bviewer_token%7D&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://t.adx.opera.com/pub/sync?pubid=pub10256699365696&userId=Z876INHM5W8ABxtRAQtM8wAA%265801&gdpr=&us_privacy=)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876INHM5W8ABxtRAQtM8wAA%265801)

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_b6b2840c-b12d-41b2-bd50-3cc76115aefa&gdpr=&gdpr_consent=&us_privacy=)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)[iframe](cid:frame-49AA0E74423830C5544251BD288EE138@mhtml.blink)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)

[iframe](cid:frame-B769130BC9E3BC4C5A226E86D4FBBEEE@mhtml.blink)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_b6b2840c-b12d-41b2-bd50-3cc76115aefa)

![](https://pm.w55c.net/ping_match.gif?st=TRIPLELIFT&rurl=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D6019%26xuid%3D_wfivefivec_%26dongle%3D465e%26gdpr=0%26gdpr_consent=)![](https://sync.mathtag.com/sync/img?mt_exid=62&redir=%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3690%26xuid%3D%5BMM_UUID%5D%26dongle%3D3995%26gdpr=0%26gdpr_consent=)![](https://sync-tm.everesttech.net/upi/pid/RVF22VSl?redir=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3657%26xuid%3D%24%7BTM_USER_ID%7D%26dongle%3D3c0a%26gdpr=0%26gdpr_consent=)![](https://cms.quantserve.com/pixel/p-VtN-a_yLd-GB-.gif?idmatch=0&gdpr=0&gdpr_consent=)![](https://us.creativecdn.com/cm-notify?pi=triplelift&gdpr=0&gdpr_consent=)![](https://dis.criteo.com/dis/usersync.aspx?r=44&p=75&cp=triplelift&cu=1&gdpr=0&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&url=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D2711%26xuid%3D%40%40CRITEO_USERID%40%40%26dongle%3D013b)![](https://ib.adnxs.com/getuid?https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3335%26xuid%3D%24UID%26dongle%3D4d58%26gdpr=0%26gdpr_consent=)![](https://rtb.adentifi.com/CookieSyncTripleLift?gdpr=0&gdpr_consent=)![](https://ib.adnxs.com/prebid/setuid?bidder=triplelift_native&gdpr=0&gdpr_consent=&uid=3907119263889549174789)![](https://ib.adnxs.com/prebid/setuid?bidder=triplelift&gdpr=0&gdpr_consent=&uid=3907119263889549174789)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3907119263889549174789)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

ads.optable.co

# This site can’t be reached

**ads.optable.co** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ads.optable.co** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_b6b2840c-b12d-41b2-bd50-3cc76115aefa&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-3ED5E00BD62297A4EFCB43010E60B37C@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-07C198F7B7A208192993B7570B157A8D@mhtml.blink)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.adsrvr.org

# This site can’t be reached

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-336659645EE28EE1E017C5FDE9BB660E@mhtml.blink)[iframe](cid:frame-922A00F91F9D58CBA7A40992AA320FFE@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_b6b2840c-b12d-41b2-bd50-3cc76115aefa&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_b6b2840c-b12d-41b2-bd50-3cc76115aefa)

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876INHM5W8ABxtRAQtM8wAAFqkAAAIB&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876INHM5W8ABxtRAQtM8wAA%265801&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)

dsum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://dsum-sec.casalemedia.com/crum?cm\_dsp\_id=40&external\_user\_id=65e2ff7d-48e7-4a24-9534-0c01176d9699&expiration=1749566497** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://dsum-sec.casalemedia.com/crum?cm\_dsp\_id=40&external\_user\_id=65e2ff7d-48e7-4a24-9534-0c01176d9699&expiration=1749566497** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://www.temu.com/api/adx/cm/pixel-index?id=Z876INHM5W8ABxtRAQtM8wAAFqkAAAIB)![](https://bttrack.com/pixel/cookiesync?source=67e94f23-25d6-4008-8236-375d1743c2e0&secure=1)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876INHM5W8ABxtRAQtM8wAAFqkAAAIB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876INHM5W8ABxtRAQtM8wAAFqkAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=221e2610-9761-46a2-ac66-7b8310a61a23)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=MjIxZTI2MTAtOTc2MS00NmEyLWFjNjYtN2I4MzEwYTYxYTIz)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://cs.admanmedia.com/c01d0246d79eba64b8a7cca07e5b7dc7.gif?puid=221e2610-9761-46a2-ac66-7b8310a61a23&gdpr=0&gdpr_consent=&redir=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DqUVJTHutDLcyGRS8xfsW2M4g%26source_user_id%3D%5BUID%5D%26gdpr%3D0%26gdpr_consent%3D)![](https://sync.srv.stackadapt.com/sync?nid=15&gdpr=0&gdpr_consent=)

ads.pubmatic.com

# This site can’t be reached

**ads.pubmatic.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ads.pubmatic.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=01573296-f973-c60b-21e8-7ce9da09a498)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=5fff3d17-bede-4076-ab07-66a881b6ae74)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)

[iframe](cid:frame-5E20C4B0CDA89BD110B363637A995142@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-3F6962ECFB0A4AFE7C8729BC31586804@mhtml.blink)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=d3e6399b-81ca-4921-8e08-7be259e9a3bf%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)

Topics Frame

ssc-cms.33across.com

# This site can’t be reached

The webpage at **https://ssc-cms.33across.com/ps/?m=xch&rt=html&gdpr=&gdpr\_consent=&us\_privacy=1YNY&ru=https%3A%2F%2Fpbs-raptive-us.ay.delivery%2Fsetuid%3Fbidder%3D33across%26gdpr%3D%26gdpr\_consent%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D33XUSERID33X&id=zzz000000000002zzz** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssc-cms.33across.com/ps/?m=xch&rt=html&gdpr=&gdpr\_consent=&us\_privacy=1YNY&ru=https%3A%2F%2Fpbs-raptive-us.ay.delivery%2Fsetuid%3Fbidder%3D33across%26gdpr%3D%26gdpr\_consent%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D33XUSERID33X&id=zzz000000000002zzz** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=3907119263889549174789&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=3907119263889549174789)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)![](https://pbs-raptive-us.ay.delivery/setuid?bidder=triplelift&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=3907119263889549174789)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=8DA32835-7E82-49C9-AC80-DDE0F396DC85)[iframe](cid:frame-9F427BD67728CD251AA99C6BCC441D24@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=8DA32835-7E82-49C9-AC80-DDE0F396DC85&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=8DA32835-7E82-49C9-AC80-DDE0F396DC85&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=OERBMzI4MzUtN0U4Mi00OUM5LUFDODAtRERFMEYzOTZEQzg1&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=jaMoNX6CScmsgN3g85bchQ%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=8DA32835-7E82-49C9-AC80-DDE0F396DC85&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/8DA32835-7E82-49C9-AC80-DDE0F396DC85?gdpr=0&gdpr_consent=)[iframe](cid:frame-BCF56A15822A84363E08BF8383CC8C86@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)[iframe](cid:frame-DDA12D01ABCCEB7D1DE25624B75D0700@mhtml.blink)

Pixels![](https://pbs-raptive-us.ay.delivery/setuid?bidder=openx&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=605fc124-5c46-4e18-8a6a-3e6b3361adf5)![](https://x.bidswitch.net/sync?ssp=openx)![](https://id.rlcdn.com/709996.gif)![](https://idpix.media6degrees.com/orbserv/hbpix?pixId=856286&pcv=125&ptid=23&tpuv=00&tpu=f52cdb61-fd41-58c7-16cf-b58d97f72fba)![](https://sync.srv.stackadapt.com/sync?nid=268)![](https://b1sync.zemanta.com/usersync/openx?puid=724c34ad-0e51-4c73-b6d5-62bc912ab103&cb=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D560843120%26val%3D__ZUID__)![](https://rtb.openx.net/sync/dds)

## Stacked Bar Plot
bananapoaceesorghotriticum051015202530354045505560

##### Steps:

- Start by understanding the
[basics of barplot](https://d3-graph-gallery.com/graph/barplot_basic.html) in d3.js.


- Data is available
[here](https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv). Have a look to it. Note the wide (untidy) format:
each group is provided in a specific line, each subgroup in
a specific column.


- The `d3.stack()` function is used to stack the
data: it computes the new position of each subgroup on the Y
axis


- The output of `d3.stack()` can be used to create
a set of `rect` as for a normal barplot.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 20, left: 50},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv", function(data) {

  // List of subgroups = header of the csv files = soil condition here
  var subgroups = data.columns.slice(1)

  // List of groups = species here = value of the first column called group -> I show them on the X axis
  var groups = d3.map(data, function(d){return(d.group)}).keys()

  // Add X axis
  var x = d3.scaleBand()
      .domain(groups)
      .range([0, width])
      .padding([0.2])
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).tickSizeOuter(0));

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, 60])
    .range([ height, 0 ]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // color palette = one color per subgroup
  var color = d3.scaleOrdinal()
    .domain(subgroups)
    .range(['#e41a1c','#377eb8','#4daf4a'])

  //stack the data? --> stack per subgroup
  var stackedData = d3.stack()
    .keys(subgroups)
    (data)

  // Show the bars
  svg.append("g")
    .selectAll("g")
    // Enter in the stack data = loop key per key = group per group
    .data(stackedData)
    .enter().append("g")
      .attr("fill", function(d) { return color(d.key); })
      .selectAll("rect")
      // enter a second time = loop subgroup per subgroup to add all rectangles
      .data(function(d) { return d; })
      .enter().append("rect")
        .attr("x", function(d) { return x(d.data.group); })
        .attr("y", function(d) { return y(d[1]); })
        .attr("height", function(d) { return y(d[0]) - y(d[1]); })
        .attr("width",x.bandwidth())
})

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 20, left: 50},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv").then( function(data) {

  // List of subgroups = header of the csv files = soil condition here
  const subgroups = data.columns.slice(1)

  // List of groups = species here = value of the first column called group -> I show them on the X axis
  const groups = data.map(d => (d.group))

  // Add X axis
  const x = d3.scaleBand()
      .domain(groups)
      .range([0, width])
      .padding([0.2])
  svg.append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x).tickSizeOuter(0));

  // Add Y axis
  const y = d3.scaleLinear()
    .domain([0, 60])
    .range([ height, 0 ]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // color palette = one color per subgroup
  const color = d3.scaleOrdinal()
    .domain(subgroups)
    .range(['#e41a1c','#377eb8','#4daf4a'])

  //stack the data? --> stack per subgroup
  const stackedData = d3.stack()
    .keys(subgroups)
    (data)

  // Show the bars
  svg.append("g")
    .selectAll("g")
    // Enter in the stack data = loop key per key = group per group
    .data(stackedData)
    .join("g")
      .attr("fill", d => color(d.key))
      .selectAll("rect")
      // enter a second time = loop subgroup per subgroup to add all rectangles
      .data(d => d)
      .join("rect")
        .attr("x", d => x(d.data.group))
        .attr("y", d => y(d[1]))
        .attr("height", d => y(d[0]) - y(d[1]))
        .attr("width",x.bandwidth())
})

</script>
```

### Related blocks →

- _Simple Box Plot Example in d3.js v4.0 -_ [link](https://bl.ocks.org/rjurney/e04ceddae2e8f85cf3afe4681dac1d74)

- _D3.js Boxplot with Axes and Labels -_ [link](http://bl.ocks.org/anaeliaovalle/60a7ed1f4e55a9052caab3c69668a306)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

SafeFrame Container

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.19369786006320955)

Prebid User Sync

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_32365910-d70b-40f5-a6dd-61ea624bca8c&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

**cm.g.doubleclick.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**cm.g.doubleclick.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-87AC37E62733392A21B4BADD156DD853@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-B3A5C286B0DC4B36D235E90DA48C7F19@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_32365910-d70b-40f5-a6dd-61ea624bca8c&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_32365910-d70b-40f5-a6dd-61ea624bca8c)

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876HtHM4SYACZ8JAIFLowAA%262356&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876HtHM4SYACZ8JAIFLowAACTQAAAIB&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)

um4.eqads.com

# This site can’t be reached

The webpage at **https://um4.eqads.com/um/cs** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://um4.eqads.com/um/cs** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://sync.srv.stackadapt.com/sync?nid=68)![](https://ad.turn.com/r/cs?pid=21)![](https://tr.blismedia.com/v1/api/sync/indexexchange?gdpr=&userId=Z876HtHM4SYACZ8JAIFLowAA%262356&gpp=&gpp_sid=&us_privacy=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876HtHM4SYACZ8JAIFLowAACTQAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=ab4574b4-2ab7-49ee-a029-0221495dbd3d)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=YWI0NTc0YjQtMmFiNy00OWVlLWEwMjktMDIyMTQ5NWRiZDNk)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ssbsync.smartadserver.com/api/sync?callerId=47&gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=A713910B-C0ED-4091-93C2-A11C1D75CF79)[iframe](cid:frame-6EE3E4C022C7329B2789A951B04A790A@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=A713910B-C0ED-4091-93C2-A11C1D75CF79&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=A713910B-C0ED-4091-93C2-A11C1D75CF79&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=QTcxMzkxMEItQzBFRC00MDkxLTkzQzItQTExQzFENzVDRjc5&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=pxORC8DtQJGTwqEcHXXPeQ%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=A713910B-C0ED-4091-93C2-A11C1D75CF79&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-0B5395741FC196ACEDA1267A3FCF8E02@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHI7HyIuAqbj)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHI7HyIuAqbj&cb=1741617694425&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHI7HyIuAqbj)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHI7HyIuAqbj)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=c5c0f48a-651e-c04f-0c14-b13fa125da89)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/09d1eeb3-e918-e9fc-fdcd-255d3641dc20?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=9d1688f7-79b4-7bb5-cc1a-33a8c9161169&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=YjE3OTViM2QtYjBjMy0yNTExLWQ5ZmEtNjkxMTAzZjRkZjA5)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-44AA9208D9E5C0827E8004E61A71C52A@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-4092EAD9900A6EA14968D35520CE08BF@mhtml.blink)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=9e4ffd95-d609-4f8a-a95d-1fcfa77de1e6%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)

Topics Frame

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D1YNY%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ?us_privacy=1YNY)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D&us_privacy=1YNY)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID&us_privacy=1YNY)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776&us_privacy=1YNY)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=&us_privacy=1YNY)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D&us_privacy=1YNY)

## D3.js Wordcloud Guide
Step by step

* * *

Creation of wordclouds in d3.js is made easy thanks to the
[d3-cloud plugin](https://github.com/jasondavies/d3-cloud)
built by Jason Davies. A good way to explore the feature of this
plugin is through this
[wordcloud generator](https://www.jasondavies.com/wordcloud/). To learn how to use it with d3.js, read the examples below.


[Most basic\\
\\
* * *\\
\\
The most basic wordcloud you can do in d3.js. It calls the\\
`d3-cloud` plugin without any argument.\\
\\
Input\\
data: vector written in code\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/wordcloud_basic.png)](https://d3-graph-gallery.com/graph/wordcloud_basic.html)

[General customization\\
\\
* * *\\
\\
Apply basic customization to the wordcloud: color, angles,\\
font, size and more.\\
\\
Input data: vector written\\
in code\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/wordcloud_custom.png)](https://d3-graph-gallery.com/graph/wordcloud_custom.html)

[Proportional size\\
\\
* * *\\
\\
This post will teach you how to make the word size\\
proportional to their occurrence.\\
\\
Input data:\\
vector written in code\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/wordcloud_size.png)](https://d3-graph-gallery.com/graph/wordcloud_size.html)

Warning

* * *

[Wordclouds](https://www.data-to-viz.com/graph/wordcloud.html)
are useful for quickly perceiving the most prominent terms. They are
widely used in media and well understood by the public. However, they
are criticized for 2 main reasons:


- Area is a poor metaphor of a numeric value, it is hardly
perceive by the human eye

- Longer words appear bigger by construction

To put it in a nutshell, wordclouds must be avoided. You can read more
about that in
[data-to-viz](https://www.data-to-viz.com/graph/wordcloud.html). Why not consider a [lollipop](https://d3-graph-gallery.com/lollipop.html) plot or a
[barplot](https://d3-graph-gallery.com/barplot.html) instead?


[Lollipop plot\\
\\
* * *\\
\\
Lollipop plot can be a good alternative to wordclouds. Try\\
it!\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/lollipop_ordered.png)](https://d3-graph-gallery.com/graph/lollipop_ordered.html)

[Turn you barplot horizontal\\
\\
* * *\\
\\
Makes sense if you have long labels: it makes them more\\
readable.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/barplot_horizontal.png)](https://d3-graph-gallery.com/graph/barplot_horizontal.html)

Selection of blocks

* * *

A few blocks highlighting the possibilities offered by the d3-cloud
plugin


[Wordcloud generator\\
\\
* * *\\
\\
If you feel too lazy to code today, this word cloud\\
generator is based on d3.js and allows to create your\\
wordcloud by clicking on a few buttons.\\
\\
\\
![wordcloud generator](https://d3-graph-gallery.com/img/block/block_wordcloudGenerator.png)](https://www.jasondavies.com/wordcloud/)

[Wordcloud with animation\\
\\
* * *\\
\\
A block that illustrate how to build animation between\\
several wordclouds.\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_wordcloudAnimation.png)](http://bl.ocks.org/joews/9697914)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Bar150.png)](https://d3-graph-gallery.com/barplot.html)

Barplot

[![](https://d3-graph-gallery.com/img/section/Spider150.png)](https://d3-graph-gallery.com/spider.html)

Spider / Radar

[![](https://d3-graph-gallery.com/img/section/Wordcloud150.png)](https://d3-graph-gallery.com/wordcloud.html)

Wordcloud

[![](https://d3-graph-gallery.com/img/section/Parallel1150.png)](https://d3-graph-gallery.com/parallel.html)

Parallel

[![](https://d3-graph-gallery.com/img/section/Lollipop150.png)](https://d3-graph-gallery.com/lollipop.html)

Lollipop

[![](https://d3-graph-gallery.com/img/section/CircularBarplot150.png)](https://d3-graph-gallery.com/circular_barplot.html)

Circular Barplot

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-AX-Sjk4mezcPVcmiWw9v7an86PC8djrs5A4zIvwlRFg_yl_BNQ9HN1sjK6rPmM3c9so4kpo5zQn-IEUDNljzxyzKmPxnDNCZZeC-ODeVGz36K0eO8)

![](https://cm.g.doubleclick.net/pixel?google_nid=casale_media2_dsp_secure&google_cm&google_dbm)![](https://dsum-sec.casalemedia.com/rrum?ixi=0&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dsp_secure%26google_cm%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_cm&google_dbm)![](https://ib.adnxs.com/getuid?https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_hm=${BASE64_UID_ENC})

![](data:image/png,ft)

300x250

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaR4LR8Hri4n21GiOAoLG8Q_PFgufBpISj_FnskYB0sszRW1fXm_KO5GmZI8APWT2thoR7X7jPecyYCnyal6OaEY20ibsg)

www.googleadservices.com

# This site can’t be reached

The webpage at **https://www.googleadservices.com/pagead/managed/js/activeview/current/reach\_worklet.html** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://www.googleadservices.com/pagead/managed/js/activeview/current/reach\_worklet.html** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-D0UXraRxfuaSbI2SAaxff-hi1V1s9wo1LI91QNUM7YteZKSL3VXlpCydMDx1zmFs6o3Rx7rwtkiTRlVtTsaBCg0MjFiIzG1qF0zkvI_h-jFJ-E1hM)

![](https://cm.g.doubleclick.net/pixel?google_nid=teadstv_dbm&google_cm&google_dbm)![](https://sync.teads.tv/um?eid=3&uid=&fb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dteadstv_dbm%26google_hm%3D%5BVID_B64%5D)![](https://cm.g.doubleclick.net/pixel?google_nid=tremor_video_dbm&google_cm&google_dbm)

![](https://ad.doubleclick.net/ddm/activity/attribution_src_register; )

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaT4zZLpHyDLwr0zDWi-D0tjR-Wh3mkQrSCducRTNoBc7sluyek1M082rnkEhXEc5hkV0qzGiHyk901lsM2hd-yG0toe-g)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.7917085894386904)

Prebid User Sync

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_1835402b-fbd5-4176-bf8f-344518a2d12b&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV8xODM1NDAyYi1mYmQ1LTQxNzYtYmY4Zi0zNDQ1MThhMmQxMmI=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv&google\_tc=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV8xODM1NDAyYi1mYmQ1LTQxNzYtYmY4Zi0zNDQ1MThhMmQxMmI=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv&google\_tc=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=F0EC8C8B-CEF5-42FE-A0E2-A1FAB44B3BC8)[iframe](cid:frame-31F8A1C77D66355A46CA706F7DC8E467@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=F0EC8C8B-CEF5-42FE-A0E2-A1FAB44B3BC8&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=F0EC8C8B-CEF5-42FE-A0E2-A1FAB44B3BC8&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=RjBFQzhDOEItQ0VGNS00MkZFLUEwRTItQTFGQUI0NEIzQkM4&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=8OyMi871Qv6g4qH6tEs7yA%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=F0EC8C8B-CEF5-42FE-A0E2-A1FAB44B3BC8&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/F0EC8C8B-CEF5-42FE-A0E2-A1FAB44B3BC8?gdpr=0&gdpr_consent=)[iframe](cid:frame-78480AD3BF00FA3FC4FF2BB59A4BABFF@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)[iframe](cid:frame-B1C193645F6741F476AE99592F60030A@mhtml.blink)[iframe](cid:frame-69045FEBE65FE665209EBA24047AE6F7@mhtml.blink)

[iframe](cid:frame-766B911D67131DAE9C6E4F2E20207962@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-EB23ED7BFC56849FFA45B13BFF823CBF@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

secure-assets.rubiconproject.com

# This site can’t be reached

**secure-assets.rubiconproject.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**secure-assets.rubiconproject.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_1835402b-fbd5-4176-bf8f-344518a2d12b)

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=fcc21473-119d-4ced-8d73-50e5f62fb615)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/51dbfdf8-38ae-ed4d-d728-86058823b9d1?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=c51c9bbc-a802-7f04-e6ff-90f077747498&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZTk3MzQ4NzYtNjE3NS0yMWEwLWYzMWYtY2E0OWJkOTZiYWY4)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

![](https://us01.z.antigena.com/l/FZt5psomz79DGe~O1V5PkX7S8-NVJIdw0INR-k~Duu9c36GyIDyElf4y8fa2~-9InNSq4BCadyu-8tQSiIkaVleT~Yh8GI4ocNSeo4~API4DJEsYNIMg2sPMMXvjcckTUFy53ZYw3gzv35jSAchydRkSr2XFgqe-kzzlKTlv1VT7-TlAc0PcX7nFzbKlHypwbpU3AWUAJgUx%20F0EC8C8B-CEF5-42FE-A0E2-A1FAB44B3BC8&rnd=RND)![](https://ad.turn.com/r/cs?pid=1&gdpr=0&gdpr_consent=)[iframe](cid:frame-808A6770948600263E92B151BBF3CF5F@mhtml.blink)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=3&gdpr=0&gdpr_consent=)[iframe](cid:frame-FF587444D3691E02143B65BD32D61875@mhtml.blink)

![](https://creativecdn.com/cm-notify?pi=pubmatic&gdpr=0&gdpr_consent=)![](https://c1.adform.net/serving/cookie/match?party=14&redirect=https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTI4NzUmdGw9NDMyMDA=&piggybackCookie=[PLACE%20YOUR%20PIGGYBACK%20COOKIES%20HERE]&gdpr=0&gdpr_consent=)[iframe](cid:frame-0A014E10DE1D1A8319F4C0C444689B89@mhtml.blink)[iframe](cid:frame-AD6925CC60B830E7410D070BD6BA4CB4@mhtml.blink)

ad.mrtnsvr.com

# This site can’t be reached

**ad.mrtnsvr.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ad.mrtnsvr.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=3909304970164017867762&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=3909304970164017867762)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/3909304970164017867762?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=3909304970164017867762&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3909304970164017867762)

![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876JNHM43gANLJOAEBF5QAAA7QAAAAB&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876JNHM43gANLJOAEBF5QAAA7QAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876JNHM43gANLJOAEBF5QAAA7QAAAAB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://sync.mathtag.com/sync/img?mt_exid=15&redir=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fcm_dsp_id%3D3%26external_user_id%3D%5BMM_UUID%5D&us_privacy=&gdpr=&gdpr_consent=)![](https://ib.adnxs.com/getuid?https://dsum.casalemedia.com/crum?cm_dsp_id=190&external_user_id=$UID)![](https://rtb.adentifi.com/CookieIndex)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876JNHM43gANLJOAEBF5QAA%26948)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=3909304970164017867762&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=3909304970164017867762)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3909304970164017867762)

AdThrive

AdThrive

gpsb-reims.criteo.com

# This site can’t be reached

**gpsb-reims.criteo.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**gpsb-reims.criteo.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

SafeFrame Container

![](https://imasdk.googleapis.com/formats/wta/help_outline_white_24dp_with_3px_trbl_padding.png?wp=ca-pub-8501674430909082)

Learn more

Replay

Learn more

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaSQzbbqN8WIj3NiLDQe-q21eVQCge4BZol9ZvwJ9scXMB_hP4c22ySBWTIr27FGTzR3ITOXw0kNRS178tqzaHEFnYvuyQ)

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_1835402b-fbd5-4176-bf8f-344518a2d12b&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-93E9AD90B0D1B5E4535BE76D02B53B43@mhtml.blink)

creativecdn.com

# This site can’t be reached

**creativecdn.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**creativecdn.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_1835402b-fbd5-4176-bf8f-344518a2d12b&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)[iframe](cid:frame-BCABF8D6B7E1703B6A37476BAFB3B29E@mhtml.blink)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)

![](https://aa.agkn.com/adscores/g.pixel?sid=9212308278&puid=F0EC8C8B-CEF5-42FE-A0E2-A1FAB44B3BC8)![](https://sync.crwdcntrl.net/qmap?c=240&tp=PUBM&tpid=F0EC8C8B-CEF5-42FE-A0E2-A1FAB44B3BC8&gdpr=0&gdpr_consent=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3371&partner_device_id=F0EC8C8B-CEF5-42FE-A0E2-A1FAB44B3BC8)![](https://i.liadm.com/s/75145?bidder_id=195755&bidder_uuid=F0EC8C8B-CEF5-42FE-A0E2-A1FAB44B3BC8)[iframe](cid:frame-668370FBB3395B23A978A38FA388939D@mhtml.blink)![](https://pubmatic-match.dotomi.com/match/bounce/current?networkId=17100&version=1&nuid=F0EC8C8B-CEF5-42FE-A0E2-A1FAB44B3BC8&gdpr=0&gdpr_consent=)[iframe](cid:frame-30DE9BC34C1732CFDB8001A179F487AC@mhtml.blink)[iframe](cid:frame-FD82BAEF3154DB63A1FCB86E1C33FA51@mhtml.blink)![](https://rtb.adentifi.com/CookieSyncPubMatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-4A8C5BE00555EB04323AEA6CDF0567BF@mhtml.blink)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=3&gdpr=0&gdpr_consent=)

sonata-notifications.taptapnetworks.com

# This site can’t be reached

The webpage at **https://sonata-notifications.taptapnetworks.com/web/cookie/bidswitch/sync?bidswitch\_ssp\_id=pubmatic&bsw\_custom\_parameter=1961cd84-5291-4a1e-b907-088fe64cf6be&gdpr=0&gdpr\_consent=&gdpr\_pd=#US\_PRIVACY** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sonata-notifications.taptapnetworks.com/web/cookie/bidswitch/sync?bidswitch\_ssp\_id=pubmatic&bsw\_custom\_parameter=1961cd84-5291-4a1e-b907-088fe64cf6be&gdpr=0&gdpr\_consent=&gdpr\_pd=#US\_PRIVACY** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-EC5E08AE52CB5D6E41D109675F5FE7D9@mhtml.blink)[iframe](cid:frame-1D482AE32BE06C6F5942B6B05C06269C@mhtml.blink)[iframe](cid:frame-74A586F3677E8BF93ED5A9C7AE5793B1@mhtml.blink)

![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_1835402b-fbd5-4176-bf8f-344518a2d12b)

ssum-sec.casalemedia.com

# This site can’t be reached

**ssum-sec.casalemedia.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ssum-sec.casalemedia.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.sharethrough.com

# This site can’t be reached

**match.sharethrough.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**match.sharethrough.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://aa.agkn.com/adscores/g.pixel?sid=9212308278&puid=F0EC8C8B-CEF5-42FE-A0E2-A1FAB44B3BC8)![](https://sync.crwdcntrl.net/qmap?c=240&tp=PUBM&tpid=F0EC8C8B-CEF5-42FE-A0E2-A1FAB44B3BC8&gdpr=0&gdpr_consent=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3371&partner_device_id=F0EC8C8B-CEF5-42FE-A0E2-A1FAB44B3BC8)![](https://i.liadm.com/s/75145?bidder_id=195755&bidder_uuid=F0EC8C8B-CEF5-42FE-A0E2-A1FAB44B3BC8)[iframe](cid:frame-269D8FDC2FB319B03190B3555A93361A@mhtml.blink)![](https://pubmatic-match.dotomi.com/match/bounce/current?networkId=17100&version=1&nuid=F0EC8C8B-CEF5-42FE-A0E2-A1FAB44B3BC8&gdpr=0&gdpr_consent=)[iframe](cid:frame-AB7D2AE65685D723346E172D9F554AD2@mhtml.blink)[iframe](cid:frame-CA3BA35C86C6AE1BB4DF3A7F1580B122@mhtml.blink)![](https://rtb.adentifi.com/CookieSyncPubMatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-802ADAF9E3E90D25D01507E979741177@mhtml.blink)[iframe](cid:frame-55639434D6BE9D512CE6C79BFEA3654C@mhtml.blink)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-3E92AF6BE169C8794BD4281474B53F25@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

pandg.tapad.com

# This site can’t be reached

The webpage at **https://pandg.tapad.com/tag?us\_privacy=1YNY&referrer\_url=&page\_url=https%3A%2F%2Fd3-graph-gallery.com%2Fwordcloud.html&owner=P%26G&bp\_id=cafemedia&ch=%7B"architecture"%3A""%2C"bitness"%3A""%2C"brands"%3A%5B%5D%2C"fullVersionList"%3A%5B%5D%2C"mobile"%3Afalse%2C"model"%3A""%2C"platform"%3A""%2C"platformVersion"%3A""%7D&initiator=js** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://pandg.tapad.com/tag?us\_privacy=1YNY&referrer\_url=&page\_url=https%3A%2F%2Fd3-graph-gallery.com%2Fwordcloud.html&owner=P%26G&bp\_id=cafemedia&ch=%7B"architecture"%3A""%2C"bitness"%3A""%2C"brands"%3A%5B%5D%2C"fullVersionList"%3A%5B%5D%2C"mobile"%3Afalse%2C"model"%3A""%2C"platform"%3A""%2C"platformVersion"%3A""%7D&initiator=js** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pagead2.googlesyndication.com/pagead/sodar?id=sodar2&v=232&li=gpt_m202503040101&jk=2051343302707969&rc=)

Topics Frame

## Privacy Policy Overview
As the owner of this website (the “Site”), d3-graph-gallery.com
(“we” or “us”) understand that your privacy is of critical
importance. This Privacy Policy describes what information we
collect from you via the Site and how we use and disclose such
information.


## Our Use of Cookies

A cookie is a file containing an identifier (a string of letters and
numbers) that is sent by a web server to a web browser and is stored
by the browser.

The identifier is then sent back to the server
each time the browser requests a page from the server. Cookies may
be either "persistent" cookies or "session" cookies: a persistent
cookie will be stored by a web browser and will remain valid until
its set expiry date, unless deleted by the user before the expiry
date; a session cookie, on the other hand, will expire at the end of
the user session, when the web browser is closed.

Cookies do
not typically contain any information that personally identifies a
user, but personal information that we store about you may be linked
to the information stored in and obtained from cookies.

We use
cookies for the following purposes:

(a) \[advertising - we use\
cookies \[to help us to display advertisements that will be relevant\
to you\]; and\
\
(b) \[analysis - we use cookies \[to help us to\
analyze the use and performance of our website and services\];\
\
\
We use Google Analytics to analyze the use of our\
website. Google Analytics gathers information about website use by\
means of cookies. The information gathered relating to our website\
is used to create reports about the use of our website.\
\
\
Google's privacy policy is available at:\
https://www.google.com/policies/privacy/ Most browsers allow you to\
refuse to accept cookies and to delete cookies.\
\
The\
methods for doing so vary from browser to browser, and from version\
to version. You can however obtain up-to-date information about\
blocking and deleting cookies via these links:\
\
(a)\
https://support.google.com/chrome/answer/95647?hl=en (Chrome);\
\
\
(b)\
https://support.mozilla.org/en-US/kb/enable-and-disable-cookies-website-preferences\
(Firefox);\
\
(c) http://www.opera.com/help/tutorials/security/cookies/ (Opera);\
\
\
(d)\
https://support.microsoft.com/en-gb/help/17442/windows-internet-explorer-delete-manage-cookies(Internet\
Explorer);\
\
(e)\
https://support.apple.com/en-gb/guide/safari/sfri11471/mac (Safari);\
and\
\
(f)\
https://privacy.microsoft.com/en-us/windows-10-microsoft-edge-and-privacy\
(Edge).\
\
Please note that blocking cookies may have a negative\
impact on the functions of many websites, including our Site. Some\
features of the Site may cease to be available to you.\
\
\
## Interest-Based Advertising\
\
## Advertising\
\
. This Site is affiliated with CMI Marketing, Inc., d/b/a Raptive\
(“Raptive”) for the purposes of placing advertising on the Site, and\
Raptive will collect and use certain data for advertising purposes.\
To learn more about Raptive's data usage, click here:\
[www.cafemedia.com/publisher-advertising-privacy-policy](https://www.cafemedia.com/publisher-advertising-privacy-policy)\
\
## Additional Rights of EEA (European Economic Area) Residents\
\
If you\
are a resident of a country in the EEA, you have the rights, among\
others, to:\
\
(i) access your personal data\
\
(ii) ensure\
the accuracy of your personal data\
\
(iii) the right to have us\
delete your personal data\
\
(iv) the right to restrict further\
processing of your personal data, and\
\
(v) the right to\
complain to a supervisory authority in your country of residence in\
the event that data is misused If you believe that our processing of\
your personal information infringes data protection laws, you have a\
legal right to lodge a complaint with a supervisory authority\
responsible for data protection. You may do so in the EU member\
state of your residence, your place of work or the place of the\
alleged infringement. You may exercise any of your rights in\
relation to your personal data by written notice to us addressed to\
the following:\
\
## Sale of Business or Assets\
\
In the event that the Site\
or substantially all of its assets is sold or disposed of as a going\
concern, whether by merger, sale of assets or otherwise, or in the\
event of an insolvency, bankruptcy or receivership, the information\
we have collected about you may be one of the assets sold or merged\
in connection with that transaction.\
\
## Changes to the Privacy Policy\
\
We may change this Privacy Policy from time to time. The most recent\
version of the Privacy Policy will always be posted on the Site,\
with the "Effective Date" posted at the top of the Policy. We may\
revise and update this Privacy Policy if our practices change, as\
technology changes, or as we add new services or change existing\
ones. If we make any material changes to our Privacy Policy or how\
we handle your personal information, or we are going to use any\
personal information in a manner that is materially different from\
that stated in our Privacy Policy at the time we collected such\
information, we will give you a reasonable opportunity to consent to\
the change.\
\
If you do not consent, your personal information\
will be used as agreed to under the terms of the privacy policy in\
effect at the time we obtained that information. By using our Site\
or services after the Effective Date, you are deemed to consent to\
our then-current privacy policy.\
\
We will use information\
previously obtained in accordance with the Privacy Policy in effect\
when the information was obtained from you.\
\
## Contacting Us\
\
If you\
have any questions about this Privacy Policy, or the practices of\
this Site, please contact us at yan.holtz.data@gmail.com Or write to\
us at: Rue de l'aiguillerie, 3400 Montpellier France\
\
\
## Dataviz decision tree\
\
Wondering **what chart type** you should use? Check my\
[Data To Viz](https://www.data-to-viz.com/) project! It is a\
comprehensive **classification** of chart types organized by data\
input format. Get a high-resolution version of the decision tree in your\
inbox now!\
\
\
Subscribe\
\
![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)\
\
SafeFrame Container\
\
![](https://rtb.ads.us-east.travelaudience.com/el.ashx?__trackerRequestId=0.7997304681920478&adPos=&ai1=1%3B30000848%3B16%3B1%3B%3B%3B0%3B-1%3B%3B%3B%3BhSIlf3eRj4MqalmvabA9Wg%3D%3D%3B60037521%3B999%252c1%3B%3B%3B2%3B4%3B50007721%3B_RU74FKXdO5Kw__7k6Nbcw%3D%3D%3BUSD%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B70026041%3BthyUq4kqP2r0whuGdSBktH37VXh_GKDNa3IN6Q%3BEUR%3B2%3B%3B%3B%3B%3B0%3B%3B&aid=&an=&ask=&at=1&bc=1&bd=bidder-rtb-production-5594dc4f74-vtp6b&bnr=0&brq=thyUq4kqP2r0whuGdSBktH37VXh_GKDNa3IN6Q&cis=1&di=&did=-1&dnt=&dv=1&ed=&ev=ic&fm=320x50&gcpm=117059&gctr=&ia=0&id5Decr=&id5Encr=&id5PID=&id5Src=&iid=&ilt=&ir=0&ld=&mai=&mat=1&mid=&na=&no=&oo=&pb=90000&pos_old=&rg=2&rts=&salt=18&sc=&site=d3-graph-gallery.com&ssp=0&sv=1&tsf=&ua=&uc=US&ucy=&uuid=4F47D3F0-3565-4640-9A55-951AE471CF4E&view=&vrt=&vw=&wp=Z876IAADgjcBy6e3AAyS5z-14NOjCsnbGhQnkQ)[![](https://static.travelaudience.com/img/import/LaPazDMO/Ingle%CC%81s/320x50.gif)](https://rtb.ads.us-east.travelaudience.com/ct? &redirect=https%3A%2F%2Fwww.alaskaair.com%2Fen%2Fflights-to-la-paz%3Futm_source%3DDigital%2BLa%2BPaz%26utm_medium%3DBanner%26utm_campaign%3DLa%2BPaz%2BCo-op)\
\
![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaTpiERpK2K-6n3efQuDBK6EbY2QLaA2fuHqUJB_oF3LLyAtjHjpanwRi2VfwDpabweZUCI1AKTq96fM6U_IqoQg7Ulqrw)\
\
![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.5206685785169878)\
\
Prebid User Sync\
\
Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=53dd5114-049f-4ea0-877c-64a165f3abe1)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/fec4b89f-2dac-ef00-dd27-b2411bffa425?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=6a03dedb-bd00-7d49-ecf0-a4b4e4a8696c&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NDY2YzBkMTEtNzQ3Ny0yM2VkLWY5MTAtZmUwZDJlNGFhNzBj)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)\
\
![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)\
\
User-Sync\
\
![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)\
\
![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=4502483167375708887418&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=4502483167375708887418)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=4502483167375708887418)\
\
User-Sync\
\
[iframe](cid:frame-F5E6AB5B649BCE14938DDA700E51116A@mhtml.blink)\
\
[iframe](cid:frame-3F0E07462CDDCB1D358FEE82F175ACBD@mhtml.blink)\
\
[iframe](cid:frame-DF4F77751A9B808628E22EA816107505@mhtml.blink)[iframe](cid:frame-C06DCFBF588B0DDF09D19EBAEDA12F9D@mhtml.blink)\
\
ad.mrtnsvr.com\
\
# This site can’t be reached\
\
**ad.mrtnsvr.com** unexpectedly closed the connection.\
\
Try:\
\
- Checking the connection\
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)\
\
ERR\_CONNECTION\_CLOSED\
\
Reload\
\
\
Details\
\
\
Check your Internet connection\
\
Check any cables and reboot any routers, modems, or other network\
devices you may be using.\
\
Allow Chrome to access the network in your firewall or antivirus\
settings.\
\
If it is already listed as a program allowed to access the network, try\
removing it from the list and adding it again.\
\
If you use a proxy server…\
\
Go to\
the Chrome menu >\
Settings\
>\
Show advanced settings…\
>\
Change proxy settings…\
and make sure your configuration is set to "no proxy" or "direct."\
\
**ad.mrtnsvr.com** unexpectedly closed the connection.\
\
![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)\
\
[iframe](cid:frame-945803FA4EB2F484E684F01AAC71FB5C@mhtml.blink)[iframe](cid:frame-3875B8C4C29D87C20907046922CD2867@mhtml.blink)[iframe](cid:frame-C683F2E6A3E75CE41F4213A8090FF5D2@mhtml.blink)[iframe](cid:frame-4818F8DC0ECA8989ADBACEBCC87CB951@mhtml.blink)[iframe](cid:frame-6E9064015DA7991DF2643AD2D5BD2299@mhtml.blink)\
\
![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_3b6f1303-8259-4a72-a746-ce4d79768656)\
\
![](https://casale-match.dotomi.com/match/bounce/current?networkId=19998&version=1)![](https://c1.adform.net/serving/cookie/match?party=29)![](https://sync-tm.everesttech.net/upi/pid/ZMAwryCI?redir=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D88%26external_user_id%3D%24%7BTM_USER_ID%7D)![](https://ad.turn.com/r/cs?pid=21)![](https://sync.mathtag.com/sync/img?mt_exid=15&redir=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fcm_dsp_id%3D3%26external_user_id%3D%5BMM_UUID%5D&us_privacy=&gdpr=&gdpr_consent=)![](https://bttrack.com/pixel/cookiesync?source=67e94f23-25d6-4008-8236-375d1743c2e0&secure=1)![](https://a.tribalfusion.com/i.match?p=b20&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com/crum%3Fcm_dsp_id%3D131%26external_user_id%3D%24TF_USER_ID_ENC%24&cm_callback_url=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum&cm_user_id=Z876H8AoIp4AEGpxAU15tQAA)![](https://b1sync.zemanta.com/usersync/index/?puid=Z876H8AoIp4AEGpxAU15tQAA%262585&cb=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fexternal_user_id%3D_ZUID_&gdpr=&gdpr_consent=&us_privacy=)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876H8AoIp4AEGpxAU15tQAA%262585)\
\
![](https://pm.w55c.net/ping_match.gif?st=TRIPLELIFT&rurl=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D6019%26xuid%3D_wfivefivec_%26dongle%3D465e%26gdpr=0%26gdpr_consent=)![](https://sync.mathtag.com/sync/img?mt_exid=62&redir=%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3690%26xuid%3D%5BMM_UUID%5D%26dongle%3D3995%26gdpr=0%26gdpr_consent=)![](https://sync-tm.everesttech.net/upi/pid/RVF22VSl?redir=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3657%26xuid%3D%24%7BTM_USER_ID%7D%26dongle%3D3c0a%26gdpr=0%26gdpr_consent=)![](https://cms.quantserve.com/pixel/p-VtN-a_yLd-GB-.gif?idmatch=0&gdpr=0&gdpr_consent=)![](https://us.creativecdn.com/cm-notify?pi=triplelift&gdpr=0&gdpr_consent=)![](https://dis.criteo.com/dis/usersync.aspx?r=44&p=75&cp=triplelift&cu=1&gdpr=0&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&url=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D2711%26xuid%3D%40%40CRITEO_USERID%40%40%26dongle%3D013b)![](https://ib.adnxs.com/getuid?https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3335%26xuid%3D%24UID%26dongle%3D4d58%26gdpr=0%26gdpr_consent=)![](https://rtb.adentifi.com/CookieSyncTripleLift?gdpr=0&gdpr_consent=)![](https://ib.adnxs.com/prebid/setuid?bidder=triplelift_native&gdpr=0&gdpr_consent=&uid=4502483167375708887418)![](https://ib.adnxs.com/prebid/setuid?bidder=triplelift&gdpr=0&gdpr_consent=&uid=4502483167375708887418)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=4502483167375708887418)\
\
AdThrive\
\
AdThrive\
\
Protected Audience Demo\
\
![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)\
\
✕\
\
Do not sell or share my personal information.\
\
You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.\
\
This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.\
\
For more information please visit this site's Privacy Policy.\
\
CANCEL\
\
CONTINUE\
\
SafeFrame Container\
\
![](https://rtb.ads.us-east.travelaudience.com/el.ashx?__trackerRequestId=0.8186112843431564&adPos=&ai1=1%3B30000848%3B16%3B1%3B%3B%3B0%3B-1%3B%3B%3B%3BhSIlf3eRj4MqalmvabA9Wg%3D%3D%3B60037521%3B999%252c1%3B%3B%3B2%3B4%3B50007721%3B_RU74FKXdO5Kw__7k6Nbcw%3D%3D%3BUSD%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B70026041%3BX2XTKeGoaU7EfI8ZRlMKr-zYmohh_mcQt46d1w%3BEUR%3B2%3B%3B%3B%3B%3B0%3B%3B&aid=&an=&ask=&at=1&bc=1&bd=bidder-rtb-production-5594dc4f74-r682k&bnr=0&brq=X2XTKeGoaU7EfI8ZRlMKr-zYmohh_mcQt46d1w&cis=1&di=&did=-1&dnt=&dv=1&ed=&ev=ic&fm=320x50&gcpm=194934&gctr=&ia=0&id5Decr=&id5Encr=&id5PID=&id5Src=&iid=&ilt=&ir=0&ld=&mai=&mat=1&mid=&na=&no=&oo=&pb=90000&pos_old=&rg=2&rts=&salt=17&sc=&site=d3-graph-gallery.com&ssp=0&sv=2&tsf=&ua=&uc=US&ucy=&uuid=4F47D3F0-3565-4640-9A55-951AE471CF4E&view=&vrt=&vw=&wp=Z876IAACClwBy5WyABcrbY8fdN6qxmebeuPojA)[![](https://static.travelaudience.com/img/import/LaPazDMO/Ingle%CC%81s/320x50.gif)](https://rtb.ads.us-east.travelaudience.com/ct? &redirect=https%3A%2F%2Fwww.alaskaair.com%2Fen%2Fflights-to-la-paz%3Futm_source%3DDigital%2BLa%2BPaz%26utm_medium%3DBanner%26utm_campaign%3DLa%2BPaz%2BCo-op)\
\
![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaRbqWRj5sO-la5hrzcWBjW4W7w3aVSGhNJSfVaGBWp4YV8F35qivBJdH6OMQ7BDhh1ewYuHLbyG56vGyMpfTgFiha1gtw)\
\
Information from your device can be used to personalize your ad experience.\
\
[Do not sell or share my personal information.](https://d3-graph-gallery.com/)\
\
A Raptive Partner Site\
\
![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_3b6f1303-8259-4a72-a746-ce4d79768656&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-C1C77E18B873E7783E9FB3858CBE774F@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-9324D823347EB905FE687F51EA156DC2@mhtml.blink)\
\
![](https://aa.agkn.com/adscores/g.pixel?sid=9212308278&puid=B519B449-1D6F-4751-8C08-B881051D1560)![](https://sync.crwdcntrl.net/qmap?c=240&tp=PUBM&tpid=B519B449-1D6F-4751-8C08-B881051D1560&gdpr=0&gdpr_consent=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3371&partner_device_id=B519B449-1D6F-4751-8C08-B881051D1560)![](https://i.liadm.com/s/75145?bidder_id=195755&bidder_uuid=B519B449-1D6F-4751-8C08-B881051D1560)[iframe](cid:frame-B966D2CC05C0B85D49FE44FB9E91A799@mhtml.blink)[iframe](cid:frame-3FCEDB122380AE2657CFFE670C46665C@mhtml.blink)[iframe](cid:frame-AB92D7B77055E4B7262582D6055B27F6@mhtml.blink)[iframe](cid:frame-1377BFDD5414393B5458DD5A23EBCB95@mhtml.blink)[iframe](cid:frame-DC9734222FD062014444942C30BB2A9C@mhtml.blink)![](https://rtb.adentifi.com/CookieSyncPubMatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-191B03771EE6B057419F43C84C1CDFFD@mhtml.blink)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=3&gdpr=0&gdpr_consent=)\
\
[iframe](cid:frame-544F632B2604F0FC0A507AF51B4F49A4@mhtml.blink)[iframe](cid:frame-0C64C4BA4FF212988A0249BB92BC124B@mhtml.blink)\
\
[iframe](cid:frame-675A55E5ACA3C29E12A1C2B8B9D6AF0D@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-4552690E237AD81D04AF671255C9AAF4@mhtml.blink)[iframe](cid:frame-02979BCE70DC3308C9AE6194FFF64FB2@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_3b6f1303-8259-4a72-a746-ce4d79768656&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)\
\
secure-assets.rubiconproject.com\
\
# This site can’t be reached\
\
**secure-assets.rubiconproject.com** unexpectedly closed the connection.\
\
Try:\
\
- Checking the connection\
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)\
\
ERR\_CONNECTION\_CLOSED\
\
Reload\
\
\
Details\
\
\
Check your Internet connection\
\
Check any cables and reboot any routers, modems, or other network\
devices you may be using.\
\
Allow Chrome to access the network in your firewall or antivirus\
settings.\
\
If it is already listed as a program allowed to access the network, try\
removing it from the list and adding it again.\
\
If you use a proxy server…\
\
Go to\
the Chrome menu >\
Settings\
>\
Show advanced settings…\
>\
Change proxy settings…\
and make sure your configuration is set to "no proxy" or "direct."\
\
**secure-assets.rubiconproject.com** unexpectedly closed the connection.\
\
![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)\
\
![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_3b6f1303-8259-4a72-a746-ce4d79768656)\
\
![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876H8AoIp4AEGpxAU15tQAAChkAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876H8AoIp4AEGpxAU15tQAA%262585&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876H8AoIp4AEGpxAU15tQAAChkAAAAB&gpp=&gpp_sid=)![](https://s.company-target.com/s/ix?cm_dsp_id=18&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://ssbsync.smartadserver.com/api/sync?callerId=82&gdpr=$%7bGDPR%7d&gdpr_consent=$%7bGDPR_CONSENT%7d)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://p.rfihub.com/cm?in=1&pub=2079)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876H8AoIp4AEGpxAU15tQAAChkAAAAB)\
\
Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=fe80a8cf-3cc5-451c-8069-3c0e446636a2)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=ZmU4MGE4Y2YtM2NjNS00NTFjLTgwNjktM2MwZTQ0NjYzNmEy)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sid.storygize.net/ccm/c9dd71b6-fd13-4133-bf5d-b88619cef491)![](https://sync.1rx.io/usersync2/sharethrough)\
\
![](https://idsync.rlcdn.com/420486.gif?partner_uid=B519B449-1D6F-4751-8C08-B881051D1560)[iframe](cid:frame-4D800FB1858BA7AEA928E13797E01651@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=B519B449-1D6F-4751-8C08-B881051D1560&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=B519B449-1D6F-4751-8C08-B881051D1560&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=tRm0SR1vR1GMCLiBBR0VYA%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=B519B449-1D6F-4751-8C08-B881051D1560&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/B519B449-1D6F-4751-8C08-B881051D1560?gdpr=0&gdpr_consent=)[iframe](cid:frame-F80EFA8ED4724598B291BF71EAADC92B@mhtml.blink)\
\
Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIwKHZxHpqX)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIwKHZxHpqX)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSEl3S0haeEhwcVg=)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIwKHZxHpqX&cb=1741617695174&url={{REFERRER}}&gdpr=0&gdpr_consent=)\
\
![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)\
\
Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=32d5a2a6-a1aa-c6b3-2cfe-26238c9ba28c)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=6c7dad27-e607-40ce-a611-3c62d724a860)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)\
\
[iframe](cid:frame-0411A1E4B7EA3307D022BC5D2A35AB22@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-5E2F5AA25237D0E53D54883D80D369D4@mhtml.blink)\
\
![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=11b6500b-2f55-4845-b299-89e4bab8d3ac%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)\
\
![](https://pagead2.googlesyndication.com/pagead/sodar?id=sodar2&v=232&li=gpt_m202503040101&jk=1354340909761462&rc=)\
\
Topics Frame\
\
![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=4502483167375708887418&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=4502483167375708887418)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/4502483167375708887418?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=4502483167375708887418&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=4502483167375708887418)\
\
![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_3b6f1303-8259-4a72-a746-ce4d79768656&gdpr=&gdpr_consent=&us_privacy=1YNY)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)\
\
User-Sync\
\
![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)[iframe](cid:frame-F52530EDBA8F7077987D425B51997AEF@mhtml.blink)\
\
![](https://us01.z.antigena.com/l/FZt5psomz79DGe~O1V5PkX7S8-NVJIdw0INR-k~Duu9c36GyIDyElf4y8fa2~-9InNSq4BCadyu-8tQSiIkaVleT~Yh8GI4ocNSeo4~API4DJEsYNIMg2sPMMXvjcckTUFy53ZYw3gzv35jSAchydRkSr2XFgqe-kzzlKTlv1VT7-TlAc0PcX7nFzbKlHypwbpU3AWUAJgUx%20B519B449-1D6F-4751-8C08-B881051D1560&rnd=RND)[iframe](cid:frame-326FC96558F7D382F1A3DD9F2B181B74@mhtml.blink)[iframe](cid:frame-1C8091248904C8986C0802E4E3E7F5EA@mhtml.blink)![](https://ad.turn.com/r/cs?pid=1&gdpr=0&gdpr_consent=)![](https://pmp.mxptint.net/sn.ashx?&gdpr=0&gdpr_consent=)\
\
t.adx.opera.com\
\
# This site can’t be reached\
\
**t.adx.opera.com** unexpectedly closed the connection.\
\
Try:\
\
- Checking the connection\
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)\
\
ERR\_CONNECTION\_CLOSED\
\
Reload\
\
\
Details\
\
\
Check your Internet connection\
\
Check any cables and reboot any routers, modems, or other network\
devices you may be using.\
\
Allow Chrome to access the network in your firewall or antivirus\
settings.\
\
If it is already listed as a program allowed to access the network, try\
removing it from the list and adding it again.\
\
If you use a proxy server…\
\
Go to\
the Chrome menu >\
Settings\
>\
Show advanced settings…\
>\
Change proxy settings…\
and make sure your configuration is set to "no proxy" or "direct."\
\
**t.adx.opera.com** unexpectedly closed the connection.\
\
![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)\
\
a.tribalfusion.com\
\
# This site can’t be reached\
\
The webpage at **https://a.tribalfusion.com/i.match?p=b11&redirect=https%3A//simage2.pubmatic.com/AdServer/Pug%3Fvcode%3Dbz0yJnR5cGU9MSZjb2RlPTMzMjYmdGw9MTI5NjAw%26piggybackCookie%3D%24TF\_USER\_ID\_ENC%24&u=${PUBMATIC\_UID}** might be temporarily down or it may have moved permanently to a new web address.\
\
ERR\_SOCKET\_NOT\_CONNECTED\
\
The webpage at **https://a.tribalfusion.com/i.match?p=b11&redirect=https%3A//simage2.pubmatic.com/AdServer/Pug%3Fvcode%3Dbz0yJnR5cGU9MSZjb2RlPTMzMjYmdGw9MTI5NjAw%26piggybackCookie%3D%24TF\_USER\_ID\_ENC%24&u=${PUBMATIC\_UID}** might be temporarily down or it may have moved permanently to a new web address.\
\
![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)\
\
[iframe](cid:frame-63D3A4C396D505021647C2BF359953CC@mhtml.blink)![](https://creativecdn.com/cm-notify?pi=pubmatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-2D83FECB83021F9DE350AC654692F4AC@mhtml.blink)![](https://c1.adform.net/serving/cookie/match?party=14&redirect=https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTI4NzUmdGw9NDMyMDA=&piggybackCookie=[PLACE%20YOUR%20PIGGYBACK%20COOKIES%20HERE]&gdpr=0&gdpr_consent=)[iframe](cid:frame-77344B3A20B315217B5060CBEE3FFC77@mhtml.blink)\
\
![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=u_3b6f1303-8259-4a72-a746-ce4d79768656)\
\
![](https://secure.adnxs.com/getuid?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=46&external_user_id=$UID&us_privacy=1YNY)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876H8AoIp4AEGpxAU15tQAAChkAAAAB?gdpr_consent=&us_privacy=1YNY&gdpr=&gpp=&gpp_sid=)![](https://match.prod.bidr.io/cookie-sync/ie?us_privacy=1YNY)![](https://cms.quantserve.com/pixel/p-Z8PuJEk6U7Hyq.gif?idmatch=0&us_privacy=1YNY)[iframe](cid:frame-BF2411645625D83B723BA8EC97B875D9@mhtml.blink)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D&us_privacy=1YNY)![](https://dmp.brand-display.com/cm/api/index?cm_dsp_id=191&cm_user_id=%3cIndex_user_id%3e&us_privacy=1YNY)![](https://ib.adnxs.com/getuid?https://dsum.casalemedia.com/crum?cm_dsp_id=190&external_user_id=$UID&us_privacy=1YNY)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=Z876H8AoIp4AEGpxAU15tQAA%262585)\
\
![](https://sync.crwdcntrl.net/qmap?c=2700&tp=UNDR&gdpr=&gdpr_consent=&tpid=2snv2xrpk2tgks9t9febytg04)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3484&partner_device_id=2snv2xrpk2tgks9t9febytg04)![](https://idsync.rlcdn.com/403716.gif?partner_uid=2snv2xrpk2tgks9t9febytg04)![](https://dpm.demdex.net/ibs:dpid=152416&dpuuid=2snv2xrpk2tgks9t9febytg04)![](https://prebid.production.adthrive.com/setuid?bidder=undertone&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=2snv2xrpk2tgks9t9febytg04)![](https://ups.analytics.yahoo.com/ups/58545/occ?us_privacy=1YNY)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D&us_privacy=1YNY)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID&us_privacy=1YNY)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776&us_privacy=1YNY)\
\
User-Sync\
\
![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=&us_privacy=1YNY)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D&us_privacy=1YNY)\
\
![](https://pbs.yahoo.com/setuid?bidder=triplelift&uid=4502483167375708887418&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://p.rfihub.com/cm?pub=36497&in=1&gdpr=0&gdpr_consent=)![](https://match.deepintent.com/usersync/140?gdpr=0&gdpr_consent=)![](https://t.adx.opera.com/pub/sync?pubid=pub11876326796352)![](https://csync.loopme.me/?pubid=11002&redirect=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D6126%26xuid%3D%7Bdevice_id%7D%26dongle%3D9e4f%26gdpr=0%26gdpr_consent=)![](https://c1.adform.net/serving/cookie/match?party=1245&gdpr=0&gdpr_consent=)![](https://cs.admanmedia.com/d95cb18405bc0118170f698389c9f696.gif?puid=4502483167375708887418&gdpr=0&gdpr_consent=&ccpa=${CCPA})![](https://trc.taboola.com/sg/TripleliftSCoD/1/cm?gdpr=0&gdpr_consent=&redirect=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D7772%26xuid%3D%3CTUID%3E%26dongle%3Dtbla)![](https://bh.contextweb.com/bh/sync/3lift?rurl=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D2636%26xuid%3D%25%25VGUID%25%25%26dongle%3D8bee%26gdpr=0%26gdpr_consent=)![](https://sid.storygize.net/ccm/9779a491-75d6-4ad2-92bd-2f159c9892ab)\
\
Pixels![](https://x.bidswitch.net/sync?ssp=openx)![](https://id.rlcdn.com/709996.gif)![](https://idpix.media6degrees.com/orbserv/hbpix?pixId=856286&pcv=125&ptid=23&tpuv=00&tpu=c6ae4b51-a598-587f-1bd9-ef47c16529ae)![](https://sync.srv.stackadapt.com/sync?nid=268)![](https://b1sync.zemanta.com/usersync/openx?puid=41cea49d-5688-4ccb-bbc3-3876c7b8b717&cb=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D560843120%26val%3D__ZUID__)![](https://rtb.openx.net/sync/dds)\
\
![](https://sync.crwdcntrl.net/qmap?c=2700&tp=UNDR&gdpr=&gdpr_consent=&tpid=2snv2xrpk2tgks9t9febytg04)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3484&partner_device_id=2snv2xrpk2tgks9t9febytg04)![](https://idsync.rlcdn.com/403716.gif?partner_uid=2snv2xrpk2tgks9t9febytg04)![](https://dpm.demdex.net/ibs:dpid=152416&dpuuid=2snv2xrpk2tgks9t9febytg04)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=125&redir=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D54%26uid%3D%7BuserId%7D)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)\
\
User-Sync\
\
![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)\
\
![](https://loadm.exelator.com/load/?p=204&g=1145&j=0&utid=2snv2xrpk2tgks9t9febytg04)![](https://sync.crwdcntrl.net/qmap?c=2700&tp=UNDR&gdpr=&gdpr_consent=&tpid=2snv2xrpk2tgks9t9febytg04)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3484&partner_device_id=2snv2xrpk2tgks9t9febytg04)![](https://idsync.rlcdn.com/403716.gif?partner_uid=2snv2xrpk2tgks9t9febytg04)![](https://dpm.demdex.net/ibs:dpid=152416&dpuuid=2snv2xrpk2tgks9t9febytg04)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)\
\
User-Sync\
\
![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)\
\
Pixels![](https://x.bidswitch.net/sync?ssp=openx)![](https://id.rlcdn.com/709996.gif)![](https://idpix.media6degrees.com/orbserv/hbpix?pixId=856286&pcv=125&ptid=23&tpuv=00&tpu=c6ae4b51-a598-587f-1bd9-ef47c16529ae)![](https://sync.srv.stackadapt.com/sync?nid=268)![](https://b1sync.zemanta.com/usersync/openx?puid=41cea49d-5688-4ccb-bbc3-3876c7b8b717&cb=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D560843120%26val%3D__ZUID__)![](https://rtb.openx.net/sync/dds)\
\
User-Sync\
\
![](https://pbs.yahoo.com/setuid?bidder=triplelift&uid=4502483167375708887418&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://p.rfihub.com/cm?pub=36497&in=1&gdpr=0&gdpr_consent=)![](https://match.deepintent.com/usersync/140?gdpr=0&gdpr_consent=)![](https://t.adx.opera.com/pub/sync?pubid=pub11876326796352)![](https://csync.loopme.me/?pubid=11002&redirect=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D6126%26xuid%3D%7Bdevice_id%7D%26dongle%3D9e4f%26gdpr=0%26gdpr_consent=)![](https://c1.adform.net/serving/cookie/match?party=1245&gdpr=0&gdpr_consent=)![](https://cs.admanmedia.com/d95cb18405bc0118170f698389c9f696.gif?puid=4502483167375708887418&gdpr=0&gdpr_consent=&ccpa=${CCPA})![](https://trc.taboola.com/sg/TripleliftSCoD/1/cm?gdpr=0&gdpr_consent=&redirect=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D7772%26xuid%3D%3CTUID%3E%26dongle%3Dtbla)![](https://bh.contextweb.com/bh/sync/3lift?rurl=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D2636%26xuid%3D%25%25VGUID%25%25%26dongle%3D8bee%26gdpr=0%26gdpr_consent=)![](https://sid.storygize.net/ccm/9779a491-75d6-4ad2-92bd-2f159c9892ab)

## D3.js Pie Chart Guide
Note

* * *

It is of interest to note that pie chart and
[donut chart](https://d3-graph-gallery.com/donut.html) are built using exactly the same
process in d3.js. Thus, you probably want to visit the
[donut section](https://d3-graph-gallery.com/donut.html) for more examples


[Donut chart section](https://d3-graph-gallery.com/donut.html)

Step by step

* * *

Building a pie chart in d3.js always start by using the
`d3.pie()` function. This function transform the
value of each group to a radius that will be displayed
on the chart. This radius is then provided to the
[d3.arc()](https://d3-graph-gallery.com/graph/shape.html#myarc) function that draws on
arc per group.


[Most basic\\
\\
* * *\\
\\
The most basic pie chart you can do in d3.js. Keeping only\\
the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/pie_basic.png)](https://d3-graph-gallery.com/graph/pie_basic.html)

[Add annotation\\
\\
* * *\\
\\
How to use the centroid() function to add labels at the\\
right position of each slice.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/pie_annotation.png)](https://d3-graph-gallery.com/graph/pie_annotation.html)

[Data input selection\\
\\
* * *\\
\\
Have a smooth transition between 2 datasets. Note that the\\
number of group can even be different from one dataset to\\
the other.\\
\\
\\
![a pie chart with input data selector](https://d3-graph-gallery.com/img/graph/pie_changeData.gif)](https://d3-graph-gallery.com/graph/pie_changeData.html)

Selection of blocks

* * *

A selection of examples showing the application of the basic concept
to real life dataset.


[Pie chart with annotation\\
\\
* * *\\
\\
A pie chart by Mike Bostock with fancy annotation for each\\
group.\\
\\
\\
![network graph les miserables](https://d3-graph-gallery.com/img/block/block_pieChart.png)](https://beta.observablehq.com/@mbostock/d3-pie-chart)

[Clean layout\\
\\
* * *\\
\\
Clean labeling of groups. Use d3 v3 though.\\
\\
\\
![network graph les miserables](https://d3-graph-gallery.com/img/block/block_pieChartAnimation.png)](http://bl.ocks.org/dbuezas/9306799)

[Pie chart with animation\\
\\
* * *\\
\\
Good illustration on how to animate transition between 2\\
input data.\\
\\
\\
![network graph les miserables](https://d3-graph-gallery.com/img/block/block_pieChartAnim.png)](https://bl.ocks.org/tezzutezzu/c2653d42ffb4ecc01ffe2d6c97b2ee5e)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Tree150.png)](https://d3-graph-gallery.com/treemap.html)

Treemap

[![](https://d3-graph-gallery.com/img/section/Doughnut150.png)](https://d3-graph-gallery.com/donut.html)

Doughnut

[![](https://d3-graph-gallery.com/img/section/Pie150.png)](https://d3-graph-gallery.com/pie.html)

Pie chart

[![](https://d3-graph-gallery.com/img/section/Dendrogram150.png)](https://d3-graph-gallery.com/dendrogram.html)

Dendrogram

[![](https://d3-graph-gallery.com/img/section/CircularPacking150.png)](https://d3-graph-gallery.com/circularpacking.html)

Circular packing

[![](https://d3-graph-gallery.com/img/section/Sunburst150.png)](https://d3-graph-gallery.com/sunburst.html)

Sunburst

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-CvIjVL0ZKkZvEActmXv9SM4D9z16Ai8ooFMB4pmElQg6lvT3JL1n1so4UwZqHIvzF6XFJ9K6q6Iilq47tUBrNCGcDZpdDXLnCNqkFDO8WWvNmlvLc)

![](https://cm.g.doubleclick.net/pixel?google_nid=casale_media2_dsp_secure&google_cm&google_dbm)![](https://dsum-sec.casalemedia.com/rrum?ixi=0&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dsp_secure%26google_cm%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_cm&google_dbm)![](https://ib.adnxs.com/getuid?https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_hm=${BASE64_UID_ENC})

yt\_dynamic

![](https://s0.2mdn.net/ads/richmedia/studio/23406897/23406897_20240916075050894_YTTVLogo_LT_2x_min.png)![](https://s0.2mdn.net/ads/richmedia/studio/23406897/23406897_20241112121017419_YouTube_YTV-Hulk-Template_ShowTitleEvergreen_970x250_TitleTVShowLogos_2x.png)

Get YouTube TV and

don’t miss your favorite

reality shows!

Try it free

New users only. Terms apply. Cancel anytime

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaQbzyN2ChLrfgJXKsLJ6-AyRwiUjftYYjZ58LZFufG3gJrYx9N0o_w4YuvGAHMffhIFQwKSR40h2Cgr8NHT2SA_t9f-7w)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-Ame7VuBSthAXK8iwc80Tmx3QFN9ZZ92OyRhxnjnyu78V9tr9tO-b37ww7LMvqIXSfHINE_OpZudSDCJEo139zG3OhmYsIB8jWaVEgy2NKPdptiK_A)

![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_dbm)![](https://us-u.openx.net/w/1.0/cm?id=9ca165a9-d9fe-2ff6-d83d-d145a80b0d37&r=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dopenx%26google_hm%3D%7Bopenx_uuid_base64%7D)![](https://cm.g.doubleclick.net/pixel?google_nid=teadstv_dbm&google_cm&google_dbm)![](https://sync.teads.tv/um?eid=3&uid=&fb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dteadstv_dbm%26google_hm%3D%5BVID_B64%5D)

[![](https://static.adsafeprotected.com/IAS_PassbackAds_300x250.png)](https://go.integralads.com/ad-blocking-explainer/?utm_campaign=GLB-g&utm_medium=gdisplay&utm_source=gsites)

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaT5ixhlU1FBt4CqYQ757ay__Zg_M1pKge6AcwIGqBeZZDm4s17H2GN7EWj2cYfiJL2yGJu8GSmbAB9yEIUDzt-b55lLUg)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=2818643070844962442070&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=2818643070844962442070)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/2818643070844962442070?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=2818643070844962442070&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=2818643070844962442070)

![](https://pm.w55c.net/ping_match.gif?st=TRIPLELIFT&rurl=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D6019%26xuid%3D_wfivefivec_%26dongle%3D465e%26gdpr=0%26gdpr_consent=)![](https://sync.mathtag.com/sync/img?mt_exid=62&redir=%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3690%26xuid%3D%5BMM_UUID%5D%26dongle%3D3995%26gdpr=0%26gdpr_consent=)![](https://sync-tm.everesttech.net/upi/pid/RVF22VSl?redir=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3657%26xuid%3D%24%7BTM_USER_ID%7D%26dongle%3D3c0a%26gdpr=0%26gdpr_consent=)![](https://cms.quantserve.com/pixel/p-VtN-a_yLd-GB-.gif?idmatch=0&gdpr=0&gdpr_consent=)![](https://us.creativecdn.com/cm-notify?pi=triplelift&gdpr=0&gdpr_consent=)![](https://dis.criteo.com/dis/usersync.aspx?r=44&p=75&cp=triplelift&cu=1&gdpr=0&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&url=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D2711%26xuid%3D%40%40CRITEO_USERID%40%40%26dongle%3D013b)![](https://ib.adnxs.com/getuid?https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3335%26xuid%3D%24UID%26dongle%3D4d58%26gdpr=0%26gdpr_consent=)![](https://rtb.adentifi.com/CookieSyncTripleLift?gdpr=0&gdpr_consent=)![](https://ib.adnxs.com/prebid/setuid?bidder=triplelift_native&gdpr=0&gdpr_consent=&uid=2818643070844962442070)![](https://ib.adnxs.com/prebid/setuid?bidder=triplelift&gdpr=0&gdpr_consent=&uid=2818643070844962442070)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=2818643070844962442070)

User-Sync

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.5053673323975407)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_2b70eece-5e1b-49ac-90bc-f9d56be1d3d9&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV8yYjcwZWVjZS01ZTFiLTQ5YWMtOTBiYy1mOWQ1NmJlMWQzZDk=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV8yYjcwZWVjZS01ZTFiLTQ5YWMtOTBiYy1mOWQ1NmJlMWQzZDk=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-29819D476D05479139FDA500405AED13@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-B210A432DF1229628F28D476E30B222B@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_2b70eece-5e1b-49ac-90bc-f9d56be1d3d9&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_2b70eece-5e1b-49ac-90bc-f9d56be1d3d9)

![](https://match.adsrvr.org/track/cmf/casale)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876L8AoImoAK46nAN4adQAACAkAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876L8AoImoAK46nAN4adQAA%262057&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://tr.blismedia.com/v1/api/sync/indexexchange?gdpr=&userId=Z876L8AoImoAK46nAN4adQAA%262057&gpp=&gpp_sid=&us_privacy=&gdpr_consent=)![](https://c1.adform.net/serving/cookie/match?party=29)![](https://d.adroll.com/cm/index/tp_out?advertisable=3GMDZMBFQREVBC75SYYKWH)![](https://creativecdn.com/cm-notify?pi=index&gpdr=&gdpr_consent=&us_privacy=&user_id=Z876L8AoImoAK46nAN4adQAA%262057)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876L8AoImoAK46nAN4adQAACAkAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=8b734781-ac19-471c-a4cc-b952d3954551)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=OGI3MzQ3ODEtYWMxOS00NzFjLWE0Y2MtYjk1MmQzOTU0NTUx)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://pm.w55c.net/ping_match.gif?st=ShareThrough&rurl=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DYnUBs5Yz9Zqjy9VCcoCxquFP%26source_user_id%3D_wfivefivec_)![](https://secure.adnxs.com/getuid?https://match.sharethrough.com/sync/v1?source_id=0e8893f90b606c9c5d33f1be&gdpr=0&gdpr_consent=&source_user_id=$UID)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=33A27975-5E39-42F2-A344-59986AADEA37)[iframe](cid:frame-DAADF72E4AE64B60A4A2D6F21D27BAF5@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=33A27975-5E39-42F2-A344-59986AADEA37&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=33A27975-5E39-42F2-A344-59986AADEA37&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=M6J5dV45QvKjRFmYaq3qNw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=33A27975-5E39-42F2-A344-59986AADEA37&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/33A27975-5E39-42F2-A344-59986AADEA37?gdpr=0&gdpr_consent=)[iframe](cid:frame-4670FCD55214C1FD9303D2CFE555D550@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIfRppGF7zo)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElmUnBwR0Y3em8=)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-5CD77D23BE97B23E195D320F7D7D3E6D@mhtml.blink)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=5c548f43-adeb-43f0-a584-7bf44377b87d%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)

Topics Frame

Pixels![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/d6c2de99-ce88-eb5d-d301-e852668d2239?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=4205b8dd-5e24-7914-e2d6-fea799daef70&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NmU2YTZiMTctOTc1My0yN2IwLWY3MzYtYTQxZTUzMzgyMTEw)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

User-Sync

Pixels![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/d6c2de99-ce88-eb5d-d301-e852668d2239?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=4205b8dd-5e24-7914-e2d6-fea799daef70&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NmU2YTZiMTctOTc1My0yN2IwLWY3MzYtYTQxZTUzMzgyMTEw)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=2818643070844962442070&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=2818643070844962442070)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)

![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=12776** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=12776** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=2818643070844962442070&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=2818643070844962442070)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)

![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=125&redir=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D54%26uid%3D%7BuserId%7D)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=12776** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=12776** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

## D3.js Word Cloud
HelloEverybodyHowAreYouTodayItIsAIIn

##### Steps:

- The Html part of the code just creates a
`div` that will be modified by d3 later on.


- The first part of the javascript code set a
`svg` area. It specify the chart size and its
margin. [Read more](https://d3-graph-gallery.com/graph/wordcloud_basic).


- In this example dummy data are created. It's a vector
format. See [here](https://d3-graph-gallery.com/graph/wordcloud_basic) to work from a
`.csv`

- The wordcloud is then drawn thanks to the
`d3-cloud` plugin. The first step is to set the
`layout`. Basically, it runs an algorithm that
compute the position of each word.


- The built object has all the requested features to draw
words on by one.


- See the [next post](https://d3-graph-gallery.com/graph/wordcloud_custom.html) for
customization


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Load d3-cloud -->
<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/d3.layout.cloud.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// List of words
var myWords = ["Hello", "Everybody", "How", "Are", "You", "Today", "It", "Is", "A", "Lovely", "Day", "I", "Love", "Coding", "In", "My", "Van", "Mate"]

// set the dimensions and margins of the graph
var margin = {top: 10, right: 10, bottom: 10, left: 10},
    width = 450 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Constructs a new cloud layout instance. It run an algorithm to find the position of words that suits your requirements
var layout = d3.layout.cloud()
  .size([width, height])
  .words(myWords.map(function(d) { return {text: d}; }))
  .padding(10)
  .fontSize(60)
  .on("end", draw);
layout.start();

// This function takes the output of 'layout' above and draw the words
// Better not to touch it. To change parameters, play with the 'layout' variable above
function draw(words) {
  svg
    .append("g")
      .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
      .selectAll("text")
        .data(words)
      .enter().append("text")
        .style("font-size", function(d) { return d.size + "px"; })
        .attr("text-anchor", "middle")
        .attr("transform", function(d) {
          return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
        })
        .text(function(d) { return d.text; });
}
</script>
```

### Related blocks →

- _Example section of d3-cloud documentation -_ by
[Jason Davies](https://github.com/jasondavies/d3-cloud/blob/master/examples/browserify.js)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.6774232789161487)

Prebid User Sync

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=93a58aec-9d0e-4ba9-a2eb-12b68641d648)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/3ebc6367-b43d-ea09-f8b0-c456f84dd98c?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=aa7b0523-2491-7840-c967-d2a3071a14c5&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ODYxNGQ2ZTktZWRlNi0yNmU0LWRjODctODgxYWNkZjhkYWE1)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=3571319329284321298685&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=3571319329284321298685)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/3571319329284321298685?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=3571319329284321298685&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3571319329284321298685)

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_9b0c4824-5d78-49b1-80fd-10851af20670&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-E3E019DC8D857B01F6BCD647D97342F3@mhtml.blink)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-00BB9ECB035A895555DAA34CF9533274@mhtml.blink)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)[iframe](cid:frame-7CB2D0331CDA4F9D1DD0DCA7FC678F51@mhtml.blink)[iframe](cid:frame-04C2C358CB3D28700D9505756403D46D@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_9b0c4824-5d78-49b1-80fd-10851af20670)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_9b0c4824-5d78-49b1-80fd-10851af20670&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-BDDD4F1FE1E76F1E0FE3574B2A5CEF96@mhtml.blink)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=09674FFE-26B9-41B7-B1DF-62FE424B95B3)[iframe](cid:frame-C8CF47F962011CD8B270BF5FA9A25A00@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=09674FFE-26B9-41B7-B1DF-62FE424B95B3&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=09674FFE-26B9-41B7-B1DF-62FE424B95B3&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=MDk2NzRGRkUtMjZCOS00MUI3LUIxREYtNjJGRTQyNEI5NUIz&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=CWdP_ia5Qbex32L-QkuVsw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=09674FFE-26B9-41B7-B1DF-62FE424B95B3&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/09674FFE-26B9-41B7-B1DF-62FE424B95B3?gdpr=0&gdpr_consent=)[iframe](cid:frame-26F43DB8216A9DBE323B3298E3AB61AE@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)[iframe](cid:frame-91CFE5BC6872D2693CFE0E945C8A7FC4@mhtml.blink)[iframe](cid:frame-3CE2DB27F20DD33F0ED5BCCCC2D3DB96@mhtml.blink)

[iframe](cid:frame-ACCE71570C3112A946EEB918708D22CC@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-F36BFE49E868E3219120ED20047FCA14@mhtml.blink)[iframe](cid:frame-25D15E5F886E02D4DD095EFDB7AFC826@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_9b0c4824-5d78-49b1-80fd-10851af20670&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_9b0c4824-5d78-49b1-80fd-10851af20670)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=704fd3f8-438e-480a-b179-bfe30ffb864a)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=NzA0ZmQzZjgtNDM4ZS00ODBhLWIxNzktYmZlMzBmZmI4NjRh)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://match.deepintent.com/usersync/158)![](https://sync.1rx.io/usersync2/rmpssp?sub=sharethrough)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=f2ad795e-383b-c3ba-0969-50346f29df25)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=ac0576df-7f96-45c7-8386-4a753496d5c9)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)

[iframe](cid:frame-39C4751F4CD629008BF2B3536380A0CB@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-871514E8A8D8A5B4A2141C6BC1E86D8F@mhtml.blink)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=2b7dd73b-8ff0-4119-87fc-744bd620b1e2%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)

![](https://pagead2.googlesyndication.com/pagead/sodar?id=sodar2&v=232&li=gpt_m202503040101&jk=2053238379238949&rc=)

Topics Frame

## D3.js Bubble Maps
From a `geoJson` file

* * *

Input data for maps is `geoJson` format. D3.js works very
well to display this kind of information using `path`.


[Most basic\\
\\
* * *\\
\\
The most basic bubble map you can do in d3.js. Keeping only\\
the core code.\\
\\
Input data format: geoJson +\\
javascript object\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/bubblemap_basic.png)](https://d3-graph-gallery.com/graph/bubblemap_basic.html)

[Add tooltip\\
\\
* * *\\
\\
Pretty useful to add a tooltip to add more information\\
concerning the marker.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/bubblemap_tooltip.gif)](https://d3-graph-gallery.com/graph/bubblemap_tooltip.html)

[Circle features\\
\\
* * *\\
\\
How to map circle size and color to data?\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/bubblemap_circleFeatures.png)](https://d3-graph-gallery.com/graph/bubblemap_circleFeatures.html)

[Legend\\
\\
* * *\\
\\
How to build a nice legend to illustrate bubble size.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/bubble_legend.png)](https://d3-graph-gallery.com/graph/bubble_legend.html)

[Group selection\\
\\
* * *\\
\\
Add a button to select displayed group, with smooth\\
transition.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/bubblemap_buttonControl.gif)](https://d3-graph-gallery.com/graph/bubblemap_buttonControl.html)

Template

* * *

A clean template based on my
[#surf project](https://www.data-to-viz.com/story/GPSCoordWithoutValue.html). I harvested tweet containing the #surf hashtag for ~ 1 year
and geocoded people home location. Here is where the surfers live! You
can read more about this project
[here](https://www.data-to-viz.com/story/GPSCoordWithoutValue.html).


[See code](https://d3-graph-gallery.com/graph/bubblemap_template.html) WHERE SURFERS LIVENumber of #surf tweet harvested in a year100500020000

Using the `Leaflet.js` open source library


* * *

[Leaflet](https://leafletjs.com/examples.html) is an
open-source JavaScript library for mobile-friendly interactive maps.
Awesome for background maps. See the range of background tiles you can
use
[here](https://leaflet-extras.github.io/leaflet-providers/preview/)
and [here](https://wiki.openstreetmap.org/wiki/Tiles).


[Basic bubblemap with leaflet\\
\\
* * *\\
\\
A very basic example showing how to add circles with d3 on\\
top of the leaflet.js background.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/bubblemap_leaflet_basic.png)](https://d3-graph-gallery.com/graph/bubblemap_leaflet_basic.html)

Selection of blocks

* * *

A few blocks with more complicated codes to showcase the possibility
of the `d3-sankey ` plugin


[Mike's tutorial on bubble map\\
\\
* * *\\
\\
A complete tutorial on bubble map by Mike Bostock, d3.js\\
creator.\\
\\
\\
![All d3 map projection](https://d3-graph-gallery.com/img/block/block_bubblemapMike.png)](https://bost.ocks.org/mike/bubble-map/)

[Leaflet documentation\\
\\
* * *\\
\\
Link to the leaflet website: awesome doc for awesome maps.\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_backgroundmapLeaflet.png)](https://leafletjs.com/)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Map150.png)](https://d3-graph-gallery.com/backgroundmap.html)

Map

[![](https://d3-graph-gallery.com/img/section/Choropleth150.png)](https://d3-graph-gallery.com/choropleth.html)

Choropleth

[![](https://d3-graph-gallery.com/img/section/MapHexbin150.png)](https://d3-graph-gallery.com/hexbinmap.html)

Hexbin map

[![](https://d3-graph-gallery.com/img/section/Cartogram150.png)](https://d3-graph-gallery.com/cartogram.html)

Cartogram

[![](https://d3-graph-gallery.com/img/section/ConnectedMap150.png)](https://d3-graph-gallery.com/connectionmap.html)

Connection

[![](https://d3-graph-gallery.com/img/section/BubbleMap150.png)](https://d3-graph-gallery.com/bubblemap.html)

Bubble map

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-BhZZaOfgKSYwR35Eg0mJrjRfcTW6_ZE5c-caAIzCaCI7Q96wRJoTUHSfovBoTMKIzSaTAsovxMtRhtkAbHImk3cnFYcQqMQG8FIkmhVbfoEzc_OAU)

googleads.g.doubleclick.net

# This site can’t be reached

**googleads.g.doubleclick.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**googleads.g.doubleclick.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://ad.doubleclick.net/ddm/activity/attribution_src_register; )

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.8164801250855629)

Prebid User Sync

![](https://idsync.rlcdn.com/420486.gif?partner_uid=05746878-F287-4D95-B13E-1295186401FC)

c1.adform.net

# This site can’t be reached

**c1.adform.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**c1.adform.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.onaudience.com/?partner=214&mapped=05746878-F287-4D95-B13E-1295186401FC&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=05746878-F287-4D95-B13E-1295186401FC&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=MDU3NDY4NzgtRjI4Ny00RDk1LUIxM0UtMTI5NTE4NjQwMUZD&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=BXRoePKHTZWxPhKVGGQB_A%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=05746878-F287-4D95-B13E-1295186401FC&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/05746878-F287-4D95-B13E-1295186401FC?gdpr=0&gdpr_consent=)[iframe](cid:frame-F2ED0198E182281100BDE3116C8884C5@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)

match.deepintent.com

# This site can’t be reached

The webpage at **https://match.deepintent.com/usersync/141?gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.deepintent.com/usersync/141?gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTc4JnRsPTE1NzY4MDA=&piggybackCookie=$UID&gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTc4JnRsPTE1NzY4MDA=&piggybackCookie=$UID&gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pubmatic-match.dotomi.com/match/bounce/current?networkId=17100&version=1&nuid=05746878-F287-4D95-B13E-1295186401FC&gdpr=0&gdpr_consent=)[iframe](cid:frame-2D68E230C4F05F992EE3834F4BD2D347@mhtml.blink)

sync-tm.everesttech.net

# This site can’t be reached

The webpage at **https://sync-tm.everesttech.net/ct/upi/pid/b9pj45k4?redir=https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MjE5MSZ0bD0yNTkyMDA=&piggybackCookie=${TM\_USER\_ID}&gdpr=0&gdpr\_consent=&\_test=Z876MQADHzkcnQAL** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-tm.everesttech.net/ct/upi/pid/b9pj45k4?redir=https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MjE5MSZ0bD0yNTkyMDA=&piggybackCookie=${TM\_USER\_ID}&gdpr=0&gdpr\_consent=&\_test=Z876MQADHzkcnQAL** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://rtb.adentifi.com/CookieSyncPubMatic&gdpr=0&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=beeswaxio&google\_sc=&google\_hm=QUFFbU9VN1BuZlFBQUJlNUU0MkRGdw&gdpr=0&gdpr\_consent=&bee\_sync\_partners=pp%2Csas%2Cpm&bee\_sync\_current\_partner=adx&bee\_sync\_initiator=pm&bee\_sync\_hop\_count=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=beeswaxio&google\_sc=&google\_hm=QUFFbU9VN1BuZlFBQUJlNUU0MkRGdw&gdpr=0&gdpr\_consent=&bee\_sync\_partners=pp%2Csas%2Cpm&bee\_sync\_current\_partner=adx&bee\_sync\_initiator=pm&bee\_sync\_hop\_count=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=3&gdpr=0&gdpr_consent=)

rtb.adstanding.com

# This site can’t be reached

The webpage at **https://rtb.adstanding.com/ssp/bidswitch/cookie?bidswitch\_ssp\_id=pubmatic&bidswitch\_custom\_parameter=478884a6-d6ab-4b4f-a571-62135b1f23b2#US\_PRIVACY** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://rtb.adstanding.com/ssp/bidswitch/cookie?bidswitch\_ssp\_id=pubmatic&bidswitch\_custom\_parameter=478884a6-d6ab-4b4f-a571-62135b1f23b2#US\_PRIVACY** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

image2.pubmatic.com

# This site can’t be reached

The webpage at **https://image2.pubmatic.com/AdServer/Pug?gdpr=0&vcode=bz0yJnR5cGU9MSZjb2RlPTExMTMmdGw9NDMyMDA=&piggybackCookie=nLeByczh0Z2HttWZmbjPnJzm1JiHt4HPmLZeoc0l** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://image2.pubmatic.com/AdServer/Pug?gdpr=0&vcode=bz0yJnR5cGU9MSZjb2RlPTExMTMmdGw9NDMyMDA=&piggybackCookie=nLeByczh0Z2HttWZmbjPnJzm1JiHt4HPmLZeoc0l** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-D4F200DBBD26DAA76B9A6EB83AE8B42B@mhtml.blink)[iframe](cid:frame-655585B3B9A1DFFE7B57460EFCDF30E6@mhtml.blink)![](https://ad.turn.com/r/cs?pid=1&gdpr=0&gdpr_consent=)![](https://pmp.mxptint.net/sn.ashx?&gdpr=0&gdpr_consent=)[iframe](cid:frame-517A187821BDC16082F5C66D77A6CD30@mhtml.blink)

a.tribalfusion.com

# This site can’t be reached

The webpage at **https://a.tribalfusion.com/i.match?p=b11&redirect=https%3A//simage2.pubmatic.com/AdServer/Pug%3Fvcode%3Dbz0yJnR5cGU9MSZjb2RlPTMzMjYmdGw9MTI5NjAw%26piggybackCookie%3D%24TF\_USER\_ID\_ENC%24&u=${PUBMATIC\_UID}** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://a.tribalfusion.com/i.match?p=b11&redirect=https%3A//simage2.pubmatic.com/AdServer/Pug%3Fvcode%3Dbz0yJnR5cGU9MSZjb2RlPTMzMjYmdGw9MTI5NjAw%26piggybackCookie%3D%24TF\_USER\_ID\_ENC%24&u=${PUBMATIC\_UID}** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-B030AD1C4BD89624FD993C3BDE02B610@mhtml.blink)![](https://creativecdn.com/cm-notify?pi=pubmatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-CC92CC73D640F0817B3CC43B323CBCCA@mhtml.blink)![](https://c1.adform.net/serving/cookie/match?party=14&redirect=https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTI4NzUmdGw9NDMyMDA=&piggybackCookie=[PLACE%20YOUR%20PIGGYBACK%20COOKIES%20HERE]&gdpr=0&gdpr_consent=)[iframe](cid:frame-C7345019872DDC04AA1ED7E0C7E65D4D@mhtml.blink)[iframe](cid:frame-03013F490B23891AB3EDF148FC16CF1F@mhtml.blink)

User-Sync

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_979dae13-9ca2-4741-89da-09f275cd340b&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-79762CEFA6CE1DE0091D23601A10FB9F@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV85NzlkYWUxMy05Y2EyLTQ3NDEtODlkYS0wOWYyNzVjZDM0MGI=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV85NzlkYWUxMy05Y2EyLTQ3NDEtODlkYS0wOWYyNzVjZDM0MGI=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-B226F562F080F5A842EBF61C75C0C58F@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-09ADB3E587A7D6527AF90B44E32CDC76@mhtml.blink)[iframe](cid:frame-0120AEF9DDBFD385222485F761FE4132@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_979dae13-9ca2-4741-89da-09f275cd340b&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_979dae13-9ca2-4741-89da-09f275cd340b)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=e5b582e8-57ce-449c-869e-304eb9ef2dc6)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=ZTViNTgyZTgtNTdjZS00NDljLTg2OWUtMzA0ZWI5ZWYyZGM2)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://secure.adnxs.com/getuid?https://match.sharethrough.com/sync/v1?source_id=0e8893f90b606c9c5d33f1be&gdpr=0&gdpr_consent=&source_user_id=$UID)![](https://cms.quantserve.com/pixel/p-_jQ037pSmtjhN.gif?idmatch=1&gdpr=0&gdpr_consent=)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHI7NCSroOu9)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHI7NCSroOu9&cb=1741617712776&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHI7NCSroOu9)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?ld=1&gdpr=0&cmp\_cs=&us\_privacy=&redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?ld=1&gdpr=0&cmp\_cs=&us\_privacy=&redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=43391677-4f0c-4be3-b322-6ce2ea184069%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)

Topics Frame

## D3.js Treemap Guide
Step by step

* * *

It is important to note that 2 different input formats can be used to build a treemap:


- A `.csv` file with one line per connection in the hierarchy. See [here](https://d3-graph-gallery.com/graph/treemap_basic.html).
- A `.json` file. See [here](https://d3-graph-gallery.com/graph/treemap_json.html)

[Basic: from Csv\\
\\
* * *\\
\\
The most basic treemap you can do in d3.js. Only one level of a hierarchy is represented.\\
\\
Input: csv format\\
\\
![](https://d3-graph-gallery.com/img/graph/treemap_basic.png)](https://d3-graph-gallery.com/graph/treemap_basic.html)

[Basic: from Json\\
\\
* * *\\
\\
The most basic treemap you can do in d3.js.\\
\\
Input: Json format. R code to go from csv to json is provided.\\
\\
![](https://d3-graph-gallery.com/img/graph/treemap_json.png)](https://d3-graph-gallery.com/graph/treemap_json.html)

[Customization\\
\\
* * *\\
\\
Custom your treemap: color, title, padding, value labels, opacity and more.\\
\\
Input: Json\\
\\
![](https://d3-graph-gallery.com/img/graph/treemap_custom.png)](https://d3-graph-gallery.com/graph/treemap_custom.html)

Interactivity

* * *

Two main reasons for using interactivity in treemaps. i/ Switching from one dataset to the other. ii/ building a zoomable treemap that allows to declutter the figure when several levels of hierarchy exist.

Selection of blocks

* * *

A few blocks with more complicated codes to showcase the possibility of d3 for treemaps

[Clean static treemap\\
\\
* * *\\
\\
A clean layout for this static treemap by Mike Bostock. Always good to read d3.js creator's code.\\
\\
![Treemap mike d3](https://d3-graph-gallery.com/img/block/block_treemapMike.png)](https://bl.ocks.org/mbostock/6bbb0a7ff7686b124d80)

[Button and smooth transition\\
\\
* * *\\
\\
A treemap with a button allowing to switch from size to count for rectangle size. Good to learn how to perform a smooth transition.\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_treemapTransitionData.png)](https://bl.ocks.org/ganezasan/52fced34d2182483995f0ca3960fe228)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Tree150.png)](https://d3-graph-gallery.com/treemap.html)

Treemap

[![](https://d3-graph-gallery.com/img/section/Doughnut150.png)](https://d3-graph-gallery.com/donut.html)

Doughnut

[![](https://d3-graph-gallery.com/img/section/Pie150.png)](https://d3-graph-gallery.com/pie.html)

Pie chart

[![](https://d3-graph-gallery.com/img/section/Dendrogram150.png)](https://d3-graph-gallery.com/dendrogram.html)

Dendrogram

[![](https://d3-graph-gallery.com/img/section/CircularPacking150.png)](https://d3-graph-gallery.com/circularpacking.html)

Circular packing

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

Prebid User Sync

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3f6f9095-f5be-4c88-b5f6-2a7e417bf605)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/9276791e-dc8d-ed28-efad-fc9e3f77f9c1?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=06b11f5a-4c21-7f61-de7a-ea6bc0203488&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=MmFkZWNjOTAtODU1Ni0yMWM1LWNiOWEtYjBkMjBhYzJmYWU4)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

User-Sync

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_91ad4f5d-9593-4828-ae50-70d88fda9956&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-700C7E9F58B21A279C09A2896EFEC63E@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-AE6D5F9F7CB3D07DBB8A9517D84AF8C2@mhtml.blink)

[iframe](cid:frame-626DBA90819E9D7D0881D669A84B23D0@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-C3A7B99FDBE2BB9A403C6159C014B005@mhtml.blink)

creativecdn.com

# This site can’t be reached

**creativecdn.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**creativecdn.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_91ad4f5d-9593-4828-ae50-70d88fda9956&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_91ad4f5d-9593-4828-ae50-70d88fda9956)

![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876TsAoIkgAKc9DAOu20AAAB-cAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876TsAoIkgAKc9DAOu20AAAB-cAAAAB&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://dpm.demdex.net/ibs:dpid=23728&dpuuid=Z876TsAoIkgAKc9DAOu20AAA%262023?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://a.tribalfusion.com/i.match?p=b20&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com/crum%3Fcm_dsp_id%3D131%26external_user_id%3D%24TF_USER_ID_ENC%24&cm_callback_url=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum&cm_user_id=Z876TsAoIkgAKc9DAOu20AAA)![](https://tr.blismedia.com/v1/api/sync/indexexchange?gdpr=&userId=Z876TsAoIkgAKc9DAOu20AAA%262023&gpp=&gpp_sid=&us_privacy=&gdpr_consent=)![](https://cm.adgrx.com/bridge?AG_PID=casale&AG_SETCOOKIE)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876TsAoIkgAKc9DAOu20AAAB-cAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=df914c85-6db6-4548-bf91-885300e5ece3)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=ZGY5MTRjODUtNmRiNi00NTQ4LWJmOTEtODg1MzAwZTVlY2Uz)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://match.deepintent.com/usersync/158)![](https://x.bidswitch.net/sync?ssp=sharethrough&user_id=df914c85-6db6-4548-bf91-885300e5ece3&gdpr=0&gdpr_consent=&gdpr_pd=1&us_privacy=&expires=365)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=5e676327-508b-c49b-1e74-68fca813ff68)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=00cf6ca6-1726-42e6-949b-72bdf3acf584)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)

[iframe](cid:frame-65A3988A3A2D07AAF8E24F7B58131681@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

## D3.js Chart Gallery
[Most basic\\
\\
* * *\\
\\
The most basic area chart you can do in d3.js. Keeping only\\
the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/area_basic.png)](https://d3-graph-gallery.com/graph/area_basic.html)

[2d histogram\\
\\
* * *\\
\\
Group two-dimensional points into rectangular bins. Possible\\
thanks to the `d3-rectbin` plugin.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/density2d_histogram2d.png)](https://d3-graph-gallery.com/graph/density2d_histogram2d.html)

[Contour plot\\
\\
* * *\\
\\
Representation of contour polygons computed using marching\\
squares\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/density2d_contour.png)](https://d3-graph-gallery.com/graph/density2d_contour.html)

[Most basic\\
\\
* * *\\
\\
The most basic donut chart you can do in d3.js. Keeping only\\
the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/donut_basic.png)](https://d3-graph-gallery.com/graph/donut_basic.html)

[Most basic\\
\\
* * *\\
\\
The most basic heatmap you can do in d3.js. Keeping only the\\
core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/heatmap_basic.png)](https://d3-graph-gallery.com/graph/heatmap_basic.html)

[Add tooltip to heatmap\\
\\
* * *\\
\\
Add a tooltip that displays the exact value of a cell and\\
whatever other text.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/heatmap_tooltip.gif)](https://d3-graph-gallery.com/graph/heatmap_tooltip.html)

[Ready to go heatmap\\
\\
* * *\\
\\
A customized heatmap, include hover effect, custom axis,\\
title, fancy color palette, tooltip and more\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/heatmap_style.png)](https://d3-graph-gallery.com/graph/heatmap_style.html)

[Visualization of _Les Misérables_\\
\\
* * *\\
\\
Interactive heatmap with possible switch in group order\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/block_heatmap_miserables.png)](https://bost.ocks.org/mike/miserables/)

[Most basic\\
\\
* * *\\
\\
The most basic area chart you can do in d3.js. Keeping only\\
the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/area_basic.png)](https://d3-graph-gallery.com/graph/area_basic.html)

[Most basic\\
\\
* * *\\
\\
The most basic histogram you can do in d3.js. Keeping only the\\
core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/histogram_basic.png)](https://d3-graph-gallery.com/graph/histogram_basic.html)

[Color a specific part\\
\\
* * *\\
\\
Use a simple `if - else` statement to color a part\\
of the histogram.\\
\\
Also show how to add a vertical\\
bar annotation.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/histogram_coloredTail.png)](https://d3-graph-gallery.com/graph/histogram_coloredTail.html)

[Double histogram\\
\\
* * *\\
\\
A double histogram can be handy to compare the distribution of\\
2 variables.\\
\\
Good to see how the\\
`filter()` function works.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/histogram_double.png)](https://d3-graph-gallery.com/graph/histogram_double.html)

[Button to control bin size\\
\\
* * *\\
\\
Add a button that controls bin size. Good example to learn how\\
to create an update function that also update an axis.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/histogram_binSize.gif)](https://d3-graph-gallery.com/graph/histogram_binSize.html)

[Add tooltip\\
\\
* * *\\
\\
Useful to get the threshold of each bar range. Needs to be\\
improved though.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/histogram_tooltip.png)](https://d3-graph-gallery.com/graph/histogram_tooltip.html)

[Most basic\\
\\
* * *\\
\\
The most basic tooltip you can do in d3.js.\\
\\
It just\\
create one tooltip for one circle\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/tooltip_basic.png)](https://d3-graph-gallery.com/graph/tooltip_basic.html)

[HTML in tooltip\\
\\
* * *\\
\\
Learn how to customize your tooltip: you can apply any html\\
code to it!\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/tooltip_html.png)](https://d3-graph-gallery.com/graph/interactivity_tooltip.html)

[Tooltip linked with data\\
\\
* * *\\
\\
This example shows how to create a tooltip that is different\\
for each datapoint\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/scatter_tooltip.png)](https://d3-graph-gallery.com/graph/scatter_tooltip.html)

[Brushing\\
\\
* * *\\
\\
How to apply brushing on a chart to select dots.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/scatter_brush.gif)](https://d3-graph-gallery.com/graph/interactivity_brush.html)

[HTML button types\\
\\
* * *\\
\\
HTML natively offers different types of button: here is a\\
description of them with the associated code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/interactivity_button.png)](https://d3-graph-gallery.com/graph/interactivity_button.html)

[Most basic\\
\\
* * *\\
\\
The most basic transition you can do in d3.js.\\
\\
It just\\
modify the width attribute of a div using d3.js, keeping only\\
the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/transition_basic.gif)](https://d3-graph-gallery.com/graph/histogram_basic.html)

[Pipe several transition\\
\\
* * *\\
\\
Run several transitions one after another. Involves different\\
attributes like color and width.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/transition_pipe.gif)](https://d3-graph-gallery.com/graph/transition_pipe.html)

[Progressive transition\\
\\
* * *\\
\\
This example applies a different `delay` to each\\
element. It gives a progressive transition where elements\\
start moving one by one.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/transition_delay.gif)](https://www.d3-graph-gallery.com/interactivity.html)

[Most basic\\
\\
* * *\\
\\
The most basic line chart you can do in d3.js. Keeping only\\
the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/line_basic.png)](https://d3-graph-gallery.com/graph/line_basic.html)

[Several groups\\
\\
* * *\\
\\
Learn how to represent several groups on the line plot. This\\
requires to group the data using the d3.nest function.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/line_several_group.png)](https://d3-graph-gallery.com/graph/line_several_group.html)

[Transition between input data\\
\\
* * *\\
\\
Add a button that allows to go from one dataset to another\\
with a smooth transition. Useful to understand how to build a\\
`update()` function.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/line_change_data.gif)](https://d3-graph-gallery.com/graph/line_change_data.html)

[Most basic\\
\\
* * *\\
\\
The most basic lollipop chart you can do in d3.js. Keeping\\
only the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/lollipop_basic.png)](https://d3-graph-gallery.com/graph/lollipop_basic.html)

[Turn it horizontal\\
\\
* * *\\
\\
Lollipop plot often looks better horizontal: it makes label\\
easier to be read. Find how to do it!\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/lollipop_horizontal.png)](https://d3-graph-gallery.com/graph/lollipop_horizontal.html)

[Order groups\\
\\
* * *\\
\\
Give more insight to your chart: reorder groups with just 3\\
more lines of code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/lollipop_ordered.png)](https://d3-graph-gallery.com/graph/lollipop_ordered.html)

[Cleveland dot plot\\
\\
* * *\\
\\
A variation of the lollipop where 2 data series are available\\
for each group.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/lollipop_cleveland.png)](https://d3-graph-gallery.com/graph/lollipop_cleveland.html)

[Basic animation at loading\\
\\
* * *\\
\\
Points start at x=0 and then take their real position.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/lollipop_animationStart.gif)](https://d3-graph-gallery.com/graph/lollipop_animationStart.html)

[Most basic\\
\\
* * *\\
\\
The most basic network graph you can do in d3.js. Keeping only\\
the core code.\\
\\
Input format: Json\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/network_basic.png)](https://d3-graph-gallery.com/graph/network_basic.html)

[Most basic\\
\\
* * *\\
\\
The most basic Parallel Coordinates chart you can do in d3.js.\\
Keeping only the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/parallel_basic.png)](https://d3-graph-gallery.com/graph/parallel_basic.html)

[Most basic\\
\\
* * *\\
\\
The most basic pie chart you can do in d3.js. Keeping only the\\
core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/pie_basic.png)](https://d3-graph-gallery.com/graph/pie_basic.html)

[Most basic\\
\\
* * *\\
\\
The most basic ridgeline chart you can do in d3.js. Keeping\\
only the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/ridgeline_basic.png)](https://d3-graph-gallery.com/graph/ridgeline_basic.html)

[Pick time of day for sports\\
\\
* * *\\
\\
A good looking ridgeline plot by Andrew Mollica showing the\\
umber of participants for a few sports throughout the day.\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_ridgeline.png)](https://bl.ocks.org/armollica/3b5f83836c1de5cca7b1d35409a013e3)

[Ridge line or Joy plot\\
\\
* * *\\
\\
An implementation by Mike Bostock. \\
\\
Use d3.v5. It\\
is an observable notebooks -> even better.\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_ridgelineMBostock.png)](https://beta.observablehq.com/@mbostock/d3-ridgeline-plot)

[Most basic\\
\\
* * *\\
\\
The most basic sankey diagram you can do in d3.js. Keeping\\
only the core code.\\
\\
Input data format: Json\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/sankey_basic.png)](https://d3-graph-gallery.com/graph/sankey_basic.html)

[Energy production flow\\
\\
* * *\\
\\
UK energy production and consumption in 2050: energy supplies\\
are on the left, and demands are on the right\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/block_sankey.png)](https://beta.observablehq.com/@mbostock/d3-sankey-diagram)

[Most basic\\
\\
* * *\\
\\
The most basic scatterplot you can do in d3.js. Keeping only\\
the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/scatter_basic.png)](https://d3-graph-gallery.com/graph/scatter_basic.html)

[Add tooltips\\
\\
* * *\\
\\
Add a tooltip that appears beside each datapoint when you\\
hover it\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/scatter_tooltip.png)](https://d3-graph-gallery.com/graph/scatter_tooltip.html)

[Most basic\\
\\
* * *\\
\\
Basic grouped scatterplot: each group has a different color.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/scatter_grouped.png)](https://d3-graph-gallery.com/graph/scatter_grouped.html)

[Highlight a group\\
\\
* * *\\
\\
Highlight a group of point when one of its member is hovered\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/scatter_grouped_highlight.gif)](https://d3-graph-gallery.com/graph/scatter_grouped_highlight.html)

[Animation at start\\
\\
* * *\\
\\
Make the dots appear one after the other using a different\\
delay for each.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/scatter_animation_start.gif)](https://d3-graph-gallery.com/graph/scatter_animation_start.html)

[Brush\\
\\
* * *\\
\\
Learn how to allow brushing, and how to modify points in the\\
brush area\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/scatter_brush.gif)](https://d3-graph-gallery.com/graph/scatter_brush.html)

[Update X axis limits\\
\\
* * *\\
\\
A button control the X axis upper limit and trigger a smooth\\
transition to the new limit\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/scatter_buttonXlim.gif)](https://d3-graph-gallery.com/graph/scatter_buttonXlim.html)

[Initial radar chart function\\
\\
* * *\\
\\
Alvaro Graves was the first building a function for radar\\
chart.\\
\\
Click to visit the github repo and find a\\
few examples.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/block_spider_alangrafu.png)](https://github.com/alangrafu/radar-chart-d3)

[Radar Chart Redesign\\
\\
* * *\\
\\
Nadieh Bremer revisited the previous chart with a more\\
straightforward code and a different look.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/block_spider_bremer.png)](http://bl.ocks.org/nbremer/21746a9668ffdf6d8242)

[Basic from long input\\
\\
* * *\\
\\
The most basic stacked area chart you can do in d3.js. Keeping\\
only the core code.\\
\\
Input format:long (tidy)\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/stackedarea_basic.png)](https://d3-graph-gallery.com/graph/stackedarea_basic.html)

[Basic from wide input\\
\\
* * *\\
\\
Another basic stacked area chart made in d3.js.\\
\\
Note\\
that here the input format is wide (untidy): each group is\\
provided in a specific column.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/stackedarea_wideinput.png)](https://d3-graph-gallery.com/graph/stackedarea_wideinput.html)

[Most basic\\
\\
* * *\\
\\
The most basic streamgraph you can do in d3.js. Keeping only\\
the core code.\\
\\
Input format: wide (untidy)\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/streamgraph_basic.png)](https://d3-graph-gallery.com/graph/streamgraph_basic.html)

[Most basic\\
\\
* * *\\
\\
The most basic treemap you can do in d3.js. Only one level of\\
a hierarchy is represented.\\
\\
Input: csv format\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/treemap_basic.png)](https://d3-graph-gallery.com/graph/treemap_basic.html)

[Violin chart\\
\\
* * *\\
\\
Here a smoothing function is used to transformed the mirror\\
histogram in a violin plot.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/violin_basicHist1.png)](https://d3-graph-gallery.com/graph/violin_basicHist.html)

[Variation: no smoothing\\
\\
* * *\\
\\
A variation of the previous chart without any smoothing\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/violin_basicHist2.png)](https://d3-graph-gallery.com/graph/violin_basicHist.html)

[Variation: show steps\\
\\
* * *\\
\\
Here the curveStep function is used to interpolate values: it\\
reveals the underlying histogram structure.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/violin_basicHist3.png)](https://d3-graph-gallery.com/graph/violin_basicHist.html)

[Most basic\\
\\
* * *\\
\\
The most basic violin chart you can do in d3.js. Keeping only\\
the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/violin_basicDens.png)](https://d3-graph-gallery.com/graph/violin_basicDens.html)

[Violin with jitter\\
\\
* * *\\
\\
Half of the violin is removed to show the single observations.\\
Jittering is used to avoid dots overlap.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/violin_jitter.png)](https://d3-graph-gallery.com/graph/violin_jitter.html)

[Violin Chart\\
\\
* * *\\
\\
Short code building a violin chart from 3 dummy arrays.\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_violin1.png)](https://bl.ocks.org/KingOfCramers/f019d2b34a3e8f8da307958b0d9e30cf)

[Violin + boxplot\\
\\
* * *\\
\\
Implementation by Andrew Sielen, with button to understand how\\
to custom each part of the char.\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_violin2.png)](http://bl.ocks.org/asielen/d15a4f16fa618273e10f)

[Most basic\\
\\
* * *\\
\\
The most basic wordcloud you can do in d3.js. It calls the\\
`d3-cloud` plugin without any argument.\\
\\
Input\\
data: vector written in code\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/wordcloud_basic.png)](https://d3-graph-gallery.com/graph/wordcloud_basic.html)

[General customization\\
\\
* * *\\
\\
Apply basic customization to the wordcloud: color, angles,\\
font, size and more.\\
\\
Input data: vector written in\\
code\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/wordcloud_custom.png)](https://d3-graph-gallery.com/graph/wordcloud_custom.html)

[Proportional size\\
\\
* * *\\
\\
This post will teach you how to make the word size\\
proportional to their occurrence.\\
\\
Input data:\\
vector written in code\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/wordcloud_size.png)](https://d3-graph-gallery.com/graph/wordcloud_size.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=591662490241289382175&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=591662490241289382175)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/591662490241289382175?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=591662490241289382175&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=591662490241289382175)

![](https://us01.z.antigena.com/l/FZt5psomz79DGe~O1V5PkX7S8-NVJIdw0INR-k~Duu9c36GyIDyElf4y8fa2~-9InNSq4BCadyu-8tQSiIkaVleT~Yh8GI4ocNSeo4~API4DJEsYNIMg2sPMMXvjcckTUFy53ZYw3gzv35jSAchydRkSr2XFgqe-kzzlKTlv1VT7-TlAc0PcX7nFzbKlHypwbpU3AWUAJgUx%208E57245E-8A14-4712-8EB4-DB330ACBAF4F&rnd=RND)[iframe](cid:frame-8EF270A178871918288DDFB133EC41B4@mhtml.blink)[iframe](cid:frame-195F3EE1151128B1943B0F9C886B4108@mhtml.blink)![](https://ad.turn.com/r/cs?pid=1&gdpr=0&gdpr_consent=)![](https://pmp.mxptint.net/sn.ashx?&gdpr=0&gdpr_consent=)[iframe](cid:frame-2C9550817BB3ABE227843FE42FCF4FF3@mhtml.blink)[iframe](cid:frame-C3E82D7E9CD5662CB07996A47AC8C54F@mhtml.blink)[iframe](cid:frame-D93931B7C9E8B243E3E7D1BC6BFA6F28@mhtml.blink)![](https://creativecdn.com/cm-notify?pi=pubmatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-C43BE5743B006D60010E6FC84C4073A2@mhtml.blink)![](https://c1.adform.net/serving/cookie/match?party=14&redirect=https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTI4NzUmdGw9NDMyMDA=&piggybackCookie=[PLACE%20YOUR%20PIGGYBACK%20COOKIES%20HERE]&gdpr=0&gdpr_consent=)[iframe](cid:frame-982C1C8939833A9426FFE142918D4DBE@mhtml.blink)

[iframe](cid:frame-E9FE858B43D828009581D277075FFFCA@mhtml.blink)[iframe](cid:frame-D46EB0DE825B7540DD27A2667C4980A3@mhtml.blink)

ad.mrtnsvr.com

# This site can’t be reached

**ad.mrtnsvr.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ad.mrtnsvr.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-F68B148CA3E1A117A9222010D36EAA6B@mhtml.blink)[iframe](cid:frame-D5BF45CC2DFD106DCE4BF2FF94117B2B@mhtml.blink)[iframe](cid:frame-6F4FA404D7B1C0E3BBBFFF1A3D19DDB4@mhtml.blink)[iframe](cid:frame-80A4BEB4C8527D4441C14E6694BD500F@mhtml.blink)

```
{UID} macro not found
```

[iframe](cid:frame-43476BD015BB855E6318358B2A556C95@mhtml.blink)![](https://match.adsby.bidtheatre.com/pubmaticmatch?redir=https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTMwNjImdGw9MTI5NjAw&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)

[iframe](cid:frame-3D4FDAC324C0864688CAC0262C2EAC29@mhtml.blink)

User-Sync

![](https://pm.w55c.net/ping_match.gif?st=TRIPLELIFT&rurl=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D6019%26xuid%3D_wfivefivec_%26dongle%3D465e%26gdpr=0%26gdpr_consent=)![](https://sync.mathtag.com/sync/img?mt_exid=62&redir=%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3690%26xuid%3D%5BMM_UUID%5D%26dongle%3D3995%26gdpr=0%26gdpr_consent=)![](https://sync-tm.everesttech.net/upi/pid/RVF22VSl?redir=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3657%26xuid%3D%24%7BTM_USER_ID%7D%26dongle%3D3c0a%26gdpr=0%26gdpr_consent=)![](https://cms.quantserve.com/pixel/p-VtN-a_yLd-GB-.gif?idmatch=0&gdpr=0&gdpr_consent=)![](https://us.creativecdn.com/cm-notify?pi=triplelift&gdpr=0&gdpr_consent=)![](https://dis.criteo.com/dis/usersync.aspx?r=44&p=75&cp=triplelift&cu=1&gdpr=0&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&url=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D2711%26xuid%3D%40%40CRITEO_USERID%40%40%26dongle%3D013b)![](https://ib.adnxs.com/getuid?https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3335%26xuid%3D%24UID%26dongle%3D4d58%26gdpr=0%26gdpr_consent=)![](https://rtb.adentifi.com/CookieSyncTripleLift?gdpr=0&gdpr_consent=)![](https://ib.adnxs.com/prebid/setuid?bidder=triplelift_native&gdpr=0&gdpr_consent=&uid=591662490241289382175)![](https://ib.adnxs.com/prebid/setuid?bidder=triplelift&gdpr=0&gdpr_consent=&uid=591662490241289382175)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=591662490241289382175)

![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_e6928fa1-a33e-4d1f-924f-3617d07a5980&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-74EA42E8F5436E6CD52251A78158657D@mhtml.blink)[iframe](cid:frame-53B805CE9BEE5267AE957CA8761186FA@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)[iframe](cid:frame-272EEE4B675A04A11A05B38A8D1DD552@mhtml.blink)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_e6928fa1-a33e-4d1f-924f-3617d07a5980)

![](https://sync.crwdcntrl.net/qmap?c=2700&tp=UNDR&gdpr=&gdpr_consent=&tpid=cl8vccpbah1j0f5y95y27te2j)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3484&partner_device_id=cl8vccpbah1j0f5y95y27te2j)![](https://idsync.rlcdn.com/403716.gif?partner_uid=cl8vccpbah1j0f5y95y27te2j)![](https://dpm.demdex.net/ibs:dpid=152416&dpuuid=cl8vccpbah1j0f5y95y27te2j)![](https://prebid.production.adthrive.com/setuid?bidder=undertone&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=cl8vccpbah1j0f5y95y27te2j)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.2734560755719828)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_e6928fa1-a33e-4d1f-924f-3617d07a5980&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-03AE358886AFCC8745DF2B89FBC1F202@mhtml.blink)

![](https://aa.agkn.com/adscores/g.pixel?sid=9212308278&puid=8E57245E-8A14-4712-8EB4-DB330ACBAF4F)![](https://sync.crwdcntrl.net/qmap?c=240&tp=PUBM&tpid=8E57245E-8A14-4712-8EB4-DB330ACBAF4F&gdpr=0&gdpr_consent=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3371&partner_device_id=8E57245E-8A14-4712-8EB4-DB330ACBAF4F)![](https://i.liadm.com/s/75145?bidder_id=195755&bidder_uuid=8E57245E-8A14-4712-8EB4-DB330ACBAF4F)[iframe](cid:frame-138CB8E290C0F5A1A2CE4DA0EBE77173@mhtml.blink)[iframe](cid:frame-A4B84DBF909D22C04C5ACF61FD57760F@mhtml.blink)[iframe](cid:frame-8C3707A59FB6D470B8DC100D97D1E751@mhtml.blink)[iframe](cid:frame-D5AE10E3D6C795EE51B9D2556E1DAC4B@mhtml.blink)[iframe](cid:frame-DD88659E08CBE5C78ABE228BADB033C8@mhtml.blink)![](https://rtb.adentifi.com/CookieSyncPubMatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-EF17A0CBAB1C99E306BD293E43E8106F@mhtml.blink)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=3&gdpr=0&gdpr_consent=)

[iframe](cid:frame-984433D39AF3546FF1CA017DE9D702CB@mhtml.blink)[iframe](cid:frame-D754F283EE2AA6E95F02E88C275D128B@mhtml.blink)

[iframe](cid:frame-64CCB3692A4A82B6E5D54A9960DBD86E@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-7CD74F80FAA370BB69881C21EABD003A@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_e6928fa1-a33e-4d1f-924f-3617d07a5980&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_e6928fa1-a33e-4d1f-924f-3617d07a5980)

![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876MNHM5R0AHk14AHYUGQAAFdQAAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876MNHM5R0AHk14AHYUGQAA%265588&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://casale-match.dotomi.com/match/bounce/current?networkId=19998&version=1)![](https://creativecdn.com/cm-notify?pi=index&gpdr=&gdpr_consent=&us_privacy=&user_id=Z876MNHM5R0AHk14AHYUGQAA%265588)![](https://ib.adnxs.com/getuid?https://dsum.casalemedia.com/crum?cm_dsp_id=190&external_user_id=$UID)![](https://beacon.lynx.cognitivlabs.com/ix.gif)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876MNHM5R0AHk14AHYUGQAAFdQAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=85f69572-b629-4c8d-968f-e2c0a9a7f405)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=ODVmNjk1NzItYjYyOS00YzhkLTk2OGYtZTJjMGE5YTdmNDA1)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=97&redir=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DgBgkxrVErPj9wqivTDd2AmVY%26source_user_id%3D%7BuserId%7D&gdpr=0&gdpr_consent=)![](https://s.ad.smaato.net/c/?adExInit=s&redir=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DxTFJbLbs37tyhbKsPP9VC2cm%26source_user_id%3D%24UID)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=8E57245E-8A14-4712-8EB4-DB330ACBAF4F)[iframe](cid:frame-1FC7C048072DFB841C9C318CEDEB0C7C@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=8E57245E-8A14-4712-8EB4-DB330ACBAF4F&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=8E57245E-8A14-4712-8EB4-DB330ACBAF4F&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=jlckXooURxKOtNszCsuvTw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=8E57245E-8A14-4712-8EB4-DB330ACBAF4F&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/8E57245E-8A14-4712-8EB4-DB330ACBAF4F?gdpr=0&gdpr_consent=)[iframe](cid:frame-1D0397C70DBDC1C1933553F794D7D814@mhtml.blink)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-10FB4686BA1646004EAF39C503CC6FC3@mhtml.blink)

feed.pghub.io

# This site can’t be reached

The webpage at **https://feed.pghub.io/tag?us\_privacy=1YNY&referrer\_url=&page\_url=https%3A%2F%2Fd3-graph-gallery.com%2Fall.html&owner=P%26G&bp\_id=cafemedia&ch=%7B"architecture"%3A""%2C"bitness"%3A""%2C"brands"%3A%5B%5D%2C"fullVersionList"%3A%5B%5D%2C"mobile"%3Afalse%2C"model"%3A""%2C"platform"%3A""%2C"platformVersion"%3A""%7D&initiator=js** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://feed.pghub.io/tag?us\_privacy=1YNY&referrer\_url=&page\_url=https%3A%2F%2Fd3-graph-gallery.com%2Fall.html&owner=P%26G&bp\_id=cafemedia&ch=%7B"architecture"%3A""%2C"bitness"%3A""%2C"brands"%3A%5B%5D%2C"fullVersionList"%3A%5B%5D%2C"mobile"%3Afalse%2C"model"%3A""%2C"platform"%3A""%2C"platformVersion"%3A""%7D&initiator=js** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pagead2.googlesyndication.com/pagead/sodar?id=sodar2&v=232&li=gpt_m202503040101&jk=2570139906274552&rc=)

Topics Frame

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D1YNY%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ?us_privacy=1YNY)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D&us_privacy=1YNY)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID&us_privacy=1YNY)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776&us_privacy=1YNY)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=&us_privacy=1YNY)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D&us_privacy=1YNY)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=591662490241289382175&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=591662490241289382175)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=591662490241289382175)

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=f1214a99-9361-4ef2-83bd-3c880e40f476)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/5c38a312-ba52-ef52-d9e6-ea68704cfbb2?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=c8ffc556-2afe-7d1b-e831-fc9d8f1b36fb&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZTQ5MDE2OWMtZTM4OS0yM2JmLWZkZDEtYTYyNDQ1ZjlmODli)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

## Introduction to D3.js
# What is `HTML`?

* * *

`→ Explanation:`

- [HTML](https://en.wikipedia.org/wiki/HTML) stands for
Hypertext Markup Language. Basically, it is the language
behind any website. Web browsers like Mozilla or Safari read
this kind of file and translate it in a webpage.

- In a HTML file, elements composing the webpage are created,
delineated by tags. For instance a title of level 1 is
represented by the `h1` tag, a paragraph with the
`p` tag, an image by the `img` tag and so on.

- It is impossible to create a d3.js visualization without basic
knowledge on html.
[This tutorial](https://www.w3schools.com/html/) by
W3School can be a good starting point in my opinion.


`→ Example:`

# First html document

This is my first sentence

This is [a link to the d3 graph gallery](https://www.d3-graph-gallery.com/)

``` html
<!DOCTYPE html>

<!-- Add a title -->
<h1>First html document</h1>

<!-- Add a bit of text -->
<p>This is my first sentence</p>

<!-- Add a link -->
<p>This is <a href="https://www.d3-graph-gallery.com">a link to the d3 graph gallery</a></p>

```

`→ Try:`

- Copy and paste the code above in a local file. Call it something
like `test.html`. Open it with a browser. You've created
your first website!


SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-AWgxpKipaxLd-nfP_u-l8KsLbtNlDCVsW-SanGb9H4unNbDcZs-q6WvCUUDXrWImztYjooCvPJBzE1ZYSTgElqqHynNLlVncouoGx6fVIYzfhkcFg)

![](https://cm.g.doubleclick.net/pixel?google_nid=casale_media2_dsp_secure&google_cm&google_dbm)![](https://dsum-sec.casalemedia.com/rrum?ixi=0&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dsp_secure%26google_cm%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_cm&google_dbm)![](https://ib.adnxs.com/getuid?https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_hm=${BASE64_UID_ENC})

![](https://s-static.innovid.com/medialib/v2/phAsRyliUi8P5_UYeLFkmwZnFEs/798d76ff-0248-4075-a769-37fc640b1056-970x250.jpg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_White.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_Blue.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/WhiteButton_1.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/BlueButton_1.svg)

![](https://ad.doubleclick.net/ddm/activity/attribution_src_register; )

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaQJK2IhlVNmfye4Bn6y3ySkMr5_MAX6jIAdd1qZniSjPGQdlIVf2r74ywYG9g1N1j4nryvtH8Ea-UzDV6_q5doMWfMJ1A)

www.googleadservices.com

# This site can’t be reached

The webpage at **https://www.googleadservices.com/pagead/managed/js/activeview/current/reach\_worklet.html** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://www.googleadservices.com/pagead/managed/js/activeview/current/reach\_worklet.html** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

# Custom document style with `CSS`

* * *

`→ Explanation:`

- [CSS](https://en.wikipedia.org/wiki/Cascading_Style_Sheets)
stands for Cascading Style Sheet. It allows to apply specific
styles to the elements created using `html` before.

- As for html, it is impossible to create a d3.js visualization
without basic knowledge on `css`. If it is new for you,
check this
[tutorial](https://www.w3schools.com/css/default.asp).


`→ Example:`

# First html document

This is my first sentence

This is [a link to the d3 graph gallery](https://www.d3-graph-gallery.com/)

``` html
<!DOCTYPE html>

<!-- Apply specific style to the elements that have the class `inGreen` -->
<style>
  .inGreen { color: green; }
</style>

<!-- Add a title. Note that the class 'inGreen' is given to this title -->
<h1 class="inGreen">First html document</h1>

<!-- Add a bit of text -->
<p>This is my first sentence</p>

<!-- Add a link -->
<p>This is <a href="https://www.d3-graph-gallery.com">a link to the d3 graph gallery</a></p>

```

`→ Try:`

- Give the class `inGreen` to one of the paragraph
`p`
- Create a new class for the first sentence of the document. Change
its font size with `font-size: 20px` in css.


# Build shapes with `SVG`

* * *

`→ Explanation:`

- [SVG](https://en.wikipedia.org/wiki/Scalable_Vector_Graphics)
stands for Scalable Vector Graphic. It is a vector image
format. Basically, it is a language that allows to build shapes with
code.

- A d3.js chart is actually a set of `svg` shapes put
together. For instant, a scatterplot is just composed by several
circles as the one shown below.

- This [document](https://d3-graph-gallery.com/graph/shape.html) of the d3 graph gallery
showcases the different shapes offered by Svg.


`→ Example:`

# First html document

This is my first sentence

``` html
<!DOCTYPE html>
<!-- Add a title -->
<h1>First html document</h1>

<!-- Add a bit of text -->
<p>This is my first sentence</p>

<!-- Add a svg shape -->
<svg>
  <circle style="fill: #69b3a2" stroke="black" cx=50 cy=50 r=40></circle>
</svg>

```

`→ Try:`

- Modify the arguments of in the `svg` call to understand
what feature they control.

- Try to draw another type of shape using the cheat sheet below

``` html
<line x1="0" y1="0" x2="10" y2="10" stroke="black"></line>
<rect x="0" y="0" width="10" height="10"></rect>
<circle cx="5" cy="5" r="5"></circle>
<ellipse cx="10" cy="5" rx="10" ry="5"></ellipse>
<polygon points="0,0 10,5 20,0 20,20 10,15 0,20"></polygon>
<polyline points="0,0 10,5 20,0 20,20 10,15 0,20" stroke="black"></polyline>
<path d="M65,10 a50,25 0 1,0 50,25"></path>

```

[Example source](https://codepen.io/chriscoyier/pen/dXKxvv)

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-Cn6ZTzjpQDi0LeQq-3SYX7etbCliePKnDZuAwcgDuy33S5wddgnh9sNtJmVNNC21WK-brgNmm_jELcE7sHtADTDdPL7mZrbAr_moT_MpBLGQg1rf4)

![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_dbm)![](https://us-u.openx.net/w/1.0/cm?id=9ca165a9-d9fe-2ff6-d83d-d145a80b0d37&r=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dopenx%26google_hm%3D%7Bopenx_uuid_base64%7D)![](https://cm.g.doubleclick.net/pixel?google_nid=teadstv_dbm&google_cm&google_dbm)![](https://sync.teads.tv/um?eid=3&uid=&fb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dteadstv_dbm%26google_hm%3D%5BVID_B64%5D)

![](https://s-static.innovid.com/medialib/v2/phAsRyliUi8P5_UYeLFkmwZnFEs/7951f4fc-9cbb-4cb2-8a97-01f2fe4d2bae-970x250_CON.jpg)

Add'l terms apply.

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_White.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_Blue.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/WhiteButton_1.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/BlueButton_1.svg)

### Switch now

# Switch to a one-line plan for $25/mo.    No family plan  needed to save.

$25/month rate available on the Visible plan.

![](https://ad.doubleclick.net/ddm/activity/attribution_src_register; )

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaT7XTsYNMwGZImZJSr7wvZQC3NTdvQFGALWlruuk2U22tRjEUVJ-BvUJqPFyHE4nPJqr5KuqfL53mLJ8aQm7ITENSqo1w)

# Modify elements with `Javascript` and `D3.js`

* * *

`→ Explanation:`

- [JavaScript](https://en.wikipedia.org/wiki/JavaScript) is
one of the three core technologies of the World Wide Web. It enables
interactivity in webpages.

- [D3.js](https://d3-graph-gallery.com/intro_d3js.html) is a javascript library particularly useful for
data visualization. It allows to create, select and modify elements.

- In the example below, d3 is used to select the circle with a class
`target` and modify its `stroke-width`.

- It is not very impressive yet. But we will use the same kind of
process to set the position of hundreds of circle and get a
scatterplot.


`→ Example:`

# First html document

This is my first sentence

``` html
<!DOCTYPE html>
<h1>First html document</h1>

<!-- Add a bit of text -->
<p>This is my first sentence</p>

<!-- Add a svg shape. Note that the 'target' class is attributed to the circle -->
<svg>
  <circle class="target" style="fill: #69b3a2" stroke="black" cx=50 cy=50 r=40></circle>
</svg>

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

```

``` js
<script>
d3
  .select(".target")  // select the elements that have the class 'target'
  .style("stroke-width", 8) // change their style: stroke width is not equal to 8 pixels
</script>
```

`→ Try:`

- Change the circle opacity with the `opacity` style that
goes between 0 and 1.


# `Console.log()` is your friend.

* * *

`→ Explanation:`

- So the browser runs `Html`, `Css` and
`Javascript` code and shows the result as a webpage.

- If there is something wrong, it will give notification in the
console.

- Usually you can open the console with right click ->
inspect element
- You can output stuff in the console using the
`console.log("sometext")` in your javascript code

- This is obvious for people coming from web development. But isn't
for people coming from other field (R?). It is essential to be able
to debug your code.


# The coordinate system

* * *

`→ Explanation:`

- Building a d3.js chart starts by creating a
`svg` element. This element has a `width` and
a `height`, given in pixels.

- It is important to understand that the top left corner has the
coordinate `x=0` and `y=0`. The bottom left
corner has the coordinate `x=0` and
`y=height`. The top right corner has the coordinate
`x=width` and `height=0`

`→ Example:`

``` html
<!DOCTYPE html>

<!-- Add a svg area, empty -->
<svg id="dataviz_area" height=200 width=450></svg>

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

```

``` js
<script>
var svg = d3.select("#dataviz_area")
svg.append("circle")
  .attr("cx", 2).attr("cy", 2).attr("r", 40).style("fill", "blue");
svg.append("circle")
  .attr("cx", 140).attr("cy", 70).attr("r", 40).style("fill", "red");
svg.append("circle")
  .attr("cx", 300).attr("cy", 100).attr("r", 40).style("fill", "green");
</script>
```

`→ Try:`

- Change the coordinate of the 3 circles to make sure you understood
how it works


# From data to pixel: Scales

* * *

`→ Explanation:`

- Position of element is set in pixel. But input dataset is
not.

- We thus need a function that translate a numeric variable to
a position in pixel. It is called a `scale`
- If my data are percentages and my `svg` area is 400px
width. 0% → 0px. 100% → 400px. 50% → 200px.

- Scale always have a `domain` (0 to 100% here) and a
`range` (0 to 400px here)

- Usually the scale for the X axis is called `x`. If you
run `x(10)`, d3 returns the position in px for this value


`→ Example:`

``` html
<!DOCTYPE html>

<!-- Add a svg area, empty -->
<svg id="viz_area" height=200 width=450></svg>

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

```

``` js
<script>
// Select the svg area
var svg = d3.select("#viz_area")

// Create a scale: transform value in pixel
var x = d3.scaleLinear()
    .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
    .range([0, 400]);       // This is the corresponding value I want in Pixel
// Try console.log( x(25) ) to see what this x function does.

// Add 3 dots for 0, 50 and 100%
svg.append("circle")
  .attr("cx", x(10)).attr("cy", 100).attr("r", 40).style("fill", "blue");
svg.append("circle")
  .attr("cx", x(50)).attr("cy", 100).attr("r", 40).style("fill", "red");
svg.append("circle")
  .attr("cx", x(100)).attr("cy", 100).attr("r", 40).style("fill", "green");
</script>
```

`→ Try:`

- Change `domain` and `range` values to
understand how it works.

- Add a Y scale to move the circles up or down. Remember 0px is on
top!


# Add axis

* * *

`→ Explanation:`

- D3 offers a few function to draw axis automatically.
- These axis are always drawn on top of a `scale`. This
scale specifies where the axis must be placed, and
what range it should indicate.

- The function `axisBottom()` creates a horizontal axis,
with ticks and labels at the bottom. `axisLeft()` will be
used later for the Y axis


`→ Example:`

0102030405060708090100

``` html
<!DOCTYPE html>

<!-- Add a svg area, empty -->
<svg id="Viz_area" height=200 width=450></svg>

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

```

``` js
<script>
// Select the svg area
var svg = d3.select("#Viz_area")

// Create a scale: transform value in pixel
var x = d3.scaleLinear()
    .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
    .range([0, 400]);       // This is the corresponding value I want in Pixel

// Show the axis that corresponds to this scale
svg.call(d3.axisBottom(x));

// Add 3 dots for 0, 50 and 100%
svg.append("circle")
  .attr("cx", x(10)).attr("cy", 100).attr("r", 40).style("fill", "blue");
svg.append("circle")
  .attr("cx", x(50)).attr("cy", 100).attr("r", 40).style("fill", "red");
svg.append("circle")
  .attr("cx", x(100)).attr("cy", 100).attr("r", 40).style("fill", "green");
</script>
```

`→ Try:`

- Change `domain` and `range` values to
understand how it works.


# Margin & translation

* * *

`→ Explanation:`

- The axis position often needs to be adjusted. For instance,
the X axis is usually placed at the bottom of the chart.

- This is made possible thanks to translation. Basically,
applying `.attr("transform", "translate(20,50)")` to an
element with translate it 20px to the right and 50px to the bottom.

- A very common strategy is to apply a translation to the general
`svg` area, creating a bit of margin around the chart
without having to think about it in the rest of the code. It is
important to understand how it works since almost all d3.js chart
start that way.


`→ Example:`

01020304050607080901000102030405060708090100

``` html
<!DOCTYPE html>

<!-- Add a svg area, empty -->
<div id="Area"></div>

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 40, bottom: 30, left: 30},
    width = 450 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var sVg = d3.select("#Area")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  // translate this svg element to leave some margin.
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// X scale and Axis
var x = d3.scaleLinear()
    .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
    .range([0, width]);       // This is the corresponding value I want in Pixel
sVg
  .append('g')
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

// X scale and Axis
var y = d3.scaleLinear()
    .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
    .range([height, 0]);       // This is the corresponding value I want in Pixel
sVg
  .append('g')
  .call(d3.axisLeft(y));

</script>
```

`→ Try:`

- Play with the margin values to double check how it works.
- Remove some lines in the `svg` variable creation.

# Data binding

* * *

`→ Explanation:`

- Binding data to svg elements is the last step we need to
complete the scatterplot. It is also the hardest part to
understand in my opinion.

- It always follows the same steps:
  - `svg`: this select the svg area where the chart takes
     place

  - `.selectAll("whatever")`: select all the elements that
     have not be created yet, I know it is weird.

  - `.data(data)`: specify the data to use.
  - `.enter()`: start a loop for the data. Following code
     will be applied to `data[0]`, `data[1]` and
     so on.

  - `.append("circle")`: for each iteration, add a circle.

  - `.attr("cx", function(d){ return x(d.x) })`: gives the
     `x` position of the circle. Here `d` will be
     `data[0]`, then `data[1]` and so on. Thus
     `d.x` is the value of `x`, and
     `x(d.x)` is the corresponding position in pixel found
     thanks to the `x scale`.

`→ Example:`

01020304050607080901000102030405060708090100

``` html
<!DOCTYPE html>

<!-- Add a svg area, empty -->
<div id="scatter_area"></div>

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 40, bottom: 30, left: 30},
    width = 450 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svG = d3.select("#scatter_area")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Create data
var data = [ {x:10, y:20}, {x:40, y:90}, {x:80, y:50} ]

// X scale and Axis
var x = d3.scaleLinear()
    .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
    .range([0, width]);       // This is the corresponding value I want in Pixel
svG
  .append('g')
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x));

// X scale and Axis
var y = d3.scaleLinear()
    .domain([0, 100])         // This is the min and the max of the data: 0 to 100 if percentages
    .range([height, 0]);       // This is the corresponding value I want in Pixel
svG
  .append('g')
  .call(d3.axisLeft(y));

// Add 3 dots for 0, 50 and 100%
svG
  .selectAll("whatever")
  .data(data)
  .enter()
  .append("circle")
    .attr("cx", function(d){ return x(d.x) })
    .attr("cy", function(d){ return y(d.y) })
    .attr("r", 7)

</script>
```

`→ Note:`

This is probably the most difficult concept in d3.js. And it is used
in almost every single chart. It is actually the power of d3: binding
data to elements


It is probably a good idea to read more on this topic. Check
[d3 in depth](https://d3indepth.com/datajoins/) and
[Dashing d3.js](https://www.dashingd3js.com/lessons/creating-svg-elements-from-data).


# What's `next`?

* * *

This document is a very very short intro to d3.js. However, it
describes the basic concepts that are used in almost every chart.


You're now probably ready to
[explore the gallery](https://d3-graph-gallery.com/index.html). For each chart
section, there is a very basic example to start with.


## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.194105560671179)

Prebid User Sync

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=125&redir=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D54%26uid%3D%7BuserId%7D)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=12776** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=12776** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=2226915865447693375174&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=2226915865447693375174)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=2226915865447693375174)

![](https://aa.agkn.com/adscores/g.pixel?sid=9212308278&puid=74F9BC8B-29C3-4675-83FF-ECCBFB7D8D2D)![](https://sync.crwdcntrl.net/qmap?c=240&tp=PUBM&tpid=74F9BC8B-29C3-4675-83FF-ECCBFB7D8D2D&gdpr=0&gdpr_consent=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3371&partner_device_id=74F9BC8B-29C3-4675-83FF-ECCBFB7D8D2D)![](https://i.liadm.com/s/75145?bidder_id=195755&bidder_uuid=74F9BC8B-29C3-4675-83FF-ECCBFB7D8D2D)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/74F9BC8B-29C3-4675-83FF-ECCBFB7D8D2D?gdpr=0&gdpr_consent=)[iframe](cid:frame-34AA27560DAA51ACA3ADC7819FA7CA45@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)

image2.pubmatic.com

# This site can’t be reached

**image2.pubmatic.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**image2.pubmatic.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-D1833FEE2E372676B91CEF76EABC5D36@mhtml.blink)![](https://pubmatic-match.dotomi.com/match/bounce/current?networkId=17100&version=1&nuid=74F9BC8B-29C3-4675-83FF-ECCBFB7D8D2D&gdpr=0&gdpr_consent=)[iframe](cid:frame-367AA1765245BC4160E6E45D30DE92FD@mhtml.blink)[iframe](cid:frame-8CDF2D42588C4F05987F593CDFF703B7@mhtml.blink)![](https://rtb.adentifi.com/CookieSyncPubMatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-838DD636089FDB8F746AAAB11DB06911@mhtml.blink)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=3&gdpr=0&gdpr_consent=)

[iframe](cid:frame-AF6C001A8B41BED0FFD5267A58B97F53@mhtml.blink)[iframe](cid:frame-3247E866A8A2109B7D198F6510957143@mhtml.blink)[iframe](cid:frame-95043C968A08792D4BB8B322518501E4@mhtml.blink)![](https://ad.turn.com/r/cs?pid=1&gdpr=0&gdpr_consent=)![](https://pmp.mxptint.net/sn.ashx?&gdpr=0&gdpr_consent=)[iframe](cid:frame-3E1EE35185C5946F47934618158F7D4F@mhtml.blink)[iframe](cid:frame-1FF29503B7978604D13375D0729D13B3@mhtml.blink)[iframe](cid:frame-2B2B8D2E6C9F0907089A70FDBC3C59A6@mhtml.blink)![](https://creativecdn.com/cm-notify?pi=pubmatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-FFAB9F7B2A55BECEF2C2D572594133CF@mhtml.blink)![](https://c1.adform.net/serving/cookie/match?party=14&redirect=https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTI4NzUmdGw9NDMyMDA=&piggybackCookie=[PLACE%20YOUR%20PIGGYBACK%20COOKIES%20HERE]&gdpr=0&gdpr_consent=)[iframe](cid:frame-42EEBB93F73B81D997CA7B29B0461C13@mhtml.blink)

[iframe](cid:frame-760F10BED349C5049D449170F139D906@mhtml.blink)[iframe](cid:frame-E91B26610837E633F026AB660EBF78AC@mhtml.blink)

ad.mrtnsvr.com

# This site can’t be reached

**ad.mrtnsvr.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ad.mrtnsvr.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-8357978164C28B5F89BC88A0C0B759FD@mhtml.blink)[iframe](cid:frame-CFA4DEE28FD1D56207365D812AB13CB2@mhtml.blink)

User-Sync

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_a4039d42-90b8-4d29-a5fd-6f24968f3d5e&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

**cm.g.doubleclick.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**cm.g.doubleclick.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-9C9C24A3ED47560C02DCA7FD9EC167E9@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-E81E89A0E1E552E4CDA05A8F57F0DED4@mhtml.blink)[iframe](cid:frame-211E54F1660B91F4C79B6C23F60CFD22@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_a4039d42-90b8-4d29-a5fd-6f24968f3d5e&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_a4039d42-90b8-4d29-a5fd-6f24968f3d5e)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=324e7fba-9bc5-4fe2-a93a-d86294f365f7)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=MzI0ZTdmYmEtOWJjNS00ZmUyLWE5M2EtZDg2Mjk0ZjM2NWY3)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/sharethrough)![](https://ssp.disqus.com/redirectuser?r=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3D7rkJAhPCWXbw9Lq5dZxc6TvN%26source_user_id%3D%24UID&partner=sharethrough)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=74F9BC8B-29C3-4675-83FF-ECCBFB7D8D2D)[iframe](cid:frame-7EE9BD632C1AEA60F15F6DE2C9893613@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=74F9BC8B-29C3-4675-83FF-ECCBFB7D8D2D&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=74F9BC8B-29C3-4675-83FF-ECCBFB7D8D2D&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=NzRGOUJDOEItMjlDMy00Njc1LTgzRkYtRUNDQkZCN0Q4RDJE&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=dPm8iynDRnWD_-zL-32NLQ%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=74F9BC8B-29C3-4675-83FF-ECCBFB7D8D2D&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-256B15E855CF378B6899B251E7452F41@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHImIf70zmzx)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHImIf70zmzx)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=c7d131d8-4f5b-c2ff-0f1b-b236dd7fb5df)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/0bc02be1-c35d-eb4c-fec2-26544a1bb376?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=9f074da5-53f1-7905-cf15-30a1b54c7e3f&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=YjM2ODllNmYtOWE4Ni0yN2ExLWRhZjUtNmExODdmYWViMDVm)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-20E80D073063CA06DF91AC346DA77B3B@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-6D7BB6217D2678A944D3C67E64B30E34@mhtml.blink)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=bc4a2a0d-7fa5-406f-8d4c-ecc66ebd98f8%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)

Topics Frame

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=2226915865447693375174&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=2226915865447693375174)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/2226915865447693375174?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=2226915865447693375174&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://pbs-raptive-us.ay.delivery/setuid?bidder=triplelift&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=2226915865447693375174)

User-Sync

## Interactive Map Creation
About input data

* * *

Difference between `geoJson` and `topoJson`. But
not necessary thanks to leaflet.


From a `geoJson` file

* * *

Input data for maps is `geoJson` format. D3.js works very
well to display this kind of information using `path`.


[Most basic\\
\\
* * *\\
\\
The most basic background map you can do in d3.js. Keeping\\
only the core code.\\
\\
Input data format: geoJson\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/backgroundmap_basic.png)](https://d3-graph-gallery.com/graph/backgroundmap_basic.html)

[Change projection\\
\\
* * *\\
\\
Shows how to switch from one projection to another thanks to\\
the geo-projection plugin.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/backgroundmap_changeprojection.png)](https://d3-graph-gallery.com/graph/backgroundmap_changeprojection.html)

[Single country\\
\\
* * *\\
\\
How to plot the boundaries of any country in d3.js.\\
\\
Actually\\
explains how to filter a geoJson file.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/backgroundmap_country.png)](https://d3-graph-gallery.com/graph/backgroundmap_country.html)

Using the `Leaflet.js` open source library


* * *

[Leaflet](https://leafletjs.com/examples.html) is an
open-source JavaScript library for mobile-friendly interactive maps.
Awesome for background maps. See the range of background tiles you can
use
[here](https://leaflet-extras.github.io/leaflet-providers/preview/)
and [here](https://wiki.openstreetmap.org/wiki/Tiles).


[Most basic leaflet\\
\\
* * *\\
\\
A very basic example showing how to build a leaflet map.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/backgroundmap_leaflet.png)](https://d3-graph-gallery.com/graph/backgroundmap_leaflet.html)

[Button to control tile\\
\\
* * *\\
\\
Add a button that allows to select different background\\
tiles.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/backgroundmap_leaflet_buttonLayer.gif)](https://d3-graph-gallery.com/graph/backgroundmap_leaflet_buttonLayer.html)

Using `Canvas`

* * *

Canvas is an alternative to SVG. Its main advantage is that it avoids
to overload the dom and thus often leads to better browser
performance. Here are examples showing how to build background maps
using d3.js and canvas:


[Most basic map with canvas\\
\\
* * *\\
\\
A very basic example showing how to build a map using d3.js\\
and canvas.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/backgroundmap_canvas_basic.png)](https://d3-graph-gallery.com/graph/backgroundmap_canvas_basic.html)

Selection of blocks

* * *

A few blocks with more complicated codes to showcase the possibility
of the `d3-sankey ` plugin


[Mike's tutorial\\
\\
* * *\\
\\
A tutorial built by Mike Bostock: a very good starting point\\
to maps in d3.js.\\
\\
\\
![Mike's map tutorial](https://d3-graph-gallery.com/img/block/block_backgroundmapMike.png)](https://medium.com/@mbostock/command-line-cartography-part-1-897aa8f8ca2c)

[Demo of all projections\\
\\
* * *\\
\\
A block showcasing all the different available projection,\\
with smooth transitions.\\
\\
\\
![All d3 map projection](https://d3-graph-gallery.com/img/graph/block_projection_demo.gif)](https://bl.ocks.org/alexmacy/6700d44240d2b6d3ec9767a5a5854e42)

[Leaflet documentation\\
\\
* * *\\
\\
Link to the leaflet website: awesome doc for awesome maps.\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_backgroundmapLeaflet.png)](https://leafletjs.com/)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Map150.png)](https://d3-graph-gallery.com/backgroundmap.html)

Map

[![](https://d3-graph-gallery.com/img/section/Choropleth150.png)](https://d3-graph-gallery.com/choropleth.html)

Choropleth

[![](https://d3-graph-gallery.com/img/section/MapHexbin150.png)](https://d3-graph-gallery.com/hexbinmap.html)

Hexbin map

[![](https://d3-graph-gallery.com/img/section/Cartogram150.png)](https://d3-graph-gallery.com/cartogram.html)

Cartogram

[![](https://d3-graph-gallery.com/img/section/ConnectedMap150.png)](https://d3-graph-gallery.com/connectionmap.html)

Connection

[![](https://d3-graph-gallery.com/img/section/BubbleMap150.png)](https://d3-graph-gallery.com/bubblemap.html)

Bubble map

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-BRrECq2ctdzMY7lpQ_6AcOcD7U6xbCbB8cJTphDdO46YV6OS8W9HyJFBPEIvqURo_Q54wDFwmqIrNMJhUjiAeVsdVCrr3798L3rvJJ7OCBYGbOGww)

![](https://cm.g.doubleclick.net/pixel?google_nid=casale_media2_dsp_secure&google_cm&google_dbm)![](https://dsum-sec.casalemedia.com/rrum?ixi=0&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dsp_secure%26google_cm%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_cm&google_dbm)![](https://ib.adnxs.com/getuid?https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_hm=${BASE64_UID_ENC})

![](https://s-static.innovid.com/medialib/v2/phAsRyliUi8P5_UYeLFkmwZnFEs/b184e22b-a6f2-4816-aa0e-1bcf21a3e92c-970x250.jpg)

Add'l terms apply.

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_White.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_Blue.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/WhiteButton_1.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/BlueButton_1.svg)

### Switch now

# Want wireless independence?  Get one line for $25/mo with Visible.

$25/month rate available on the Visible plan.

![](https://ad.doubleclick.net/ddm/activity/attribution_src_register; )

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaTMcfotzU5V_ynunaIyf2mjMDb-yu1U0sKCWaGhvQ0DfjW1Slb0ntiCUOXclM98hmf4pWpOT3_jEgHwoZNyHnfcQ6xGdQ)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-Db7mcB1oY_JNyF78W05NxDQ6IW-GdecncQ28gtGQxSGk-00gkqmtVBIu3PFg5f-GioHNR4VVM4wWubJHHK_SlPJbvTuSTBwBlmMFFJn9qYS1X-kjg)

![](https://cm.g.doubleclick.net/pixel?google_nid=casale_media2_dsp_secure&google_cm&google_dbm)![](https://dsum-sec.casalemedia.com/rrum?ixi=0&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dsp_secure%26google_cm%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_cm&google_dbm)![](https://ib.adnxs.com/getuid?https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_hm=${BASE64_UID_ENC})

![](https://s-static.innovid.com/medialib/v2/phAsRyliUi8P5_UYeLFkmwZnFEs/b184e22b-a6f2-4816-aa0e-1bcf21a3e92c-970x250.jpg)

Add'l terms apply.

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_White.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_Blue.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/WhiteButton_1.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/BlueButton_1.svg)

### Switch now

# Want wireless independence?  Get one line for $25/mo with Visible.

$25/month rate available on the Visible plan.

![](https://ad.doubleclick.net/ddm/activity/attribution_src_register; )

Prebid User Sync

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876MMAoIrwALRtqAQP6fQAACjcAAAAB&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876MMAoIrwALRtqAQP6fQAACjcAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876MMAoIrwALRtqAQP6fQAA%262615&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://s.c.appier.net/index?userId=Z876MMAoIrwALRtqAQP6fQAA%262615&gdpr=&us_privacy=)![](https://s.company-target.com/s/ix?cm_dsp_id=18&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://csync.loopme.me/?pubid=11466&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D24%26external_user_id%3D%7Bviewer_token%7D&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://match.deepintent.com/usersync/113)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876MMAoIrwALRtqAQP6fQAA%262615)

![](https://x.bidswitch.net/sync?ssp=criteo&custom_data=_P3PCl9ra2VGYnBWdktHJTJCOWtKY3ZSZ2w4ekR6WnV5Q1RacnlVTlJYdWQ5alg0Z1UlM0Q&gpp=&gpp_sid=&gdpr=&gdpr_consent=&us_privacy=&cr_user_id=k-H1z3-BsCwDF-1gh_vZ1YKJ2-YqWDT5RXic9zYg)![](https://cs.admanmedia.com/e805be652c9053b8f771665f0ac3c361.gif?puid=k-H1z3-BsCwDF-1gh_vZ1YKJ2-YqWDT5RXic9zYg&gdpr=&gdpr_consent=&ccpa=)![](https://prebid.production.adthrive.com/setuid?bidder=criteo&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=k-KwcIuBsCwDF-1gh_vZ1YKJ2-YqVoq7LLTb18Bg)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.6649932520435384)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_d8cf6fa7-2536-4709-83f7-ed0ddd9d249c&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-E5D6155E23800ACFF9DEF24B9E0BF7CF@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9kOGNmNmZhNy0yNTM2LTQ3MDktODNmNy1lZDBkZGQ5ZDI0OWM=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9kOGNmNmZhNy0yNTM2LTQ3MDktODNmNy1lZDBkZGQ5ZDI0OWM=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-84455892139AA4B8B0248ECD9DA906CE@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-20E9BE3FFAF9820C21AA0578C79CF844@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_d8cf6fa7-2536-4709-83f7-ed0ddd9d249c&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_d8cf6fa7-2536-4709-83f7-ed0ddd9d249c)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.sharethrough.com

# This site can’t be reached

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

www.google.com

# This site can’t be reached

The webpage at **https://www.google.com/recaptcha/api2/aframe** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://www.google.com/recaptcha/api2/aframe** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

User-Sync

Pixels![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/4019d550-9948-e78f-ce5a-7f5b5b40a3b2?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=d4deb314-09e4-75c6-ff8d-69aea4176efb&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZjhiMTYwZGUtYzA5My0yYjYyLWVhNmQtMzMxNzZlZjVhMDli)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=81F85A93-9E6D-4589-81D0-2BBBE1147F49)[iframe](cid:frame-695E7619A0CBA51A82DB552FEE94218C@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=81F85A93-9E6D-4589-81D0-2BBBE1147F49&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=81F85A93-9E6D-4589-81D0-2BBBE1147F49&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=81F85A93-9E6D-4589-81D0-2BBBE1147F49&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/81F85A93-9E6D-4589-81D0-2BBBE1147F49?gdpr=0&gdpr_consent=)[iframe](cid:frame-5A20E44B6C547FDEE1A6F2A25E8022D0@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)

![](https://pubmatic-match.dotomi.com/match/bounce/current?networkId=17100&version=1&nuid=81F85A93-9E6D-4589-81D0-2BBBE1147F49&gdpr=0&gdpr_consent=)

[iframe](cid:frame-790381FCFF14678BEE319184EA558736@mhtml.blink)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=3725323958813064844658&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=3725323958813064844658)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/3725323958813064844658?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=3725323958813064844658&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)

![](https://sync.crwdcntrl.net/qmap?c=2700&tp=UNDR&gdpr=&gdpr_consent=&tpid=ezmr8gckibswhu5yg3thifr7w)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3484&partner_device_id=ezmr8gckibswhu5yg3thifr7w)![](https://idsync.rlcdn.com/403716.gif?partner_uid=ezmr8gckibswhu5yg3thifr7w)![](https://dpm.demdex.net/ibs:dpid=152416&dpuuid=ezmr8gckibswhu5yg3thifr7w)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

## Hexbin Map Visualization
Hexbin map from geospatial object

* * *

In this case, the technique is very close from a
[choropleth map](https://d3-graph-gallery.com/choropleth.html). It's actually exactly
the same, except that the geoJson input gives hexagon boundaries
instead of region boundaries. Thus, you probably want to visit the
[choropleth section](https://d3-graph-gallery.com/choropleth.html) for more examples.


[Choropleth section](https://d3-graph-gallery.com/choropleth.html)

[Most basic\\
\\
* * *\\
\\
Just a basic background map based on a geoJson input that\\
gives the hexagon boundary.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/hexbinmap_geo_basic.png)](https://d3-graph-gallery.com/graph/hexbinmap_geo_basic.html)

[Add label in centroids\\
\\
* * *\\
\\
Use the `centroid()` function to add hexagon\\
labels.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/hexbinmap_geo_label.png)](https://d3-graph-gallery.com/graph/hexbinmap_geo_label.html)

Hexbin map from list of coordinates

* * *

In this case, the required input is a list of coordinates. The map
area will be split in a multitude of hexagon, the number of data point
per hexagon will be counted and represented as a color. It is actually
a [density 2d](https://d3-graph-gallery.com/density2d.html) technique plotted on top of
a map.


[Density 2d section](https://d3-graph-gallery.com/density2d.html)

[Most basic\\
\\
* * *\\
\\
The most basic area chart you can do in d3.js. Keeping only\\
the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/area_basic.png)](https://d3-graph-gallery.com/graph/area_basic.html)

Selection of blocks

* * *

A few blocks with more complicated codes to showcase what's possible
to do with connection maps. First show how to display connections on
hover. Second show how to apply
[edge bundling](https://d3-graph-gallery.com/bundle.html) to the connection to declutter
the chart.


[Bivariate Hexbin map\\
\\
* * *\\
\\
Density 2d technique. Quantity of data per hexagon is\\
represented through hexagon color and size.\\
\\
\\
![Bivariate hexbin map](https://d3-graph-gallery.com/img/block/block_hexbinmapBivariate.png)](https://bl.ocks.org/mbostock/4330486)

[D3-hexbin documentation\\
\\
* * *\\
\\
The complete documentation of d3-hexbin: the plugin that\\
groups two-dimensional points into hexagonal bins.\\
\\
\\
![D3 hexbin documentation](https://d3-graph-gallery.com/img/block/block_hexbinmapDoc.png)](https://bl.ocks.org/sjengle/2e58e83685f6d854aa40c7bc546aeb24)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Map150.png)](https://d3-graph-gallery.com/backgroundmap.html)

Map

[![](https://d3-graph-gallery.com/img/section/Choropleth150.png)](https://d3-graph-gallery.com/choropleth.html)

Choropleth

[![](https://d3-graph-gallery.com/img/section/MapHexbin150.png)](https://d3-graph-gallery.com/hexbinmap.html)

Hexbin map

[![](https://d3-graph-gallery.com/img/section/Cartogram150.png)](https://d3-graph-gallery.com/cartogram.html)

Cartogram

[![](https://d3-graph-gallery.com/img/section/ConnectedMap150.png)](https://d3-graph-gallery.com/connectionmap.html)

Connection

[![](https://d3-graph-gallery.com/img/section/BubbleMap150.png)](https://d3-graph-gallery.com/bubblemap.html)

Bubble map

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-Dvlu0m0MoSSFv8yLJ7KXTDjMOJl3EI-Ia3HD0LmtsnpDc5jxi-rvpLfUukzCMLYio0TYRKGeTYG_GNtkyO5-JkXXE2copESrst8hdj9vItR41WA5g)

![](https://cm.g.doubleclick.net/pixel?google_nid=casale_media2_dsp_secure&google_cm&google_dbm)![](https://dsum-sec.casalemedia.com/rrum?ixi=0&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dsp_secure%26google_cm%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_cm&google_dbm)![](https://ib.adnxs.com/getuid?https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_hm=${BASE64_UID_ENC})

![](https://s-static.innovid.com/medialib/v2/phAsRyliUi8P5_UYeLFkmwZnFEs/b5dc0739-1d82-408d-993d-44df2cc19bd8-970x250.jpg)

Add'l terms apply.

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_White.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_Blue.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/WhiteButton_1.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/BlueButton_1.svg)

### Switch now

# Just $25/mo for unlimited data,   unlimited streaming, unlimited meme-ing.

$25/month rate available on the Visible plan.

![](https://ad.doubleclick.net/ddm/activity/attribution_src_register; )

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaSM1impSnXNiym1-DtCQsKIVGyqkRLCLGNW-bmpTLytTmNVjJO8Iam3ewtHLwTQ6U-1r0Pl5Iq8zXk2LaLBSabj7M7_5A)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-Clt5B_ice3ZC6WKAgOKlmosL8nyDsJeuEaPNaOg1zY5x0HD4PGklCHm7ux1adYwF_ixrJk9M7EKTi0HawuUP7WAcMOWc9bocbwyQFZdDqbOj0FK40)

![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_dbm)![](https://us-u.openx.net/w/1.0/cm?id=9ca165a9-d9fe-2ff6-d83d-d145a80b0d37&r=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dopenx%26google_hm%3D%7Bopenx_uuid_base64%7D)![](https://cm.g.doubleclick.net/pixel?google_nid=teadstv_dbm&google_cm&google_dbm)![](https://sync.teads.tv/um?eid=3&uid=&fb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dteadstv_dbm%26google_hm%3D%5BVID_B64%5D)

![](https://s-static.innovid.com/medialib/v2/phAsRyliUi8P5_UYeLFkmwZnFEs/b5dc0739-1d82-408d-993d-44df2cc19bd8-970x250.jpg)

Add'l terms apply.

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_White.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_Blue.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/WhiteButton_1.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/BlueButton_1.svg)

### Switch now

# Scroll to the bottom  of the feed with unlimited data on Visible wireless.

$25/month rate available on the Visible plan.

![](https://ad.doubleclick.net/ddm/activity/attribution_src_register; )

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.13385012402529495)

Prebid User Sync

![](https://idsync.rlcdn.com/420486.gif?partner_uid=C48F1900-95F0-4F9E-A996-C98E703B40FD)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=14&cid=C48F1900-95F0-4F9E-A996-C98E703B40FD&gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=14&cid=C48F1900-95F0-4F9E-A996-C98E703B40FD&gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.onaudience.com/?partner=214&mapped=C48F1900-95F0-4F9E-A996-C98E703B40FD&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=C48F1900-95F0-4F9E-A996-C98E703B40FD&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=QzQ4RjE5MDAtOTVGMC00RjlFLUE5OTYtQzk4RTcwM0I0MEZE&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=xI8ZAJXwT56plsmOcDtA_Q%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=C48F1900-95F0-4F9E-A996-C98E703B40FD&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/C48F1900-95F0-4F9E-A996-C98E703B40FD?gdpr=0&gdpr_consent=)[iframe](cid:frame-57069500DAE0DC933EE8D8DBEA8FC43A@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)

match.deepintent.com

# This site can’t be reached

The webpage at **https://match.deepintent.com/usersync/141?gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.deepintent.com/usersync/141?gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

prebid.production.adthrive.com

# This site can’t be reached

**prebid.production.adthrive.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**prebid.production.adthrive.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

hde.tynt.com

# This site can’t be reached

**hde.tynt.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**hde.tynt.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_a48804ea-5182-4304-9e25-7174ebf3f3ae&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-11D409DDFA55AA42860EADE0C80A054E@mhtml.blink)[iframe](cid:frame-50714AD442A55337AABA80EEEC41A171@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

User-Sync

[iframe](cid:frame-71F15AC77A33026CD161C96FEAC8055E@mhtml.blink)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_a48804ea-5182-4304-9e25-7174ebf3f3ae)

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=333f6056-7579-41e9-a12c-2e8beb1bbdfe)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=0c9f9c65-97e1-4f87-8041-764859ccbe7f)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876MMAoIrEALkz5AO_jnwAACiwAAAIB&gpp=&gpp_sid=)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876MMAoIrEALkz5AO_jnwAACiwAAAIB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://secure.adnxs.com/getuid?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=46&external_user_id=$UID)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://csync.loopme.me/?pubid=11466&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D24%26external_user_id%3D%7Bviewer_token%7D&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://c1.adform.net/serving/cookie/match?party=29)![](https://cm.adgrx.com/bridge?AG_PID=casale&AG_SETCOOKIE)![](https://pm.w55c.net/ping_match.gif?ei=CASALE&rurl=https://dsum-sec.casalemedia.com/crum?cm_dsp_id=47&external_user_id=_wfivefivec_)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876MMAoIrEALkz5AO-jnwAA%262604)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_a48804ea-5182-4304-9e25-7174ebf3f3ae&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-3F7EEA605E66EA3E55CF5F440E5C2454@mhtml.blink)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-E04C32E8A47C60E3C00C6FEE265EC0D4@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-5812CFA3D8EBC51AAC0196B49DFDFF1B@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_a48804ea-5182-4304-9e25-7174ebf3f3ae&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_a48804ea-5182-4304-9e25-7174ebf3f3ae)

![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876MMAoIrEALkz5AO_jnwAACiwAAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://match.adsrvr.org/track/cmf/casale)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876MMAoIrEALkz5AO-jnwAA%262604&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://s.company-target.com/s/ix?cm_dsp_id=18&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://x.bidswitch.net/sync?ssp=index)![](https://casale-match.dotomi.com/match/bounce/current?networkId=19998&version=1)![](https://rtb.adentifi.com/CookieIndex)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876MMAoIrEALkz5AO_jnwAACiwAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=4387fdfa-bbb1-49f0-9ba3-84ae3fae643f)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=NDM4N2ZkZmEtYmJiMS00OWYwLTliYTMtODRhZTNmYWU2NDNm)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://u.openx.net/w/1.0/cm?gdpr=0&gdpr_consent=&id=7ead435e-a2cd-4cbf-8876-adb66822613f&ph=c6b01e12-aa62-4ae6-9e10-71346e597c31&r=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DF2Stothm3wg5g6opTuaPadz9%26source_user_id%3D)![](https://cms.quantserve.com/pixel/p-_jQ037pSmtjhN.gif?idmatch=1&gdpr=0&gdpr_consent=)

![](https://aa.agkn.com/adscores/g.pixel?sid=9212308278&puid=C48F1900-95F0-4F9E-A996-C98E703B40FD)![](https://sync.crwdcntrl.net/qmap?c=240&tp=PUBM&tpid=C48F1900-95F0-4F9E-A996-C98E703B40FD&gdpr=0&gdpr_consent=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3371&partner_device_id=C48F1900-95F0-4F9E-A996-C98E703B40FD)![](https://i.liadm.com/s/75145?bidder_id=195755&bidder_uuid=C48F1900-95F0-4F9E-A996-C98E703B40FD)[iframe](cid:frame-34840BD59B18106ABDF843A417FF87A0@mhtml.blink)![](https://pubmatic-match.dotomi.com/match/bounce/current?networkId=17100&version=1&nuid=C48F1900-95F0-4F9E-A996-C98E703B40FD&gdpr=0&gdpr_consent=)[iframe](cid:frame-6DEFBC3AEADC8AD22C59AE5DBB1208E4@mhtml.blink)[iframe](cid:frame-6952FE26AE2536020E2F08E5CE895619@mhtml.blink)![](https://rtb.adentifi.com/CookieSyncPubMatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-9884E2833CA430649C719BDF3D76C78B@mhtml.blink)[iframe](cid:frame-F5A7E70A6531A9478AE4C1E29DA375AC@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHI_4z8m3UFz)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHI_4z8m3UFz&cb=1741617712934&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElfNHo4bTNVRno=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHI_4z8m3UFz)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=523793e4-d04c-c9fa-0aae-6c090273b493)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/9e2689dd-5c4a-e049-fb77-f86b9517b23a?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=0ae1ef99-cce6-7200-caa0-ee9e6a407f73&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=MjY4ZTNjNTMtMDU5MS0yY2E0LWRmNDAtYjQyN2EwYTJiMTEz)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-DBEF44E12828EE559AABBE59E603993B@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-155544507C0605E4DBC91B2A3B6B9B73@mhtml.blink)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=7e06fb22-90ce-4510-a7f2-a641b8bf4be8%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)

Topics Frame

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=501431120051172538175&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=501431120051172538175)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/501431120051172538175?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=501431120051172538175&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://pbs-raptive-us.ay.delivery/setuid?bidder=triplelift&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=501431120051172538175)

js-sec.indexww.com

# This site can’t be reached

The webpage at **https://js-sec.indexww.com/um/ixmatch.html** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://js-sec.indexww.com/um/ixmatch.html** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

User-Sync

Pixels![](https://x.bidswitch.net/sync?ssp=openx)![](https://id.rlcdn.com/709996.gif)![](https://idpix.media6degrees.com/orbserv/hbpix?pixId=856286&pcv=125&ptid=23&tpuv=00&tpu=a64c7a13-d47e-5736-3d89-a56d4f8d3fb1)![](https://sync.srv.stackadapt.com/sync?nid=268)![](https://b1sync.zemanta.com/usersync/openx?puid=212c95df-276e-4382-9d93-725c4950a108&cb=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D560843120%26val%3D__ZUID__)![](https://rtb.openx.net/sync/dds)

![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)[iframe](cid:frame-334C023BBD3918C8B23979F28BEA04FB@mhtml.blink)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=501431120051172538175&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=501431120051172538175)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)

Pixels![](https://x.bidswitch.net/sync?ssp=openx)![](https://id.rlcdn.com/709996.gif)![](https://idpix.media6degrees.com/orbserv/hbpix?pixId=856286&pcv=125&ptid=23&tpuv=00&tpu=a64c7a13-d47e-5736-3d89-a56d4f8d3fb1)![](https://sync.srv.stackadapt.com/sync?nid=268)![](https://b1sync.zemanta.com/usersync/openx?puid=212c95df-276e-4382-9d93-725c4950a108&cb=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D560843120%26val%3D__ZUID__)![](https://rtb.openx.net/sync/dds)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=501431120051172538175&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=501431120051172538175)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)

![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)[iframe](cid:frame-2DCF06F42082BF9EEE0DC358B22373BB@mhtml.blink)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

## D3.js Boxplot Techniques
Step by step

* * *

[Most basic\\
\\
* * *\\
\\
The most basic boxplot you can do in d3.js. Keeping only the\\
core code. Starts with an array of data.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/boxplot_basic.png)](https://d3-graph-gallery.com/graph/boxplot_basic.html)

[With several group\\
\\
* * *\\
\\
A boxplot with several groups. It extends the technique used\\
on the previous chart. The tricky part is to computed\\
summary statistics for each group.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/boxplot_several_groups.png)](https://d3-graph-gallery.com/graph/boxplot_several_groups.html)

[Show individual data points\\
\\
* * *\\
\\
The major downside of boxplot is that it hides the\\
underlying data points. It is a good practice to show them\\
using jitter. Learn how with this example.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/boxplot_show_individual_points.png)](https://d3-graph-gallery.com/graph/boxplot_show_individual_points.html)

Template

* * *

Here is the template I'm starting with when in need for a boxplot in
my work. See the code
[here](https://d3-graph-gallery.com/graph/boxplot_horizontal.html).


setosaversicolorvirginica45678Sepal Length

Related blocks

* * *

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Violin150.png)](https://d3-graph-gallery.com/violin.html)

Violin

[![](https://d3-graph-gallery.com/img/section/Density150.png)](https://d3-graph-gallery.com/density.html)

Density

[![](https://d3-graph-gallery.com/img/section/Histogram150.png)](https://d3-graph-gallery.com/histogram.html)

Histogram

[![](https://d3-graph-gallery.com/img/section/Box1150.png)](https://d3-graph-gallery.com/boxplot.html)

Boxplot

[![](https://d3-graph-gallery.com/img/section/Joyplot150.png)](https://d3-graph-gallery.com/ridgeline.html)

Ridgeline

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-CD5ODEvR86kaPJszWtcZdvr5vY4dhQWt2ZeO3ITr28Tb69gVmIYi4jVX7TdDPFKcI5Kudu0GZxk95Uf87J52-t1cn4LcluZgc5hyhlc00K6O_MLUY)

![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_dbm)![](https://us-u.openx.net/w/1.0/cm?id=9ca165a9-d9fe-2ff6-d83d-d145a80b0d37&r=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dopenx%26google_hm%3D%7Bopenx_uuid_base64%7D)![](https://cm.g.doubleclick.net/pixel?google_nid=teadstv_dbm&google_cm&google_dbm)![](https://sync.teads.tv/um?eid=3&uid=&fb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dteadstv_dbm%26google_hm%3D%5BVID_B64%5D)

yt\_dynamic

![](https://s0.2mdn.net/ads/richmedia/studio/23406897/23406897_20240916075050894_YTTVLogo_LT_2x_min.png)

Come for sports.

Stay for comedy.

Try it free

New users only. Terms apply. Cancel anytime

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaTaER-K34d16Npwy7cwWbKYwAHs5COWsNTpT6gLQ7c6eeuz6lugRNt8_EXk_TTsdwJifeC2jSOg32_Rg9gM-FL82QxY3w)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-DApjqf5On4q1928cEDamKSXjFIjShkDfJgfVmPNFuOVc68M6Fis7dl93IYvPZYe1lpEft_0MAYRsLKj4oSQwOFFTZzSgkvzRZIsv9y3U7mAWlhzgg)

![](https://cm.g.doubleclick.net/pixel?google_nid=casale_media2_dsp_secure&google_cm&google_dbm)![](https://dsum-sec.casalemedia.com/rrum?ixi=0&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dsp_secure%26google_cm%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_cm&google_dbm)![](https://ib.adnxs.com/getuid?https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_hm=${BASE64_UID_ENC})

![](https://s-static.innovid.com/medialib/v2/phAsRyliUi8P5_UYeLFkmwZnFEs/798d76ff-0248-4075-a769-37fc640b1056-970x250.jpg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_White.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_Blue.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/WhiteButton_1.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/BlueButton_1.svg)

![](https://ad.doubleclick.net/ddm/activity/attribution_src_register; )

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaSP7RWopi8UtFnPQfQUcRfcCH-mAkDY-SerFnR1kpB73Qh1JZ2U38Z0Nc8A-_lk0MRiq6RE7TdCCKJFLwF8Xx1jZ0zF8w)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.8779017874398742)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=3036185077915600971808&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=3036185077915600971808)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/3036185077915600971808?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=3036185077915600971808&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3036185077915600971808)

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876MNHM76AAPhAOAHE6JAAABb4AAAIB&gpp=&gpp_sid=)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876MNHM76AAPhAOAHE6JAAABb4AAAIB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://cms.quantserve.com/pixel/p-Z8PuJEk6U7Hyq.gif?idmatch=0)![](https://bttrack.com/pixel/cookiesync?source=67e94f23-25d6-4008-8236-375d1743c2e0&secure=1)![](https://c1.adform.net/serving/cookie/match?party=29)![](https://s.company-target.com/s/ix?cm_dsp_id=18&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://capi.connatix.com/us/pixel?puid=Z876MNHM76AAPhAOAHE6JAAABb4AAAIB&pId=17&gdpr_consent=&us_privacy=)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876MNHM76AAPhAOAHE6JAAA%261470)

![](https://pm.w55c.net/ping_match.gif?st=TRIPLELIFT&rurl=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D6019%26xuid%3D_wfivefivec_%26dongle%3D465e%26gdpr=0%26gdpr_consent=)![](https://sync.mathtag.com/sync/img?mt_exid=62&redir=%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3690%26xuid%3D%5BMM_UUID%5D%26dongle%3D3995%26gdpr=0%26gdpr_consent=)![](https://sync-tm.everesttech.net/upi/pid/RVF22VSl?redir=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3657%26xuid%3D%24%7BTM_USER_ID%7D%26dongle%3D3c0a%26gdpr=0%26gdpr_consent=)![](https://cms.quantserve.com/pixel/p-VtN-a_yLd-GB-.gif?idmatch=0&gdpr=0&gdpr_consent=)![](https://us.creativecdn.com/cm-notify?pi=triplelift&gdpr=0&gdpr_consent=)![](https://dis.criteo.com/dis/usersync.aspx?r=44&p=75&cp=triplelift&cu=1&gdpr=0&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&url=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D2711%26xuid%3D%40%40CRITEO_USERID%40%40%26dongle%3D013b)![](https://ib.adnxs.com/getuid?https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D3335%26xuid%3D%24UID%26dongle%3D4d58%26gdpr=0%26gdpr_consent=)![](https://rtb.adentifi.com/CookieSyncTripleLift?gdpr=0&gdpr_consent=)![](https://ib.adnxs.com/prebid/setuid?bidder=triplelift_native&gdpr=0&gdpr_consent=&uid=3036185077915600971808)![](https://ib.adnxs.com/prebid/setuid?bidder=triplelift&gdpr=0&gdpr_consent=&uid=3036185077915600971808)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3036185077915600971808)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_6315a4b4-e6e4-4897-8d46-872fc2a3dbdb&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-F9629127818BFF89435829BE5E33BABE@mhtml.blink)

![](https://aa.agkn.com/adscores/g.pixel?sid=9212308278&puid=4F00E640-9979-4892-9F7B-5EA178B137E3)![](https://sync.crwdcntrl.net/qmap?c=240&tp=PUBM&tpid=4F00E640-9979-4892-9F7B-5EA178B137E3&gdpr=0&gdpr_consent=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3371&partner_device_id=4F00E640-9979-4892-9F7B-5EA178B137E3)![](https://i.liadm.com/s/75145?bidder_id=195755&bidder_uuid=4F00E640-9979-4892-9F7B-5EA178B137E3)[iframe](cid:frame-AFF82EE3236383C07F85B6F7C8F56F21@mhtml.blink)[iframe](cid:frame-C8B228632EA4F5D114E33C889E16A00F@mhtml.blink)[iframe](cid:frame-142815BB293A6F58E4A7DF87FF453CD2@mhtml.blink)![](https://ad.turn.com/r/cs?pid=1&gdpr=0&gdpr_consent=)[iframe](cid:frame-5611C786D391B81BADA5931DDC3CAA10@mhtml.blink)[iframe](cid:frame-459B985E48ECDCFB8067B4D0627F00EB@mhtml.blink)[iframe](cid:frame-5C4DFC181F2A4465662918F2D791CB62@mhtml.blink)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=3&gdpr=0&gdpr_consent=)

[iframe](cid:frame-36473E2A12A9776FB89754BD371C85A8@mhtml.blink)[iframe](cid:frame-EAA24710D0CCA8290A430DFE154EEB7C@mhtml.blink)

[iframe](cid:frame-AD4361308B91B51AC46D2165E0A52B4A@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-6F417FC94463D3840C44EB006F81D3DB@mhtml.blink)[iframe](cid:frame-14A7EC6EC5EA157616920DBC79AD6FF8@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_6315a4b4-e6e4-4897-8d46-872fc2a3dbdb&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_6315a4b4-e6e4-4897-8d46-872fc2a3dbdb)

![](https://match.adsrvr.org/track/cmf/casale)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876MNHM76AAPhAOAHE6JAAABb4AAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876MNHM76AAPhAOAHE6JAAA%261470&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://a.tribalfusion.com/i.match?p=b20&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com/crum%3Fcm_dsp_id%3D131%26external_user_id%3D%24TF_USER_ID_ENC%24&cm_callback_url=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum&cm_user_id=Z876MNHM76AAPhAOAHE6JAAA)![](https://casale-match.dotomi.com/match/bounce/current?networkId=19998&version=1)![](https://www.temu.com/api/adx/cm/pixel-index?cm_user_id=Z876MNHM76AAPhAOAHE6JAAABb4AAAIB)![](https://secure.adnxs.com/getuid?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=46&external_user_id=$UID)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876MNHM76AAPhAOAHE6JAAABb4AAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=b8eb362d-7785-4b22-82f1-01877f827902)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=YjhlYjM2MmQtNzc4NS00YjIyLTgyZjEtMDE4NzdmODI3OTAy)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://secure.adnxs.com/getuid?https://match.sharethrough.com/sync/v1?source_id=0e8893f90b606c9c5d33f1be&gdpr=0&gdpr_consent=&source_user_id=$UID)![](https://ssbsync.smartadserver.com/api/sync?callerId=47&gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=4F00E640-9979-4892-9F7B-5EA178B137E3)[iframe](cid:frame-B1CAF0A1553128F828953771AA190D9F@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=4F00E640-9979-4892-9F7B-5EA178B137E3&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=4F00E640-9979-4892-9F7B-5EA178B137E3&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=TwDmQJl5SJKfe16heLE34w%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=4F00E640-9979-4892-9F7B-5EA178B137E3&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/4F00E640-9979-4892-9F7B-5EA178B137E3?gdpr=0&gdpr_consent=)[iframe](cid:frame-36BF87CB96B0C2E7CBB102EBF52AF5C9@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIuzBNS7Muh)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIuzBNS7Muh)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSEl1ekJOUzdNdWg=)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=9e6e9e6c-1434-c7dc-3f82-93bc33010ccb)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/527f8455-9832-ee6f-ce5b-07dea4650a62?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=c6b8e211-089e-7c26-ff8c-112b5b32c72b&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZWFkNzMxZGItYzFlOS0yMjgyLWVhNmMtNGI5MjkxZDAwOTRi)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-7E413CF1AE36DBC6146F7EB726A6AD33@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-73A5A679A01BEA9206AF149790A8B674@mhtml.blink)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=d6856737-ce2e-47ca-8e89-bb5367769796%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)

Topics Frame

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=3036185077915600971808&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=3036185077915600971808)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)![](https://pbs-raptive-us.ay.delivery/setuid?bidder=triplelift&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=3036185077915600971808)

![](https://us01.z.antigena.com/l/FZt5psomz79DGe~O1V5PkX7S8-NVJIdw0INR-k~Duu9c36GyIDyElf4y8fa2~-9InNSq4BCadyu-8tQSiIkaVleT~Yh8GI4ocNSeo4~API4DJEsYNIMg2sPMMXvjcckTUFy53ZYw3gzv35jSAchydRkSr2XFgqe-kzzlKTlv1VT7-TlAc0PcX7nFzbKlHypwbpU3AWUAJgUx%204F00E640-9979-4892-9F7B-5EA178B137E3&rnd=RND)

x.bidswitch.net

# This site can’t be reached

**x.bidswitch.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**x.bidswitch.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-9F8B7A0EB1FE0DA8C29A321AAA84FDBA@mhtml.blink)[iframe](cid:frame-B8E73BE6D879912119E8177E232238A0@mhtml.blink)[iframe](cid:frame-E4DF0280FCC9C54860AF65D525638C74@mhtml.blink)[iframe](cid:frame-72378CFF96AC3773A38914F77E52D1E7@mhtml.blink)![](https://creativecdn.com/cm-notify?pi=pubmatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-CE597CD19F9B162BC9DB12573AD64D15@mhtml.blink)![](https://c1.adform.net/serving/cookie/match?party=14&redirect=https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTI4NzUmdGw9NDMyMDA=&piggybackCookie=[PLACE%20YOUR%20PIGGYBACK%20COOKIES%20HERE]&gdpr=0&gdpr_consent=)[iframe](cid:frame-5FE796BCE24F43B39943CAC179F0EECB@mhtml.blink)

![](https://sync.crwdcntrl.net/qmap?c=2700&tp=UNDR&gdpr=&gdpr_consent=&tpid=729ojig8ih0vqad5yejaru8kv)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3484&partner_device_id=729ojig8ih0vqad5yejaru8kv)![](https://idsync.rlcdn.com/403716.gif?partner_uid=729ojig8ih0vqad5yejaru8kv)![](https://dpm.demdex.net/ibs:dpid=152416&dpuuid=729ojig8ih0vqad5yejaru8kv)![](https://pbs-raptive-us.ay.delivery/setuid?bidder=undertone&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=729ojig8ih0vqad5yejaru8kv)![](https://ups.analytics.yahoo.com/ups/58545/occ?us_privacy=1YNY)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D&us_privacy=1YNY)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID&us_privacy=1YNY)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776&us_privacy=1YNY)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=&us_privacy=1YNY)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D&us_privacy=1YNY)

Pixels![](https://pbs-raptive-us.ay.delivery/setuid?bidder=openx&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=ff666dde-b101-4fcf-9400-d13eda6905a6)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=c0c691ed-5399-41a1-b56d-89fd68be0627)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

![](https://sync.crwdcntrl.net/qmap?c=2700&tp=UNDR&gdpr=&gdpr_consent=&tpid=729ojig8ih0vqad5yejaru8kv)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3484&partner_device_id=729ojig8ih0vqad5yejaru8kv)![](https://idsync.rlcdn.com/403716.gif?partner_uid=729ojig8ih0vqad5yejaru8kv)![](https://dpm.demdex.net/ibs:dpid=152416&dpuuid=729ojig8ih0vqad5yejaru8kv)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

![](https://sync.crwdcntrl.net/qmap?c=2700&tp=UNDR&gdpr=&gdpr_consent=&tpid=729ojig8ih0vqad5yejaru8kv)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3484&partner_device_id=729ojig8ih0vqad5yejaru8kv)![](https://idsync.rlcdn.com/403716.gif?partner_uid=729ojig8ih0vqad5yejaru8kv)![](https://dpm.demdex.net/ibs:dpid=152416&dpuuid=729ojig8ih0vqad5yejaru8kv)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

Pixels![](https://x.bidswitch.net/sync?ssp=openx)![](https://id.rlcdn.com/709996.gif)![](https://idpix.media6degrees.com/orbserv/hbpix?pixId=856286&pcv=125&ptid=23&tpuv=00&tpu=6a15779b-1006-5910-08a5-5ad87eff87e9)![](https://sync.srv.stackadapt.com/sync?nid=268)![](https://b1sync.zemanta.com/usersync/openx?puid=ed759857-e316-4da4-a8bf-8de978221950&cb=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D560843120%26val%3D__ZUID__)![](https://rtb.openx.net/sync/dds)

![](https://pbs.yahoo.com/setuid?bidder=triplelift&uid=3036185077915600971808&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://p.rfihub.com/cm?pub=36497&in=1&gdpr=0&gdpr_consent=)![](https://match.deepintent.com/usersync/140?gdpr=0&gdpr_consent=)![](https://t.adx.opera.com/pub/sync?pubid=pub11876326796352)![](https://csync.loopme.me/?pubid=11002&redirect=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D6126%26xuid%3D%7Bdevice_id%7D%26dongle%3D9e4f%26gdpr=0%26gdpr_consent=)![](https://c1.adform.net/serving/cookie/match?party=1245&gdpr=0&gdpr_consent=)![](https://cs.admanmedia.com/d95cb18405bc0118170f698389c9f696.gif?puid=3036185077915600971808&gdpr=0&gdpr_consent=&ccpa=${CCPA})![](https://trc.taboola.com/sg/TripleliftSCoD/1/cm?gdpr=0&gdpr_consent=&redirect=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D7772%26xuid%3D%3CTUID%3E%26dongle%3Dtbla)![](https://bh.contextweb.com/bh/sync/3lift?rurl=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D2636%26xuid%3D%25%25VGUID%25%25%26dongle%3D8bee%26gdpr=0%26gdpr_consent=)![](https://sid.storygize.net/ccm/9779a491-75d6-4ad2-92bd-2f159c9892ab)

![](https://pbs.yahoo.com/setuid?bidder=triplelift&uid=3036185077915600971808&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://p.rfihub.com/cm?pub=36497&in=1&gdpr=0&gdpr_consent=)![](https://match.deepintent.com/usersync/140?gdpr=0&gdpr_consent=)![](https://t.adx.opera.com/pub/sync?pubid=pub11876326796352)![](https://csync.loopme.me/?pubid=11002&redirect=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D6126%26xuid%3D%7Bdevice_id%7D%26dongle%3D9e4f%26gdpr=0%26gdpr_consent=)![](https://c1.adform.net/serving/cookie/match?party=1245&gdpr=0&gdpr_consent=)![](https://cs.admanmedia.com/d95cb18405bc0118170f698389c9f696.gif?puid=3036185077915600971808&gdpr=0&gdpr_consent=&ccpa=${CCPA})![](https://trc.taboola.com/sg/TripleliftSCoD/1/cm?gdpr=0&gdpr_consent=&redirect=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D7772%26xuid%3D%3CTUID%3E%26dongle%3Dtbla)![](https://bh.contextweb.com/bh/sync/3lift?rurl=https%3A%2F%2Feb2.3lift.com%2Fxuid%3Fmid%3D2636%26xuid%3D%25%25VGUID%25%25%26dongle%3D8bee%26gdpr=0%26gdpr_consent=)![](https://sid.storygize.net/ccm/9779a491-75d6-4ad2-92bd-2f159c9892ab)

User-Sync

cafemedia-d.openx.net

# This site can’t be reached

The webpage at **https://cafemedia-d.openx.net/w/1.0/pd?us\_privacy=1YNY** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cafemedia-d.openx.net/w/1.0/pd?us\_privacy=1YNY** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

## Density Plot Techniques
Step by step

* * *

A
[density plot](https://www.data-to-viz.com/graph/density.html)
shows the distribution of a numeric variable. In the following
examples, a kernel density estimation is always used. The
result can then be plotted using the `d3.line()` function.


[Most basic\\
\\
* * *\\
\\
The most basic density plot you can do in d3.js. Keeping\\
only the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/density_basic.png)](https://d3-graph-gallery.com/graph/density_basic.html)

[Plot several groups\\
\\
* * *\\
\\
Plotting several variables together allows to compare their\\
distribution.\\
\\
Here is how to do.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/density_double.png)](https://d3-graph-gallery.com/graph/density_double.html)

[Back to back density plot\\
\\
* * *\\
\\
The mirror or back to back density plot is a variation\\
allowing to compare the distribution of 2 groups.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/density_mirror.png)](https://d3-graph-gallery.com/graph/density_mirror.html)

Interactivity

* * *

Playing with the `bandwidth` argument of your density plot
is a crucial step to avoid
[over or under-smoothing](https://www.data-to-viz.com/caveat/bin_size.html). Thus, adding a slider that controls this value can be a great use
of interactivity. Of course, interactivity can also be used to filter
or change input dataset.


[Slider to control bandwidth\\
\\
* * *\\
\\
Slider update the bandwidth used for kernel density\\
estimation with a smooth transition.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/density_slider.gif)](https://d3-graph-gallery.com/graph/density_slider.html)

[Dropdown to filter data\\
\\
* * *\\
\\
Dropdown allows to filter data, keeping one group or the\\
other.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/density_filter.gif)](https://d3-graph-gallery.com/graph/density_filter.html)

Selection of blocks

* * *

A selection of highly customized charts to see how to go further with
density plots.


[Density and Histogram\\
\\
* * *\\
\\
A block by Mike Bostock showing how to combine histogram and\\
density plot.\\
\\
\\
![double bubble plot](https://d3-graph-gallery.com/img/block/block_densityHist.png)](https://bl.ocks.org/mbostock/4341954)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Violin150.png)](https://d3-graph-gallery.com/violin.html)

Violin

[![](https://d3-graph-gallery.com/img/section/Density150.png)](https://d3-graph-gallery.com/density.html)

Density

[![](https://d3-graph-gallery.com/img/section/Histogram150.png)](https://d3-graph-gallery.com/histogram.html)

Histogram

[![](https://d3-graph-gallery.com/img/section/Box1150.png)](https://d3-graph-gallery.com/boxplot.html)

Boxplot

[![](https://d3-graph-gallery.com/img/section/Joyplot150.png)](https://d3-graph-gallery.com/ridgeline.html)

Ridgeline

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-CcjL_qfpQ9Df0JJY8ECR3ZFzCF94GD8cR-T2CXrWnSeNBIz6yyrKraUq17wBYdLFPRjwDlG_OejPRJFpcEbIXWux07AafWoIzAIxpd-lbW5zP51Wg)

![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_dbm)![](https://us-u.openx.net/w/1.0/cm?id=9ca165a9-d9fe-2ff6-d83d-d145a80b0d37&r=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dopenx%26google_hm%3D%7Bopenx_uuid_base64%7D)![](https://cm.g.doubleclick.net/pixel?google_nid=teadstv_dbm&google_cm&google_dbm)![](https://sync.teads.tv/um?eid=3&uid=&fb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dteadstv_dbm%26google_hm%3D%5BVID_B64%5D)

![](https://s-static.innovid.com/medialib/v2/phAsRyliUi8P5_UYeLFkmwZnFEs/b5dc0739-1d82-408d-993d-44df2cc19bd8-970x250.jpg)

Add'l terms apply.

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_White.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_Blue.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/WhiteButton_1.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/BlueButton_1.svg)

### Switch now

# Scroll to the bottom  of the feed with unlimited data on Visible wireless.

$25/month rate available on the Visible plan.

![](https://ad.doubleclick.net/ddm/activity/attribution_src_register; )

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaRlFvbW7NFCOFW0fPQI0u03TPPJgdwyYGRkhlnFfBZWsOQ0ZrEeKmPM0eF1zXxrH89xW4XD5SaLk4Pjztfq_sesTG1VSg)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-DcTM4fY06N4YJre7EfH0jdiEw_FgsLqXF6q0ilIIlYCpfKb5mU9knsZ97Xy0qiXpzYWyFGDj4ZBp4OB66gJB7PTSPxSTR5qey7lLfzouWCGhV5ZD8)

![](https://cm.g.doubleclick.net/pixel?google_nid=casale_media2_dsp_secure&google_cm&google_dbm)![](https://dsum-sec.casalemedia.com/rrum?ixi=0&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dsp_secure%26google_cm%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_cm&google_dbm)![](https://ib.adnxs.com/getuid?https://cm.g.doubleclick.net/pixel?google_nid=appnexus&google_hm=${BASE64_UID_ENC})

![](https://s-static.innovid.com/medialib/v2/phAsRyliUi8P5_UYeLFkmwZnFEs/b5dc0739-1d82-408d-993d-44df2cc19bd8-970x250.jpg)

Add'l terms apply.

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_White.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/Visible_Logo_Blue.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/WhiteButton_1.svg)

![](https://s-static.innovid.com/display/uploads/209088/1172363/1734114469105/s/970x250/BlueButton_1.svg)

### Switch now

# Want wireless independence?  Get one line for $25/mo with Visible.

$25/month rate available on the Visible plan.

![](https://ad.doubleclick.net/ddm/activity/attribution_src_register; )

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaQqCqmx89JbaLCPbDQKFGQVl7MjWzia5qd27ya0iajU-XsL_O4MNukOs5NJQ0mjILuNq7vr6n3rqh0_G874t-q1qWNucA)

Prebid User Sync

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=c713a36a-c66e-4c2e-aed6-b61a06925058)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/6a0a4ae1-ef5d-ed8e-f48d-60fa789e5f9c?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=fecd2ca5-7ff1-7fc7-c55a-760f87c992d5&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZDJhMmZmNmYtYjY4Ni0yMTYzLWQwYmEtMmNiNjRkMmI1Y2I1)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

![](https://us01.z.antigena.com/l/FZt5psomz79DGe~O1V5PkX7S8-NVJIdw0INR-k~Duu9c36GyIDyElf4y8fa2~-9InNSq4BCadyu-8tQSiIkaVleT~Yh8GI4ocNSeo4~API4DJEsYNIMg2sPMMXvjcckTUFy53ZYw3gzv35jSAchydRkSr2XFgqe-kzzlKTlv1VT7-TlAc0PcX7nFzbKlHypwbpU3AWUAJgUx%20BB28DB21-1284-49BA-82FE-CCA78611FB1C&rnd=RND)[iframe](cid:frame-649AD0CD4E06E0ED85E1591272BE69EC@mhtml.blink)[iframe](cid:frame-E949100BA2A694C6421F329B68AB21A1@mhtml.blink)

[iframe](cid:frame-BF163415ABC978FB385DB39B17F0E9A4@mhtml.blink)![](https://creativecdn.com/cm-notify?pi=pubmatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-5014152EE20D7648192EDDD5FD309C33@mhtml.blink)![](https://c1.adform.net/serving/cookie/match?party=14&redirect=https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTI4NzUmdGw9NDMyMDA=&piggybackCookie=[PLACE%20YOUR%20PIGGYBACK%20COOKIES%20HERE]&gdpr=0&gdpr_consent=)

ad.mrtnsvr.com

# This site can’t be reached

**ad.mrtnsvr.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ad.mrtnsvr.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-AE286244EF754964B1262D14BFCE88FF@mhtml.blink)

[iframe](cid:frame-CE67DE96B65ABDCC70B12ED8B92DA4D7@mhtml.blink)

[iframe](cid:frame-E1546EA9B9D88635D16A65384F52EED3@mhtml.blink)[iframe](cid:frame-06FE219BF0769C1E1690D1858011AA03@mhtml.blink)[iframe](cid:frame-56D1A1904100253266A8AF68C82F6008@mhtml.blink)

User-Sync

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.5168721903294926)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

SafeFrame Container

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaSpFRPxBr2_afjXPa86wo6B3v6xTGORFU_vbAOUn4rWMKvygsUfgCkpCQzopjudrBFJNuzh5OfKiG-3pcwmp9hK49wJ8w)

SafeFrame Container

![](https://s.yimg.com/ff/adchoices/icons/adchoices.png)

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_bd347bef-64d5-406b-90b9-3aad323e04f4&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-BD26F66AC2CFBB66A277A0402C5C8DB1@mhtml.blink)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=BB28DB21-1284-49BA-82FE-CCA78611FB1C)[iframe](cid:frame-1F1FDDBB6AAE306E369270776B5B1B22@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=BB28DB21-1284-49BA-82FE-CCA78611FB1C&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=BB28DB21-1284-49BA-82FE-CCA78611FB1C&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=QkIyOERCMjEtMTI4NC00OUJBLTgyRkUtQ0NBNzg2MTFGQjFD&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=uyjbIRKESbqC_synhhH7HA%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=BB28DB21-1284-49BA-82FE-CCA78611FB1C&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/BB28DB21-1284-49BA-82FE-CCA78611FB1C?gdpr=0&gdpr_consent=)[iframe](cid:frame-D491D3E809B86E6C6AEAD8C8C559E48D@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)[iframe](cid:frame-5FA46F5F84FEB463539DB08E2984A529@mhtml.blink)[iframe](cid:frame-C9816D66F5553938C993C74FF627AD50@mhtml.blink)

[iframe](cid:frame-6CA995EA4DE9BFB735EFB3F42C3F613C@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-B9FE514AFC658EF30FC39B29DDB02C72@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_bd347bef-64d5-406b-90b9-3aad323e04f4&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_bd347bef-64d5-406b-90b9-3aad323e04f4)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=677d199d-c980-4a6d-8c7a-af96d99db30d)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=Njc3ZDE5OWQtYzk4MC00YTZkLThjN2EtYWY5NmQ5OWRiMzBk)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://match.prod.bidr.io/cookie-sync/shr?gdpr=0&gdpr_consent=)![](https://ssp.disqus.com/redirectuser?r=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3D7rkJAhPCWXbw9Lq5dZxc6TvN%26source_user_id%3D%24UID&partner=sharethrough)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

sync-amz.ads.yieldmo.com

# This site can’t be reached

**sync-amz.ads.yieldmo.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**sync-amz.ads.yieldmo.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=a61b50d8-635b-c43d-0554-f498effa5935)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=f8b35f59-24f6-4240-8fbb-eed9b44553d9)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=e7a24fb2-bf5f-4c76-be40-3fec2674f4a9%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)

Topics Frame

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876MdHM76EAHyl9AJyoBgAA%261471&gpdr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=1YNY&gdpr=&gdpr_consent=&id=Z876MdHM76EAHyl9AJyoBgAABb8AAAAB&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876MdHM76EAHyl9AJyoBgAABb8AAAAB&gdpr_consent=&us_privacy=1YNY&gdpr=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale?us_privacy=1YNY)![](https://t.adx.opera.com/pub/sync?pubid=pub10256699365696&userId=Z876MdHM76EAHyl9AJyoBgAA%261471&gdpr=&us_privacy=1YNY)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876MdHM76EAHyl9AJyoBgAABb8AAAAB?gdpr_consent=&us_privacy=1YNY&gdpr=&gpp=&gpp_sid=)![](https://sync.mathtag.com/sync/img?mt_exid=15&redir=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fcm_dsp_id%3D3%26external_user_id%3D%5BMM_UUID%5D&us_privacy=1YNY&gdpr=&gdpr_consent=)![](https://csync.loopme.me/?pubid=11466&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D24%26external_user_id%3D%7Bviewer_token%7D&us_privacy=1YNY&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=Z876MdHM76EAHyl9AJyoBgAA%261471)

![](https://aa.agkn.com/adscores/g.pixel?sid=9212308278&puid=BB28DB21-1284-49BA-82FE-CCA78611FB1C)![](https://sync.crwdcntrl.net/qmap?c=240&tp=PUBM&tpid=BB28DB21-1284-49BA-82FE-CCA78611FB1C&gdpr=0&gdpr_consent=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3371&partner_device_id=BB28DB21-1284-49BA-82FE-CCA78611FB1C)![](https://i.liadm.com/s/75145?bidder_id=195755&bidder_uuid=BB28DB21-1284-49BA-82FE-CCA78611FB1C)

![](https://pubmatic-match.dotomi.com/match/bounce/current?networkId=17100&version=1&nuid=BB28DB21-1284-49BA-82FE-CCA78611FB1C&gdpr=0&gdpr_consent=)

[iframe](cid:frame-0F0E0FDF1D4EAFE7B39AD29683EE3F80@mhtml.blink)![](https://rtb.adentifi.com/CookieSyncPubMatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-2D8181B7771DF010C46754F01FA2EE34@mhtml.blink)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=3&gdpr=0&gdpr_consent=)

[iframe](cid:frame-5A3928AC2B59306AF15DBC396D9EC8B5@mhtml.blink)[iframe](cid:frame-BAEBAC3A9D9D49C9F4F8A57D3E02CD81@mhtml.blink)

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D1YNY%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ?us_privacy=1YNY)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D&us_privacy=1YNY)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID&us_privacy=1YNY)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776&us_privacy=1YNY)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=12776&us\_privacy=1YNY** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=12776&us\_privacy=1YNY** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=&us_privacy=1YNY)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D&us_privacy=1YNY)

## Sankey Diagram Guide
Step by step

* * *

Sankey plots are built thanks to the
[d3-sankey](https://github.com/d3/d3-sankey) plugin. Input
data must be a nested list providing the `nodes` and the
`links` of the network. This kind of data can be stored
under several formats: this section shows how to build a sankey
diagram from a few different ones.


[Sankey from .json file\\
\\
* * *\\
\\
The most basic sankey diagram you can do in d3.js. Keeping\\
only the core code.\\
\\
Input data format: Json\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/sankey_basic.png)](https://d3-graph-gallery.com/graph/sankey_basic.html)

[Sankey from .csv file\\
\\
* * *\\
\\
Basic example by d3Noob showing how to build the sankey from\\
a list of links stored at .csv format.\\
\\
\\
![Sankey plot form csv](https://d3-graph-gallery.com/img/block/block_sankeycsv.png)](https://bl.ocks.org/d3noob/06e72deea99e7b4859841f305f63ba85)

Selection of blocks

* * *

A few blocks with more complicated codes to showcase the possibility
of the `d3-sankey ` plugin


[Sankey from .csv file\\
\\
* * *\\
\\
Basic example by d3Noob showing how to build the sankey from\\
a list of links stored at .csv format.\\
\\
\\
![Sankey plot form csv](https://d3-graph-gallery.com/img/block/block_sankeycsv.png)](https://bl.ocks.org/d3noob/06e72deea99e7b4859841f305f63ba85)

[Energy production flow\\
\\
* * *\\
\\
UK energy production and consumption in 2050: energy\\
supplies are on the left, and demands are on the right\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_sankey.png)](https://beta.observablehq.com/@mbostock/d3-sankey-diagram)

[Add horizontal drag\\
\\
* * *\\
\\
A blog that illustrates how to add an horizontal drag\\
feature on each node.\\
\\
\\
![Sankey plot form csv](https://d3-graph-gallery.com/img/block/block_sankeyhoriz.png)](http://bl.ocks.org/d3noob/5028304)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Chord150.png)](https://d3-graph-gallery.com/chord.html)

Chord diagram

[![](https://d3-graph-gallery.com/img/section/Network150.png)](https://d3-graph-gallery.com/network.html)

Network

[![](https://d3-graph-gallery.com/img/section/Sankey150.png)](https://d3-graph-gallery.com/sankey.html)

Sankey

[![](https://d3-graph-gallery.com/img/section/Arc150.png)](https://d3-graph-gallery.com/arc.html)

Arc diagram

[![](https://d3-graph-gallery.com/img/section/Bundle150.png)](https://d3-graph-gallery.com/bundle.html)

Edge bundling

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.9867035083281375)[iframe](https://ads.adthrive.com/builds/prebid/load-cookie.html?endpoint=https://prebid.production.adthrive.com/cookie_sync&max_sync_count=15&coop_sync=true&bidders=undertone,gumgum,appnexus,adf,colossus,ix,kargo,openx,pubmatic,rubicon,triplelift,triplelift_native,33across,conversant,epsilon,unruly,yieldmo,resetDigital,grid,yahoossp,improvedigital,aidem,criteo&args=account:1234)[iframe](about:blank)[iframe](https://ads.adthrive.com/builds/core/3a408e8/html/i.html)[iframe](https://ads.adthrive.com/builds/core/3a408e8/html/rnf.html)[iframe](https://gpsb-reims.criteo.com/paapi/join_ig?advertiser_id=500002_500329&ig_name=r6NnpiEx)![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

[iframe](https://ads.optable.co/ca/paapi/v1/dsp/ig/join?origin=da215d57-dd2c-41a8-b7e0-0f68f321aa3d&vid=v%3A2hobkF1GlioUCa4Y1UWRgM)[iframe](https://securepubads.g.doubleclick.net/static/topics/topics_frame.html)

## D3.js Area Charts
Step by step

* * *

Building an area chart relies on the `d3.area()` helper
function. If you're not familiar with it, have a look to
[shape section](https://d3-graph-gallery.com/graph/shape.html) of the gallery to
understand its basics. Then follow the examples below to put it in
practice.


[Most basic\\
\\
* * *\\
\\
The most basic area chart you can do in d3.js. Keeping only\\
the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/area_basic.png)](https://d3-graph-gallery.com/graph/area_basic.html)

[Add line and dot\\
\\
* * *\\
\\
Highlight the main trend with a line on top of the area. And\\
display individual information with dots.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/area_lineDot.png)](https://d3-graph-gallery.com/graph/area_lineDot.html)

[Small multiple\\
\\
* * *\\
\\
Applying the small multiple technique to area chart. A good\\
workaround to stacked area chart when you have several group\\
to display.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/area_smallmultiple.png)](https://d3-graph-gallery.com/graph/area_smallmultiple.html)

Interactivity

* * *

The most common use of interactivity for area chart is the
[zooming feature](https://d3-graph-gallery.com/graph/area_brushZoom.html). It is usually
done through [brushing](https://d3-graph-gallery.com/graph/interactivity_brush.html) on
the X axis, or using a control panel at the bottom of the main chart.


Note: Another common problem is to switch between dataset. This
is extensively described in the
[line chart section](https://d3-graph-gallery.com/line.html). You just have to replace
`d3.line` by `d3.area()` to get the same
features.


[Line chart section](https://d3-graph-gallery.com/line.html)

[Brushing and zooming\\
\\
* * *\\
\\
Most common use for area chart is zooming: it allows to\\
explore a specific part of your data more in details.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/area_brushZoom.gif)](https://d3-graph-gallery.com/graph/area_brushZoom.html)

[Transition between data\\
\\
* * *\\
\\
Check the line chart section to learn how to make transition\\
between data.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/line_change_data.gif)](https://d3-graph-gallery.com/line.html)

Selection of blocks

* * *

A few blocks with more complicated codes to showcase what's possible
to do with area charts


[Area chart\\
\\
* * *\\
\\
A simple Area chart by Mike Bostock, d3.js creator. Note the\\
observable format to produce the chart and providing the\\
code.\\
\\
\\
![Arc diagram highlight](https://d3-graph-gallery.com/img/block/block_area.png)](https://beta.observablehq.com/@mbostock/d3-area-chart)

[Overlapping areas\\
\\
* * *\\
\\
Two data series overlapping on top of each other.\\
\\
\\
![Arc diagram highlight](https://d3-graph-gallery.com/img/block/block_areaMulti.png)](https://bl.ocks.org/interwebjill/8122dd08da9facf8c6ef6676be7da03f)

[Zoom with focus + context\\
\\
* * *\\
\\
Very handy to zoom on the area chart, keeping an eye on the\\
general context below.\\
\\
\\
![Arc diagram highlight](https://d3-graph-gallery.com/img/block/block_areaZoom.png)](https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Line150.png)](https://d3-graph-gallery.com/line.html)

Line plot

[![](https://d3-graph-gallery.com/img/section/Area150.png)](https://d3-graph-gallery.com/area.html)

Area

[![](https://d3-graph-gallery.com/img/section/StackedArea150.png)](https://d3-graph-gallery.com/stackedarea.html)

Stacked area

[![](https://d3-graph-gallery.com/img/section/Stream150.png)](https://d3-graph-gallery.com/streamgraph.html)

Streamchart

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.7750083294887558)

Prebid User Sync

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=4a20e79c-fc9a-4ef5-9217-b536bf5b9153)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/e7390e17-d5a9-ef55-c84c-63d6c1579e97?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=73fe6853-4505-7d1c-f99b-75233e0053de&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NWY5MWJiOTktOGM3Mi0yM2I4LWVjN2ItMmY5YWY0ZTI5ZGJl)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_0156eb88-f34d-4a11-b435-caff0b8d342b&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV8wMTU2ZWI4OC1mMzRkLTRhMTEtYjQzNS1jYWZmMGI4ZDM0MmI=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV8wMTU2ZWI4OC1mMzRkLTRhMTEtYjQzNS1jYWZmMGI4ZDM0MmI=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-E41BF04716C7C668898EFA38E4AD1BCD@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-8D2FE0D88C12B07F0C86B56ABC638C02@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_0156eb88-f34d-4a11-b435-caff0b8d342b&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_0156eb88-f34d-4a11-b435-caff0b8d342b)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.sharethrough.com

# This site can’t be reached

**match.sharethrough.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**match.sharethrough.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=EF824284-FD0D-4B60-8C04-0D9172DA7FA1)[iframe](cid:frame-914AA8AF6FC18A9C4ECEFA136C6CE1D9@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=EF824284-FD0D-4B60-8C04-0D9172DA7FA1&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=EF824284-FD0D-4B60-8C04-0D9172DA7FA1&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=RUY4MjQyODQtRkQwRC00QjYwLThDMDQtMEQ5MTcyREE3RkEx&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=74JChP0NS2CMBA2Rctp_oQ%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=EF824284-FD0D-4B60-8C04-0D9172DA7FA1&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-00B78492BB71887615F52569D08B58CA@mhtml.blink)

sync-amz.ads.yieldmo.com

# This site can’t be reached

**sync-amz.ads.yieldmo.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**sync-amz.ads.yieldmo.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=2b28142e-59af-c6e6-3995-f7b45633983e)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/e7390e17-d5a9-ef55-c84c-63d6c1579e97?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=73fe6853-4505-7d1c-f99b-75233e0053de&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NWY5MWJiOTktOGM3Mi0yM2I4LWVjN2ItMmY5YWY0ZTI5ZGJl)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-0387F8D437009205FEA733223D58B85D@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

Pixels![](https://pbs-raptive-us.ay.delivery/setuid?bidder=openx&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=dd12e779-8b10-47d6-9a3a-e22a01cbf7cc)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=e2b21b4a-6988-49b8-bb57-bae9b31cf44d)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

## D3 Cartogram Examples
Step by step

* * *

The most popular way to build a cartogram with d3 is the
[topogram library](https://github.com/shawnbot/topogram)
built by Shawn Allen. It relies on a algorithm to construct continuous
area cartograms by
[A. Dougenik et al](http://lambert.nico.free.fr/tp/biblio/Dougeniketal1985.pdf). The following examples should guide you through its basic usage.


![](https://d3-graph-gallery.com/img/other/workinprogress.png)

Selection of blocks

* * *

A few blocks with more complicated codes to showcase what's possible
to do with connection maps. First show how to display connections on
hover. Second show how to apply
[edge bundling](https://d3-graph-gallery.com/bundle.html) to the connection to declutter
the chart.


[US cartogram\\
\\
* * *\\
\\
Cartograms of the US with button to control the input\\
variable.\\
\\
\\
![US cartogram](https://d3-graph-gallery.com/img/block/block_cartogramUS.png)](http://prag.ma/code/d3-cartogram/#popest/2011)

[Cartogram with button\\
\\
* * *\\
\\
Cartogram of Switzerland with buttons to control several\\
attributes\\
\\
\\
![Swiss cartogram](https://d3-graph-gallery.com/img/block/block_cartogramSwiss.png)](http://schuelerzahlen-zuerich.opendata.iwi.unibe.ch/App2/d3geo-2/ch_var/index.html#pop_female/1991)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Map150.png)](https://d3-graph-gallery.com/backgroundmap.html)

Map

[![](https://d3-graph-gallery.com/img/section/Choropleth150.png)](https://d3-graph-gallery.com/choropleth.html)

Choropleth

[![](https://d3-graph-gallery.com/img/section/MapHexbin150.png)](https://d3-graph-gallery.com/hexbinmap.html)

Hexbin map

[![](https://d3-graph-gallery.com/img/section/Cartogram150.png)](https://d3-graph-gallery.com/cartogram.html)

Cartogram

[![](https://d3-graph-gallery.com/img/section/ConnectedMap150.png)](https://d3-graph-gallery.com/connectionmap.html)

Connection

[![](https://d3-graph-gallery.com/img/section/BubbleMap150.png)](https://d3-graph-gallery.com/bubblemap.html)

Bubble map

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=1957766989073482736946&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=1957766989073482736946)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/1957766989073482736946?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=1957766989073482736946&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=1957766989073482736946)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.7675524765269699)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_bbeb3bc3-74ba-4b18-9a68-0825c3d6536a&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-38A440CAE51CA6DFB3225A1647C4DB00@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-620E9D4E50989B53C13554F73BFAC39C@mhtml.blink)

[iframe](cid:frame-C6DEFE09C5E8AD7E036D3273AC7E8CBB@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)

[iframe](cid:frame-513573FE263354876FED3C1DC399EFDF@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_bbeb3bc3-74ba-4b18-9a68-0825c3d6536a&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_bbeb3bc3-74ba-4b18-9a68-0825c3d6536a)

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876UtHM4KQAKFJgAJCzyAAA%261062&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876UtHM4KQAKFJgAJCzyAAABCYAAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://csync.loopme.me/?pubid=11466&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D24%26external_user_id%3D%7Bviewer_token%7D&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)[iframe](cid:frame-C053530C95168459BEBEDFFB71E17456@mhtml.blink)![](https://a.tribalfusion.com/i.match?p=b20&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com/crum%3Fcm_dsp_id%3D131%26external_user_id%3D%24TF_USER_ID_ENC%24&cm_callback_url=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum&cm_user_id=Z876UtHM4KQAKFJgAJCzyAAA)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876UtHM4KQAKFJgAJCzyAAABCYAAAIB&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876UtHM4KQAKFJgAJCzyAAABCYAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=a5c5f368-87ed-41f9-b85f-355ef16aaf48)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=YTVjNWYzNjgtODdlZC00MWY5LWI4NWYtMzU1ZWYxNmFhZjQ4)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://s.ad.smaato.net/c/?adExInit=s&redir=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DxTFJbLbs37tyhbKsPP9VC2cm%26source_user_id%3D%24UID)![](https://match.deepintent.com/usersync/158)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIDZTsVLAyf)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIDZTsVLAyf)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElEWlRzVkxBeWY=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIDZTsVLAyf)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIDZTsVLAyf&cb=1741617746731&url={{REFERRER}}&gdpr=0&gdpr_consent=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=ce7515cf-41db-cca6-351d-4debfa657ffa)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/02640ff6-cddd-e515-c4c4-d9896d017953?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=96a369b2-5d71-775c-f513-cf7c9256b41a&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=YmFjY2JhNzgtOTQwNi0yOWY4LWUwZjMtOTVjNTU4YjQ3YTdh)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-325796CDF32ECA50AA5D2C2501C289A8@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-97DF0FEB9EB9FC276FC8F98F9931D1A2@mhtml.blink)

Topics Frame

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D1YNY%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=125&redir=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D54%26uid%3D%7BuserId%7D&us_privacy=1YNY)![](https://ups.analytics.yahoo.com/ups/58545/occ?us_privacy=1YNY)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D&us_privacy=1YNY)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID&us_privacy=1YNY)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776&us_privacy=1YNY)[iframe](cid:frame-1049B716336F0A4CC3E26AD283779051@mhtml.blink)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=&us_privacy=1YNY)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D&us_privacy=1YNY)

## D3.js Interactivity Guide
Tooltip

* * *

D3.js allows to easily add a tooltip to any element of your
chart. The idea is always the same: triggering a function when the
user `mouseover`, `mousemove` or
`mouseleave` the element. See the 3 examples below showing
how to apply this technique to a
[single circle](https://d3-graph-gallery.com/graph/interactivity_tooltip.html), how to
customize the
[tooltip content](https://d3-graph-gallery.com/graph/interactivity_tooltip.html), and
how to apply it to [data](https://d3-graph-gallery.com/graph/scatter_tooltip.html).


[Most basic\\
\\
* * *\\
\\
The most basic tooltip you can do in d3.js.\\
\\
It just\\
create one tooltip for one circle\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/tooltip_basic.png)](https://d3-graph-gallery.com/graph/interactivity_tooltip.html#mostbasic)

[HTML in tooltip\\
\\
* * *\\
\\
Learn how to customize your tooltip: you can apply any html\\
code to it!\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/tooltip_html.png)](https://d3-graph-gallery.com/graph/interactivity_tooltip.html#customContent)

[Tooltip linked with data\\
\\
* * *\\
\\
Tooltip is different for each datapoint, customized, and\\
element style are modified when hovered.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/heatmap_tooltip.gif)](https://d3-graph-gallery.com/graph/interactivity_tooltip.html#template)

Brushing

* * *

A post on the basic of brushing with d3.js. It starts by very
[basic use](https://d3-graph-gallery.com/graph/interactivity_brush.html) of the
`d3.brush()` function: just initializing the functionality.
Then, it explains how to
[trigger a function](https://d3-graph-gallery.com/graph/interactivity_brush.html#realgraph)
to perform a change on the selected points. Lastly, it describes how
to
[smoothly zoom](https://d3-graph-gallery.com/graph/interactivity_brush.html#brushingforzoom)
on the selected area.


[Create your first brush\\
\\
* * *\\
\\
A very basic example showing how to initialize a brush area\\
with d3.brush.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/interactivity_brushInitialize.png)](https://d3-graph-gallery.com/graph/interactivity_brush.html)

[Trigger a function\\
\\
* * *\\
\\
How to get the brush coordinates and apply a function to the\\
points in the area.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/interactivity_brushTrigger.gif)](https://d3-graph-gallery.com/graph/interactivity_brush.html#realgraph)

[Brushing for zooming\\
\\
* * *\\
\\
How to zoom on the brushed area with a smooth transition.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/interactivity_brushZoom.gif)](https://d3-graph-gallery.com/graph/interactivity_brush.html#brushingforzoom)

Buttons

* * *

A post on buttons: what are the different types, how to add them using
html, and how to connect them with the chart to trigger transition and
animation.


[HTML button types\\
\\
* * *\\
\\
HTML natively offers different types of button: here is a\\
description of them with the associated code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/interactivity_button.png)](https://d3-graph-gallery.com/graph/interactivity_button.html)

Zooming

* * *

A post on the basic of zooming with d3.js. It starts with a
very [basic use](https://d3-graph-gallery.com/graph/interactivity_zoom.html) of the
`d3.zoom()` function: just applied on a single circle.
Then, it explains how to
[trigger a function](https://d3-graph-gallery.com/graph/interactivity_zoom.html#axisZoom)
that update axis. Lastly, it shows that
[brushing](https://d3-graph-gallery.com/graph/interactivity_zoom.html#brushingforzoom)
can be used for zooming as well.


[Most basic zoom\\
\\
* * *\\
\\
A very basic example showing how to initialize a zoom area\\
with d3.zoom.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/interactivity_zoomBasic.gif)](https://d3-graph-gallery.com/graph/interactivity_zoom.html)

[Update axis and element position\\
\\
* * *\\
\\
An example on a real scatterplot to show how to update axis\\
and elements.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/interactivity_zoomAxis.gif)](https://d3-graph-gallery.com/graph/interactivity_zoom.html#axisZoom)

[Brushing for zooming\\
\\
* * *\\
\\
How to zoom on the brushed area with a smooth transition.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/interactivity_brushZoom.gif)](https://d3-graph-gallery.com/graph/interactivity_zoom.html#brushingforzoom)

Transition

* * *

Transition is where the magic of D3 takes place. Here you will
find a few examples based on a single element to understand the basic
mechanism. A few examples based on a real chart are then available to
illustrate the process.


[Most basic\\
\\
* * *\\
\\
The most basic transition you can do in d3.js.\\
\\
It just\\
modify the width attribute of a div using d3.js, keeping\\
only the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/transition_basic.gif)](https://d3-graph-gallery.com/graph/interactivity_transition.html)

[Pipe several transition\\
\\
* * *\\
\\
Run several transitions one after another. Involves\\
different attributes like color and width.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/transition_pipe.gif)](https://d3-graph-gallery.com/graph/interactivity_transition.html)

[Progressive transition\\
\\
* * *\\
\\
This example applies a different `delay` to each\\
element. It gives a progressive transition where elements\\
start moving one by one.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/transition_delay.gif)](https://d3-graph-gallery.com/graph/interactivity_transition.html)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Basic150.png)](https://www.d3-graph-gallery.com/intro_d3js.html)

Basics

[![](https://d3-graph-gallery.com/img/section/Colours150.png)](https://d3-graph-gallery.com/custom.html)

Custom

[![](https://d3-graph-gallery.com/img/section/anim150.gif)](https://d3-graph-gallery.com/interactivity.html)

Interactivity

[![](https://d3-graph-gallery.com/img/section/Shapehelper150.png)](https://d3-graph-gallery.com/graph/shape.html)

Shape helpers

[![](https://d3-graph-gallery.com/img/section/Bad150.png)](https://www.data-to-viz.com/caveats.html)

Caveats

[![](https://d3-graph-gallery.com/img/section/DataArt1150.png)](https://www.data-to-art.com/)

Data art

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.04917533569716226)

Prebid User Sync

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_94c33296-b94d-4e1f-a19a-96b0eb4feed4&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-21A528DC9CEFA617DCFDC18A58B542F9@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV85NGMzMzI5Ni1iOTRkLTRlMWYtYTE5YS05NmIwZWI0ZmVlZDQ=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv&google\_tc=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV85NGMzMzI5Ni1iOTRkLTRlMWYtYTE5YS05NmIwZWI0ZmVlZDQ=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv&google\_tc=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.adsrvr.org

# This site can’t be reached

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_94c33296-b94d-4e1f-a19a-96b0eb4feed4)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_94c33296-b94d-4e1f-a19a-96b0eb4feed4&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-6E8322CF86CB86A85FBAAE6091F3917D@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-FE67F0A64ACF76D6BACE4D2C43A6076E@mhtml.blink)

[iframe](cid:frame-98F094109A91554F106DFB58356BAA39@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-83AB4D128130727E0E8D62D25E9D3D0A@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_94c33296-b94d-4e1f-a19a-96b0eb4feed4&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_94c33296-b94d-4e1f-a19a-96b0eb4feed4)

![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876U9HM4SQAIwJkAInzTwAACTIAAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876U9HM4SQAIwJkAInzTwAACTIAAAIB&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876U9HM4SQAIwJkAInzTwAA%262354&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://rtb.adentifi.com/CookieIndex)![](https://c1.adform.net/serving/cookie/match?party=29)![](https://d.adroll.com/cm/index/tp_out?advertisable=3GMDZMBFQREVBC75SYYKWH)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876U9HM4SQAIwJkAInzTwAACTIAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=4f82b8a7-40a5-444d-ab74-c0d79885eea0)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=NGY4MmI4YTctNDBhNS00NDRkLWFiNzQtYzBkNzk4ODVlZWEw)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://s.ad.smaato.net/c/?adExInit=s&redir=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DxTFJbLbs37tyhbKsPP9VC2cm%26source_user_id%3D%24UID)![](https://pr-bh.ybp.yahoo.com/sync/sharethrough/4f82b8a7-40a5-444d-ab74-c0d79885eea0?gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=0EFE1657-881B-4EC7-9AB8-1DE8E90C6C71)[iframe](cid:frame-F11703CFAAAE23005D168E88D4D68408@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=0EFE1657-881B-4EC7-9AB8-1DE8E90C6C71&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=0EFE1657-881B-4EC7-9AB8-1DE8E90C6C71&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=MEVGRTE2NTctODgxQi00RUM3LTlBQjgtMURFOEU5MEM2Qzcx&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=Dv4WV4gbTseauB3o6QxscQ%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=0EFE1657-881B-4EC7-9AB8-1DE8E90C6C71&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-49589628720DC90F070E997927434F6D@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIEbMDyZMXt)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIEbMDyZMXt)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIEbMDyZMXt&cb=1741617747231&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=563e3048-d415-c6ee-323a-f182ac237225)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/9a2f2a71-5813-ef5d-c3e3-65e03b47748c?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=0ee84c35-c8bf-7d14-f234-7315c410b9c5&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=MjI4NzlmZmYtMDFjOC0yM2IwLWU3ZDQtMjlhYzBlZjI3N2E1)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

**ib.adnxs.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ib.adnxs.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-0CA4099D264160E5FF8214B1060E7C61@mhtml.blink)

Topics Frame

## Understanding Correlograms
Step by step

* * *

In a
[correlogram](https://www.data-to-viz.com/graph/correlogram.html), the relationship between each pair of variable is visualised
through a [scatterplot](https://d3-graph-gallery.com/scatter.html), or a symbol that
represents the correlation (bubble, line, number..). The diagonal
often represents the distribution of each variable, using an
[histogram](https://d3-graph-gallery.com/histogram.html) or a
[density plot](https://d3-graph-gallery.com/density.html).


[Most basic\\
\\
* * *\\
\\
Correlogram with cor values and circles.\\
\\
Input: correlation matrix.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/correlogram_basic.png)](https://d3-graph-gallery.com/graph/correlogram_basic.html)

[With scatter plot\\
\\
* * *\\
\\
Show relationship between each pair through a scatterplot\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/correlogram_scatter.png)](https://d3-graph-gallery.com/graph/correlogram_scatter.html)

[Add the histogram\\
\\
* * *\\
\\
Explain how to add an histogram in the diagonal to show\\
variable distributions.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/correlogram_histo.png)](https://d3-graph-gallery.com/graph/correlogram_histo.html)

Selection of blocks

* * *

Not many blocks are available for
[correlogram](https://www.data-to-viz.com/graph/correlogram.html). It makes sense, since correlogram are more used for exploratory
analysis than for explanatory purposes ( [read more](https://www.data-to-viz.com/graph/correlogram.html)). Thus, they are not often build using d3.js


[Correlogram on the cars dataset\\
\\
* * *\\
\\
Correlogram with coefficient of correlation between\\
variables.\\
\\
\\
![Hierarchical edge bundling](https://d3-graph-gallery.com/img/block/block_correlogram.png)](http://plnkr.co/edit/RJk5vmROVAJGPHIPutVR?p=preview)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/ScatterPlot150.png)](https://d3-graph-gallery.com/scatter.html)

Scatter

[![](https://d3-graph-gallery.com/img/section/Heatmap150.png)](https://d3-graph-gallery.com/heatmap.html)

Heatmap

[![](https://d3-graph-gallery.com/img/section/Correlogram150.png)](https://d3-graph-gallery.com/correlogram.html)

Correlogram

[![](https://d3-graph-gallery.com/img/section/BubblePlot150.png)](https://d3-graph-gallery.com/bubble.html)

Bubble

[![](https://d3-graph-gallery.com/img/section/ScatterConnected150.png)](https://d3-graph-gallery.com/connectedscatter.html)

Connected scatter

[![](https://d3-graph-gallery.com/img/section/2dDensity150.png)](https://d3-graph-gallery.com/density2d.html)

Density 2d

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=2134947326537162546761&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=2134947326537162546761)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/2134947326537162546761?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=2134947326537162546761&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=2134947326537162546761)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.47858583909168995)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_fb2ddffe-abd2-473d-a4be-b6a722e49b8b&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-7538A01601FE95FDD67976BB702DAEB4@mhtml.blink)

[iframe](cid:frame-5C0F81E592D4082E6DBFD91FEF891B67@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)

creativecdn.com

# This site can’t be reached

**creativecdn.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**creativecdn.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_fb2ddffe-abd2-473d-a4be-b6a722e49b8b&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_fb2ddffe-abd2-473d-a4be-b6a722e49b8b)

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876U9HM4NgAK4kXAj3_aAAAFuMAAAAB&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876U9HM4NgAK4kXAj3_aAAAFuMAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://ad.turn.com/r/cs?pid=21)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://match.deepintent.com/usersync/113)![](https://p.rfihub.com/cm?in=1&pub=2079)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876U9HM4NgAK4kXAj3_aAAAFuMAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=92c95636-acc1-4cfb-8ad6-63d911e488db)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=OTJjOTU2MzYtYWNjMS00Y2ZiLThhZDYtNjNkOTExZTQ4OGRi)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://creativecdn.com/cm-notify?pi=sharethrough&gdpr=0&gdpr_consent=)![](https://b1sync.zemanta.com/usersync/sharethrough?cb=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_user_id%3D__ZUID__%26gdpr%3D%7BGDPR%7D%26gdpr_consent%3D%7BGDPR_CONSENT_80%7D)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHuII0RHI5fKuRNrTh)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHuII0RHI5fKuRNrTh)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHuII0RHI5fKuRNrTh&cb=1741617746983&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=cf720f78-2932-ccf7-3f23-89c38641a12c)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/03631541-a534-e544-cefa-1da11125a785?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=97a47305-3598-770d-ff2d-0b54ee726acc&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=YmJjYmEwY2YtZmNlZi0yOWE5LWVhY2QtNTFlZDI0OTBhNGFj)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/bounce?%2Fgetuid%3Fhttps%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fid%3D%24UID%26ex%3Dappnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/bounce?%2Fgetuid%3Fhttps%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fid%3D%24UID%26ex%3Dappnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-DAD03AB779E5CD857C956656010CD0DD@mhtml.blink)

Topics Frame

## Lollipop Chart Guide
Step by step

* * *

Building a lollipop chart follows almost the same process as for a
[barplot](https://d3-graph-gallery.com/barplot.html). It is by the way used exactly for
the same kind of
[input dataset](https://www.data-to-viz.com/). The idea is
to create a `scalePoint()` or a
`scaleBand()` and add a set a circle and another of
segments. Note that it often looks better
[horizontal](https://d3-graph-gallery.com/graph/lollipop_horizontal.html), and that
[reordering](https://d3-graph-gallery.com/graph/lollipop_ordered.html) is important.


[Most basic\\
\\
* * *\\
\\
The most basic lollipop chart you can do in d3.js. Keeping\\
only the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/lollipop_basic.png)](https://d3-graph-gallery.com/graph/lollipop_basic.html)

[Turn it horizontal\\
\\
* * *\\
\\
Lollipop plot often looks better horizontal: it makes label\\
easier to be read. Find how to do it!\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/lollipop_horizontal.png)](https://d3-graph-gallery.com/graph/lollipop_horizontal.html)

[Order groups\\
\\
* * *\\
\\
Give more insight to your chart: reorder groups with just 3\\
more lines of code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/lollipop_ordered.png)](https://d3-graph-gallery.com/graph/lollipop_ordered.html)

[Cleveland dot plot\\
\\
* * *\\
\\
A variation of the lollipop where 2 data series are\\
available for each group.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/lollipop_cleveland.png)](https://d3-graph-gallery.com/graph/lollipop_cleveland.html)

Animation

* * *

Interactivity is mainly going to be about
[buttons](https://d3-graph-gallery.com/graph/interactivity_button.html) for lollipops.
Here are a few examples. Note that the
[barplot section](https://d3-graph-gallery.com/barplot.html) has many more interactive
charts to offer, that can easily be converted to lollipops.


[Basic animation at loading\\
\\
* * *\\
\\
Points start at x=0 and then take their real position.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/lollipop_animationStart.gif)](https://d3-graph-gallery.com/graph/lollipop_animationStart.html)

[Button to change input data\\
\\
* * *\\
\\
Select input data thanks to 2 buttons with smooth\\
transition.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/lollipop_button_data_csv.gif)](https://d3-graph-gallery.com/graph/lollipop_button_data_csv.html)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Bar150.png)](https://d3-graph-gallery.com/barplot.html)

Barplot

[![](https://d3-graph-gallery.com/img/section/Spider150.png)](https://d3-graph-gallery.com/spider.html)

Spider / Radar

[![](https://d3-graph-gallery.com/img/section/Wordcloud150.png)](https://d3-graph-gallery.com/wordcloud.html)

Wordcloud

[![](https://d3-graph-gallery.com/img/section/Parallel1150.png)](https://d3-graph-gallery.com/parallel.html)

Parallel

[![](https://d3-graph-gallery.com/img/section/Lollipop150.png)](https://d3-graph-gallery.com/lollipop.html)

Lollipop

[![](https://d3-graph-gallery.com/img/section/CircularBarplot150.png)](https://d3-graph-gallery.com/circular_barplot.html)

Circular Barplot

[iframe](cid:frame-9DE7949F656C7BB1C404DE0470FE1DE8@mhtml.blink)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.4860486864359408)

Prebid User Sync

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=fd63550e-3cac-4822-b699-32e7a2082ee0)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/507abc85-159f-e982-ecc2-e407dc042124?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=c4bddac1-8533-7bcb-dd15-f2f22353ec6d&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZThkMjA5MGItNGM0NC0yNTZmLWM4ZjUtYTg0YmU5YjEyMjBk)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_b1e07d37-aedb-4aca-84a6-0655c0ee77da&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-D3B18BA7FE1A412449BA3EBC8F7274F6@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-923E388843196D3BE7D3F07DFC42A0DD@mhtml.blink)

[iframe](cid:frame-6876583C6BE7A7DF6686E34132BE30D5@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-26F81B32AD244CEAC2C8DAC2E4543468@mhtml.blink)[iframe](cid:frame-4D5B1BCF845E5613990B4DA81BC54942@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_b1e07d37-aedb-4aca-84a6-0655c0ee77da&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_b1e07d37-aedb-4aca-84a6-0655c0ee77da)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=35a291f2-d7ab-4798-a7f3-c4b0dfec933e)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=MzVhMjkxZjItZDdhYi00Nzk4LWE3ZjMtYzRiMGRmZWM5MzNl)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=97&redir=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DgBgkxrVErPj9wqivTDd2AmVY%26source_user_id%3D%7BuserId%7D&gdpr=0&gdpr_consent=)![](https://ssbsync.smartadserver.com/api/sync?callerId=47&gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=669B75FA-6165-49D5-9361-147C1F26D4D5)[iframe](cid:frame-DF586DE58683C4302ACD85F8B563C5C6@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=669B75FA-6165-49D5-9361-147C1F26D4D5&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=669B75FA-6165-49D5-9361-147C1F26D4D5&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=NjY5Qjc1RkEtNjE2NS00OUQ1LTkzNjEtMTQ3QzFGMjZENEQ1&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=Zpt1-mFlSdWTYRR8HybU1Q%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=669B75FA-6165-49D5-9361-147C1F26D4D5&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-5657C8744408E03AFDB3CF39A69736EA@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIcqeNeI5Er)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIcqeNeI5Er&cb=1741617748193&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIcqeNeI5Er)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSEljcWVOZUk1RXI=)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=9c6ba6bc-9999-c031-1d1b-70654b60278d)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=c2c3a93d-de34-464c-97f4-6a2410df2d61)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)

[iframe](cid:frame-A97279A6A2682C928F2A495F77BA5BDE@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-A59B3A146F7B369564BBF8D0F3B307AF@mhtml.blink)

Topics Frame

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=4608921603019177750968&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=4608921603019177750968)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/4608921603019177750968?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=4608921603019177750968&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://pbs-raptive-us.ay.delivery/setuid?bidder=triplelift&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=4608921603019177750968)

## Circular Barplot Guide
Step by step

* * *

Here is a set of examples leading to a proper circular barplot, step
by step. The first
[most basic circular barchart](https://d3-graph-gallery.com/graph/circular_barplot_basic.html)
shows how to take advantage of the
`d3.scaleRadial()` function to display bars around a
circle. Once this concept is understood, it is relatively straight
forward to
[add labels](https://d3-graph-gallery.com/graph/circular_barplot_label.html) or another
[series of bars](https://d3-graph-gallery.com/graph/circular_barplot_double.html).


[Most basic\\
\\
* * *\\
\\
The most basic circular barplot you can do in d3.js. Keeping\\
only the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/circular_barplot_basic.png)](https://d3-graph-gallery.com/graph/circular_barplot_basic.html)

[Add labels\\
\\
* * *\\
\\
Learn how to add labels for each bar. This can be a bit\\
tricky since it recalls a few trigonometry concepts your\\
learned in high school.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/circular_barplot_label.png)](https://d3-graph-gallery.com/graph/circular_barplot_label.html)

[Double circular barplot\\
\\
* * *\\
\\
How to add a second series of value in the circular barplot\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/circular_barplot_double.png)](https://d3-graph-gallery.com/graph/circular_barplot_double.html)

Selection of blocks

* * *

[Radial Stacked Bar\\
\\
* * *\\
\\
A circular stacked barchart by Mike Bostock showing the\\
population of US states, split in age range.\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_circularBar.png)](https://bl.ocks.org/mbostock/6fead6d1378d6df5ae77bb6a719afcb2)

[Circular barchart caveat\\
\\
* * *\\
\\
An animation by Mike Bostock aiming to describe the bias in\\
circular barchart.\\
\\
Long bars tend to be visually inflated if no specific care\\
is given.\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_circularCaveat.png)](https://bl.ocks.org/mbostock/31bd072e50eaf550d79e)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Bar150.png)](https://d3-graph-gallery.com/barplot.html)

Barplot

[![](https://d3-graph-gallery.com/img/section/Spider150.png)](https://d3-graph-gallery.com/spider.html)

Spider / Radar

[![](https://d3-graph-gallery.com/img/section/Wordcloud150.png)](https://d3-graph-gallery.com/wordcloud.html)

Wordcloud

[![](https://d3-graph-gallery.com/img/section/Parallel1150.png)](https://d3-graph-gallery.com/parallel.html)

Parallel

[![](https://d3-graph-gallery.com/img/section/Lollipop150.png)](https://d3-graph-gallery.com/lollipop.html)

Lollipop

[![](https://d3-graph-gallery.com/img/section/CircularBarplot150.png)](https://d3-graph-gallery.com/circular_barplot.html)

Circular Barplot

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=4303935001997207771961&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=4303935001997207771961)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/4303935001997207771961?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=4303935001997207771961&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=4303935001997207771961)

ssp-sync.criteo.com

# This site can’t be reached

The webpage at **https://ssp-sync.criteo.com/user-sync/iframe?gdprapplies=&gdpr=&ccpa=&gpp=&gpp\_sid=&redir=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dcriteo%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D%24%7BCRITEO\_USER\_ID%7D&profile=230** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssp-sync.criteo.com/user-sync/iframe?gdprapplies=&gdpr=&ccpa=&gpp=&gpp\_sid=&redir=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dcriteo%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D%24%7BCRITEO\_USER\_ID%7D&profile=230** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.03701838980261396)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_351d5554-3250-4790-a350-3f5a267e2006&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

**cm.g.doubleclick.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**cm.g.doubleclick.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-CE38354A875EAA1BCB3CFE08DA9E9719@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-B1C6B972EA8C1969BD11FCC06560F14F@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_351d5554-3250-4790-a350-3f5a267e2006&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_351d5554-3250-4790-a350-3f5a267e2006)

![](https://match.adsrvr.org/track/cmf/casale)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876UtHM5UUAHlRcAGTVPAAAFfoAAAAB&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876UtHM5UUAHlRcAGTVPAAA%265626&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876UtHM5UUAHlRcAGTVPAAAFfoAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.deepintent.com/usersync/113)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)

um4.eqads.com

# This site can’t be reached

The webpage at **https://um4.eqads.com/um/cs** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://um4.eqads.com/um/cs** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub10256699365696&userId=Z876UtHM5UUAHlRcAGTVPAAA%265626&gdpr=&us_privacy=)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876UtHM5UUAHlRcAGTVPAAAFfoAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=1c2047cd-8750-4750-b132-2a992915a95b)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=MWMyMDQ3Y2QtODc1MC00NzUwLWIxMzItMmE5OTI5MTVhOTVi)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://b1sync.zemanta.com/usersync/sharethrough?cb=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_user_id%3D__ZUID__%26gdpr%3D%7BGDPR%7D%26gdpr_consent%3D%7BGDPR_CONSENT_80%7D)![](https://match.prod.bidr.io/cookie-sync/shr?gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=76168157-99A3-4F98-BA05-CE37B4138887)[iframe](cid:frame-C805DC7121053290C5A54B4FEB1EAB2E@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=76168157-99A3-4F98-BA05-CE37B4138887&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=76168157-99A3-4F98-BA05-CE37B4138887&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=NzYxNjgxNTctOTlBMy00Rjk4LUJBMDUtQ0UzN0I0MTM4ODg3&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=dhaBV5mjT5i6Bc43tBOIhw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=76168157-99A3-4F98-BA05-CE37B4138887&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-C8CCDA52242BB1942D12F2E0D47BA84A@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIQSE3Oy0Jk)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIQSE3Oy0Jk)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=2ef35f30-283f-c1ae-0a2a-a9786ccc7b6c)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/e2e24509-a439-e81d-fbf3-3d1afba87dc5?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=7625234d-3495-7a54-ca24-2bef04ffb08c&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NWE0YWYwODctZmRlMi0yNGYwLWRmYzQtNzE1NmNlMWQ3ZWVj)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

**ib.adnxs.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ib.adnxs.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-70A6B215DBB9E2848DDA042AF49790AF@mhtml.blink)

Topics Frame

## Streamgraph Creation Guide
Step by step

* * *

Building a streamgraph follows the same process than for a
[stacked area chart](https://d3-graph-gallery.com/stackedarea.html). Stack the data with
the `d3.stack()` function, but use the
`stackOffsetSilhouette` offset to position shapes around
the central axis.


[Stacked area section for more](https://d3-graph-gallery.com/stackedarea.html)

[Most basic\\
\\
* * *\\
\\
The most basic streamgraph you can do in d3.js. Keeping only\\
the core code.\\
\\
Input format: wide (untidy)\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/streamgraph_basic.png)](https://d3-graph-gallery.com/graph/streamgraph_basic.html)

[Template\\
\\
* * *\\
\\
A clean template to start with. Include color palette, clean\\
axis with title, hover feature and more.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/streamgraph_template.png)](https://d3-graph-gallery.com/graph/streamgraph_template.html)

Template

* * *

Here is a streamchart showing the evolution of a few baby names in the
US during the previous century.
[Read more](https://www.data-to-viz.com/story/OneCatSevOrderedNum.html)
about it here. Axis are customized, color palette is used, hover
feature is added.

Hover a group to get the name.


[Get code](https://d3-graph-gallery.com/graph/streamgraph_template.html)

1,9001,9251,9752,000Time (year)

Selection of blocks

* * *

A few blocks with more complicated codes to showcase the possibility
of d3 for streamgraphs.


[Transition in streamgraph\\
\\
* * *\\
\\
Shows how to transition data in streamgraph. Always good to\\
read Mike Bostock's code.\\
\\
\\
![Treemap mike d3](https://d3-graph-gallery.com/img/block/block_streamTransition.png)](https://beta.observablehq.com/@mbostock/streamgraph-transitions)

[Tooltip on streamgraph\\
\\
* * *\\
\\
Handy tooltip to give group name on hover.\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_streamTooltip.png)](https://blockbuilder.org/f94f/5554bf0a6874a64f46deacf3448ee5c8)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Line150.png)](https://d3-graph-gallery.com/line.html)

Line plot

[![](https://d3-graph-gallery.com/img/section/Area150.png)](https://d3-graph-gallery.com/area.html)

Area

[![](https://d3-graph-gallery.com/img/section/StackedArea150.png)](https://d3-graph-gallery.com/stackedarea.html)

Stacked area

[![](https://d3-graph-gallery.com/img/section/Stream150.png)](https://d3-graph-gallery.com/streamgraph.html)

Streamchart

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.6630037472694481)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=1375553716448909626701&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=1375553716448909626701)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/1375553716448909626701?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=1375553716448909626701&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=1375553716448909626701)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_3e9a8612-3b4f-4a39-b5f1-90f6b11d99ad&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV8zZTlhODYxMi0zYjRmLTRhMzktYjVmMS05MGY2YjExZDk5YWQ=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV8zZTlhODYxMi0zYjRmLTRhMzktYjVmMS05MGY2YjExZDk5YWQ=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.adsrvr.org

# This site can’t be reached

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-94DDDE5DDAAE7295CCD1C984F1647858@mhtml.blink)[iframe](cid:frame-ACE3C5AA13EF093C3056106DC4C0174A@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_3e9a8612-3b4f-4a39-b5f1-90f6b11d99ad&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_3e9a8612-3b4f-4a39-b5f1-90f6b11d99ad)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.sharethrough.com

# This site can’t be reached

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

**ib.adnxs.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ib.adnxs.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-15186768C28CEE49B07101780223CBB2@mhtml.blink)

Topics Frame

## Arc Diagram Tutorial
A note on input data format

* * *

Building an arc diagram requires information on nodes and
links. This information can be stored in many different format
as described
[here](https://www.data-to-viz.com/graph/network.html).
`Json` format is the most convenient way to work with
`d3.js` and looks basically like that:


``` js
{ "nodes": [\
  { "id": 1, "name": "A" },\
  { "id": 2, "name": "B" }\
],
"links": [\
  { "source": 1, "target": 2 }\
]}
```

It is unlikely that your data are currently at this format. You
probably need to reformat your data first using another
tool like `R`. The
[following document](https://d3-graph-gallery.com/graph/network_data_format.html)
gives a few example on how to reformat the most common types of
input to get a `json` file.


[Reformat your data to Json](https://d3-graph-gallery.com/graph/network_data_format.html)

Step by step

* * *

The following most
[basic arc diagram](https://d3-graph-gallery.com/graph/arc_basic.html) will guide you
through the core steps of this chart. Next charts show how to turn it
[vertical](https://d3-graph-gallery.com/graph/arc_vertical.html) and how to
[highlight links](https://d3-graph-gallery.com/graph/arc_highlight.html) on hover.


[Most basic\\
\\
* * *\\
\\
The most basic arc diagram you can do in d3.js. Keeping only\\
the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/arc_basic.png)](https://d3-graph-gallery.com/graph/arc_basic.html)

[Vertical version\\
\\
* * *\\
\\
Just a variation putting the nodes along a vertical line\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/arc_vertical.png)](https://d3-graph-gallery.com/graph/arc_vertical.html)

[Highlights a node\\
\\
* * *\\
\\
Hover a node to highlight all its related links.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/arc_highlight.gif)](https://d3-graph-gallery.com/graph/arc_highlight.html)

Template

* * *

Here is an arc diagram showing the relationships between researchers.
One node is drawn for each researcher having published at least
one paper with my previous supervisor,
[Vincent Ranwez](https://sites.google.com/site/ranwez/).
Two researchers are linked if they co-authored at least one
paper together. Read more about this dataset
[here](https://www.data-to-viz.com/story/AdjacencyMatrix.html).


Hover nodes for more info

[See code](https://d3-graph-gallery.com/graph/arc_template.html)

C ScornavaccaV BerryN GaltierM ArdissonF DelsucS SantoniY HoltzEJP DouzeryS GléminP RoumetV ViaderK BelkhirG PouxJP DoyonJ RomiguierG SarahJ DavidJY DutheilJ DainatJ MontmainJL DavidJF DufayardS HarispeMF SyA BesnardM BonnefoyM TavaudMH MullerNO RodeP LeroyS GautierB BoussauN ChantretA ArmeroA BreilA DereeperF De LamotteFC BaurensG DrocS BocsA CriscuoloAMA ChifolleauN AubervalN ClaironPH FabreS DiserS PointetS PouraliTH NguyenV DaubinM CrampesE BazinE FiguetF ZhangJ DutheilJH WilsonL DuretS GaillardV DionC BurgarellaS GleminE DouzeryGJ SzöllősiKY GorbunovMK TilakS GuillemotA CenciC GuilhaumonJS EscobarM Tavaud-PirraA DassouliB NoelB VacherieE CornillotG TsagkogeorgaM BallenghienP GayralV CahaisI FischerCW KilpatrickD HuchonP ChevretPD JenkinsU JordanB MartretC FizamesJ AlassimoneL MarquèsZ ShahzadB RoureD BaurainDMD VienneH PhilippeV LefortA RegnaultB DuthilP AugereauK Hadj-KaddourJ Melo FerreiraW PaprotnyD SánchezM BatetN FioriniEMA LGI2PC DouadyEJPDNLH PhilippeSBACF DelsucA SerraD PotE JacoxTH ToA ChifolleauY ChanJ VillerdK Hadj KaddourJ Melo‐Ferreira

Selection of blocks

* * *

A few blocks with more complicated codes to showcase what's possible
to do with arc diagram.


[Highlight links\\
\\
* * *\\
\\
This block shows how to highlight all links of a node on\\
hover.\\
\\
\\
![Arc diagram highlight](https://d3-graph-gallery.com/img/block/block_arcHover.png)](https://bl.ocks.org/rpgove/53bb49d6ed762139f33bdaea1f3a9e1c)

[Button for order\\
\\
* * *\\
\\
Add a button that controls node order along the axis.\\
\\
\\
![Arc diagram highlight](https://d3-graph-gallery.com/img/block/block_arcbutton.png)](http://bl.ocks.org/mayblue9/dcc49ef6e3888f37f755177c4a248f2c)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Chord150.png)](https://d3-graph-gallery.com/chord.html)

Chord diagram

[![](https://d3-graph-gallery.com/img/section/Network150.png)](https://d3-graph-gallery.com/network.html)

Network

[![](https://d3-graph-gallery.com/img/section/Sankey150.png)](https://d3-graph-gallery.com/sankey.html)

Sankey

[![](https://d3-graph-gallery.com/img/section/Arc150.png)](https://d3-graph-gallery.com/arc.html)

Arc diagram

[![](https://d3-graph-gallery.com/img/section/Bundle150.png)](https://d3-graph-gallery.com/bundle.html)

Edge bundling

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-Bczdcj4bUxPjc_WlLfhpQvIF68osBoc1dNNk5iVkU9tWNTZUnMxJl5cT3TcbPnuKeLBI5H_9oKC3EvhXo9CtEHV0wyEQvNJZgv2JWHwpudqDn_CCs)

[iframe](cid:frame-5DDDE327243AAC55DE0E0733A5241A26@mhtml.blink)

[iframe](cid:frame-A325559F0CE7D3A75BCB5EA602646CD1@mhtml.blink)

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaQ4GGAtZaa2kQN5LZSPvPMcglArjCjaUqal9VxOnTWd6rcedDM9DcEf3DXnhLOcRvrgsS55Yg5mE1DVQgTr9BJz_AK_Wg)

[iframe](cid:frame-A3EDEA3BC6BD4BC58E13C4FF5D4E5A46@mhtml.blink)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

SafeFrame Container

![](https://pagead2.googlesyndication.com/pagead/gen_204?id=xbid&dbm_b=AKAmf-BxAeyosWf-P_lpBC8bJ-8IqQGxfGPhgIrnnbGPkw_G9iwK-7N-ErAgXU0JKeITOe2M2oCFhdZE3GtBR1IlFxKtIRghJpuQge-ZcdS87uyH1EADfGk)

[iframe](cid:frame-0C4CDE178B99EAA5F79EF935BA55D8E7@mhtml.blink)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.06439404280540306)

Prebid User Sync

![](https://idsync.rlcdn.com/420486.gif?partner_uid=5849C3A5-648F-45DF-828C-33FA2911B1D2)

c1.adform.net

# This site can’t be reached

**c1.adform.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**c1.adform.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.onaudience.com/?partner=214&mapped=5849C3A5-648F-45DF-828C-33FA2911B1D2&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=5849C3A5-648F-45DF-828C-33FA2911B1D2&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=NTg0OUMzQTUtNjQ4Ri00NURGLTgyOEMtMzNGQTI5MTFCMUQy&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=WEnDpWSPRd-CjDP6KRGx0g%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=5849C3A5-648F-45DF-828C-33FA2911B1D2&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/5849C3A5-648F-45DF-828C-33FA2911B1D2?gdpr=0&gdpr_consent=)[iframe](cid:frame-89F7F481363B47A23D726D118F1C9A08@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)

match.deepintent.com

# This site can’t be reached

**match.deepintent.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**match.deepintent.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_c0466cdc-402c-4974-89eb-99aa3e561d5a&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-DB314F539D14AC7CE0585B1F5E213AF5@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-28E565CD5F225F565E49FBA762F47F2D@mhtml.blink)

[iframe](cid:frame-B92B2D76D24B28F124F60AB6F0CF2A71@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-8E476E491FCD33818EB8AC6917D6A6D1@mhtml.blink)[iframe](cid:frame-8494004459BB1180BC71D98BDDD78F23@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_c0466cdc-402c-4974-89eb-99aa3e561d5a)

[iframe](cid:frame-1EF5E056B54345C0844E0B33DCC7A642@mhtml.blink)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

[iframe](cid:frame-7D56A532931FB64BA4412033DA2790CD@mhtml.blink)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_c0466cdc-402c-4974-89eb-99aa3e561d5a&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-3B0AD62606529FDCAD267361FA39D9C5@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_c0466cdc-402c-4974-89eb-99aa3e561d5a&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-27AF095D68E3224FF1074BBA10EBC37A@mhtml.blink)

[iframe](cid:frame-697EFC98453DD17F99AFDB81B5254850@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_c0466cdc-402c-4974-89eb-99aa3e561d5a)

![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://match.adsrvr.org/track/cmf/casale)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876U8AoJMAAOqg8AGne3QAA%261668&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876U8AoJMAAOqg8AGne3QAABoQAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://tr.blismedia.com/v1/api/sync/indexexchange?gdpr=&userId=Z876U8AoJMAAOqg8AGne3QAA%261668&gpp=&gpp_sid=&us_privacy=&gdpr_consent=)![](https://dmp.brand-display.com/cm/api/index?cm_dsp_id=191&cm_user_id=%3cIndex_user_id%3e)![](https://match.deepintent.com/usersync/113)![](https://um.simpli.fi/pm_match?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=90&external_user_id=$UID)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876U8AoJMAAOqg8AGne3QAABoQAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=e564a1e9-fce1-4016-a5fa-d50cf3aaa82e)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=ZTU2NGExZTktZmNlMS00MDE2LWE1ZmEtZDUwY2YzYWFhODJl)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://pixel.rubiconproject.com/exchange/sync.php?p=18694&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=15&gdpr=0&gdpr_consent=)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIPWfrUjx4r)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIPWfrUjx4r)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIPWfrUjx4r)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElQV2ZyVWp4NHI=)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIPWfrUjx4r&cb=1741617747374&url={{REFERRER}}&gdpr=0&gdpr_consent=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=e9e0c62b-dfa1-ca56-367c-04d7548019f3)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/25f1dc12-53a7-e3e5-c7a5-90b5c3e41f5a?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=b136ba56-c30b-71ac-f672-86403cb3d213&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=OWQ1OTY5OWMtMGE3Yy0yZjA4LWUzOTItZGNmOWY2NTExYzcz)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-6C4FE8542FF4055BEFA4932765680285@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-114749FE9CA2A8D8537899BF403B9AC5@mhtml.blink)

Topics Frame

## Hierarchical Edge Bundling
Step by step

* * *

Before trying to implement hierarchical edge bundling, it is crucial
to know
[how this kind of chart works](https://www.data-to-viz.com/graph/edge_bundling.html). It is crucial to understand that input data is composed by i/ a
hierarchy and ii/ a list of links between elements of the hierarchy.


[Most basic\\
\\
* * *\\
\\
The most basic hierarchical edge bundling you can do with\\
d3.js. Keeping only the core code on a very minimalist\\
dataset.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/hierarchical_edge_bundling_basic.png)](https://d3-graph-gallery.com/graph/hierarchical_edge_bundling_basic.html)

Selection of blocks

* * *

A few blocks with more complicated codes to showcase what's possible
to do with hierarchical edge bundling.


[Application to the flare dataset\\
\\
* * *\\
\\
Probably the most famous example of hierarchical edge\\
bundling.\\
\\
\\
![Hierarchical edge bundling](https://d3-graph-gallery.com/img/block/block_hierarchicaledgebundlingFlare.png)](https://bl.ocks.org/mbostock/1044242)

[Flight Paths Edge Bundling\\
\\
* * *\\
\\
Apply edge bundling technique on a connection map.\\
\\
\\
![Hierarchical edge bundling](https://d3-graph-gallery.com/img/block/block_connectionmapBundle.png)](https://bl.ocks.org/sjengle/2e58e83685f6d854aa40c7bc546aeb24)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Chord150.png)](https://d3-graph-gallery.com/chord.html)

Chord diagram

[![](https://d3-graph-gallery.com/img/section/Network150.png)](https://d3-graph-gallery.com/network.html)

Network

[![](https://d3-graph-gallery.com/img/section/Sankey150.png)](https://d3-graph-gallery.com/sankey.html)

Sankey

[![](https://d3-graph-gallery.com/img/section/Arc150.png)](https://d3-graph-gallery.com/arc.html)

Arc diagram

[![](https://d3-graph-gallery.com/img/section/Bundle150.png)](https://d3-graph-gallery.com/bundle.html)

Edge bundling

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

Prebid User Sync

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=33across&endpoint=us-east&us\_privacy=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=33across&endpoint=us-east&us\_privacy=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.9789081459419)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_fe5e9a99-e69d-4425-a470-22f3127d96d0&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9mZTVlOWE5OS1lNjlkLTQ0MjUtYTQ3MC0yMmYzMTI3ZDk2ZDA=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9mZTVlOWE5OS1lNjlkLTQ0MjUtYTQ3MC0yMmYzMTI3ZDk2ZDA=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.adsrvr.org

# This site can’t be reached

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-B4D28F4E2A491659F8B0B1340C37CBCE@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_fe5e9a99-e69d-4425-a470-22f3127d96d0&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_fe5e9a99-e69d-4425-a470-22f3127d96d0)

![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876U9HM4XIACxr_AI2GgAAACYAAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876U9HM4XIACxr_AI2GgAAACYAAAAAB&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://ib.adnxs.com/getuid?https://dsum.casalemedia.com/crum?cm_dsp_id=190&external_user_id=$UID)![](https://a.tribalfusion.com/i.match?p=b20&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com/crum%3Fcm_dsp_id%3D131%26external_user_id%3D%24TF_USER_ID_ENC%24&cm_callback_url=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum&cm_user_id=Z876U9HM4XIACxr-AI2GgAAA)![](https://c1.adform.net/serving/cookie/match?party=29)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876U9HM4XIACxr_AI2GgAAACYAAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=89f9a862-67f6-42d1-8a21-1d5d0444ca7b)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=ODlmOWE4NjItNjdmNi00MmQxLThhMjEtMWQ1ZDA0NDRjYTdi)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync-tm.everesttech.net/upi/pid/byN59NcB?redir=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DSvWuQHUbMWnhsCDYjeaq81U2%26source_user_id%3D%24%7BTM_USER_ID%7D%0A)![](https://match.deepintent.com/usersync/158)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIttTAKuyTD)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIttTAKuyTD&cb=1741617746989&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=398eb249-8163-c1bd-14c6-954c28111bb7)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/f59fa870-0d65-e80e-e51f-012ebf751d1e?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=6158ce34-9dc9-7a47-d4c8-17db4022d057&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NGQzNzFkZmUtNTRiZS0yNGUzLWMxMjgtNGQ2MjhhYzAxZTM3)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

## D3.js Network Charts
A note on input data format

* * *

Building a network chart requires information on nodes and links. This information can be stored in many different format as described [here](https://www.data-to-viz.com/graph/network.html).
`Json` format is the most convenient way to work with `d3.js` and looks basically like that:


``` js
{ "nodes": [\
  { "id": 1, "name": "A" },\
  { "id": 2, "name": "B" }\
],
"links": [\
  { "source": 1, "target": 2 }\
]}
```

It is unlikely that your data are currently at this format. You probably need to reformat your data first using another tool like `R`. The [following document](https://d3-graph-gallery.com/graph/network_data_format.html) gives a few example on how to reformat the most common types of input to get a `json` file.

[Reformat your data to Json](https://d3-graph-gallery.com/graph/network_data_format.html)

A note about force

* * *

The challenge in network diagram is to find out smart X and Y coordinates for each node.

In d3, it is done using force and simulation. Different forces?

- Centering (attracts every node to a specific position)
- Collision (consider nodes as circles with radius and try to avoid overlapping)
- Links (pushes linked nodes together, according to a link distance)
- Many-Body (apply general attraction (if positive) or repulsion (if negative) between nodes)
- Positioning (push each node towards a desired position).

[Understand force parameters](https://bl.ocks.org/steveharoz/8c3e2524079a8c440df60c1ab72b5d03)

![](https://d3-graph-gallery.com/img/other/workinprogress2.png)

This section is a work in progress. Please have a look to this [resource](https://click.linksynergy.com/deeplink?id=G7VKNifkCIY&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Flearn-d3js-for-data-visualization%2F) for an introduction to force layout to build network charts with d3.js

Step by step

* * *

[Most basic\\
\\
* * *\\
\\
The most basic network graph you can do in d3.js. Keeping only the core code.\\
\\
Input format: Json\\
\\
![](https://d3-graph-gallery.com/img/graph/network_basic.png)](https://d3-graph-gallery.com/graph/network_basic.html)

Interactivity

* * *

Interactivity can be used for several reasons. First of all, adding a tooltip to each node is very useful when many nodes are drawn and annotation is impossible. Then dragging. Then highlighting relationships of a node.

Template

* * *

A template based on the co-authors network of a researcher.

Selection of blocks

* * *

A selection of examples showing the application of the basic concept to real life dataset.

[Network of character co-occurrence in _Les Misérables_\\
\\
* * *\\
\\
A famous network graph by Mike Bostock showing character co-occurrence in a book.\\
\\
![network graph les miserables](https://d3-graph-gallery.com/img/block/block_networkMiserable.png)](https://beta.observablehq.com/@mbostock/d3-force-directed-graph)

[D3-force documentation\\
\\
* * *\\
\\
The d3-force documentation on github is invaluable. A must read before diving into networks in d3.\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_networkDoc.png)](https://github.com/d3/d3-force)

[D3-force testing ground\\
\\
* * *\\
\\
This example allows you to play with force parameters and see their effect in real time.\\
\\
![network diagram testing ground](https://d3-graph-gallery.com/img/block/block_networkTesting.png)](https://bl.ocks.org/steveharoz/8c3e2524079a8c440df60c1ab72b5d03)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Chord150.png)](https://d3-graph-gallery.com/chord.html)

Chord diagram

[![](https://d3-graph-gallery.com/img/section/Network150.png)](https://d3-graph-gallery.com/network.html)

Network

[![](https://d3-graph-gallery.com/img/section/Sankey150.png)](https://d3-graph-gallery.com/sankey.html)

Sankey

[![](https://d3-graph-gallery.com/img/section/Arc150.png)](https://d3-graph-gallery.com/arc.html)

Arc diagram

[![](https://d3-graph-gallery.com/img/section/Bundle150.png)](https://d3-graph-gallery.com/bundle.html)

Edge bundling

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=1069391607784730896957&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=1069391607784730896957)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/1069391607784730896957?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=1069391607784730896957&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=1069391607784730896957)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_c43191b0-e04b-4f2d-aa2e-7caf85b91865&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-B43D6C4A1B164BF5AC90E02F694C683C@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9jNDMxOTFiMC1lMDRiLTRmMmQtYWEyZS03Y2FmODViOTE4NjU=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9jNDMxOTFiMC1lMDRiLTRmMmQtYWEyZS03Y2FmODViOTE4NjU=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=04D40585-5B53-44A3-97F2-D76CEBDBA50E)[iframe](cid:frame-D865FFE11CEA685D2CA74C341336F46B@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=04D40585-5B53-44A3-97F2-D76CEBDBA50E&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=04D40585-5B53-44A3-97F2-D76CEBDBA50E&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=MDRENDA1ODUtNUI1My00NEEzLTk3RjItRDc2Q0VCREJBNTBF&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=BNQFhVtTRKOX8tds69ulDg%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=04D40585-5B53-44A3-97F2-D76CEBDBA50E&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/04D40585-5B53-44A3-97F2-D76CEBDBA50E?gdpr=0&gdpr_consent=)[iframe](cid:frame-E7F5C77672107104AC6A3734E2CDE34A@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)

match.deepintent.com

# This site can’t be reached

The webpage at **https://match.deepintent.com/usersync/141?gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.deepintent.com/usersync/141?gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-71A930CBE1C9525372AC69C580BCA900@mhtml.blink)

[iframe](cid:frame-0EF1E577EA56A698687339727C5E6B20@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-429DA47F1D51690D04166EE7C556ABF5@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_c43191b0-e04b-4f2d-aa2e-7caf85b91865&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_c43191b0-e04b-4f2d-aa2e-7caf85b91865)

![](https://match.adsrvr.org/track/cmf/casale)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876WdHM4H4AN5X9AI8d8wAA%26424&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876WdHM4H4AN5X9AI8d8wAAAagAAAIB&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://beacon.lynx.cognitivlabs.com/ix.gif)![](https://b1sync.zemanta.com/usersync/index/?puid=Z876WdHM4H4AN5X9AI8d8wAA%26424&cb=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fexternal_user_id%3D_ZUID_&gdpr=&gdpr_consent=&us_privacy=)![](https://ums.acuityplatform.com/tum?umid=8)![](https://match.deepintent.com/usersync/113)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876WdHM4H4AN5X9AI8d8wAAAagAAAIB)

match.sharethrough.com

# This site can’t be reached

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-079C351FC5E3497643262D8FC2DA1C19@mhtml.blink)

Topics Frame

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D1YNY%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ?us_privacy=1YNY)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D&us_privacy=1YNY)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID&us_privacy=1YNY)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776&us_privacy=1YNY)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=&us_privacy=1YNY)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D&us_privacy=1YNY)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=1069391607784730896957&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=1069391607784730896957)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=1069391607784730896957)

## 2D Density Charts
main density 2d types

* * *

A 2d density chart allows to visualize the
combined distribution of two quantitative variables. The
concept is always the same: one variable is represented on the X axis,
the other on the Y axis. Then, the number of observations within a
particular area of the 2D space is counted and represented by a color
gradient.


[Hexbin chart\\
\\
* * *\\
\\
Group two-dimensional points into hexagonal bins. Possible\\
thanks to the `d3-hexbin` plugin.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/density2d_hexbin.png)](https://d3-graph-gallery.com/graph/density2d_hexbin.html)

[2d density with shading\\
\\
* * *\\
\\
Very close from the contour plot, but shading is used to\\
make the link between layers.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/density2d_shading.png)](https://d3-graph-gallery.com/graph/density2d_shading.html)

[2d histogram\\
\\
* * *\\
\\
Group two-dimensional points into rectangular bins. Possible\\
thanks to the `d3-rectbin` plugin.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/density2d_histogram2d.png)](https://d3-graph-gallery.com/graph/density2d_histogram2d.html)

[Contour plot\\
\\
* * *\\
\\
Representation of contour polygons computed using marching\\
squares\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/density2d_contour.png)](https://d3-graph-gallery.com/graph/density2d_contour.html)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/ScatterPlot150.png)](https://d3-graph-gallery.com/scatter.html)

Scatter

[![](https://d3-graph-gallery.com/img/section/Heatmap150.png)](https://d3-graph-gallery.com/heatmap.html)

Heatmap

[![](https://d3-graph-gallery.com/img/section/Correlogram150.png)](https://d3-graph-gallery.com/correlogram.html)

Correlogram

[![](https://d3-graph-gallery.com/img/section/BubblePlot150.png)](https://d3-graph-gallery.com/bubble.html)

Bubble

[![](https://d3-graph-gallery.com/img/section/ScatterConnected150.png)](https://d3-graph-gallery.com/connectedscatter.html)

Connected scatter

[![](https://d3-graph-gallery.com/img/section/2dDensity150.png)](https://d3-graph-gallery.com/density2d.html)

Density 2d

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.17263697359742491)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=3431022498431470719849&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=3431022498431470719849)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/3431022498431470719849?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=3431022498431470719849&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3431022498431470719849)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_8ce50dbf-a70a-4b1e-9420-609fa115b340&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-C30ECAFDEE6EDD6074617B797D97112F@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-01179D33394E9C8D7764391DB4DABFD4@mhtml.blink)

[iframe](cid:frame-ED1358459038973068E23A227576FC8C@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_8ce50dbf-a70a-4b1e-9420-609fa115b340&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_8ce50dbf-a70a-4b1e-9420-609fa115b340)

![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876WsAoIpMALKY6AOcj2QAAClcAAAIB&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876WsAoIpMALKY6AOcj2QAAClcAAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://s.c.appier.net/index?userId=Z876WsAoIpMALKY6AOcj2QAA%262647&gdpr=&us_privacy=)![](https://ssbsync.smartadserver.com/api/sync?callerId=82&gdpr=$%7bGDPR%7d&gdpr_consent=$%7bGDPR_CONSENT%7d)[iframe](cid:frame-E6A2E1EFE36DE4AD473312BE4983131D@mhtml.blink)![](https://csync.loopme.me/?pubid=11466&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D24%26external_user_id%3D%7Bviewer_token%7D&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876WsAoIpMALKY6AOcj2QAAClcAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIQ0s5MtQIV)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIQ0s5MtQIV)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=58397d97-6817-c6ca-3e4b-93e9daddd2ae)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/942867ae-e411-ef79-cf92-078b4db9d407?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=00ef01ea-74bd-7d30-fe45-117eb2ee194e&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=MmM4MGQyMjAtYmRjYS0yMzk0LWViYTUtNGJjNzc4MGNkNzJl)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-16C7EE5DEF529DEE4AAA7236EA54BB21@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-5E6849F1B054BE33E3E430A5A8ACFAFE@mhtml.blink)

Topics Frame

## Parallel Coordinate Charts
Step by step

* * *

The trickiest part of the parallel coordinate chart is to build one
axis per group automatically. This concept is described in the
[first example below](https://d3-graph-gallery.com/graph/parallel_basic.html). Then, it
is easy to add hover and color effect to highlight group
differences, and to custom axis ranges.


[Most basic\\
\\
* * *\\
\\
The most basic Parallel Coordinates chart you can do in\\
d3.js. Keeping only the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/parallel_basic.png)](https://d3-graph-gallery.com/graph/parallel_basic.html)

[Custom version\\
\\
* * *\\
\\
An improved version with color scale for groups and\\
highlighting when axis or groups are hovered.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/parallel_custom.gif)](https://d3-graph-gallery.com/graph/parallel_custom.html)

Selection of blocks

* * *

[Parallel with full option\\
\\
* * *\\
\\
A parallel coordinate chart with many options: unselect\\
groups, filter axis value, change axis order and more.\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_parallel.png)](http://bl.ocks.org/syntagmatic/3150059)

[Exoplanets\\
\\
* * *\\
\\
Another great example of parallel coordinate chart with\\
d3.js\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_parallel2.png)](https://bl.ocks.org/syntagmatic/482706e0638c67836d94b20f0cb37122)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Bar150.png)](https://d3-graph-gallery.com/barplot.html)

Barplot

[![](https://d3-graph-gallery.com/img/section/Spider150.png)](https://d3-graph-gallery.com/spider.html)

Spider / Radar

[![](https://d3-graph-gallery.com/img/section/Wordcloud150.png)](https://d3-graph-gallery.com/wordcloud.html)

Wordcloud

[![](https://d3-graph-gallery.com/img/section/Parallel1150.png)](https://d3-graph-gallery.com/parallel.html)

Parallel

[![](https://d3-graph-gallery.com/img/section/Lollipop150.png)](https://d3-graph-gallery.com/lollipop.html)

Lollipop

[![](https://d3-graph-gallery.com/img/section/CircularBarplot150.png)](https://d3-graph-gallery.com/circular_barplot.html)

Circular Barplot

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

Prebid User Sync

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=c08e190c-ce22-42f2-8083-6b94b818138e)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/6d97f087-e711-e352-dad8-bd74c6141c4a?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=f95096c3-77bd-711b-eb0f-ab813943d103&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZDUzZjQ1MDktYmVjYS0yZmJmLWZlZWYtZjEzOGYzYTExZjYz)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.3619602166739597)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_69d088d6-e140-425a-b4b4-22f883a0fb2b&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

**cm.g.doubleclick.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**cm.g.doubleclick.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.adsrvr.org

# This site can’t be reached

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-414869BCA6DEEBE10218A81E0D7CDD61@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_69d088d6-e140-425a-b4b4-22f883a0fb2b&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

eus.rubiconproject.com

# This site can’t be reached

**eus.rubiconproject.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**eus.rubiconproject.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_69d088d6-e140-425a-b4b4-22f883a0fb2b)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.sharethrough.com

# This site can’t be reached

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=B9B9D9EB-20E3-4F89-898D-5B463ED7A013)[iframe](cid:frame-8CFDB8F0A67AA5494EC89B15017CCA1C@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=B9B9D9EB-20E3-4F89-898D-5B463ED7A013&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=B9B9D9EB-20E3-4F89-898D-5B463ED7A013&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=ubnZ6yDjT4mJjVtGPtegEw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=B9B9D9EB-20E3-4F89-898D-5B463ED7A013&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/B9B9D9EB-20E3-4F89-898D-5B463ED7A013?gdpr=0&gdpr_consent=)[iframe](cid:frame-7BF8396D80651DBE6C58294F32B5AE6C@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHILyOuHwUAz)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHILyOuHwUAz)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHILyOuHwUAz)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

**u.openx.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**u.openx.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

## Connected Scatterplots Overview
Note on connected scatterplot

* * *

It is of importance to understand that a connected scatterplot is basically an hybrid between a [scatterplot](https://d3-graph-gallery.com/scatter.html) and a [lineplot](https://d3-graph-gallery.com/line.html). Thus, please visit the related section [here](https://d3-graph-gallery.com/scatter.html) and [here](https://d3-graph-gallery.com/line.html) to get more examples, since the techniques used are very similar.

Please note also that 2 types of connected scatterplot exist. The first is simply a lineplot with dots added on top of it. It takes as input 2 numeric variables only. The second shows the relationship between 2 numerical variables across time. It requires 3 numerical variables as input. Confusing? Visit [data-to-viz](https://www.data-to-viz.com/graph/connectedscatter.html) to clarify.

Step by step

* * *

Pretty straightforward once you understood how to build a [scatterplot](https://d3-graph-gallery.com/scatter.html) and a [lineplot](https://d3-graph-gallery.com/line.html). See the focus on [annotation](https://d3-graph-gallery.com/connectedscatter.html) that is handy for the second type of connected scatter (see above).

[Most basic\\
\\
* * *\\
\\
The most basic connected scatterplot you can do in d3.js. Keeping only the core code.\\
\\
![](https://d3-graph-gallery.com/img/graph/connectedscatter_basic.png)](https://d3-graph-gallery.com/graph/connectedscatter_basic.html)

[Use smooth curve instead of segment\\
\\
* * *\\
\\
Transform the line to a curve adding only one line of code.\\
\\
![](https://d3-graph-gallery.com/img/graph/connectedscatter_tooltip.png)](https://d3-graph-gallery.com/graph/connectedscatter_tooltip.html)

[Multiple series\\
\\
* * *\\
\\
How to proceed if you have several groups stored in several columns. ( _wide_ or _untidy_ format)\\
\\
![](https://d3-graph-gallery.com/img/graph/connectedscatter_multi.png)](https://d3-graph-gallery.com/graph/connectedscatter_multi.html)

Interactivity

* * *

[Tooltip](https://d3-graph-gallery.com/graph/connectedscatter_tooltip.html) is usually the most desired interactive feature for connected scatterplot. The ability to [swap from one group](https://d3-graph-gallery.com/graph/connectedscatter_select.html) or dataset to another is also frequently used. Zooming is not necessary in general, see the [line plot](https://d3-graph-gallery.com/line.html) section for that.


[Add tooltip\\
\\
* * *\\
\\
Classic approach to add tooltip to each points.\\
\\
![](https://d3-graph-gallery.com/img/graph/connectedscatter_tooltip.gif)](https://d3-graph-gallery.com/graph/connectedscatter_tooltip.html)

[Interactive legend\\
\\
* * *\\
\\
Legend that allows to make group markers appear or disappear.\\
\\
![](https://d3-graph-gallery.com/img/graph/connectedscatter_legend.gif)](https://d3-graph-gallery.com/graph/connectedscatter_legend.html)

[Dropdown to select group\\
\\
* * *\\
\\
A dropdown button allows to switch from one group to another with smooth transition.\\
\\
Note: each group is in a different column in input\\
\\
![](https://d3-graph-gallery.com/img/graph/connectedscatter_select.gif)](https://d3-graph-gallery.com/graph/connectedscatter_select.html)

Selection of blocks

* * *

A selection of the best blocks to illustrate what you can do with connected scatterplot in d3.js

[Driving Shifts into Reverse\\
\\
* * *\\
\\
Awesome example on how to show an evolution through a connected scatterplot.\\
\\
![double bubble plot](https://d3-graph-gallery.com/img/block/block_connectedScatter.png)](https://beta.observablehq.com/@mbostock/d3-connected-scatterplot)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/ScatterPlot150.png)](https://d3-graph-gallery.com/scatter.html)

Scatter

[![](https://d3-graph-gallery.com/img/section/Heatmap150.png)](https://d3-graph-gallery.com/heatmap.html)

Heatmap

[![](https://d3-graph-gallery.com/img/section/Correlogram150.png)](https://d3-graph-gallery.com/correlogram.html)

Correlogram

[![](https://d3-graph-gallery.com/img/section/BubblePlot150.png)](https://d3-graph-gallery.com/bubble.html)

Bubble

[![](https://d3-graph-gallery.com/img/section/ScatterConnected150.png)](https://d3-graph-gallery.com/connectedscatter.html)

Connected scatter

[![](https://d3-graph-gallery.com/img/section/2dDensity150.png)](https://d3-graph-gallery.com/density2d.html)

Density 2d

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=3584595051990522823998&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=3584595051990522823998)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/3584595051990522823998?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=3584595051990522823998&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3584595051990522823998)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_206b6e72-a29b-4098-83ed-324c4e82d776&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-E6B680DC64F9997B132010069E71D98C@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-DEF4CADB0CD45C9AC954EE7325E74EAF@mhtml.blink)

[iframe](cid:frame-C889ECDCB9A4765DE13CC1E276512DB6@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-DCB994B304981D932DC65E400F898108@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_206b6e72-a29b-4098-83ed-324c4e82d776&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_206b6e72-a29b-4098-83ed-324c4e82d776)

ssum-sec.casalemedia.com

# This site can’t be reached

**ssum-sec.casalemedia.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ssum-sec.casalemedia.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=a2de49fd-5ef6-43bb-aa0a-459e03ffbee3)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=YTJkZTQ5ZmQtNWVmNi00M2JiLWFhMGEtNDU5ZTAzZmZiZWUz)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/sharethrough)![](https://ssbsync.smartadserver.com/api/sync?callerId=47&gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=EDAAD58D-0A65-4529-B4E2-E5BD6D8DA306)[iframe](cid:frame-2D2D0A48797C53948457330BC9290BF5@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=EDAAD58D-0A65-4529-B4E2-E5BD6D8DA306&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=EDAAD58D-0A65-4529-B4E2-E5BD6D8DA306&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=RURBQUQ1OEQtMEE2NS00NTI5LUI0RTItRTVCRDZEOERBMzA2&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=7arVjQplRSm04uW9bY2jBg%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=EDAAD58D-0A65-4529-B4E2-E5BD6D8DA306&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-37BD52936E11027D646E42D491462BCB@mhtml.blink)

sync-amz.ads.yieldmo.com

# This site can’t be reached

**sync-amz.ads.yieldmo.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**sync-amz.ads.yieldmo.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=0c170c01-7dec-c4cf-23f1-fe75898ce9a4)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/c0061638-f1ea-ed7c-d228-6a171ee8ef0d?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=54c1707c-6146-7f35-e3ff-7ce2e1bf2244&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NzhhZWEzYjYtYTgzMS0yMTkxLWY2MWYtMjY1YjJiNWRlYzI0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

**eb2.3lift.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**eb2.3lift.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

## D3.js Violin Plots
Using Binning with `d3.histogram()`

* * *

The `d3.histogram()` takes a numeric variable, split it
into bins and count the number of value per bin. See the
[histogram section](https://d3-graph-gallery.com/histogram.html) for basic examples. It
is possible to represent the histogram with a mirror effect for
each group and using a curving function for smoothing: it makes
the violin plots below.


[Violin chart\\
\\
* * *\\
\\
Here a smoothing function is used to transformed the mirror\\
histogram in a violin plot.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/violin_basicHist1.png)](https://d3-graph-gallery.com/graph/violin_basicHist.html)

[Variation: no smoothing\\
\\
* * *\\
\\
A variation of the previous chart without any smoothing\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/violin_basicHist2.png)](https://d3-graph-gallery.com/graph/violin_basicHist.html)

[Variation: show steps\\
\\
* * *\\
\\
Here the curveStep function is used to interpolate values:\\
it reveals the underlying histogram structure.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/violin_basicHist3.png)](https://d3-graph-gallery.com/graph/violin_basicHist.html)

Using Kernel density estimation

* * *

Another way to build a violin plot is to compute a
kernel density estimate. This is what is done in the
[density plot](https://d3-graph-gallery.com/density.html) and
[ridgeline plot](https://d3-graph-gallery.com/ridgeline.html) sections. As you can see,
the result is slightly different compared to above.


[Most basic\\
\\
* * *\\
\\
The most basic violin chart you can do in d3.js. Keeping\\
only the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/violin_basicDens.png)](https://d3-graph-gallery.com/graph/violin_basicDens.html)

Going further

* * *

A few examples expanding the concepts described above to build custom
violin charts.


[Violin with jitter\\
\\
* * *\\
\\
Half of the violin is removed to show the single\\
observations. Jittering is used to avoid dots overlap.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/violin_jitter.png)](https://d3-graph-gallery.com/graph/violin_jitter.html)

Selection of blocks

* * *

[Violin Chart\\
\\
* * *\\
\\
Short code building a violin chart from 3 dummy arrays.\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_violin1.png)](https://bl.ocks.org/KingOfCramers/f019d2b34a3e8f8da307958b0d9e30cf)

[Violin + boxplot\\
\\
* * *\\
\\
Implementation by Andrew Sielen, with button to understand\\
how to custom each part of the char.\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_violin2.png)](http://bl.ocks.org/asielen/d15a4f16fa618273e10f)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Violin150.png)](https://d3-graph-gallery.com/violin.html)

Violin

[![](https://d3-graph-gallery.com/img/section/Density150.png)](https://d3-graph-gallery.com/density.html)

Density

[![](https://d3-graph-gallery.com/img/section/Histogram150.png)](https://d3-graph-gallery.com/histogram.html)

Histogram

[![](https://d3-graph-gallery.com/img/section/Box1150.png)](https://d3-graph-gallery.com/boxplot.html)

Boxplot

[![](https://d3-graph-gallery.com/img/section/Joyplot150.png)](https://d3-graph-gallery.com/ridgeline.html)

Ridgeline

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.45328473285330073)

Prebid User Sync

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876WcAoIrsALfW3APqQEgAACjYAAAIB&gpp=&gpp_sid=)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876WcAoIrsALfW3APqQEgAACjYAAAIB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://secure.adnxs.com/getuid?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=46&external_user_id=$UID)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://dmp.brand-display.com/cm/api/index?cm_dsp_id=191&cm_user_id=%3cIndex_user_id%3e)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876WcAoIrsALfW3APqQEgAACjYAAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://dsp.360yield.com/dsp_match/275?ssp=10&gdpr=&gdpr_consent=&r=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fcm_dsp_id%3D15%26external_user_id%3D%7BDSP_USER_ID%7D&userId=Z876WcAoIrsALfW3APqQEgAA%262614&us_privacy=)![](https://tr.blismedia.com/v1/api/sync/indexexchange?gdpr=&userId=Z876WcAoIrsALfW3APqQEgAA%262614&gpp=&gpp_sid=&us_privacy=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876WcAoIrsALfW3APqQEgAA%262614)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_3815ae78-f77f-40a3-b11b-27640c5cf60e&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV8zODE1YWU3OC1mNzdmLTQwYTMtYjExYi0yNzY0MGM1Y2Y2MGU=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV8zODE1YWU3OC1mNzdmLTQwYTMtYjExYi0yNzY0MGM1Y2Y2MGU=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-95EE540FEA8824E63FF64C83594EEC6E@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-E817F41D9AD1ADB800BC3574558FB035@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_3815ae78-f77f-40a3-b11b-27640c5cf60e&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_3815ae78-f77f-40a3-b11b-27640c5cf60e)

![](https://match.adsrvr.org/track/cmf/casale)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876WcAoIrsALfW3APqQEgAA%262614&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876WcAoIrsALfW3APqQEgAACjYAAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://um.simpli.fi/pm_match?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=90&external_user_id=$UID)![](https://cms.quantserve.com/pixel/p-Z8PuJEk6U7Hyq.gif?idmatch=0)![](https://www.temu.com/api/adx/cm/pixel-index?cm_user_id=Z876WcAoIrsALfW3APqQEgAACjYAAAIB)![](https://ad.turn.com/r/cs?pid=21)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876WcAoIrsALfW3APqQEgAACjYAAAIB)

match.sharethrough.com

# This site can’t be reached

**match.sharethrough.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**match.sharethrough.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=fe23fd43-081b-c0ae-3ca9-d52f61de0449)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/3232e77a-841d-e91d-cd70-414df6ba02e0?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=a6f5813e-14b1-7b54-fca7-57b809edcfa9&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=OGE5YTUyZjQtZGRjNi0yNWYwLWU5NDctMGQwMWMzMGYwMWM5)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/sync?gdpr=&cmp\_cs=&us\_privacy=1YNY&gpp=&gpp\_sid=&redir=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dtriplelift%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D1YNY%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/sync?gdpr=&cmp\_cs=&us\_privacy=1YNY&gpp=&gpp\_sid=&redir=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dtriplelift%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D1YNY%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D1YNY%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ?us_privacy=1YNY)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D&us_privacy=1YNY)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID&us_privacy=1YNY)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776&us_privacy=1YNY)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=&us_privacy=1YNY)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D&us_privacy=1YNY)

## D3.js Chart Customization
Axis

* * *

D3.js offers built-in function to add axis to your chart. The first
step is to build a `scale` that allows to transform a
numeric value to a coordinate on the plot. The second is to call
`axisBottom()` or `axisLeft()` to build the
axis. Browse the example below to understand the different
types of existing scale, how to build axis and how to
customize them.


[Basic linear axis\\
\\
* * *\\
\\
The most basic linear axis you can do in d3.js. Keeping only\\
the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/custom_axis_linear.png)](https://d3-graph-gallery.com/graph/custom_axis.html)

[Categorical axis with `scalePoint()`\\
\\
* * *\\
\\
The `scalePoint()` allows to build a categoric\\
axis. Simple example keeping only the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/custom_axis_scalepoint.png)](https://d3-graph-gallery.com/graph/custom_axis.html)

[Categorical axis with `scaleBand()`\\
\\
* * *\\
\\
Slightly different from the previous example: this method is\\
adapted for barplot or boxplot where each category uses a\\
range of the axis.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/custom_axis_scaleband.png)](https://d3-graph-gallery.com/graph/custom_axis.html)

[Vertical axis\\
\\
* * *\\
\\
Learn how to make a vertical axis in d3.js\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/custom_axis_vertical.png)](https://d3-graph-gallery.com/graph/custom_axis.html)

[Custom axis labels\\
\\
* * *\\
\\
How to change font, size, color, orientation of axis labels\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/custom_axis_labels.png)](https://d3-graph-gallery.com/graph/custom_axis.html)

[Add titles\\
\\
* * *\\
\\
How to add titles at the right position to your axis\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/custom_axis_title.png)](https://d3-graph-gallery.com/graph/custom_axis.html)

Colors

* * *

A post on the basic of color management with d3.js. You will learn how
to call a color, how to build different types of color palette and how
to map them to your dataset.


[Just calling a color\\
\\
* * *\\
\\
Several ways exist to call a single color in d3.js. Learn\\
what are the possibilities.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/custom_color_oneCol.png)](https://d3-graph-gallery.com/graph/custom_color.html)

[Sequential color scale\\
\\
* * *\\
\\
What are the different option to build a sequential\\
colorscale? How to build a palette?\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/custom_color_sequential.png)](https://d3-graph-gallery.com/graph/custom_color.html)

[Categorical color scale\\
\\
* * *\\
\\
Give a specific color to each entity of your dataset. How to\\
build the palette with d3.js\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/custom_color_categoric.png)](https://d3-graph-gallery.com/graph/custom_color.html)

Themes

* * *

A post that provides a few theme templates inspired from famous other
libraries like ggplot2 or ipsum.


[theme: ggplot2\\
\\
* * *\\
\\
Inspired from the famous R ggplot2 library.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/custom_themeggplot2.png)](https://d3-graph-gallery.com/graph/custom_theme.html#ggplot2)

[theme: ipsum\\
\\
* * *\\
\\
Inspired from the ipsum theme of the hrbrmstr R library\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/custom_themeipsum.png)](https://d3-graph-gallery.com/graph/custom_theme.html#ipsum)

[theme: publication\\
\\
* * *\\
\\
An old school theme in black and white. Publication ready,\\
or for nostalgic of the good old R.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/custom_themepublication.png)](https://d3-graph-gallery.com/graph/custom_theme.html#publication)

[theme: dark mode\\
\\
* * *\\
\\
In case your application is in night mode, use a dark\\
background.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/custom_themedark.png)](https://d3-graph-gallery.com/graph/custom_theme.html#dark)

Legend

* * *

A few examples for legends, always with the d3.js code ready to be
copied and pasted.


[Categorical \| circle\\
\\
* * *\\
\\
Use the enter() function to add one circle and one label per\\
group.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/custom_legend_catCircle.png)](https://d3-graph-gallery.com/graph/custom_legend.html#cat2)

[Categorical \| Square\\
\\
* * *\\
\\
Same thing with squares instead of circles\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/custom_legend_catRect.png)](https://d3-graph-gallery.com/graph/custom_legend.html#cat3)

Responsiveness

* * *

A post on the basics of responsiveness with d3.js. Try to change your
window size to see the below d3.js chart updating itself. Discover how
it works with code snippets
[here](https://d3-graph-gallery.com/graph/custom_responsive.html).


[020406080100120140](https://d3-graph-gallery.com/graph/custom_responsive.html)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Basic150.png)](https://d3-graph-gallery.com/intro_d3js.html)

Basics

[![](https://d3-graph-gallery.com/img/section/Colours150.png)](https://d3-graph-gallery.com/custom.html)

Custom

[![](https://d3-graph-gallery.com/img/section/anim150.gif)](https://d3-graph-gallery.com/interactivity.html)

Interactivity

[![](https://d3-graph-gallery.com/img/section/Shapehelper150.png)](https://d3-graph-gallery.com/graph/shape.html)

Shape helpers

[![](https://d3-graph-gallery.com/img/section/Bad150.png)](https://www.data-to-viz.com/caveats.html)

Caveats

[![](https://d3-graph-gallery.com/img/section/DataArt1150.png)](https://www.data-to-art.com/)

Data art

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.8545007956026514)

Prebid User Sync

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_52cb7cca-f59e-40c3-9908-e17d23c95b09&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-11449BD1A5F860610CF4D32892795841@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-0696FA8B9CA5E88F2C42BE3929727708@mhtml.blink)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-7FC80CD6D13F10196968ECAD2964DFE0@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-739B08DCFCFAD37448CAE8DEDEFE1F33@mhtml.blink)[iframe](cid:frame-E37ABF63BE6164BD678625C86AAED218@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_52cb7cca-f59e-40c3-9908-e17d23c95b09)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_52cb7cca-f59e-40c3-9908-e17d23c95b09&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-1C28C2216A3164796CBD1A180FAEFAAE@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-95CC74CD91967FE91D60F3FF6264A2E7@mhtml.blink)

ads.pubmatic.com

# This site can’t be reached

**ads.pubmatic.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ads.pubmatic.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-A0B6DBACC962B8F0DFBBC7E81138E3FC@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)

[iframe](cid:frame-A5D4AE65B8D84569F67AC5D9D52ECCC9@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_52cb7cca-f59e-40c3-9908-e17d23c95b09&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_52cb7cca-f59e-40c3-9908-e17d23c95b09)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.sharethrough.com

# This site can’t be reached

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

**ads.pubmatic.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ads.pubmatic.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-3456AF3E715CD963F16CA47FE0049B0E@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

## D3.js Graph Gallery
## What is d3.js

* * *

[D3.js](https://d3js.org/) is a
JavaScript library for manipulating documents based on
data. Basically, it helps you build shapes based on
HTML, SVG, and CSS.

D3.js has been created by
[Mike Bostock](https://bost.ocks.org/mike/) and its
home is [here](https://d3js.org/).

Why is d3
so awesome? Because it allows to build absolutely any type of
visualization, without any limits.


## Why this gallery

* * *

D3.js already has awesome dedicated resources to get code example:
a [wiki](https://github.com/d3/d3/wiki/Gallery), a
[gallery](http://christopheviau.com/d3list/gallery.html)
and the very awesome
[block builder](http://blockbuilder.org/search).
Moreover, thousands of
[blocks](https://bl.ocks.org/) are available online.


The d3 graph gallery aims to contribute to this documentation by
providing a set of simple examples.

While blocks are awesome to demonstrate the possibilities offered
by d3, it is sometimes hard to find a basic example illustrating a
single concept: this gallery hopes to fill the gap.


## How the gallery works

* * *

About 300 charts are displayed in the gallery. They are
classified in about 40 sections: the main chart types
describe in [data to viz](https://www.data-to-viz.com/).


For each graph, the chart appears on the left at a
static position and the editable code on the right.
Playing with the code is the best way to understand how it works
IMO.

Technical details are provided under each chart, linking to
related docs. No consideration is given concerning dataviz best
practice, links toward
[data to viz](https://www.data-to-viz.com/) are provided
for this concern.

Code is extensively commented and data are stored
online. It allows to copy and paste the code in a
.html file and make it works locally.


## Acknowledgment

* * *

- [Mike Bostock](https://twitter.com/mbostock) for
creating d3.js, such an incredible piece of work


- [John McGrath](https://twitter.com/John_J_McGrath),
for allowing me to learn d3.js for our mental health comorbidity
dataviz [projects](https://www.nbepi.com/)

- [Tom Luff](https://github.com/hipyhop), for answering
my millions of silly javascript questions.


- [Conor Healy](https://www.conor.fr/), for providing
the logos and listening to my crazy dataviz ideas


## Disclaimer

* * *

This gallery has been built while in the process of
learning d3. It is thus imperfect, and code can probably be
optimized in many cases.

Moreover, english mistakes are frequent since I'm not a
native english speaker.

This website is entirely hosted on
[github](https://github.com/holtzy/D3-graph-gallery).
Submitting
[issues](https://github.com/holtzy/D3-graph-gallery/issues)
or
[pull requests](https://github.com/holtzy/D3-graph-gallery/pulls)
is the best way to interact, but you can also reach me via
[twitter](https://twitter.com/R_Graph_Gallery) or
[mail](mailto:yan.holtz.data@gmail.com).


## Tools used

* * *

- All the examples featured in this website are based on
[d3.js v4](https://d3js.org/)
- The whole website is construct on the
[Bootstrap](https://getbootstrap.com/) framework.

- Code highlighting is done thanks to
[prism](https://prismjs.com/)
- Everything is hosted on
[github](https://github.com/holtzy/D3-graph-gallery)
- The map sections often reference the
[leaflet.js library](https://leafletjs.com/)
- Nothing would be possible without
[javascript](https://en.wikipedia.org/wiki/JavaScript)
and [jquery](https://jquery.com/) of course


## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.318831329428102)

Prebid User Sync

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?gdpr=&gdpr\_consent=&us\_privacy=&gpp=&gpp\_sid=&predirect=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dpubmatic%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?gdpr=&gdpr\_consent=&us\_privacy=&gpp=&gpp\_sid=&predirect=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dpubmatic%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_0a1ce814-5858-41aa-8897-1b106d1e08cf&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-FDE5BA7BE42C794FA4BB27ECD8DA1475@mhtml.blink)

[iframe](cid:frame-0B886246491C32E330BC61362AC1B28E@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)

[iframe](cid:frame-745FFEDFFEF23B7D825B433CF0D5993B@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_0a1ce814-5858-41aa-8897-1b106d1e08cf&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_0a1ce814-5858-41aa-8897-1b106d1e08cf)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=6a7c95ae-5349-4ca3-a9b6-41541129fb86)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=NmE3Yzk1YWUtNTM0OS00Y2EzLWE5YjYtNDE1NDExMjlmYjg2)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=97&redir=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DgBgkxrVErPj9wqivTDd2AmVY%26source_user_id%3D%7BuserId%7D&gdpr=0&gdpr_consent=)![](https://b1sync.zemanta.com/usersync/sharethrough?cb=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_user_id%3D__ZUID__%26gdpr%3D%7BGDPR%7D%26gdpr_consent%3D%7BGDPR_CONSENT_80%7D)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=5AE6361E-DD4A-449D-9AE4-5A5A53194050)[iframe](cid:frame-867C228F8BBF131FC425637927D1166C@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=5AE6361E-DD4A-449D-9AE4-5A5A53194050&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=5AE6361E-DD4A-449D-9AE4-5A5A53194050&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=NUFFNjM2MUUtREQ0QS00NDlELTlBRTQtNUE1QTUzMTk0MDUw&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=WuY2Ht1KRJ2a5FpaUxlAUA%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=5AE6361E-DD4A-449D-9AE4-5A5A53194050&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-36D9CBDC3DF4705F0469BC7F98FA28E4@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIEtMnlE0jQ)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIEtMnlE0jQ)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElFdE1ubEUwalE=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIEtMnlE0jQ)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIEtMnlE0jQ&cb=1741617753405&url={{REFERRER}}&gdpr=0&gdpr_consent=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=a058bce5-616e-c019-3918-6099f2224812)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/6c49a6dc-ed68-e9aa-c8c1-f4fb65464ebb?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=f88ec098-7dc4-7be3-f916-e20e9a1183f2&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZDRlMTEzNTItYjRiMy0yNTQ3LWVjZjYtYjhiNzUwZjM0ZDky)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-2FDC438800E4A2E8D9809308EFF7F799@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

Pixels![](https://pbs-raptive-us.ay.delivery/setuid?bidder=openx&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=c1504f57-c45b-480a-929a-221b1b4a417f)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=fef0b364-26c3-4664-b3f7-7ad8a99d42fe)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

## Stacked Area Charts
Step by step

* * *

The hardest part in stacked area chart creation is the use of the
`d3.stack()` function to stack the data. Once this step is
done, each group can be added thanks to the
`d3.area()` function. I strongly advise to understand how
to do a [basic area chart](https://d3-graph-gallery.com/graph/area_basic.html) before
trying the examples below.


[Area chart\\
\\
* * *\\
\\
You probably want to understand how to build a basic area\\
chart before trying the stacked version.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/area_basic.png)](https://d3-graph-gallery.com/graph/area_basic.html)

[Stacked area from long input\\
\\
* * *\\
\\
The most basic stacked area chart you can do in d3.js.\\
Keeping only the core code.\\
\\
Input format:long\\
(tidy)\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/stackedarea_basic.png)](https://d3-graph-gallery.com/graph/stackedarea_basic.html)

[Stacked area from wide input\\
\\
* * *\\
\\
Another basic stacked area chart made in d3.js.\\
\\
Note\\
that here the input format is wide (untidy): each group is\\
provided in a specific column.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/stackedarea_wideinput.png)](https://d3-graph-gallery.com/graph/stackedarea_wideinput.html)

Template

* * *

A stacked area chart showing the evolution of a few baby names in the
US. Zoom on a specific time frame through brushing.
Highlight a specific group by hovering the legend. Double click
to unzoom.


[Code here](https://d3-graph-gallery.com/graph/stackedarea_template.html)

1,8801,9001,9201,9401,9601,9802,000Time (year)\# of baby born050,000100,000150,000200,000AmandaAshleyBettyDeborahDorothyHelenLindaPatricia

Alternative

* * *

The efficiency of stacked area graph is
[discussed](https://www.data-to-viz.com/caveat/stacking.html)
and it must be used with care. They are great to study the evolution
of the whole and the relative proportion of each group. However, they
are not appropriate to study the evolution of each individual group.
( [Read more](https://www.data-to-viz.com/caveat/stacking.html)). Using small multiple is often a good alternative to
highlight the evolution of each group.


[Small multiple\\
\\
* * *\\
\\
Learn how to apply the small multiple technique on line\\
plot. It allows to avoid the spaghetti plot where lines\\
become unreadable.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/line_smallmultiple.png)](https://d3-graph-gallery.com/graph/line_smallmultiple.html)

[Small multiple\\
\\
* * *\\
\\
Applying the small multiple technique to area chart. A good\\
workaround to stacked area chart when you have several group\\
to display.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/area_smallmultiple.png)](https://d3-graph-gallery.com/graph/area_smallmultiple.html)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Line150.png)](https://d3-graph-gallery.com/line.html)

Line plot

[![](https://d3-graph-gallery.com/img/section/Area150.png)](https://d3-graph-gallery.com/area.html)

Area

[![](https://d3-graph-gallery.com/img/section/StackedArea150.png)](https://d3-graph-gallery.com/stackedarea.html)

Stacked area

[![](https://d3-graph-gallery.com/img/section/Stream150.png)](https://d3-graph-gallery.com/streamgraph.html)

Streamchart

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.729617722798581)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=4305476882175863215031&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=4305476882175863215031)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/4305476882175863215031?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=4305476882175863215031&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=4305476882175863215031)

ssp-sync.criteo.com

# This site can’t be reached

**ssp-sync.criteo.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ssp-sync.criteo.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_ede16cf4-e7a7-406e-9811-b488abc9e3bd&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-BF088119DDC3B5A86553126C4BC2B346@mhtml.blink)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=76ED7E4E-5139-4A15-B2ED-522CE9A11F58)[iframe](cid:frame-ACCC33E6ED41C5095D3CEE7FB18EF052@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=76ED7E4E-5139-4A15-B2ED-522CE9A11F58&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=76ED7E4E-5139-4A15-B2ED-522CE9A11F58&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=NzZFRDdFNEUtNTEzOS00QTE1LUIyRUQtNTIyQ0U5QTExRjU4&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=du1-TlE5ShWy7VIs6aEfWA%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=76ED7E4E-5139-4A15-B2ED-522CE9A11F58&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/76ED7E4E-5139-4A15-B2ED-522CE9A11F58?gdpr=0&gdpr_consent=)[iframe](cid:frame-E658B9F6E178C7D36E87135670B0EC05@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)

[iframe](cid:frame-E166754C8DEF17683FBCA4C4E1B316FA@mhtml.blink)

[iframe](cid:frame-A12839FC01230A4D6C6BDDA1B0095338@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_ede16cf4-e7a7-406e-9811-b488abc9e3bd&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_ede16cf4-e7a7-406e-9811-b488abc9e3bd)

![](https://match.adsrvr.org/track/cmf/casale)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876WdHM4SIAEYHUAI5fQAAA%262352&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876WdHM4SIAEYHUAI5fQAAACTAAAAAB&gpp=&gpp_sid=)![](https://www.temu.com/api/adx/cm/pixel-index?cm_user_id=Z876WdHM4SIAEYHUAI5fQAAACTAAAAAB)![](https://a.tribalfusion.com/i.match?p=b20&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com/crum%3Fcm_dsp_id%3D131%26external_user_id%3D%24TF_USER_ID_ENC%24&cm_callback_url=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum&cm_user_id=Z876WdHM4SIAEYHUAI5fQAAA)![](https://s.c.appier.net/index?userId=Z876WdHM4SIAEYHUAI5fQAAA%262352&gdpr=&us_privacy=)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876WdHM4SIAEYHUAI5fQAAACTAAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=de311ce9-d189-45b2-953b-8237b39def9d)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=ZGUzMTFjZTktZDE4OS00NWIyLTk1M2ItODIzN2IzOWRlZjlk)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/sharethrough)![](https://cs.admanmedia.com/c01d0246d79eba64b8a7cca07e5b7dc7.gif?puid=de311ce9-d189-45b2-953b-8237b39def9d&gdpr=0&gdpr_consent=&redir=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DqUVJTHutDLcyGRS8xfsW2M4g%26source_user_id%3D%5BUID%5D%26gdpr%3D0%26gdpr_consent%3D)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=50738eaa-8bb9-c5a9-18d1-d3d04bcebd00)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/9c629493-07bf-ec1a-e908-47b2dcaabba9?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=08a5f2d7-9713-7e53-d8df-514723fd76e0&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=MjRjYTIxMWQtNWU2NC0yMGY3LWNkM2YtMGJmZWU5MWZiODgw)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-DD498F88B174A77740EE73BECBCD15CB@mhtml.blink)

Topics Frame

## D3.js Heatmap Guide
Step by step

* * *

[Most basic\\
\\
* * *\\
\\
The most basic heatmap you can do in d3.js. Keeping only the\\
core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/heatmap_basic.png)](https://d3-graph-gallery.com/graph/heatmap_basic.html)

[Add tooltip to heatmap\\
\\
* * *\\
\\
Add a tooltip that displays the exact value of a cell and\\
whatever other text.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/heatmap_tooltip.gif)](https://d3-graph-gallery.com/graph/heatmap_tooltip.html)

[Ready to go heatmap\\
\\
* * *\\
\\
A customized heatmap, include hover effect, custom axis,\\
title, fancy color palette, tooltip and more\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/heatmap_style.png)](https://d3-graph-gallery.com/graph/heatmap_style.html)

Template

* * *

The following
[heatmap](https://www.data-to-viz.com/graph/heatmap.html)
is my starting template for my personal work. It offers most of
the feature you need for a good heatmap: colorBrewer
colorscale, hover effect, tooltip,
title and custom axis. The
[input dataset](https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data_long.csv)
has 3 columns: row, column and value.
[Get the code here.](https://d3-graph-gallery.com/graph/heatmap_style.html)

A d3.js heatmapA short description of the take-away message of this chart.ABCDEFGHIJKLMNOPQRSTv1v2v3v4v5v6v7v8v9v10v11v12v13v14v15v16v17v18v19v20

Interesting block

* * *

[Visualization of _Les Misérables_\\
\\
* * *\\
\\
Interactive heatmap with possible switch in group order\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/block_heatmap_miserables.png)](https://bost.ocks.org/mike/miserables/)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/ScatterPlot150.png)](https://d3-graph-gallery.com/scatter.html)

Scatter

[![](https://d3-graph-gallery.com/img/section/Heatmap150.png)](https://d3-graph-gallery.com/heatmap.html#heatmap)

Heatmap

[![](https://d3-graph-gallery.com/img/section/Correlogram150.png)](https://d3-graph-gallery.com/correlogram.html)

Correlogram

[![](https://d3-graph-gallery.com/img/section/BubblePlot150.png)](https://d3-graph-gallery.com/bubble.html)

Bubble

[![](https://d3-graph-gallery.com/img/section/ScatterConnected150.png)](https://d3-graph-gallery.com/connectedscatter.html)

Connected scatter

[![](https://d3-graph-gallery.com/img/section/2dDensity150.png)](https://d3-graph-gallery.com/density2d.html)

Density 2d

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=972663986755041351644&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=972663986755041351644)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/972663986755041351644?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=972663986755041351644&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=972663986755041351644)

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=291d4c6c-a9d4-4036-a86a-187130ad2825)![](https://x.bidswitch.net/sync?ssp=openx)![](https://id.rlcdn.com/709996.gif)![](https://idpix.media6degrees.com/orbserv/hbpix?pixId=856286&pcv=125&ptid=23&tpuv=00&tpu=bc6e5629-08d3-56e9-34cf-9397943baa6a)![](https://sync.srv.stackadapt.com/sync?nid=268)![](https://b1sync.zemanta.com/usersync/openx?puid=3b0eb9e5-fbc3-425d-94d5-44a692e634d3&cb=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D560843120%26val%3D__ZUID__)![](https://rtb.openx.net/sync/dds)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.44728377713996514)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_6a5d4f0b-caa0-4f1b-b9ce-5fa1b0174245&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-1BD1E79451A44BD077E1316199036DEF@mhtml.blink)

[iframe](cid:frame-19560A3F3D2E21A6F93F0C3F0CAF90A4@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-F1C62A3FC1043FDBD9F28D19B0D8C690@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_6a5d4f0b-caa0-4f1b-b9ce-5fa1b0174245&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_6a5d4f0b-caa0-4f1b-b9ce-5fa1b0174245)

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876WsAoIrsALfW3APqQJgAA%262614&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876WsAoIrsALfW3APqQJgAACjYAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=48)![](https://bttrack.com/pixel/cookiesync?source=67e94f23-25d6-4008-8236-375d1743c2e0&secure=1)![](https://casale-match.dotomi.com/match/bounce/current?networkId=19998&version=1)![](https://s.c.appier.net/index?userId=Z876WsAoIrsALfW3APqQJgAA%262614&gdpr=&us_privacy=)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876WsAoIrsALfW3APqQJgAACjYAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=ef3c75f7-ab52-44a8-a32a-8c93849e66de)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=ZWYzYzc1ZjctYWI1Mi00NGE4LWEzMmEtOGM5Mzg0OWU2NmRl)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/sharethrough)![](https://secure.adnxs.com/getuid?https://match.sharethrough.com/sync/v1?source_id=0e8893f90b606c9c5d33f1be&gdpr=0&gdpr_consent=&source_user_id=$UID)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=412E16C9-0A99-42A5-AB64-D203B3A09D7B)[iframe](cid:frame-C1BA107BF1A56BFD4180466478813ECD@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=412E16C9-0A99-42A5-AB64-D203B3A09D7B&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=412E16C9-0A99-42A5-AB64-D203B3A09D7B&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=NDEyRTE2QzktMEE5OS00MkE1LUFCNjQtRDIwM0IzQTA5RDdC&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=QS4WyQqZQqWrZNIDs6Cdew%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=412E16C9-0A99-42A5-AB64-D203B3A09D7B&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-53790019274C4692C81E2CEC4DE5B2ED@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIYqAliNoCM)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIYqAliNoCM)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIYqAliNoCM)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIYqAliNoCM&cb=1741617753999&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=4815bfde-0ce1-c825-03e8-5af3d9c52148)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/8404a5e7-80e7-e196-f231-ce914ea127e1?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=10c3c3a3-104b-73df-c3e6-d864b1f6eaa8&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=M2NhYzEwNjktZDkzYy0yZDdiLWQ2MDYtODJkZDdiMTQyNGM4)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-720BE160F8A0FB72FA15F626481570ED@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-E961E329A20F44F597BBA30E68BD483C@mhtml.blink)

Topics Frame

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=291d4c6c-a9d4-4036-a86a-187130ad2825)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=16bdb05f-4b4c-4e58-8907-40b2827a2ba4)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

eus.rubiconproject.com

# This site can’t be reached

**eus.rubiconproject.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**eus.rubiconproject.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

**ads.pubmatic.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ads.pubmatic.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

cafemedia-d.openx.net

# This site can’t be reached

**cafemedia-d.openx.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**cafemedia-d.openx.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

cdn.undertone.com

# This site can’t be reached

**cdn.undertone.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**cdn.undertone.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=972663986755041351644&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=972663986755041351644)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)

js-sec.indexww.com

# This site can’t be reached

The webpage at **https://js-sec.indexww.com/um/ixmatch.html** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://js-sec.indexww.com/um/ixmatch.html** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ssc-cms.33across.com

# This site can’t be reached

The webpage at **https://ssc-cms.33across.com/ps/?m=xch&rt=html&gdpr=&gdpr\_consent=&us\_privacy=1YNY&id=zzz000000000002zzz&ru=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3D33across%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D1YNY%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D33XUSERID33X** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssc-cms.33across.com/ps/?m=xch&rt=html&gdpr=&gdpr\_consent=&us\_privacy=1YNY&id=zzz000000000002zzz&ru=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3D33across%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D1YNY%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D33XUSERID33X** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

## Connection Maps with D3.js
Step by step

* * *

Linking two locations on a map using a straight line would be pretty
easy using a classic `d3.line()` approach. However,
[great circle](https://en.wikipedia.org/wiki/Great_circle)
are more appreciated when it comes to connection map. Fortunately, the
function `d3.geoPath()` makes it a breeze to compute the
coordinate of the great circle path. Here are a few examples showing
how to use it.


[One unique connection\\
\\
* * *\\
\\
How to display one unique connection on the map. Just to\\
illustrate how to use d3.geoPath()\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/connectionmap_basic.png)](https://d3-graph-gallery.com/graph/connectionmap_basic.html)

[Multi connections\\
\\
* * *\\
\\
Same idea but applied on several connection. Just shows how\\
to enter in the data to add all connections.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/connectionmap_multi.png)](https://d3-graph-gallery.com/graph/connectionmap_multi.html)

[Input = csv file\\
\\
* * *\\
\\
Plot a connection map from a list of connection stored in a\\
.csv format. It requires a reformatting step.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/connectionmap_csv.png)](https://d3-graph-gallery.com/graph/connectionmap_csv.html)

Selection of blocks

* * *

A few blocks with more complicated codes to showcase what's possible
to do with connection maps. First show how to display connections on
hover. Second show how to apply
[edge bundling](https://d3-graph-gallery.com/bundle.html) to the connection to declutter
the chart.


[Voronoi Arc Map\\
\\
* * *\\
\\
Highlight flight routes when an airport is hovered.\\
\\
\\
![Hierarchical edge bundling](https://d3-graph-gallery.com/img/block/block_connectionmapVoronoi.png)](https://bl.ocks.org/mbostock/7608400)

[Flight Paths Edge Bundling\\
\\
* * *\\
\\
Apply edge bundling technique on a connection map.\\
\\
\\
![Hierarchical edge bundling](https://d3-graph-gallery.com/img/block/block_connectionmapBundle.png)](https://bl.ocks.org/sjengle/2e58e83685f6d854aa40c7bc546aeb24)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Map150.png)](https://d3-graph-gallery.com/backgroundmap.html)

Map

[![](https://d3-graph-gallery.com/img/section/Choropleth150.png)](https://d3-graph-gallery.com/choropleth.html)

Choropleth

[![](https://d3-graph-gallery.com/img/section/MapHexbin150.png)](https://d3-graph-gallery.com/hexbinmap.html)

Hexbin map

[![](https://d3-graph-gallery.com/img/section/Cartogram150.png)](https://d3-graph-gallery.com/cartogram.html)

Cartogram

[![](https://d3-graph-gallery.com/img/section/ConnectedMap150.png)](https://d3-graph-gallery.com/connectionmap.html)

Connection

[![](https://d3-graph-gallery.com/img/section/BubbleMap150.png)](https://d3-graph-gallery.com/bubblemap.html)

Bubble map

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.15074699723109952)

Prebid User Sync

![](https://idsync.rlcdn.com/420486.gif?partner_uid=D8A44939-3203-4353-85DB-26A6F681C35B)[iframe](cid:frame-B79488486376BA575A66C33FF6F5C29A@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=D8A44939-3203-4353-85DB-26A6F681C35B&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=D8A44939-3203-4353-85DB-26A6F681C35B&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=RDhBNDQ5MzktMzIwMy00MzUzLTg1REItMjZBNkY2ODFDMzVC&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=2KRJOTIDQ1OF2yam9oHDWw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=D8A44939-3203-4353-85DB-26A6F681C35B&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/D8A44939-3203-4353-85DB-26A6F681C35B?gdpr=0&gdpr_consent=)[iframe](cid:frame-3547EAC3D57E47F595B363EBA8FB8B4B@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)[iframe](cid:frame-6FBF99E220A7C3B6FCCC610093F325C2@mhtml.blink)

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=2600b40e-6d9f-4a3f-aae0-338b814f2975)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=19a0483d-8f07-4451-8b8d-6b4833982af4)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_6f463536-9a75-482f-b550-4d40804690f7&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-1E745F805417A46EB125ACA55832FA7F@mhtml.blink)

[iframe](cid:frame-7BF60DC7D9112BFED21C6061A6F4BBEA@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-1F42B14ABAB12C18577D6DA99F1F9985@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_6f463536-9a75-482f-b550-4d40804690f7&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_6f463536-9a75-482f-b550-4d40804690f7)

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876WcAoImQAKo-_AOopsQAACAMAAAAB&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876WcAoImQAKo.-AOopsQAA%262051&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876WcAoImQAKo-_AOopsQAACAMAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://um.simpli.fi/pm_match?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=90&external_user_id=$UID)![](https://www.temu.com/api/adx/cm/pixel-index?cm_user_id=Z876WcAoImQAKo-_AOopsQAACAMAAAAB)![](https://casale-match.dotomi.com/match/bounce/current?networkId=19998&version=1)![](https://sync-tm.everesttech.net/upi/pid/ZMAwryCI?redir=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D88%26external_user_id%3D%24%7BTM_USER_ID%7D)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876WcAoImQAKo-_AOopsQAACAMAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=bdfcbc2e-109c-4b9b-aafc-da2f0745ae6b)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=YmRmY2JjMmUtMTA5Yy00YjliLWFhZmMtZGEyZjA3NDVhZTZi)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://creativecdn.com/cm-notify?pi=sharethrough&gdpr=0&gdpr_consent=)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=470847bc-c8aa-c22c-0162-710968272018)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/8b195d85-44ac-eb9f-f0bb-e56bff4326b1?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=1fde3bc1-d400-79d6-c16c-f39e0014ebf8&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=MzNiMWU4MGItMWQ3Ny0yNzcyLWQ0OGMtYTkyN2NhZjYyNTk4)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

## D3.js Barplots Guide
Step by step

* * *

Building barplots in d3.js relies on the addition of several
`rect`, one per group in the categorical variable. The
[first example](https://d3-graph-gallery.com/graph/barplot_basic.html) below should
guide you in this procedure. Note that
[ordering groups](https://www.data-to-viz.com/caveat/order_data.html)
is an important step when building barplots.
[This example](https://d3-graph-gallery.com/graph/barplot_ordered.html) explains how to
do it.


[Most basic\\
\\
* * *\\
\\
The most basic barplot you can do in d3.js. Keeping only the\\
core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/barplot_basic.png)](https://d3-graph-gallery.com/graph/barplot_basic.html)

[Turn you barplot horizontal\\
\\
* * *\\
\\
Makes sense if you have long labels: it makes them more\\
readable.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/barplot_horizontal.png)](https://d3-graph-gallery.com/graph/barplot_horizontal.html)

[Order groups\\
\\
* * *\\
\\
Makes the plot more insightful: readers can spot what the\\
ranking is directly.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/barplot_ordered.png)](https://d3-graph-gallery.com/graph/barplot_ordered.html)

Interactive

* * *

Due to its simplicity, barplot is a very good chart to understand the
basic concepts of [interactivity](https://d3-graph-gallery.com/interactivity.html).
Below are many examples illustrating how to deal with
`transition`, `buttons`, the
`enter()` function and more.


[Animation at loading\\
\\
* * *\\
\\
A couple of lines allow to add an animation effect when the\\
plot is loading: bars start from 0 and reach their real\\
value.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/barplot_animation.gif)](https://d3-graph-gallery.com/graph/barplot_animation_start.html)

[Change color with a button\\
\\
* * *\\
\\
Clicking on a button triggers a function that changes the\\
style of all rectangles\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/barplot_button_color.gif)](https://d3-graph-gallery.com/graph/barplot_button_color.html)

[Change input data: simple version\\
\\
* * *\\
\\
How to go from one dataset to another with smooth\\
transition.\\
\\
Works only with same number of group\\
and same Y range. (X and Y axis are not updated)\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/barplot_button_data_simple.gif)](https://d3-graph-gallery.com/graph/barplot_button_data_simple.html)

[Change input data: upgraded version\\
\\
* * *\\
\\
How to go from one dataset to another with smooth\\
transition. Upgraded version: X and Y axis axis are\\
updated: data 1 and 2 can have different # of group.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/barplot_button_data_hard.gif)](https://d3-graph-gallery.com/graph/barplot_button_data_hard.html)

[Change input data: `.csv` input version\\
\\
* * *\\
\\
Same as precedent plot, but use a `.csv` format\\
as input file.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/barplot_button_data_csv.gif)](https://d3-graph-gallery.com/graph/barplot_button_data_csv.html)

Grouped and Stacked barplot

* * *

A barplot can also display values for several levels of grouping.
Subgroups can be displayed one beside each other, giving a grouped
barplot. If subgroups are displayed on top of each other, it is a
[stacked barplot](https://d3-graph-gallery.com/graph/barplot_stacked_basicWide.html).


[Basic stacked barplot\\
\\
* * *\\
\\
Most basic stacked barplot. Input data at wide format.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/barplot_stacked_basicWide.png)](https://d3-graph-gallery.com/graph/barplot_stacked_basicWide.html)

[Basic grouped barplot\\
\\
* * *\\
\\
Most basic grouped barplot. Input data at wide format.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/barplot_grouped_basicWide.png)](https://d3-graph-gallery.com/graph/barplot_grouped_basicWide.html)

[Percent stacked barplot\\
\\
* * *\\
\\
Most basic percent stacked barplot. Input data at wide\\
format.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/barplot_stacked_percent.png)](https://d3-graph-gallery.com/graph/barplot_stacked_percent.html)

[Stacked barplot with tooltip\\
\\
* * *\\
\\
Explain how to add a tooltip on hover for each subgroup.\\
Input data at wide format.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/barplot_stacked_hover.png)](https://d3-graph-gallery.com/graph/barplot_stacked_hover.html)

[Highlight subgroups in stacked barplot\\
\\
* * *\\
\\
It's hard to compare subgroups in a stacked barplot.\\
Highlighting one on hover helps tackle this issue.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/barplot_stacked_highlight.gif)](https://d3-graph-gallery.com/graph/barplot_stacked_highlight.html)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Bar150.png)](https://d3-graph-gallery.com/barplot.html)

Barplot

[![](https://d3-graph-gallery.com/img/section/Spider150.png)](https://d3-graph-gallery.com/spider.html)

Spider / Radar

[![](https://d3-graph-gallery.com/img/section/Wordcloud150.png)](https://d3-graph-gallery.com/wordcloud.html)

Wordcloud

[![](https://d3-graph-gallery.com/img/section/Parallel1150.png)](https://d3-graph-gallery.com/parallel.html)

Parallel

[![](https://d3-graph-gallery.com/img/section/Lollipop150.png)](https://d3-graph-gallery.com/lollipop.html)

Lollipop

[![](https://d3-graph-gallery.com/img/section/CircularBarplot150.png)](https://d3-graph-gallery.com/circular_barplot.html)

Circular Barplot

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.010547683501045402)

Prebid User Sync

![](https://idsync.rlcdn.com/420486.gif?partner_uid=C054461E-21D9-4F7D-8581-8D1860209998)[iframe](cid:frame-897FC59FEFE9897E5BF8459DC647BE8B@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=C054461E-21D9-4F7D-8581-8D1860209998&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=C054461E-21D9-4F7D-8581-8D1860209998&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=QzA1NDQ2MUUtMjFEOS00RjdELTg1ODEtOEQxODYwMjA5OTk4&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=wFRGHiHZT32FgY0YYCCZmA%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=C054461E-21D9-4F7D-8581-8D1860209998&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/C054461E-21D9-4F7D-8581-8D1860209998?gdpr=0&gdpr_consent=)[iframe](cid:frame-D5D209D572CF8F18EDCE819FA3216072@mhtml.blink)[iframe](cid:frame-54CA02BE5150320D2B0D13E7849977E3@mhtml.blink)[iframe](cid:frame-ADD0593DB7A3F44034E80570832A7EBC@mhtml.blink)[iframe](cid:frame-8F9614A09B881753C2D007BB03DE515C@mhtml.blink)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=1233356250235595211&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=1233356250235595211)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/1233356250235595211?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=1233356250235595211&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=1233356250235595211)

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_2e9fcc6a-8ae8-4748-9b19-8317dfa8f549&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-C155DCD99D0B926DC2395F2E58E8D3CA@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-A5B4181CCD45964E299496BDE80C6931@mhtml.blink)

[iframe](cid:frame-0F1123710D44CA6A0B2660706121E315@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_2e9fcc6a-8ae8-4748-9b19-8317dfa8f549)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_2e9fcc6a-8ae8-4748-9b19-8317dfa8f549&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-9A6441E694009B9CFBFF6A86FD57C8CA@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-7F690577021087F55A372AA62199C065@mhtml.blink)

[iframe](cid:frame-E9345314E2D48208C12981CC7494143F@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-7AF27A4A09A8FDD3BE4D907F5615A5B6@mhtml.blink)[iframe](cid:frame-720D7FDC9680612ACC40DDA8DB7200CD@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_2e9fcc6a-8ae8-4748-9b19-8317dfa8f549&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_2e9fcc6a-8ae8-4748-9b19-8317dfa8f549)

ssum-sec.casalemedia.com

# This site can’t be reached

**ssum-sec.casalemedia.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ssum-sec.casalemedia.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.sharethrough.com

# This site can’t be reached

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-0F8F7107FA5E7D328D37562C87392174@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-068C5B544E896530AF776B5978811BD8@mhtml.blink)

Topics Frame

## D3.js Histogram Guide
Step by step

* * *

Learn how to build a
[basic](https://d3-graph-gallery.com/graph/histogram_basic.html) histogram and how to
apply a few customizations to it. Starts easy with only one data
series and gets harder with several,
[color highlighting](https://d3-graph-gallery.com/graph/histogram_coloredTail.html),
mirroring and more.


[Most basic\\
\\
* * *\\
\\
The most basic histogram you can do in d3.js. Keeping only\\
the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/histogram_basic.png)](https://d3-graph-gallery.com/graph/histogram_basic.html)

[Color a specific part\\
\\
* * *\\
\\
Use a simple `if - else` statement to color a\\
part of the histogram.\\
\\
Also show how to add a\\
vertical bar annotation.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/histogram_coloredTail.png)](https://d3-graph-gallery.com/graph/histogram_coloredTail.html)

[Double histogram\\
\\
* * *\\
\\
A double histogram can be handy to compare the distribution\\
of 2 variables.\\
\\
Good to see how the\\
`filter()` function works.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/histogram_double.png)](https://d3-graph-gallery.com/graph/histogram_double.html)

Interactive

* * *

Interactivity on histograms can be interesting for 2 main
reasons. First, playing with the bin size is an important step:
the distribution can look very different depending on the value as
explained
[here](https://www.data-to-viz.com/caveat/bin_size.html).
Second, adding a tooltip to display bar threshold and exact
number of values can be a plus.


[Button to control bin size\\
\\
* * *\\
\\
Add a button that controls bin size. Good example to learn\\
how to create an update function that also update an axis.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/histogram_binSize.gif)](https://d3-graph-gallery.com/graph/histogram_binSize.html)

[Add tooltip\\
\\
* * *\\
\\
Useful to get the threshold of each bar range. Needs to be\\
improved though.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/histogram_tooltip.png)](https://d3-graph-gallery.com/graph/histogram_tooltip.html)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Violin150.png)](https://d3-graph-gallery.com/violin.html)

Violin

[![](https://d3-graph-gallery.com/img/section/Density150.png)](https://d3-graph-gallery.com/density.html)

Density

[![](https://d3-graph-gallery.com/img/section/Histogram150.png)](https://d3-graph-gallery.com/histogram.html)

Histogram

[![](https://d3-graph-gallery.com/img/section/Box1150.png)](https://d3-graph-gallery.com/boxplot.html)

Boxplot

[![](https://d3-graph-gallery.com/img/section/Joyplot150.png)](https://d3-graph-gallery.com/ridgeline.html)

Ridgeline

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.998767452517622)

Prebid User Sync

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=182496&gdpr=&gdpr\_consent=&us\_privacy=&gpp=&gpp\_sid=&cb=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dix%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=182496&gdpr=&gdpr\_consent=&us\_privacy=&gpp=&gpp\_sid=&cb=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dix%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_63502f52-bd91-42c1-89a5-eda1a947a3f6&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV82MzUwMmY1Mi1iZDkxLTQyYzEtODlhNS1lZGExYTk0N2EzZjY=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV82MzUwMmY1Mi1iZDkxLTQyYzEtODlhNS1lZGExYTk0N2EzZjY=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-748BC3BF86C91DDBE64439E4EDC2AC6C@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-45E2E80171DE579D85889BC1A850A1C1@mhtml.blink)[iframe](cid:frame-7BAC9A172FC23DD59506346C26DFDB34@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_63502f52-bd91-42c1-89a5-eda1a947a3f6&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_63502f52-bd91-42c1-89a5-eda1a947a3f6)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.sharethrough.com

# This site can’t be reached

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

## Circular Packing Visualizations
Step by step

* * *

[Most basic circular packing\\
\\
* * *\\
\\
Most basic examples: just applying a few forces on 8 nodes\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/circularpacking_basic.gif)](https://d3-graph-gallery.com/graph/circularpacking_basic.html)

[Add dragging feature\\
\\
* * *\\
\\
Dragging allows you to interactively modify a node position,\\
updating other nodes automatically.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/circularpacking_drag.gif)](https://d3-graph-gallery.com/graph/circularpacking_drag.html)

[Add group features\\
\\
* * *\\
\\
How to use group information on circular packing: change\\
color, attract to specific position...\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/circularpacking_group.png)](https://d3-graph-gallery.com/graph/circularpacking_group.html)

Template

* * *

Here is the
[template](https://d3-graph-gallery.com/graph/circularpacking_template.html) I start
with when needing to build a circular packing with
one level of hierarchy. Input data is a
`.csv` file giving features for each node. Circle
size an color depends on these features. You can
drag circles to reorganize, and hover them for more
information.


[See code](https://d3-graph-gallery.com/graph/circularpacking_template.html)

Distribution of the world populationHover and drag for more

Selection of blocks

* * *

A selection of examples showing the application of the basic concept
to real life dataset.


[Circular packing with one level of hierarchy\\
\\
* * *\\
\\
An example showing one bubble by country in a clean layout.\\
\\
\\
![network graph les miserables](https://d3-graph-gallery.com/img/block/block_circularpack1level.png)](https://bl.ocks.org/HarryStevens/f636199a46fc4b210fbca3b1dc4ef372)

[Overview of force layout\\
\\
* * *\\
\\
A cool post by d3 in depth I highly recommend to get\\
introduced to forces\\
\\
\\
![network graph les miserables](https://d3-graph-gallery.com/img/block/block_circularpackD3indepth.png)](https://d3indepth.com/force-layout/)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Tree150.png)](https://d3-graph-gallery.com/treemap.html)

Treemap

[![](https://d3-graph-gallery.com/img/section/Doughnut150.png)](https://d3-graph-gallery.com/donut.html)

Doughnut

[![](https://d3-graph-gallery.com/img/section/Pie150.png)](https://d3-graph-gallery.com/pie.html)

Pie chart

[![](https://d3-graph-gallery.com/img/section/Dendrogram150.png)](https://d3-graph-gallery.com/dendrogram.html)

Dendrogram

[![](https://d3-graph-gallery.com/img/section/CircularPacking150.png)](https://d3-graph-gallery.com/circularpacking.html)

Circular packing

[![](https://d3-graph-gallery.com/img/section/Sunburst150.png)](https://d3-graph-gallery.com/sunburst.html)

Sunburst

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.3878858134771497)

Prebid User Sync

![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876ZtHM4ZkANq_PAIw6jAAACacAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876ZtHM4ZkANq_PAIw6jAAACacAAAAB&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876ZtHM4ZkANq-PAIw6jAAA%262471&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://ib.adnxs.com/getuid?https://dsum.casalemedia.com/crum?cm_dsp_id=190&external_user_id=$UID)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=48)![](https://pm.w55c.net/ping_match.gif?ei=CASALE&rurl=https://dsum-sec.casalemedia.com/crum?cm_dsp_id=47&external_user_id=_wfivefivec_)![](https://b1sync.zemanta.com/usersync/index/?puid=Z876ZtHM4ZkANq-PAIw6jAAA%262471&cb=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fexternal_user_id%3D_ZUID_&gdpr=&gdpr_consent=&us_privacy=)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876ZtHM4ZkANq-PAIw6jAAA%262471)

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=6e083ebe-54d5-45a5-9d49-5fc417de6f9d)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/c311d735-7de6-e405-c712-892469d26059?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=57d6b171-ed4a-764c-f6c5-9fd19685ad10&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=N2JiOTYyYmItMjQzZC0yOGU4LWUzMjUtYzU2ODVjNjc2Mzcw)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_c0f389b4-7506-40c5-af18-46aadd12a2ff&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-048D5F1F3DA7A35DC37D754A367EB410@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9jMGYzODliNC03NTA2LTQwYzUtYWYxOC00NmFhZGQxMmEyZmY=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9jMGYzODliNC03NTA2LTQwYzUtYWYxOC00NmFhZGQxMmEyZmY=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.adsrvr.org

# This site can’t be reached

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-91D3B01C3B0A5D75F571CB3A0A37B566@mhtml.blink)[iframe](cid:frame-ED40DF0CC39B716E500665477B1549BF@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_c0f389b4-7506-40c5-af18-46aadd12a2ff&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_c0f389b4-7506-40c5-af18-46aadd12a2ff)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=930c77cf-a59a-4b71-bc22-3f879323b5ce)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=OTMwYzc3Y2YtYTU5YS00YjcxLWJjMjItM2Y4NzkzMjNiNWNl)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://match.deepintent.com/usersync/158)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=97&redir=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DgBgkxrVErPj9wqivTDd2AmVY%26source_user_id%3D%7BuserId%7D&gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=EDB3C4AC-11DD-4F04-A839-D0DA889495D6)[iframe](cid:frame-285F3E7F98F0635DA587321BC01E62F1@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=EDB3C4AC-11DD-4F04-A839-D0DA889495D6&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=EDB3C4AC-11DD-4F04-A839-D0DA889495D6&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=RURCM0M0QUMtMTFERC00RjA0LUE4MzktRDBEQTg4OTQ5NUQ2&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=7bPErBHdTwSoOdDaiJSV1g%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=EDB3C4AC-11DD-4F04-A839-D0DA889495D6&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-71C8A9E9A894D5AA32270F84669E14BF@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIZ0HHRTDWK)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIZ0HHRTDWK)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/bounce?%2Fgetuid%3Fhttps%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fid%3D%24UID%26ex%3Dappnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/bounce?%2Fgetuid%3Fhttps%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fid%3D%24UID%26ex%3Dappnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?ld=1&gdpr=0&cmp\_cs=&us\_privacy=&redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?ld=1&gdpr=0&cmp\_cs=&us\_privacy=&redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=3598075733657178655258&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=3598075733657178655258)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/3598075733657178655258?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=3598075733657178655258&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://pbs-raptive-us.ay.delivery/setuid?bidder=triplelift&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=3598075733657178655258)

## D3.js Scatterplot Guide
Step by step

* * *

Scatterplot is one of the easiest chart to make with d3.js, and
thus a good starting point if you're discovering this tool. The first
example below is the
[most basic scatterplot](https://d3-graph-gallery.com/graph/scatter_basic.html) you can
do, keeping only the core code. Next is shown how to
[custom the general appearance](https://d3-graph-gallery.com/graph/custom_theme.html),
and how to [add tooltips](https://d3-graph-gallery.com/graph/scatter_tooltip.html) to
each circle.


[Most basic\\
\\
* * *\\
\\
The most basic scatterplot you can do in d3.js. Keeping only\\
the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/scatter_basic.png)](https://d3-graph-gallery.com/graph/scatter_basic.html)

[Clean themes\\
\\
* * *\\
\\
A set of custom themes applied to scatterplot.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/custom_themeggplot2.png)](https://d3-graph-gallery.com/graph/custom_theme.html)

[Add tooltips\\
\\
* * *\\
\\
Add a tooltip that appears beside each datapoint when you\\
hover it\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/scatter_tooltip.png)](https://d3-graph-gallery.com/graph/scatter_tooltip.html)

Grouped scatter

* * *

Grouping is a common practice in scatterplots. It allows to
investigate how groups behave for the 2 numeric variables. It requires
a
[minimal additional amount](https://d3-graph-gallery.com/graph/scatter_grouped.html) of
effort: just create a color scale and use it for the
`fill` argument of the circles


[Most basic\\
\\
* * *\\
\\
Basic grouped scatterplot: each group has a different color.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/scatter_grouped.png)](https://d3-graph-gallery.com/graph/scatter_grouped.html)

[Highlight a group\\
\\
* * *\\
\\
Highlight a group of point when one of its member is hovered\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/scatter_grouped_highlight.gif)](https://d3-graph-gallery.com/graph/scatter_grouped_highlight.html)

Animation \| Interactivity

* * *

Two interactive features are highly necessary on scatterplots: the
ability to zoom on a specific part of the chart, and the
creation of tooltips linked to each data points. Here is a set
of examples showing how to implement these features through different
techniques.


[Animation at start\\
\\
* * *\\
\\
Make the dots appear one after the other using a different\\
delay for each.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/scatter_animation_start.gif)](https://d3-graph-gallery.com/graph/scatter_animation_start.html)

[Brush\\
\\
* * *\\
\\
Learn how to allow brushing, and how to modify points in the\\
brush area\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/scatter_brush.gif)](https://d3-graph-gallery.com/graph/interactivity_brush.html)

[Update X axis limits\\
\\
* * *\\
\\
A button control the X axis upper limit and trigger a smooth\\
transition to the new limit\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/scatter_buttonXlim.gif)](https://d3-graph-gallery.com/graph/scatter_buttonXlim.html)

Selection of blocks

* * *

[Scatter with labels\\
\\
* * *\\
\\
A scatterplot with each dot labelled.\\
\\
By Mike\\
Bostock.\\
\\
\\
![circular barchart](https://d3-graph-gallery.com/img/block/block_scatterLabel.png)](https://beta.observablehq.com/@mbostock/d3-scatterplot)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/ScatterPlot150.png)](https://d3-graph-gallery.com/scatter.html)

Scatter

[![](https://d3-graph-gallery.com/img/section/Heatmap150.png)](https://d3-graph-gallery.com/heatmap.html)

Heatmap

[![](https://d3-graph-gallery.com/img/section/Correlogram150.png)](https://d3-graph-gallery.com/correlogram.html)

Correlogram

[![](https://d3-graph-gallery.com/img/section/BubblePlot150.png)](https://d3-graph-gallery.com/bubble.html)

Bubble

[![](https://d3-graph-gallery.com/img/section/ScatterConnected150.png)](https://d3-graph-gallery.com/connectedscatter.html)

Connected scatter

[![](https://d3-graph-gallery.com/img/section/2dDensity150.png)](https://d3-graph-gallery.com/density2d.html)

Density 2d

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.5781772668120033)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=711336368491587738067&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=711336368491587738067)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/711336368491587738067?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=711336368491587738067&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=711336368491587738067)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_166c4345-f619-482c-853c-754a9cb69d85&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-9F5CB743E754468D682C23032AC57786@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-B8836312EFA59355F544B729293D48F2@mhtml.blink)

[iframe](cid:frame-CB7B2D9C7999A4B79DA4548766CAB250@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-B86A9FA26758AF2AB3B90C9192E60D97@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_166c4345-f619-482c-853c-754a9cb69d85&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_166c4345-f619-482c-853c-754a9cb69d85)

ssum-sec.casalemedia.com

# This site can’t be reached

**ssum-sec.casalemedia.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ssum-sec.casalemedia.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=b2057b84-3c28-419c-bd74-40f625c33089)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=YjIwNTdiODQtM2MyOC00MTljLWJkNzQtNDBmNjI1YzMzMDg5)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://bttrack.com/pixel/cookiesyncredir?rurl=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DFGhqNjC2WnFmmvNpTL32LMME%26source_user_id%3D%7Bglobalid%7D%26gdpr%3D0%26gdpr_consent%3D)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=C95ED146-9733-4497-A580-DD47739F4A55)[iframe](cid:frame-5FC6BE05A490095FB23B831D1F264E90@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=C95ED146-9733-4497-A580-DD47739F4A55&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=C95ED146-9733-4497-A580-DD47739F4A55&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=Qzk1RUQxNDYtOTczMy00NDk3LUE1ODAtREQ0NzczOUY0QTU1&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=yV7RRpczRJelgN1Hc59KVQ%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=C95ED146-9733-4497-A580-DD47739F4A55&redir=true&gdpr=0&gdpr_consent=)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHI9O6k9DWPH)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHI9O6k9DWPH)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

**u.openx.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**u.openx.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=a26000fe-f81e-4123-bff2-37ffc3b88eab)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/0f79e975-d12d-e083-e5a9-e11fbdb4816f?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=9bbe8f31-4181-72ca-d47e-f7ea42e34c26&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=YjdkMTVjZmItODhmNi0yYzZlLWMxOWUtYWQ1Mzg4MDE4MjQ2)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

## Choropleth Maps in D3.js
Step by step

* * *

[Most basic\\
\\
* * *\\
\\
The most basic choropleth map you can do in d3.js. Keeping\\
only the core code.\\
\\
Input data format: geoJson\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/choropleth_basic.png)](https://d3-graph-gallery.com/graph/choropleth_basic.html)

[Add hover effect\\
\\
* * *\\
\\
Highlight the hovered region by playing with stroke and\\
transparency.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/choropleth_hover_effect.gif)](https://d3-graph-gallery.com/graph/choropleth_hover_effect.html)

Awesome block

* * *

[Unemployment rate by county in the USA\\
\\
* * *\\
\\
A beautiful example by Mike Bostock: static choropleth map\\
with legend, and nice color scale\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/block_choropleth_USA.png)](https://beta.observablehq.com/@mbostock/d3-choropleth)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Map150.png)](https://d3-graph-gallery.com/backgroundmap.html)

Map

[![](https://d3-graph-gallery.com/img/section/Choropleth150.png)](https://d3-graph-gallery.com/choropleth.html)

Choropleth

[![](https://d3-graph-gallery.com/img/section/MapHexbin150.png)](https://d3-graph-gallery.com/hexbinmap.html)

Hexbin map

[![](https://d3-graph-gallery.com/img/section/Cartogram150.png)](https://d3-graph-gallery.com/cartogram.html)

Cartogram

[![](https://d3-graph-gallery.com/img/section/ConnectedMap150.png)](https://d3-graph-gallery.com/connectionmap.html)

Connection

[![](https://d3-graph-gallery.com/img/section/BubbleMap150.png)](https://d3-graph-gallery.com/bubblemap.html)

Bubble map

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.6024466778891835)

Prebid User Sync

![](https://idsync.rlcdn.com/420486.gif?partner_uid=7C90CBD9-A973-444D-A220-00EAC56E9450)[iframe](cid:frame-FEE96CF19EDF00BFC28C168609002B56@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=7C90CBD9-A973-444D-A220-00EAC56E9450&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=7C90CBD9-A973-444D-A220-00EAC56E9450&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=N0M5MENCRDktQTk3My00NDRELUEyMjAtMDBFQUM1NkU5NDUw&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=fJDL2alzRE2iIADqxW6UUA%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=7C90CBD9-A973-444D-A220-00EAC56E9450&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/7C90CBD9-A973-444D-A220-00EAC56E9450?gdpr=0&gdpr_consent=)[iframe](cid:frame-D1F6FCA2AE20A5911914621C678DFD76@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)[iframe](cid:frame-99C7A9DA431CEDC8FB60273FE390C317@mhtml.blink)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=1330878268991367181586&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=1330878268991367181586)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/1330878268991367181586?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=1330878268991367181586&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=1330878268991367181586)

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=125&redir=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D54%26uid%3D%7BuserId%7D)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_7d50bc9d-2117-48c2-980f-877ead7fa425&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-CA0EBE29D3BD1D1BD371D6D1E3BBCEBC@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

**cm.g.doubleclick.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**cm.g.doubleclick.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-264ABE0745B2AE4FD202227387DABEA2@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)

[iframe](cid:frame-7E294E83463143406A1FF45D0AAD2AE8@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_7d50bc9d-2117-48c2-980f-877ead7fa425&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_7d50bc9d-2117-48c2-980f-877ead7fa425)

ssum-sec.casalemedia.com

# This site can’t be reached

**ssum-sec.casalemedia.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ssum-sec.casalemedia.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=c2b25dd9-88ee-4694-949b-ec35c1b3ef04)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=YzJiMjVkZDktODhlZS00Njk0LTk0OWItZWMzNWMxYjNlZjA0)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ssbsync.smartadserver.com/api/sync?callerId=47&gdpr=0&gdpr_consent=)![](https://ssp.disqus.com/redirectuser?r=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3D7rkJAhPCWXbw9Lq5dZxc6TvN%26source_user_id%3D%24UID&partner=sharethrough)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-8CDA7A2A46316731662FCDE58CF62777@mhtml.blink)

Topics Frame

## Chord Diagram Guide
A few notes on chord

* * *

Chord diagram is probably one of the most difficult graph to build
with d3. Here are a few reminders:


- Everything relies on the
[d3.chord()](https://github.com/d3/d3-chord) function.
This function takes as input a square matrix of flow. The output is
an array of chords.

- Each chord as a source and a target. For each group it gives info
like the angle of start and end, the flow value, the node index,

- It's important to understand that a chord diagram is composed by 2
elements: the links, and the nodes. Nodes are like a donut plot

- The nodes are drawn using the arc() function. The links with the
ribbon function().


Step by step

* * *

[Most basic\\
\\
* * *\\
\\
The most basic chord diagram you can do in d3.js. Keeping\\
only the core code.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/chord_basic.png)](https://d3-graph-gallery.com/graph/chord_basic.html)

[Add ticks and tick labels\\
\\
* * *\\
\\
Same graphic as before, just adding tick and ticks labels\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/chord_axis_labels.png)](https://d3-graph-gallery.com/graph/chord_axis_labels.html)

[Control colors\\
\\
* * *\\
\\
You probably want to set a color for each group, and colors\\
links according to their source / target. Here is how.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/chord_colors.png)](https://d3-graph-gallery.com/graph/chord_colors.html)

Best Blocks

* * *

[Storytelling with Chord Diagram\\
\\
* * *\\
\\
Nadieh Bremer tells us about the switching behavior between\\
phone brands through a chord diagram. A must see example of\\
data story telling.\\
\\
\\
![](https://d3-graph-gallery.com/img/graph/block_chord_bremer.png)](http://bl.ocks.org/nbremer/94db779237655907b907)

Related chart types

* * *

[![](https://d3-graph-gallery.com/img/section/Chord150.png)](https://d3-graph-gallery.com/chord.html)

Chord diagram

[![](https://d3-graph-gallery.com/img/section/Network150.png)](https://d3-graph-gallery.com/network.html)

Network

[![](https://d3-graph-gallery.com/img/section/Sankey150.png)](https://d3-graph-gallery.com/sankey.html)

Sankey

[![](https://d3-graph-gallery.com/img/section/Arc150.png)](https://d3-graph-gallery.com/arc.html)

Arc diagram

[![](https://d3-graph-gallery.com/img/section/Bundle150.png)](https://d3-graph-gallery.com/bundle.html)

Edge bundling

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.2630097997985352)

Prebid User Sync

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_cbd597b3-09f3-4771-805a-2eed81849d08&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-8F01C999363E59FD4A535152EECBC105@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-C46389567B98550DAFEC5B4815A951DC@mhtml.blink)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=0DDE634F-F798-4608-8FEE-FF33496D7CAE)[iframe](cid:frame-144931AB2F16837D2B9957459FC9F43C@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=0DDE634F-F798-4608-8FEE-FF33496D7CAE&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=0DDE634F-F798-4608-8FEE-FF33496D7CAE&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=Dd5jT_eYRgiP7v8zSW18rg%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=0DDE634F-F798-4608-8FEE-FF33496D7CAE&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/0DDE634F-F798-4608-8FEE-FF33496D7CAE?gdpr=0&gdpr_consent=)[iframe](cid:frame-8CA342861B25F96819AF332B47DC459F@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)

match.deepintent.com

# This site can’t be reached

The webpage at **https://match.deepintent.com/usersync/141?gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.deepintent.com/usersync/141?gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

simage2.pubmatic.com

# This site can’t be reached

The webpage at **https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTc4JnRsPTE1NzY4MDA=&piggybackCookie=5956443724654794125&gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTc4JnRsPTE1NzY4MDA=&piggybackCookie=5956443724654794125&gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-75C857A694C077780C3803E009E5CF69@mhtml.blink)

[iframe](cid:frame-575FEF8AD514981888840222E02E42BE@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-C22F1AE8F9765AEF791CA419D8CC9B80@mhtml.blink)[iframe](cid:frame-59A16AB4681EEA6A382B8E6D99B4E5D3@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_cbd597b3-09f3-4771-805a-2eed81849d08)

![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876ZtHM6E0AMMkpADhfYAAAAg0AAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876ZtHM6E0AMMkpADhfYAAAAg0AAAIB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://secure.adnxs.com/getuid?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=46&external_user_id=$UID)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://cms.quantserve.com/pixel/p-Z8PuJEk6U7Hyq.gif?idmatch=0)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876ZtHM6E0AMMkpADhfYAAA%26525&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://dmp.brand-display.com/cm/api/index?cm_dsp_id=191&cm_user_id=%3cIndex_user_id%3e)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=48)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876ZtHM6E0AMMkpADhfYAAA%26525)

![](https://aa.agkn.com/adscores/g.pixel?sid=9212308278&puid=0DDE634F-F798-4608-8FEE-FF33496D7CAE)![](https://sync.crwdcntrl.net/qmap?c=240&tp=PUBM&tpid=0DDE634F-F798-4608-8FEE-FF33496D7CAE&gdpr=0&gdpr_consent=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3371&partner_device_id=0DDE634F-F798-4608-8FEE-FF33496D7CAE)![](https://i.liadm.com/s/75145?bidder_id=195755&bidder_uuid=0DDE634F-F798-4608-8FEE-FF33496D7CAE)![](https://pubmatic-match.dotomi.com/match/bounce/current?networkId=17100&version=1&nuid=0DDE634F-F798-4608-8FEE-FF33496D7CAE&gdpr=0&gdpr_consent=)[iframe](cid:frame-4627FA7107CF138F4B9447FE0E74DAF8@mhtml.blink)[iframe](cid:frame-F06CDB7F979548F110B012BEC2F94F86@mhtml.blink)![](https://rtb.adentifi.com/CookieSyncPubMatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-E9F058DE388D5704B0AE62C5DBA58C03@mhtml.blink)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=3&gdpr=0&gdpr_consent=)

[iframe](cid:frame-06E5101462669F6DF124D790F8509BC3@mhtml.blink)[iframe](cid:frame-7A16DD3AFDAFDA7047B3D50A1D440629@mhtml.blink)[iframe](cid:frame-4E6B3764A44E194A8D36BF37E28A6FD5@mhtml.blink)![](https://ad.turn.com/r/cs?pid=1&gdpr=0&gdpr_consent=)![](https://pmp.mxptint.net/sn.ashx?&gdpr=0&gdpr_consent=)[iframe](cid:frame-D06F0021F7034B49CB9BFC3FC62857DF@mhtml.blink)[iframe](cid:frame-DB309AADB4D24D0E14C26BC8D6DC86C1@mhtml.blink)[iframe](cid:frame-ED9C4BD85353758632F10AE4AFF4213B@mhtml.blink)![](https://creativecdn.com/cm-notify?pi=pubmatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-793CBF4E84973540525FB4220CD858CD@mhtml.blink)![](https://c1.adform.net/serving/cookie/match?party=14&redirect=https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTI4NzUmdGw9NDMyMDA=&piggybackCookie=[PLACE%20YOUR%20PIGGYBACK%20COOKIES%20HERE]&gdpr=0&gdpr_consent=)[iframe](cid:frame-EE84F4FCE9C9C751726BEC630CB72839@mhtml.blink)

[iframe](cid:frame-1B42ED67CAE441AEBF18D8D9D1D37798@mhtml.blink)[iframe](cid:frame-ABA3C71D6F43341024B5AF114696AFDE@mhtml.blink)

ad.mrtnsvr.com

# This site can’t be reached

**ad.mrtnsvr.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ad.mrtnsvr.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-A66054997A7ED6FE4B3821DE8F1AD1ED@mhtml.blink)[iframe](cid:frame-215950DA5513B275796741E605193AD0@mhtml.blink)

[iframe](cid:frame-F043AE6EFA35843C3F944B051F5B58BF@mhtml.blink)

```
{UID} macro not found
```

[iframe](cid:frame-6DBEE5A07322A1057E7A9C1FD7B458C0@mhtml.blink)[iframe](cid:frame-4366E21F48A61A99BB597A4520082644@mhtml.blink)

User-Sync

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

SafeFrame Container

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_cbd597b3-09f3-4771-805a-2eed81849d08&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-68CD156FA05010A329F73BFB37DCC39D@mhtml.blink)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-910C8BF135396A3C1E153005F166C997@mhtml.blink)

[iframe](cid:frame-CE8EB763822517478957547EC3013753@mhtml.blink)

![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-F9DB426F2C21C3F600C63BF889B75C8A@mhtml.blink)[iframe](cid:frame-D421AFED71ED91F5A0F54A08376C308A@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_cbd597b3-09f3-4771-805a-2eed81849d08&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_cbd597b3-09f3-4771-805a-2eed81849d08)

![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876ZtHM6E0AMMkpADhfYAAA%26525&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876ZtHM6E0AMMkpADhfYAAAAg0AAAIB&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://ad.turn.com/r/cs?pid=21)![](https://beacon.lynx.cognitivlabs.com/ix.gif)![](https://www.temu.com/api/adx/cm/pixel-index?id=Z876ZtHM6E0AMMkpADhfYAAAAg0AAAIB)![](https://casale-match.dotomi.com/match/bounce/current?networkId=19998&version=1)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876ZtHM6E0AMMkpADhfYAAAAg0AAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=f7e33c71-d534-4441-bab8-8040799e0d28)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=ZjdlMzNjNzEtZDUzNC00NDQxLWJhYjgtODA0MDc5OWUwZDI4)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/sharethrough)![](https://ssc-cms.33across.com/ps/?ri=0013300001kQj2HAAS&ru=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DkzFyzzqXEqukMDumpVLB6Eq3%26source_user_id%3D33XUSERID33X)

![](https://us01.z.antigena.com/l/FZt5psomz79DGe~O1V5PkX7S8-NVJIdw0INR-k~Duu9c36GyIDyElf4y8fa2~-9InNSq4BCadyu-8tQSiIkaVleT~Yh8GI4ocNSeo4~API4DJEsYNIMg2sPMMXvjcckTUFy53ZYw3gzv35jSAchydRkSr2XFgqe-kzzlKTlv1VT7-TlAc0PcX7nFzbKlHypwbpU3AWUAJgUx%200DDE634F-F798-4608-8FEE-FF33496D7CAE&rnd=RND)![](https://match.adsby.bidtheatre.com/pubmaticmatch?redir=https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTMwNjImdGw9MTI5NjAw&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)

[iframe](cid:frame-ED019E8EA4264A87CD3B4422D03DDD2C@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIqGPxRyPDX)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIqGPxRyPDX&cb=1741617766371&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIqGPxRyPDX)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=22772f02-ade4-c4e5-124b-069768c035f3)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/ee66353b-21e2-ed56-e392-92f5ffa4335a?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=7aa1537f-b14e-7f1f-d245-840000f3fe13&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NTZjZTgwYjUtNzgzOS0yMWJiLWM3YTUtZGViOWNhMTEzMDcz)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-802FEF54C126F78D901336274EF9CA94@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-A1E40AA9D3347070037BF86011A7DCE4@mhtml.blink)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=d4a24eb0-aba8-4620-bc3b-2bf5afe6f4bf%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)

Topics Frame

Pixels![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=7cdf2083-ea49-4298-98a4-1cd6337f3f1f)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=1333447108743587624269&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=1333447108743587624269)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/1333447108743587624269?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=1333447108743587624269&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)

![](https://x.bidswitch.net/sync?ssp=criteo&custom_data=yLWdw181eWVsdUhSTHlEV1psbk9UUmRXUXNRZ3RMdVBsSTdnYWRqWEJSNms2NmhzJTNE&gpp=&gpp_sid=&gdpr=&gdpr_consent=&us_privacy=1YNY&cr_user_id=k-Q5HwyKjF-lt7uD2rEsppl0jthXr24_tURTwwMQ)![](https://secure.adnxs.com/getuid?https%3a%2f%2fssp-sync.criteo.com%2fuser-sync%2fmatch%3fp%3dzXL9RV9wSnpQZjFhcDIwWmZyaWt6NWElMkZoRlNETEIzZmdya3MxTllGNmJ6T2F6RDglM0Q%26u%3d%24UID&gdpr=&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=commerce_grid_dbm&google_hm=k-Q5HwyKjF-lt7uD2rEsppl0jthXr24_tURTwwMQ&google_cm&google_redir=https%3a%2f%2fssp-sync.criteo.com%2fuser-sync%2fmatch%3fp%3dOjG_Ol84blVWNEZwR0xYNXFJMlE4ZDhRSDJsWWU5MllQJTJCeVR3dzlZejZrQThGJTJCZyUzRA%26u%3d%25%25GOOGLE_GID%25%25&gdpr=&gdpr_consent=)![](https://ad.turn.com/r/cs?pid=75&us_privacy=1YNY&gdpr=&gdpr_consent=)![](https://cs.admanmedia.com/e805be652c9053b8f771665f0ac3c361.gif?puid=k-Q5HwyKjF-lt7uD2rEsppl0jthXr24_tURTwwMQ&gdpr=&gdpr_consent=&ccpa=1YNY)![](https://ssp-sync.criteo.com/user-sync/iframe?gdprapplies=&gdpr=&ccpa=1YNY&gpp=&gpp_sid=&redir=https%3A%2F%2Fpbs-raptive-us.ay.delivery%2Fsetuid%3Fbidder%3Dcriteo%26gdpr%3D%26gdpr_consent%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24%7BCRITEO_USER_ID%7D&profile=230)

## Double Histogram Visualization
-4-3-2-10123456789020406080100120140160180variable Avariable B

##### Steps:

- Building this chart is pretty straight forward if you
already understood how to make a
[basic histogram](https://d3-graph-gallery.com/graph/histogram_basic.html).


- Note that the 2 data series are stored in a
[.csv file](https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_doubleHist.csv)
at long format.


- It is thus possible to apply a
`filter()` function to the data when calling the
`histogram` function.


- Once the 2 bin data are available, just add it with 2
`rect` calls.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 40},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// get the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_doubleHist.csv", function(data) {

  // X axis: scale and draw:
  var x = d3.scaleLinear()
      .domain([-4,9])     // can use this instead of 1000 to have the max of data: d3.max(data, function(d) { return +d.price })
      .range([0, width]);
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // set the parameters for the histogram
  var histogram = d3.histogram()
      .value(function(d) { return +d.value; })   // I need to give the vector of value
      .domain(x.domain())  // then the domain of the graphic
      .thresholds(x.ticks(40)); // then the numbers of bins

  // And apply twice this function to data to get the bins.
  var bins1 = histogram(data.filter( function(d){return d.type === "variable 1"} ));
  var bins2 = histogram(data.filter( function(d){return d.type === "variable 2"} ));

  // Y axis: scale and draw:
  var y = d3.scaleLinear()
      .range([height, 0]);
      y.domain([0, d3.max(bins1, function(d) { return d.length; })]);   // d3.hist has to be called before the Y axis obviously
  svg.append("g")
      .call(d3.axisLeft(y));

  // append the bars for series 1
  svg.selectAll("rect")
      .data(bins1)
      .enter()
      .append("rect")
        .attr("x", 1)
        .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; })
        .attr("width", function(d) { return x(d.x1) - x(d.x0) -1 ; })
        .attr("height", function(d) { return height - y(d.length); })
        .style("fill", "#69b3a2")
        .style("opacity", 0.6)

  // append the bars for series 2
  svg.selectAll("rect2")
      .data(bins2)
      .enter()
      .append("rect")
        .attr("x", 1)
        .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; })
        .attr("width", function(d) { return x(d.x1) - x(d.x0) -1 ; })
        .attr("height", function(d) { return height - y(d.length); })
        .style("fill", "#404080")
        .style("opacity", 0.6)

  // Handmade legend
  svg.append("circle").attr("cx",300).attr("cy",30).attr("r", 6).style("fill", "#69b3a2")
  svg.append("circle").attr("cx",300).attr("cy",60).attr("r", 6).style("fill", "#404080")
  svg.append("text").attr("x", 320).attr("y", 30).text("variable A").style("font-size", "15px").attr("alignment-baseline","middle")
  svg.append("text").attr("x", 320).attr("y", 60).text("variable B").style("font-size", "15px").attr("alignment-baseline","middle")

});
</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 30, left: 40},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          `translate(${margin.left},${margin.top})`);

// get the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_doubleHist.csv").then( function(data) {

  // X axis: scale and draw:
  const x = d3.scaleLinear()
      .domain([-4,9])     // can use this instead of 1000 to have the max of data: d3.max(data, function(d) { return +d.price })
      .range([0, width]);
  svg.append("g")
      .attr("transform", `translate(0, ${height})`)
      .call(d3.axisBottom(x));

  // set the parameters for the histogram
  const histogram = d3.histogram()
      .value(function(d) { return +d.value; })   // I need to give the vector of value
      .domain(x.domain())  // then the domain of the graphic
      .thresholds(x.ticks(40)); // then the numbers of bins

  // And apply twice this function to data to get the bins.
  const bins1 = histogram(data.filter( function(d){return d.type === "variable 1"} ));
  const bins2 = histogram(data.filter( function(d){return d.type === "variable 2"} ));

  // Y axis: scale and draw:
  const y = d3.scaleLinear()
      .range([height, 0]);
      y.domain([0, d3.max(bins1, function(d) { return d.length; })]);   // d3.hist has to be called before the Y axis obviously
  svg.append("g")
      .call(d3.axisLeft(y));

  // append the bars for series 1
  svg.selectAll("rect")
      .data(bins1)
      .join("rect")
        .attr("x", 1)
        .attr("transform", function(d) { return `translate(${x(d.x0)} , ${y(d.length)})`})
        .attr("width", function(d) { return x(d.x1) - x(d.x0) -1 ; })
        .attr("height", function(d) { return height - y(d.length); })
        .style("fill", "#69b3a2")
        .style("opacity", 0.6)

  // append the bars for series 2
  svg.selectAll("rect2")
      .data(bins2)
      .enter()
      .append("rect")
        .attr("x", 1)
        .attr("transform", function(d) { return `translate(${x(d.x0)}, ${y(d.length)})`})
        .attr("width", function(d) { return x(d.x1) - x(d.x0) -1 ; })
        .attr("height", function(d) { return height - y(d.length); })
        .style("fill", "#404080")
        .style("opacity", 0.6)

  // Handmade legend
  svg.append("circle").attr("cx",300).attr("cy",30).attr("r", 6).style("fill", "#69b3a2")
  svg.append("circle").attr("cx",300).attr("cy",60).attr("r", 6).style("fill", "#404080")
  svg.append("text").attr("x", 320).attr("y", 30).text("variable A").style("font-size", "15px").attr("alignment-baseline","middle")
  svg.append("text").attr("x", 320).attr("y", 60).text("variable B").style("font-size", "15px").attr("alignment-baseline","middle")

});
</script>
```

### Related blocks →

- _Simple histogram using v4 -_ by
[d3Noob](https://bl.ocks.org/d3noob/96b74d0bd6d11427dd797892551a103c)

- _Histogram section -_ by
[the D3 graph gallery](https://d3-graph-gallery.com/histogram.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.23304471934918758)

Prebid User Sync

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=82a32fed-c220-4dd8-9d4b-8f2f568fe902)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=bd03d3de-20b8-43b6-bc26-d7ece458ea83)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876ZtHM70UAFcybAHNO2wAA%26259&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876ZtHM70UAFcybAHNO2wAAAQMAAAIB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://secure.adnxs.com/getuid?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=46&external_user_id=$UID)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://x.bidswitch.net/sync?ssp=index)![](https://sync-tm.everesttech.net/upi/pid/ZMAwryCI?redir=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D88%26external_user_id%3D%24%7BTM_USER_ID%7D)![](https://www.temu.com/api/adx/cm/pixel-index?cm_user_id=Z876ZtHM70UAFcybAHNO2wAAAQMAAAIB)![](https://tr.blismedia.com/v1/api/sync/indexexchange?gdpr=&userId=Z876ZtHM70UAFcybAHNO2wAA%26259&gpp=&gpp_sid=&us_privacy=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876ZtHM70UAFcybAHNO2wAA%26259)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_7ba83311-ef23-4558-b55a-09bd1563913e&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-9AAEA9ED08AE83D2D6C4A6C3A32536E2@mhtml.blink)

[iframe](cid:frame-DFABBD914766867E72515E37E3B42BB9@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-B094D7FE93C2D54BBD7805124F1E6E63@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_7ba83311-ef23-4558-b55a-09bd1563913e&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_7ba83311-ef23-4558-b55a-09bd1563913e)

![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876ZtHM70UAFcybAHNO2wAAAQMAAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876ZtHM70UAFcybAHNO2wAAAQMAAAIB&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://match.adsrvr.org/track/cmf/casale)![](https://www.temu.com/api/adx/cm/pixel-index?id=Z876ZtHM70UAFcybAHNO2wAAAQMAAAIB)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=48)![](https://dpm.demdex.net/ibs:dpid=23728&dpuuid=Z876ZtHM70UAFcybAHNO2wAA%26259?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://s.c.appier.net/index?userId=Z876ZtHM70UAFcybAHNO2wAA%26259&gdpr=&us_privacy=)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876ZtHM70UAFcybAHNO2wAAAQMAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=ec0aa372-b02b-4d0d-aa9b-e5d19665e5e6)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=ZWMwYWEzNzItYjAyYi00ZDBkLWFhOWItZTVkMTk2NjVlNWU2)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/sharethrough)![](https://bttrack.com/pixel/cookiesyncredir?rurl=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DFGhqNjC2WnFmmvNpTL32LMME%26source_user_id%3D%7Bglobalid%7D%26gdpr%3D0%26gdpr_consent%3D)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=95FA231A-1075-4C4F-9818-8349F58BE8D8)[iframe](cid:frame-1961475BA2891E044A80B7C457D350E6@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=95FA231A-1075-4C4F-9818-8349F58BE8D8&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=95FA231A-1075-4C4F-9818-8349F58BE8D8&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=OTVGQTIzMUEtMTA3NS00QzRGLTk4MTgtODM0OUY1OEJFOEQ4&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=lfojGhB1TE-YGINJ9Yvo2A%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=95FA231A-1075-4C4F-9818-8349F58BE8D8&redir=true&gdpr=0&gdpr_consent=)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIEFzW3GyJf)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElFRnpXM0d5SmY=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIEFzW3GyJf)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIEFzW3GyJf&cb=1741617765995&url={{REFERRER}}&gdpr=0&gdpr_consent=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=e3abdc5f-6715-c5cb-36c9-cdadbfe7e06f)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/2fbac666-eb13-ec78-c710-59cf2883e6c6?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=bb7da022-7bbf-7e31-f6c7-4f3ad7d42b8f&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=OTcxMjczZTgtYjJjOC0yMDk1LWUzMjctMTU4MzFkMzZlNWVm)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-BD6D81C8D15129A02C631DDD8AABEE84@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-F0A0EAB14EE60079ED37787EC47AFF75@mhtml.blink)

Topics Frame

## Interactive Arc Diagrams
C ScornavaccaV BerryN GaltierM ArdissonF DelsucS SantoniY HoltzEJP DouzeryS GléminP RoumetV ViaderK BelkhirG PouxJP DoyonJ RomiguierG SarahJ DavidJY DutheilJ DainatJ MontmainJL DavidJF DufayardS HarispeMF SyA BesnardM BonnefoyM TavaudMH MullerNO RodeP LeroyS GautierB BoussauN ChantretA ArmeroA BreilA DereeperF De LamotteFC BaurensG DrocS BocsA CriscuoloAMA ChifolleauN AubervalN ClaironPH FabreS DiserS PointetS PouraliTH NguyenV DaubinM CrampesE BazinE FiguetF ZhangJ DutheilJH WilsonL DuretS GaillardV DionC BurgarellaS GleminE DouzeryGJ SzöllősiKY GorbunovMK TilakS GuillemotA CenciC GuilhaumonJS EscobarM Tavaud-PirraA DassouliB NoelB VacherieE CornillotG TsagkogeorgaM BallenghienP GayralV CahaisI FischerCW KilpatrickD HuchonP ChevretPD JenkinsU JordanB MartretC FizamesJ AlassimoneL MarquèsZ ShahzadB RoureD BaurainDMD VienneH PhilippeV LefortA RegnaultB DuthilP AugereauK Hadj-KaddourJ Melo FerreiraW PaprotnyD SánchezM BatetN FioriniEMA LGI2PC DouadyEJPDNLH PhilippeSBACF DelsucA SerraD PotE JacoxTH ToA ChifolleauY ChanJ VillerdK Hadj KaddourJ Melo‐Ferreira

##### Steps:

- Data input format is `Json`.
[This document](https://d3-graph-gallery.com/graph/network_data_format.html)
explains how to get this format from a classic table.


- Before building this complicated chart, understand how to
draw a [basic arc diagram](https://d3-graph-gallery.com/graph/arc_basic.html), and
how to
[highlight links on hover](https://d3-graph-gallery.com/graph/arc_highlight.html).


- All other customization are basic d3.js concept, like using
linear scale for node size or color scale for nodes.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Load color palette -->
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 0, right: 30, bottom: 50, left: 60},
  width = 650 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Read dummy data
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_researcherNetwork.json", function( data) {

  // List of node names
  var allNodes = data.nodes.map(function(d){return d.name})

  // List of groups
  var allGroups = data.nodes.map(function(d){return d.grp})
  allGroups = [...new Set(allGroups)]

  // A color scale for groups:
  var color = d3.scaleOrdinal()
    .domain(allGroups)
    .range(d3.schemeSet3);

  // A linear scale for node size
  var size = d3.scaleLinear()
    .domain([1,10])
    .range([2,10]);

  // A linear scale to position the nodes on the X axis
  var x = d3.scalePoint()
    .range([0, width])
    .domain(allNodes)

  // In my input data, links are provided between nodes -id-, NOT between node names.
  // So I have to do a link between this id and the name
  var idToNode = {};
  data.nodes.forEach(function (n) {
    idToNode[n.id] = n;
  });

  // Add the links
  var links = svg
    .selectAll('mylinks')
    .data(data.links)
    .enter()
    .append('path')
    .attr('d', function (d) {
      start = x(idToNode[d.source].name)    // X position of start node on the X axis
      end = x(idToNode[d.target].name)      // X position of end node
      return ['M', start, height-30,    // the arc starts at the coordinate x=start, y=height-30 (where the starting node is)\
        'A',                            // This means we're gonna build an elliptical arc\
        (start - end)/2, ',',    // Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance\
        (start - end)/2, 0, 0, ',',\
        start < end ? 1 : 0, end, ',', height-30] // We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down.
        .join(' ');
    })
    .style("fill", "none")
    .attr("stroke", "grey")
    .style("stroke-width", 1)

  // Add the circle for the nodes
  var nodes = svg
    .selectAll("mynodes")
    .data(data.nodes.sort(function(a,b) { return +b.n - +a.n }))
    .enter()
    .append("circle")
      .attr("cx", function(d){ return(x(d.name))})
      .attr("cy", height-30)
      .attr("r", function(d){ return(size(d.n))})
      .style("fill", function(d){ return color(d.grp)})
      .attr("stroke", "white")

  // And give them a label
  var labels = svg
    .selectAll("mylabels")
    .data(data.nodes)
    .enter()
    .append("text")
      .attr("x", 0)
      .attr("y", 0)
      .text(function(d){ return(d.name)} )
      .style("text-anchor", "end")
      .attr("transform", function(d){ return( "translate(" + (x(d.name)) + "," + (height-15) + ")rotate(-45)")})
      .style("font-size", 6)

  // Add the highlighting functionality
  nodes
    .on('mouseover', function (d) {
      // Highlight the nodes: every node is green except of him
      nodes
        .style('opacity', .2)
      d3.select(this)
        .style('opacity', 1)
      // Highlight the connections
      links
        .style('stroke', function (link_d) { return link_d.source === d.id || link_d.target === d.id ? color(d.grp) : '#b8b8b8';})
        .style('stroke-opacity', function (link_d) { return link_d.source === d.id || link_d.target === d.id ? 1 : .2;})
        .style('stroke-width', function (link_d) { return link_d.source === d.id || link_d.target === d.id ? 4 : 1;})
      labels
        .style("font-size", function(label_d){ return label_d.name === d.name ? 16 : 2 } )
        .attr("y", function(label_d){ return label_d.name === d.name ? 10 : 0 } )

    })
    .on('mouseout', function (d) {
      nodes.style('opacity', 1)
      links
        .style('stroke', 'grey')
        .style('stroke-opacity', .8)
        .style('stroke-width', '1')
      labels
        .style("font-size", 6 )

    })
})

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 0, right: 30, bottom: 50, left: 60},
    width = 650 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
    .append("svg")
  .attr("viewBox",[0,0,width+90,height+80])
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform",`translate(${margin.left},${margin.top})`);

// Read dummy data
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_researcherNetwork.json").then( function(data) {

  // List of node names
  const allNodes = data.nodes.map(d => d.name)

  // List of groups
  let allGroups = data.nodes.map(d => d.grp)
  allGroups = [...new Set(allGroups)]

  // A color scale for groups:
  const color = d3.scaleOrdinal()
    .domain(allGroups)
    .range(d3.schemeSet3);

  // A linear scale for node size
  const size = d3.scaleLinear()
    .domain([1,10])
    .range([0.5,8]);

  // A linear scale to position the nodes on the X axis
  const x = d3.scalePoint()
    .range([0, width])
    .domain(allNodes)

  // In my input data, links are provided between nodes -id-, NOT between node names.
  // So I have to do a link between this id and the name
  const idToNode = {};
  data.nodes.forEach(function (n) {
    idToNode[n.id] = n;
  });

  // Add the links
  const links = svg
    .selectAll('mylinks')
    .data(data.links)
    .join('path')
    .attr('d', d => {
      start = x(idToNode[d.source].name)    // X position of start node on the X axis
      end = x(idToNode[d.target].name)      // X position of end node
      return ['M', start, height-30,    // the arc starts at the coordinate x=start, y=height-30 (where the starting node is)\
        'A',                            // This means we're gonna build an elliptical arc\
        (start - end)/2, ',',    // Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance\
        (start - end)/2, 0, 0, ',',\
        start < end ? 1 : 0, end, ',', height-30] // We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down.
        .join(' ');
    })
    .style("fill", "none")
    .attr("stroke", "grey")
    .style("stroke-width", 1)

  // Add the circle for the nodes
  const nodes = svg
    .selectAll("mynodes")
    .data(data.nodes.sort((a,b) => {+b.n - +a.n }))
    .join("circle")
      .attr("cx", d=>x(d.name))
      .attr("cy", height-30)
      .attr("r", d=>size(d.n))
      .style("fill", d=> color(d.grp))
      .attr("stroke", "white")

  // And give them a label
  const labels = svg
    .selectAll("mylabels")
    .data(data.nodes)
    .join("text")
      .attr("x", 0)
      .attr("y", 0)
      .text(d=>d.name)
      .style("text-anchor", "end")
      .attr("transform",d=>`translate(${x(d.name)},${height-15}) rotate(-45)`)
      .style("font-size", 6)

  // Add the highlighting functionality
    nodes.on('mouseover', function(event,d){

    // Highlight the nodes: every node is green except of him
    nodes.style('opacity', .2)
    d3.select(this).style('opacity', 1)

    // Highlight the connections
    links
      .style('stroke', a => a.source === d.id || a.target === d.id ? color(d.grp) : '#b8b8b8')
      .style('stroke-opacity', a => a.source === d.id || a.target === d.id ? 1 : .2)
      .style('stroke-width', a => a.source === d.id || a.target === d.id ? 4 : 1)
    labels
      .style("font-size", b => b.name === d.name ? 18.9 : 2)
      .attr("y", b => b.name === d.name ? 10 : 0)})
      .on('mouseout', d => {
        nodes.style('opacity', 1)
        links
          .style('stroke', 'grey')
          .style('stroke-opacity', .8)
          .style('stroke-width', '1')
        labels
          .style("font-size", 6 )
      })
  })
</script>
```

### Related blocks →

- _Arc diagram section -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/arc.html)

- _Arc diagram -_ by
[Robert Gove](https://bl.ocks.org/rpgove/53bb49d6ed762139f33bdaea1f3a9e1c)

- _Arc diagram -_ by
[MayBlue9](http://bl.ocks.org/mayblue9/dcc49ef6e3888f37f755177c4a248f2c)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.06503929613599557)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=3480623983686287310693&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=3480623983686287310693)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/3480623983686287310693?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=3480623983686287310693&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3480623983686287310693)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?gdpr=&gdpr\_consent=&us\_privacy=&gpp=&gpp\_sid=&predirect=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dpubmatic%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?gdpr=&gdpr\_consent=&us\_privacy=&gpp=&gpp\_sid=&predirect=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dpubmatic%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/casale)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876ZtHM46IAMN4NAEITgQAACr4AAAIB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://cms.quantserve.com/pixel/p-Z8PuJEk6U7Hyq.gif?idmatch=0)![](https://s.company-target.com/s/ix?cm_dsp_id=18&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://tr.blismedia.com/v1/api/sync/indexexchange?gdpr=&userId=Z876ZtHM46IAMN4NAEITgQAA%262750&gpp=&gpp_sid=&us_privacy=&gdpr_consent=)![](https://p.rfihub.com/cm?in=1&pub=2079)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://d.adroll.com/cm/index/tp_out?advertisable=3GMDZMBFQREVBC75SYYKWH)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876ZtHM46IAMN4NAEITgQAA%262750)

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3443467f-2cd6-439a-a65e-e6bd2a0d712d)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=0be3ba4c-ce4e-4df4-8733-be7e98da72ac)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_153e94fe-3595-4ab3-bba9-bec68169bcc5&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-7C335581A16CE4361E01A5BEBCCD9A6E@mhtml.blink)

[iframe](cid:frame-A06C4EC5BE1D5294F436FF4460ED4B79@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-5E186DDC830C9BBC24C76B03B833AB77@mhtml.blink)[iframe](cid:frame-A94EF41B7DC46DC265739DA825043A89@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_153e94fe-3595-4ab3-bba9-bec68169bcc5&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_153e94fe-3595-4ab3-bba9-bec68169bcc5)

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876ZtHM46IAMN4NAEITgQAA%262750&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876ZtHM46IAMN4NAEITgQAACr4AAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876ZtHM46IAMN4NAEITgQAACr4AAAIB&gpp=&gpp_sid=)![](https://dmp.brand-display.com/cm/api/index?cm_dsp_id=191&cm_user_id=%3cIndex_user_id%3e)![](https://secure.adnxs.com/getuid?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=46&external_user_id=$UID)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=48)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876ZtHM46IAMN4NAEITgQAACr4AAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=202f1bcf-fbf1-4622-b005-4af000db6e75)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=MjAyZjFiY2YtZmJmMS00NjIyLWIwMDUtNGFmMDAwZGI2ZTc1)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://b1sync.zemanta.com/usersync/sharethrough?cb=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_user_id%3D__ZUID__%26gdpr%3D%7BGDPR%7D%26gdpr_consent%3D%7BGDPR_CONSENT_80%7D)![](https://stx-match.dotomi.com/match/bounce/current?networkId=44410&version=1&nuid=202f1bcf-fbf1-4622-b005-4af000db6e75&gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=3B6A21F4-81D9-4712-9CEB-0C29B012F237)[iframe](cid:frame-40A8C249DD02F9DE5B449DC2E4B158A3@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=3B6A21F4-81D9-4712-9CEB-0C29B012F237&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=3B6A21F4-81D9-4712-9CEB-0C29B012F237&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=M0I2QTIxRjQtODFEOS00NzEyLTlDRUItMEMyOUIwMTJGMjM3&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=O2oh9IHZRxKc6wwpsBLyNw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=3B6A21F4-81D9-4712-9CEB-0C29B012F237&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-E5670B4930ED50871809F6EFA0C596F3@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHI_f_EWMa2K)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElfZl9FV01hMks=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHI_f_EWMa2K)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=554bb5cd-89e3-cb89-0ddc-a43fc3657840)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/995aaff4-05e5-e23a-fc05-305d54017ee9?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=0d9dc9b0-9549-7073-cdd2-26a8ab56b3a0&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=MjFmMjFhN2EtNWMzZS0yZWQ3LWQ4MzItN2MxMTYxYjQ3ZGMw)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-497EB4BC72E9A1B6FA8D4850C710D370@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-AABDED0DC7D66496C86DC75AE0AC86AE@mhtml.blink)

Topics Frame

## Scatter Plot Tooltips
02004006008001,0001,2001,4001,6001,8002,0002,2002,4002,6002,8003,000050,000100,000150,000200,000250,000300,000350,000400,000

##### Notes:

- The gallery has a
[dedicated page](https://d3-graph-gallery.com/graph/interactivity_tooltip.html) for
tooltips. It also offer explanation for the most
[basic scatterplot](https://d3-graph-gallery.com/graph/scatter_basic.html). This
post is just a combination of both techniques.


- Tooltips do no work very well when dots are overlapping. We
probably need to add a
[zoom](https://d3-graph-gallery.com/graph/interactivity_zoom.html) feature to this
chart.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv", function(data) {

  // Add X axis
  var x = d3.scaleLinear()
    .domain([0, 3000])
    .range([ 0, width ]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, 400000])
    .range([ height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Add a tooltip div. Here I define the general feature of the tooltip: stuff that do not depend on the data point.
  // Its opacity is set to 0: we don't see it by default.
  var tooltip = d3.select("#my_dataviz")
    .append("div")
    .style("opacity", 0)
    .attr("class", "tooltip")
    .style("background-color", "white")
    .style("border", "solid")
    .style("border-width", "1px")
    .style("border-radius", "5px")
    .style("padding", "10px")

  // A function that change this tooltip when the user hover a point.
  // Its opacity is set to 1: we can now see it. Plus it set the text and position of tooltip depending on the datapoint (d)
  var mouseover = function(d) {
    tooltip
      .style("opacity", 1)
  }

  var mousemove = function(d) {
    tooltip
      .html("The exact value of<br>the Ground Living area is: " + d.GrLivArea)
      .style("left", (d3.mouse(this)[0]+90) + "px") // It is important to put the +90: other wise the tooltip is exactly where the point is an it creates a weird effect
      .style("top", (d3.mouse(this)[1]) + "px")
  }

  // A function that change this tooltip when the leaves a point: just need to set opacity to 0 again
  var mouseleave = function(d) {
    tooltip
      .transition()
      .duration(200)
      .style("opacity", 0)
  }

  // Add dots
  svg.append('g')
    .selectAll("dot")
    .data(data.filter(function(d,i){return i<50})) // the .filter part is just to keep a few dots on the chart, not all of them
    .enter()
    .append("circle")
      .attr("cx", function (d) { return x(d.GrLivArea); } )
      .attr("cy", function (d) { return y(d.SalePrice); } )
      .attr("r", 7)
      .style("fill", "#69b3a2")
      .style("opacity", 0.3)
      .style("stroke", "white")
    .on("mouseover", mouseover )
    .on("mousemove", mousemove )
    .on("mouseleave", mouseleave )

})

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 450 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          `translate(${margin.left}, ${margin.top})`);

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv").then( function(data) {

  // Add X axis
  const x = d3.scaleLinear()
    .domain([0, 3000])
    .range([ 0, width ]);
  svg.append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x));

  // Add Y axis
  const y = d3.scaleLinear()
    .domain([0, 400000])
    .range([ height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Add a tooltip div. Here I define the general feature of the tooltip: stuff that do not depend on the data point.
  // Its opacity is set to 0: we don't see it by default.
  const tooltip = d3.select("#my_dataviz")
    .append("div")
    .style("opacity", 0)
    .attr("class", "tooltip")
    .style("background-color", "white")
    .style("border", "solid")
    .style("border-width", "1px")
    .style("border-radius", "5px")
    .style("padding", "10px")

  // A function that change this tooltip when the user hover a point.
  // Its opacity is set to 1: we can now see it. Plus it set the text and position of tooltip depending on the datapoint (d)
  const mouseover = function(event, d) {
    tooltip
      .style("opacity", 1)
  }

  const mousemove = function(event, d) {
    tooltip
      .html(`The exact value of<br>the Ground Living area is: ${d.GrLivArea}`)
      .style("left", (event.x)/2 + "px") // It is important to put the +90: other wise the tooltip is exactly where the point is an it creates a weird effect
      .style("top", (event.y)/2 + "px")
  }

  // A function that change this tooltip when the leaves a point: just need to set opacity to 0 again
  const mouseleave = function(event,d) {
    tooltip
      .transition()
      .duration(200)
      .style("opacity", 0)
  }

  // Add dots
  svg.append('g')
    .selectAll("dot")
    .data(data.filter(function(d,i){return i<50})) // the .filter part is just to keep a few dots on the chart, not all of them
    .enter()
    .append("circle")
      .attr("cx", function (d) { return x(d.GrLivArea); } )
      .attr("cy", function (d) { return y(d.SalePrice); } )
      .attr("r", 7)
      .style("fill", "#69b3a2")
      .style("opacity", 0.3)
      .style("stroke", "white")
    .on("mouseover", mouseover )
    .on("mousemove", mousemove )
    .on("mouseleave", mouseleave )

})
</script>
```

### Related blocks →

- _Basic scatterplot -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/graph/scatter_basic.html)

- _Interactivity -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/interactivity.html)

- _Tooltips in d3.js -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/graph/interactivity_tooltip.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.09934885359055112)

Prebid User Sync

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_3a66e7d6-c485-4bc8-9e41-56cac6d34dcd&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-C1F50E336E501F14D7D47E8D5818046F@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-8E04343537B04CBE26951A668B15F771@mhtml.blink)

[iframe](cid:frame-6113B441A6FC0C50ABEF1FE35CCDDA3F@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-888AB13EB9A806FB24269C454869899A@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_3a66e7d6-c485-4bc8-9e41-56cac6d34dcd&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_3a66e7d6-c485-4bc8-9e41-56cac6d34dcd)

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876ZtHM4YsAB32iAH0h2QAACZkAAAAB&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876ZtHM4YsAB32iAH0h2QAACZkAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876ZtHM4YsAB32iAH0h2QAA%262457&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://sync-tm.everesttech.net/upi/pid/ZMAwryCI?redir=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D88%26external_user_id%3D%24%7BTM_USER_ID%7D)![](https://d.adroll.com/cm/index/tp_out?advertisable=3GMDZMBFQREVBC75SYYKWH)![](https://ad.turn.com/r/cs?pid=21)![](https://bttrack.com/pixel/cookiesync?source=67e94f23-25d6-4008-8236-375d1743c2e0&secure=1)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876ZtHM4YsAB32iAH0h2QAACZkAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=8d526e90-7857-4856-b43b-922d13e90250)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=OGQ1MjZlOTAtNzg1Ny00ODU2LWI0M2ItOTIyZDEzZTkwMjUw)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/sharethrough)![](https://sync.1rx.io/usersync2/sharethrough)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIRv9yr85BB)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIRv9yr85BB&cb=1741617766030&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIRv9yr85BB)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIRv9yr85BB)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-0E07B592E138F6FBEC481DB56D21E32D@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-5A4AD36B8B66A4664B54905A3F76317D@mhtml.blink)

Topics Frame

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=1695242433678859385751&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=1695242433678859385751)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/1695242433678859385751?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=1695242433678859385751&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=1695242433678859385751)

## Bar Plot Color Change
Get blueGet red

United StatesRussiaGermany (FRG)FranceUnited KingdomChinaSpainNetherlandsItalyIsrael01,0002,0003,0004,0005,0006,0007,0008,0009,00010,00011,00012,00013,000

##### Steps:

- First of all, understand how to build a
[basic barplot.](https://d3-graph-gallery.com/graph/barplot_basic.html)

- Add a `button` in the html part. Note the
`onclick` attribute: it means that the
`changeColor()` function will be triggered when
you click on it


- Create the `changeColor()` function in the
Javascript part. It basically select all the rectangles of
the plot and change their `fill` attribute.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Add 2 buttons -->
<button onclick="changeColor('blue')">Get blue</button>
<button onclick="changeColor('red')">Get red</button>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Add 2 buttons -->
<button onclick="changeColor('blue')">Get blue</button>
<button onclick="changeColor('red')">Get red</button>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 70, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum_header.csv", function(data) {

// X axis
var x = d3.scaleBand()
  .range([ 0, width ])
  .domain(data.map(function(d) { return d.Country; }))
  .padding(0.2);
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))
  .selectAll("text")
    .attr("transform", "translate(-10,0)rotate(-45)")
    .style("text-anchor", "end");

// Add Y axis
var y = d3.scaleLinear()
  .domain([0, 13000])
  .range([ height, 0]);
svg.append("g")
  .call(d3.axisLeft(y));

// Bars
svg.selectAll("mybar")
  .data(data)
  .enter()
  .append("rect")
    .attr("x", function(d) { return x(d.Country); })
    .attr("y", function(d) { return y(d.Value); })
    .attr("width", x.bandwidth())
    .attr("height", function(d) { return height - y(d.Value); })
    .attr("fill", "#69b3a2")

})

// This function is called by the buttons on top of the plot
function changeColor(color){
  d3.selectAll("rect")
    .transition()
    .duration(2000)
    .style("fill", color)
}

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 30, right: 30, bottom: 70, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum_header.csv").then( function(data) {

// X axis
const x = d3.scaleBand()
  .range([ 0, width ])
  .domain(data.map(d => d.Country))
  .padding(0.2);
svg.append("g")
  .attr("transform", `translate(0, ${height})`)
  .call(d3.axisBottom(x))
  .selectAll("text")
    .attr("transform", "translate(-10,0)rotate(-45)")
    .style("text-anchor", "end");

// Add Y axis
const y = d3.scaleLinear()
  .domain([0, 13000])
  .range([ height, 0]);
svg.append("g")
  .call(d3.axisLeft(y));

// Bars
svg.selectAll("mybar")
  .data(data)
  .join("rect")
    .attr("x", d => x(d.Country))
    .attr("y", d => y(d.Value))
    .attr("width", x.bandwidth())
    .attr("height", d => height - y(d.Value))
    .attr("fill", "#69b3a2")

})

// This function is called by the buttons on top of the plot
function changeColor(color){
  d3.selectAll("rect")
    .transition()
    .duration(2000)
    .style("fill", color)
}
</script>
```

### Related blocks →

- _Simple bar graph in v4 -_ [link](https://bl.ocks.org/d3noob/bdf28027e0ce70bd132edc64f1dd7ea4)

- _Let's make a bar chart -_ [link](https://bost.ocks.org/mike/bar/)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.001420253658821924)

Prebid User Sync

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_6e265a0f-37ff-4993-8c2f-3a0f319270ca&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-CE8DCA7CDFC90B5B218103343614129F@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-FE7CB2902D59ECC53B8006705F1039C9@mhtml.blink)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=46B95585-6D3B-4131-BF28-1A182867A97E)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=14&cid=46B95585-6D3B-4131-BF28-1A182867A97E&gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=14&cid=46B95585-6D3B-4131-BF28-1A182867A97E&gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.onaudience.com/?partner=214&mapped=46B95585-6D3B-4131-BF28-1A182867A97E&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=46B95585-6D3B-4131-BF28-1A182867A97E&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=NDZCOTU1ODUtNkQzQi00MTMxLUJGMjgtMUExODI4NjdBOTdF&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=RrlVhW07QTG_KBoYKGepfg%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=46B95585-6D3B-4131-BF28-1A182867A97E&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/46B95585-6D3B-4131-BF28-1A182867A97E?gdpr=0&gdpr_consent=)

![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)

match.deepintent.com

# This site can’t be reached

The webpage at **https://match.deepintent.com/usersync/141?gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.deepintent.com/usersync/141?gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-1773FBBEC4A775CE978EBA400261B0DC@mhtml.blink)

[iframe](cid:frame-3D0C1AAC7D584339206FFD72E630011D@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-4C80F4D64AA93350C447FC11817613E3@mhtml.blink)[iframe](cid:frame-D41B2D21A5C58E56F3462B51594A814F@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_6e265a0f-37ff-4993-8c2f-3a0f319270ca)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=891039ac-a916-42bb-a651-4be9e3b201da&ph=a3aece0c-9e80-4316-8deb-faf804779bd1&gdpr=&gdpr\_consent=&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dopenx%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=891039ac-a916-42bb-a651-4be9e3b201da&ph=a3aece0c-9e80-4316-8deb-faf804779bd1&gdpr=&gdpr\_consent=&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dopenx%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_6e265a0f-37ff-4993-8c2f-3a0f319270ca&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-927407A06FBCD2120ECB26840285B4A8@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_6e265a0f-37ff-4993-8c2f-3a0f319270ca&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV82ZTI2NWEwZi0zN2ZmLTQ5OTMtOGMyZi0zYTBmMzE5MjcwY2E=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV82ZTI2NWEwZi0zN2ZmLTQ5OTMtOGMyZi0zYTBmMzE5MjcwY2E=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_6e265a0f-37ff-4993-8c2f-3a0f319270ca)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

sync-amz.ads.yieldmo.com

# This site can’t be reached

**sync-amz.ads.yieldmo.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**sync-amz.ads.yieldmo.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

**u.openx.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**u.openx.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

**ib.adnxs.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ib.adnxs.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

**eb2.3lift.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**eb2.3lift.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pagead2.googlesyndication.com/pagead/sodar?id=sodar2&v=232&li=gpt_m202503040101&jk=220292949847703&rc=)

Topics Frame

## D3.js Density Contours
681012141618206810121416182022

##### Steps:

- The Html part of the code just creates a
`div` that will be modified by d3 later on. It
also load the
[d3-contour plugin](https://github.com/d3/d3-contour)

- The input dataset has 2 numeric variables:
`x` and `y`. A 2d density plot
basically represents the amount of data point on each part
of the grid.


- The d3-contour plugin allows to compute the density using
`d3.contourDensity()`. It's important to play
with the `bandwidth()` argument to find the good
resolution.


- Finally, paths can be drawn using `d3.geoPath()`

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- specific plugin -->
<script src="https://d3js.org/d3-contour.v1.min.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// read data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_for_density2d.csv", function(data) {

  // Add X axis
  var x = d3.scaleLinear()
    .domain([5, 20])
    .range([ 0, width ]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([5, 22])
    .range([ height, 0 ]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // compute the density data
  var densityData = d3.contourDensity()
    .x(function(d) { return x(d.x); })   // x and y = column name in .csv input data
    .y(function(d) { return y(d.y); })
    .size([width, height])
    .bandwidth(20)    // smaller = more precision in lines = more lines
    (data)

  // Add the contour: several "path"
  svg
    .selectAll("path")
    .data(densityData)
    .enter()
    .append("path")
      .attr("d", d3.geoPath())
      .attr("fill", "none")
      .attr("stroke", "#69b3a2")
      .attr("stroke-linejoin", "round")
})
</script>
```

### Related blocks →

- _D3-contour documentation -_ by
[Mike Bostock](https://github.com/d3/d3-contour)

- _Density Contours -_ by
[Mike Bostock](https://bl.ocks.org/mbostock/e3f4376d54e02d5d43ae32a7cf0e6aa9)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.8228458809422918)

Prebid User Sync

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_c29696b0-6249-4aaf-a956-881853bb2abd&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

**cm.g.doubleclick.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**cm.g.doubleclick.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

**ads.pubmatic.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ads.pubmatic.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-1C38FCCC92D1AA493FD617ECF26DFC75@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-CFAF5CB02CCD02C57B3AFA16C12FF493@mhtml.blink)[iframe](cid:frame-AB73D0EA34390D56120AEC7579DC7870@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_c29696b0-6249-4aaf-a956-881853bb2abd)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=3D3926C8-3A50-44DE-AE5A-11FDEF5E7B16)[iframe](cid:frame-B1FD8FC2F25FC3BF7D23C8B75C7A0F28@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=3D3926C8-3A50-44DE-AE5A-11FDEF5E7B16&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=3D3926C8-3A50-44DE-AE5A-11FDEF5E7B16&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=M0QzOTI2QzgtM0E1MC00NERFLUFFNUEtMTFGREVGNUU3QjE2&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=PTkmyDpQRN6uWhH97157Fg%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=3D3926C8-3A50-44DE-AE5A-11FDEF5E7B16&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/3D3926C8-3A50-44DE-AE5A-11FDEF5E7B16?gdpr=0&gdpr_consent=)[iframe](cid:frame-C7A944C70046F462B6D8A4281B5ECC58@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)[iframe](cid:frame-FFE952426E9B1A9FFAFBFD16916A7006@mhtml.blink)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)[iframe](cid:frame-AB54033F4C6803D16D85643F37DE19C2@mhtml.blink)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_c29696b0-6249-4aaf-a956-881853bb2abd&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-AEC53F06A57F9049404D09B8B5867582@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_c29696b0-6249-4aaf-a956-881853bb2abd&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)[iframe](cid:frame-5497B51F426F43762505FDAF97C32AB2@mhtml.blink)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)

![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_c29696b0-6249-4aaf-a956-881853bb2abd)

![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876c9HM5XwABfSaAPUadAAAFrYAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876c9HM5XwABfSaAPUadAAA%265814&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://dmp.brand-display.com/cm/api/index?cm_dsp_id=191&cm_user_id=%3cIndex_user_id%3e)![](https://c1.adform.net/serving/cookie/match?party=29)![](https://ib.adnxs.com/getuid?https://dsum.casalemedia.com/crum?cm_dsp_id=190&external_user_id=$UID)![](https://pm.w55c.net/ping_match.gif?ei=CASALE&rurl=https://dsum-sec.casalemedia.com/crum?cm_dsp_id=47&external_user_id=_wfivefivec_)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876c9HM5XwABfSaAPUadAAAFrYAAAAB)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-EC1AEF5F5F582B5B8D0534C46A1BC325@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

## Interactive Map Visualization
![](https://a.tile.openstreetmap.org/4/7/5.png)![](https://b.tile.openstreetmap.org/4/8/5.png)![](https://c.tile.openstreetmap.org/4/7/4.png)![](https://a.tile.openstreetmap.org/4/8/4.png)![](https://b.tile.openstreetmap.org/4/7/6.png)![](https://c.tile.openstreetmap.org/4/8/6.png)![](https://c.tile.openstreetmap.org/4/6/5.png)![](https://c.tile.openstreetmap.org/4/9/5.png)![](https://b.tile.openstreetmap.org/4/6/4.png)![](https://b.tile.openstreetmap.org/4/9/4.png)![](https://a.tile.openstreetmap.org/4/6/6.png)![](https://a.tile.openstreetmap.org/4/9/6.png)![](https://b.tile.openstreetmap.org/4/5/5.png)![](https://a.tile.openstreetmap.org/4/10/5.png)![](https://a.tile.openstreetmap.org/4/5/4.png)![](https://c.tile.openstreetmap.org/4/10/4.png)![](https://c.tile.openstreetmap.org/4/5/6.png)![](https://b.tile.openstreetmap.org/4/10/6.png)![](https://a.tile.openstreetmap.org/4/4/5.png)![](https://b.tile.openstreetmap.org/4/11/5.png)![](https://c.tile.openstreetmap.org/4/4/4.png)![](https://a.tile.openstreetmap.org/4/11/4.png)![](https://b.tile.openstreetmap.org/4/4/6.png)![](https://c.tile.openstreetmap.org/4/11/6.png)

[+](https://d3-graph-gallery.com/graph/backgroundmap_leaflet.html# "Zoom in") [−](https://d3-graph-gallery.com/graph/backgroundmap_leaflet.html# "Zoom out")

[Leaflet](http://leafletjs.com/ "A JS library for interactive maps") \| Map data © [OpenStreetMap](https://www.openstreetmap.org/)

##### Steps:

- List of tiles?

- https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
- http://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png

- http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png

- http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png


- In this example the world country boundaries are used. Data
comes from
[here](http://enjalot.github.io/wwsd/data/world/world-110m.geojson). They are provided at `geojson` format. If you
have a `shapefile` format, visit the
[background map](https://www.d3-graph-gallery.com/backgroundmap)
section to see how to proceed.


- Note that the
[geo.projection](https://github.com/d3/d3-geo-projection)
plugin is used. It allows to represent the world using
different projection. See
[this page of the gallery](https://d3-graph-gallery.com/graph/backgroundmap_leaflet.html) to see the
possibilities.


- Note: I don't understand the logic behind the
`.scale` part.


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>

<!-- Create an element where the map will take place -->
<div id="mapid"></div>

<style>
#mapid { height: 400px; }
</style>

```

``` js
<script>

// Initialize the map
// [50, -0.1] are the latitude and longitude
// 4 is the zoom
// mapid is the id of the div where the map will appear
var mymap = L
  .map('mapid')
  .setView([50, -0.1], 4);

// Add a tile to the map = a background. Comes from OpenStreetmap
L.tileLayer(
    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
    maxZoom: 6,
    }).addTo(mymap);

</script>
```

### Related blocks →

- _World Choropleth -_ [link](http://bl.ocks.org/palewire/d2906de347a160f38bc0b7ca57721328)

- _Projection Transitions -_ [link](https://bl.ocks.org/alexmacy/6700d44240d2b6d3ec9767a5a5854e42)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.9409540993128931)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=162660867448208947421&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=162660867448208947421)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/162660867448208947421?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=162660867448208947421&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=162660867448208947421)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_e67b8c07-7b52-4503-bdad-3fca7d97abd5&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-01B1AB6E7CE1A1AF3878670C5FA34CE5@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-CC37FED01C0370DCAE258CBC955DDFBB@mhtml.blink)

[iframe](cid:frame-F04C3EB258BEFA632306AFCD1D1A6741@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-60FA9B53FB5501BEB6E32DF0ACA12811@mhtml.blink)[iframe](cid:frame-F085A03968944823520539F2ED5F2AB3@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_e67b8c07-7b52-4503-bdad-3fca7d97abd5&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_e67b8c07-7b52-4503-bdad-3fca7d97abd5)

![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://match.adsrvr.org/track/cmf/casale)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876csAoIlAAIuI8APXTOAAAB-8AAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876csAoIlAAIuI8APXTOAAAB-8AAAIB&gpp=&gpp_sid=)![](https://secure.adnxs.com/getuid?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=46&external_user_id=$UID)![](https://www.temu.com/api/adx/cm/pixel-index?cm_user_id=Z876csAoIlAAIuI8APXTOAAAB-8AAAIB)![](https://p.rfihub.com/cm?in=1&pub=2079)![](https://ad.turn.com/r/cs?pid=21)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876csAoIlAAIuI8APXTOAAAB-8AAAIB)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=FC1D4C48-199F-44B1-877A-F71441D3109A)[iframe](cid:frame-070B567E80E8536A8251939E8B0F2C27@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=FC1D4C48-199F-44B1-877A-F71441D3109A&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=FC1D4C48-199F-44B1-877A-F71441D3109A&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=_B1MSBmfRLGHevcUQdMQmg%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=FC1D4C48-199F-44B1-877A-F71441D3109A&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/FC1D4C48-199F-44B1-877A-F71441D3109A?gdpr=0&gdpr_consent=)[iframe](cid:frame-F94005B114C064440FD52F3D16BDA2B4@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHI4i8K7Nn6z)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHI4i8K7Nn6z&cb=1741617777960&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=320a8163-8d08-cac8-245d-554986f6c387)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/fe1b9b5a-010e-e37b-d584-c12b1192c52e?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=6adcfd1e-91a2-7132-e453-d7deeec50867&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NDZiMzJlZDQtNThkNS0yZjk2LWYxYjMtOGQ2NzI0MjdjNjA3)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

**eb2.3lift.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**eb2.3lift.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

## Animated Scatter Plots
05001,0001,5002,0002,5003,0003,5004,000050,000100,000150,000200,000250,000300,000350,000400,000450,000500,000

##### Steps:

- Follows the previous
[basic scatterplot](https://d3-graph-gallery.com/graph/scatter_basic.html).


- Show how to update an axis and data points.

- For data points, note that a different delay is
applied to each circle. This is possible thanks to the
expression `function(d,i)` where i is the id of
the datapoint.


- See more on
[interactivity and animation](https://d3-graph-gallery.com/interactivity.html).


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
    // append the svg object to the body of the page
    var svg = d3.select("#my_dataviz")
      .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform",
              "translate(" + margin.left + "," + margin.top + ")")

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv", function(data) {

  // Add X axis
  var x = d3.scaleLinear()
    .domain([0, 0])
    .range([ 0, width ]);
  svg.append("g")
    .attr("class", "myXaxis")   // Note that here we give a class to the X axis, to be able to call it later and modify it
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .attr("opacity", "0")

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, 500000])
    .range([ height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Add dots
  svg.append('g')
    .selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
      .attr("cx", function (d) { return x(d.GrLivArea); } )
      .attr("cy", function (d) { return y(d.SalePrice); } )
      .attr("r", 1.5)
      .style("fill", "#69b3a2")

  // new X axis
  x.domain([0, 4000])
  svg.select(".myXaxis")
    .transition()
    .duration(2000)
    .attr("opacity", "1")
    .call(d3.axisBottom(x));

  svg.selectAll("circle")
    .transition()
    .delay(function(d,i){return(i*3)})
    .duration(2000)
    .attr("cx", function (d) { return x(d.GrLivArea); } )
    .attr("cy", function (d) { return y(d.SalePrice); } )
})

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;
    // append the svg object to the body of the page
    const svg = d3.select("#my_dataviz")
      .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", `translate(${margin.left}, ${margin.top})`)

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv").then( function(data) {

  // Add X axis
  const x = d3.scaleLinear()
    .domain([0, 0])
    .range([ 0, width ]);
  svg.append("g")
    .attr("class", "myXaxis")   // Note that here we give a class to the X axis, to be able to call it later and modify it
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x))
    .attr("opacity", "0")

  // Add Y axis
  const y = d3.scaleLinear()
    .domain([0, 500000])
    .range([ height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Add dots
  svg.append('g')
    .selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
      .attr("cx", function (d) { return x(d.GrLivArea); } )
      .attr("cy", function (d) { return y(d.SalePrice); } )
      .attr("r", 1.5)
      .style("fill", "#69b3a2")

  // new X axis
  x.domain([0, 4000])
  svg.select(".myXaxis")
    .transition()
    .duration(2000)
    .attr("opacity", "1")
    .call(d3.axisBottom(x));

  svg.selectAll("circle")
    .transition()
    .delay(function(d,i){return(i*3)})
    .duration(2000)
    .attr("cx", function (d) { return x(d.GrLivArea); } )
    .attr("cy", function (d) { return y(d.SalePrice); } )
})
</script>
```

### Related blocks →

- _Basic scatterplot -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/graph/scatter_basic.html)

- _Interactivity -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/interactivity.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.9817571006517567)

Prebid User Sync

secure-assets.rubiconproject.com

# This site can’t be reached

**secure-assets.rubiconproject.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**secure-assets.rubiconproject.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

SafeFrame Container

![](https://rtb.ads.us-east.travelaudience.com/el.ashx?__trackerRequestId=0.19499674563472771&adPos=&ai1=1%3B30000848%3B16%3B1%3B%3B%3B0%3B-1%3B%3B%3B%3BhSIlf3eRj4MqalmvabA9Wg%3D%3D%3B60037521%3B999%252c1%3B%3B%3B2%3B4%3B50007721%3B_RU74FKXdO5Kw__7k6Nbcw%3D%3D%3BUSD%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B%3B70026041%3BFsSow9J1U4Y4RgJUmJzlWMDt1fn7N4og3NkUhg%3BEUR%3B2%3B%3B%3B%3B%3B0%3B%3B&aid=&an=&ask=&at=1&bc=1&bd=bidder-rtb-production-5594dc4f74-7ct4k&bnr=0&brq=FsSow9J1U4Y4RgJUmJzlWMDt1fn7N4og3NkUhg&cis=1&di=&did=-1&dnt=&dv=1&ed=&ev=ic&fm=320x50&gcpm=167079&gctr=&ia=0&id5Decr=&id5Encr=&id5PID=&id5Src=&iid=&ilt=&ir=0&ld=&mai=&mat=1&mid=&na=&no=&oo=&pb=90000&pos_old=&rg=2&rts=&salt=01&sc=&site=d3-graph-gallery.com&ssp=0&sv=2&tsf=&ua=&uc=US&ucy=&uuid=73D1FF74-D797-446D-A569-512C431CEF4D&view=&vrt=&vw=&wp=Z876cgAO_14DiheAACqPprmhBZ32JPjKZUvycg)[![](https://static.travelaudience.com/img/import/LaPazDMO/Ingle%CC%81s/320x50.gif)](https://rtb.ads.us-east.travelaudience.com/ct? &redirect=https%3A%2F%2Fwww.alaskaair.com%2Fen%2Fflights-to-la-paz%3Futm_source%3DDigital%2BLa%2BPaz%26utm_medium%3DBanner%26utm_campaign%3DLa%2BPaz%2BCo-op)

[iframe](cid:frame-7AF92CED08CD2C5B2705C02C5F088535@mhtml.blink)

![](https://www.google.com/ads/measurement/l?ebcid=ALh7CaRatBDPIjdu3uER8n3GdIXyEkAJbXleDkIT79pXAEzNwJrutn-l_FNalmoD8Uj_bSTiZcMvU3Q5x7o_5tWL4u3iFEDEEQ)

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_738b1975-1ad1-4c01-800c-9d0f5686f3f3&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

**cm.g.doubleclick.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**cm.g.doubleclick.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://aa.agkn.com/adscores/g.pixel?sid=9212308278&puid=ED396080-DB11-42B6-82F2-1033BA8C6E51)![](https://sync.crwdcntrl.net/qmap?c=240&tp=PUBM&tpid=ED396080-DB11-42B6-82F2-1033BA8C6E51&gdpr=0&gdpr_consent=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3371&partner_device_id=ED396080-DB11-42B6-82F2-1033BA8C6E51)![](https://i.liadm.com/s/75145?bidder_id=195755&bidder_uuid=ED396080-DB11-42B6-82F2-1033BA8C6E51)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/ED396080-DB11-42B6-82F2-1033BA8C6E51?gdpr=0&gdpr_consent=)[iframe](cid:frame-68DD3A669167D63945C8FBC5A7AA75AB@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)[iframe](cid:frame-8F8BD744D27698C6DD898D76CF666407@mhtml.blink)[iframe](cid:frame-AD73D768AF1AD45787BF8BE4DE5DF069@mhtml.blink)![](https://pubmatic-match.dotomi.com/match/bounce/current?networkId=17100&version=1&nuid=ED396080-DB11-42B6-82F2-1033BA8C6E51&gdpr=0&gdpr_consent=)[iframe](cid:frame-4A8E889BA7E6BA71DA6C0E3B678B0A38@mhtml.blink)[iframe](cid:frame-2F86F77FC623EB604CCDB9CF6422B963@mhtml.blink)![](https://rtb.adentifi.com/CookieSyncPubMatic&gdpr=0&gdpr_consent=)[iframe](cid:frame-9720C102BCABEEF27CC73024CDA89D71@mhtml.blink)[iframe](cid:frame-9DA8234836EDAC4E73AD609DF6C5472C@mhtml.blink)

[iframe](cid:frame-4031967DD588BA2B2F119FCC8121D063@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-6EBDA3D42B5351BB1B3C4C9B6BC5DE93@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_738b1975-1ad1-4c01-800c-9d0f5686f3f3&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

**secure-assets.rubiconproject.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**secure-assets.rubiconproject.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_738b1975-1ad1-4c01-800c-9d0f5686f3f3)

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876ctHM4akAB8HFAIIQAQAA%262487&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876ctHM4akAB8HFAIIQAQAACbcAAAIB&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://ad.turn.com/r/cs?pid=21)![](https://sync.mathtag.com/sync/img?mt_exid=15&redir=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fcm_dsp_id%3D3%26external_user_id%3D%5BMM_UUID%5D&us_privacy=&gdpr=&gdpr_consent=)![](https://p.rfihub.com/cm?in=1&pub=2079)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=48)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876ctHM4akAB8HFAIIQAQAACbcAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=ee2e22f1-4521-4e91-b5a8-af229125403c)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=ZWUyZTIyZjEtNDUyMS00ZTkxLWI1YTgtYWYyMjkxMjU0MDNj)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://b1sync.zemanta.com/usersync/sharethrough?cb=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_user_id%3D__ZUID__%26gdpr%3D%7BGDPR%7D%26gdpr_consent%3D%7BGDPR_CONSENT_80%7D)![](https://sync.1rx.io/usersync2/sharethrough)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=ED396080-DB11-42B6-82F2-1033BA8C6E51)[iframe](cid:frame-C914625A208B79947AAF2F23BB3394FC@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=ED396080-DB11-42B6-82F2-1033BA8C6E51&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=ED396080-DB11-42B6-82F2-1033BA8C6E51&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=RUQzOTYwODAtREIxMS00MkI2LTgyRjItMTAzM0JBOEM2RTUx&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=7TlggNsRQraC8hAzuoxuUQ%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=ED396080-DB11-42B6-82F2-1033BA8C6E51&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-9E2FAEBD18CA4F63E3290F6482A2A7F7@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIVx0XVh2xh)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIVx0XVh2xh&cb=1741617777928&url={{REFERRER}}&gdpr=0&gdpr_consent=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=d401cae0-59ac-c7a9-3bbe-1f84944cc4f5)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/1810d0d9-d5aa-ee1a-ca67-8be60328c25c?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=8cd7b69d-4506-7c53-fbb0-9d13fc7f0f15&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=YTBiODY1NTctOGM3MS0yMmY3LWVlNTAtYzdhYTM2OWRjMTc1)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-53D18E8D974432E5DADF5DC60E4F6618@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-E97B45D8192C81C6C99B994905B11CC2@mhtml.blink)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=4ddcda99-931b-4554-84e8-b528c95e7880%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)

Topics Frame

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=1656377111370979188203&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=1656377111370979188203)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/1656377111370979188203?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=1656377111370979188203&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=1656377111370979188203)

## Bubble Chart Legend
1050100

##### Steps:

- This legend can be inserted next to any
[bubble chart](https://d3-graph-gallery.com/bubble.html) or
[bubble map](https://d3-graph-gallery.com/bubblemap.html).


- It's nothing complicated, but allows to easily set up the
threshold you want to show on the legend.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// append the svg object to the body of the page
var height = 460
var width = 460
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width)
    .attr("height", height)

// The scale you use for bubble size
var size = d3.scaleSqrt()
  .domain([1, 100])  // What's in the data, let's say it is percentage
  .range([1, 100])  // Size in pixel

// Add legend: circles
var valuesToShow = [10, 50, 100]
var xCircle = 230
var xLabel = 380
var yCircle = 330
svg
  .selectAll("legend")
  .data(valuesToShow)
  .enter()
  .append("circle")
    .attr("cx", xCircle)
    .attr("cy", function(d){ return yCircle - size(d) } )
    .attr("r", function(d){ return size(d) })
    .style("fill", "none")
    .attr("stroke", "black")

// Add legend: segments
svg
  .selectAll("legend")
  .data(valuesToShow)
  .enter()
  .append("line")
    .attr('x1', function(d){ return xCircle + size(d) } )
    .attr('x2', xLabel)
    .attr('y1', function(d){ return yCircle - size(d) } )
    .attr('y2', function(d){ return yCircle - size(d) } )
    .attr('stroke', 'black')
    .style('stroke-dasharray', ('2,2'))

// Add legend: labels
svg
  .selectAll("legend")
  .data(valuesToShow)
  .enter()
  .append("text")
    .attr('x', xLabel)
    .attr('y', function(d){ return yCircle - size(d) } )
    .text( function(d){ return d } )
    .style("font-size", 10)
    .attr('alignment-baseline', 'middle')
</script>
```

``` js
<script>

// append the svg object to the body of the page
const height = 460
const width = 460
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width)
    .attr("height", height)

// The scale you use for bubble size
const size = d3.scaleSqrt()
  .domain([1, 100])  // What's in the data, let's say it is percentage
  .range([1, 100])  // Size in pixel

// Add legend: circles
const valuesToShow = [10, 50, 100]
const xCircle = 230
const xLabel = 380
const yCircle = 330
svg
  .selectAll("legend")
  .data(valuesToShow)
  .join("circle")
    .attr("cx", xCircle)
    .attr("cy", d => yCircle - size(d))
    .attr("r", d => size(d))
    .style("fill", "none")
    .attr("stroke", "black")

// Add legend: segments
svg
  .selectAll("legend")
  .data(valuesToShow)
  .join("line")
    .attr('x1', d => xCircle + size(d))
    .attr('x2', xLabel)
    .attr('y1', d => yCircle - size(d))
    .attr('y2', d => yCircle - size(d))
    .attr('stroke', 'black')
    .style('stroke-dasharray', ('2,2'))

// Add legend: labels
svg
  .selectAll("legend")
  .data(valuesToShow)
  .join("text")
    .attr('x', xLabel)
    .attr('y', d => yCircle - size(d))
    .text( d => d)
    .style("font-size", 10)
    .attr('alignment-baseline', 'middle')

</script>
```

### Related blocks →

- _Bubble chart section -_ [link](https://d3-graph-gallery.com/bubble.html)

- _Bubble chart -_ by
[Cale Tilford](https://bl.ocks.org/tlfrd/aa1bb8f6f3dae3148345fbb54305bdf7)

- _Reusable circle legend -_ by
[laurent chauvirey](https://bl.ocks.org/lorenzopub/90d90746af84f1fe3d782d47f3739a30)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.8869731990999854)

Prebid User Sync

hde.tynt.com

# This site can’t be reached

**hde.tynt.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**hde.tynt.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_6664d1bc-9167-4982-b52a-55993c3cc789&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-3C119393773828364C87BBEE2E7766DD@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-8ECD0E959226F306E3B4BECA605C796C@mhtml.blink)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)[iframe](cid:frame-14E88EA120E68838D3A735765FF193D2@mhtml.blink)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_6664d1bc-9167-4982-b52a-55993c3cc789)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_6664d1bc-9167-4982-b52a-55993c3cc789&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV82NjY0ZDFiYy05MTY3LTQ5ODItYjUyYS01NTk5M2MzY2M3ODk=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV82NjY0ZDFiYy05MTY3LTQ5ODItYjUyYS01NTk5M2MzY2M3ODk=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-0558FBCEB9529FA6C53442BBD2B73F98@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-C1BEFC07F3B96E1EBE35DF006D3E68AC@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_6664d1bc-9167-4982-b52a-55993c3cc789&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_6664d1bc-9167-4982-b52a-55993c3cc789)

![](https://match.adsrvr.org/track/cmf/casale)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876ccAoJV8ANhoyAF4iGwAA%262834&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876ccAoJV8ANhoyAF4iGwAACxIAAAAB&gpp=&gpp_sid=)![](https://ib.adnxs.com/getuid?https://dsum.casalemedia.com/crum?cm_dsp_id=190&external_user_id=$UID)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876ccAoJV8ANhoyAF4iGwAACxIAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://dpm.demdex.net/ibs:dpid=23728&dpuuid=Z876ccAoJV8ANhoyAF4iGwAA%262834?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://dmp.brand-display.com/cm/api/index?cm_dsp_id=191&cm_user_id=%3cIndex_user_id%3e)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876ccAoJV8ANhoyAF4iGwAACxIAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=6ffa5c82-cbb4-4beb-ae77-92c42af72854)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=NmZmYTVjODItY2JiNC00YmViLWFlNzctOTJjNDJhZjcyODU0)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=sharethrough&user_id=6ffa5c82-cbb4-4beb-ae77-92c42af72854&gdpr=0&gdpr_consent=&gdpr_pd=1&us_privacy=&expires=365)![](https://match.deepintent.com/usersync/158)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=813AC2CB-1C95-4291-9FD4-4472CEBFC4A6)[iframe](cid:frame-CC4A4811A1B0CE2DE2F3C1642B8B7F36@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=813AC2CB-1C95-4291-9FD4-4472CEBFC4A6&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=813AC2CB-1C95-4291-9FD4-4472CEBFC4A6&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=ODEzQUMyQ0ItMUM5NS00MjkxLTlGRDQtNDQ3MkNFQkZDNEE2&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=gTrCyxyVQpGf1ERyzr_Epg%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=813AC2CB-1C95-4291-9FD4-4472CEBFC4A6&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-44280CFB8A2E1467B72BB22433A286A4@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIktUAuNabH)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIktUAuNabH)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElrdFVBdU5hYkg=)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIktUAuNabH&cb=1741617777769&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-23CD8DC1D92AD68964DDE7870F051649@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?ld=1&gdpr=0&cmp\_cs=&us\_privacy=&redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?ld=1&gdpr=0&cmp\_cs=&us\_privacy=&redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D1YNY%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ?us_privacy=1YNY)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D&us_privacy=1YNY)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID&us_privacy=1YNY)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776&us_privacy=1YNY)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=&us_privacy=1YNY)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D&us_privacy=1YNY)

## Circular Packing Visualization
##### Steps:

- This post follows the
[most basic circular packing](https://d3-graph-gallery.com/graph/circularpacking_basic.html), have a look to it first.


- Here, a specific `forceX()` is applied to each
group: that's why they are obviously located in different
part of the `svg` area.


- Color is attributed using a classic approach, read more in
the [dedicated section](https://d3-graph-gallery.com/graph/custom_color.html).


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var width = 450
var height = 450

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", 450)
    .attr("height", 450)

// create dummy data -> just one element per circle
var data = [{ "name": "A", "group": 1 }, { "name": "B", "group": 1 }, { "name": "C", "group": 1 }, { "name": "D", "group": 1 }, { "name": "E", "group": 1 }, { "name": "F", "group": 1 },\
            { "name": "G", "group": 2 }, { "name": "H", "group": 2 }, { "name": "I", "group": 2 }, { "name": "J", "group": 2 }, { "name": "K", "group": 2 }, { "name": "L", "group": 2 },\
            { "name": "M", "group": 3 }, { "name": "N", "group": 3 }, { "name": "O", "group": 3 }]

// A scale that gives a X target position for each group
var x = d3.scaleOrdinal()
  .domain([1, 2, 3])
  .range([50, 200, 340])

// A color scale
var color = d3.scaleOrdinal()
  .domain([1, 2, 3])
  .range([ "#F8766D", "#00BA38", "#619CFF"])

// Initialize the circle: all located at the center of the svg area
var node = svg.append("g")
  .selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
    .attr("r", 29)
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .style("fill", function(d){ return color(d.group)})
    .style("fill-opacity", 0.8)
    .attr("stroke", "black")
    .style("stroke-width", 4)
    .call(d3.drag() // call specific function when circle is dragged
         .on("start", dragstarted)
         .on("drag", dragged)
         .on("end", dragended));

// Features of the forces applied to the nodes:
var simulation = d3.forceSimulation()
    .force("x", d3.forceX().strength(0.5).x( function(d){ return x(d.group) } ))
    .force("y", d3.forceY().strength(0.1).y( height/2 ))
    .force("center", d3.forceCenter().x(width / 2).y(height / 2)) // Attraction to the center of the svg area
    .force("charge", d3.forceManyBody().strength(1)) // Nodes are attracted one each other of value is > 0
    .force("collide", d3.forceCollide().strength(.1).radius(32).iterations(1)) // Force that avoids circle overlapping

// Apply these forces to the nodes and update their positions.
// Once the force algorithm is happy with positions ('alpha' value is low enough), simulations will stop.
simulation
    .nodes(data)
    .on("tick", function(d){
      node
          .attr("cx", function(d){ return d.x; })
          .attr("cy", function(d){ return d.y; })
    });

// What happens when a circle is dragged?
function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(.03).restart();
  d.fx = d.x;
  d.fy = d.y;
}
function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}
function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(.03);
  d.fx = null;
  d.fy = null;
}

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const width = 450
const height = 450

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", 450)
    .attr("height", 450)

// create dummy data -> just one element per circle
const data = [{ "name": "A", "group": 1 }, { "name": "B", "group": 1 }, { "name": "C", "group": 1 }, { "name": "D", "group": 1 }, { "name": "E", "group": 1 }, { "name": "F", "group": 1 },\
            { "name": "G", "group": 2 }, { "name": "H", "group": 2 }, { "name": "I", "group": 2 }, { "name": "J", "group": 2 }, { "name": "K", "group": 2 }, { "name": "L", "group": 2 },\
            { "name": "M", "group": 3 }, { "name": "N", "group": 3 }, { "name": "O", "group": 3 }]

// A scale that gives a X target position for each group
const x = d3.scaleOrdinal()
  .domain([1, 2, 3])
  .range([50, 200, 340])

// A color scale
const color = d3.scaleOrdinal()
  .domain([1, 2, 3])
  .range([ "#F8766D", "#00BA38", "#619CFF"])

// Initialize the circle: all located at the center of the svg area
const node = svg.append("g")
  .selectAll("circle")
  .data(data)
  .join("circle")
    .attr("r", 29)
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .style("fill", d => color(d.group))
    .style("fill-opacity", 0.8)
    .attr("stroke", "black")
    .style("stroke-width", 4)
    .call(d3.drag() // call specific function when circle is dragged
         .on("start", dragstarted)
         .on("drag", dragged)
         .on("end", dragended));

// Features of the forces applied to the nodes:
var simulation = d3.forceSimulation()
    .force("x", d3.forceX().strength(0.5).x(d => x(d.group)))
    .force("y", d3.forceY().strength(0.1).y( height/2 ))
    .force("center", d3.forceCenter().x(width / 2).y(height / 2)) // Attraction to the center of the svg area
    .force("charge", d3.forceManyBody().strength(1)) // Nodes are attracted one each other of value is > 0
    .force("collide", d3.forceCollide().strength(.1).radius(32).iterations(1)) // Force that avoids circle overlapping

// Apply these forces to the nodes and update their positions.
// Once the force algorithm is happy with positions ('alpha' value is low enough), simulations will stop.
simulation
    .nodes(data)
    .on("tick", function(d){
      node
          .attr("cx", d => d.x)
          .attr("cy", d => d.y)
    });

// What happens when a circle is dragged?
function dragstarted(event, d) {
  if (!event.active) simulation.alphaTarget(.03).restart();
  d.fx = d.x;
  d.fy = d.y;
}
function dragged(event, d) {
  d.fx = event.x;
  d.fy = event.y;
}
function dragended(event, d) {
  if (!event.active) simulation.alphaTarget(.03);
  d.fx = null;
  d.fy = null;
}

</script>
```

### Related blocks →

- _Force layout -_ by
[d3 in depth](https://d3indepth.com/force-layout/)

- _Force Simulation -_ by
[Harry Stevens](https://bl.ocks.org/HarryStevens/f636199a46fc4b210fbca3b1dc4ef372)

- _Circular packing -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/circularpacking.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=1954924203771834702850&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=1954924203771834702850)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/1954924203771834702850?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=1954924203771834702850&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=1954924203771834702850)

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_5688eb33-b7b8-4036-8a34-ceadfd77bad6&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-88A7A8B58CB299431F3D4D4F8CC27484@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)[iframe](cid:frame-011F07645287D1E1060D3533153F0A85@mhtml.blink)

match.adsrvr.org

# This site can’t be reached

**match.adsrvr.org** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**match.adsrvr.org** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-B5A1A741FC08F01750BC6563001FCCF3@mhtml.blink)[iframe](cid:frame-B88BC04A8C07D07A48DF18DC34DB8AEC@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_5688eb33-b7b8-4036-8a34-ceadfd77bad6)

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=b10f5997-a3bc-4877-98cd-adfd6103111c)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=8eafa5a4-4124-4619-b9a0-f53ed3d4129d)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.8269838326277337)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_5688eb33-b7b8-4036-8a34-ceadfd77bad6&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-7F01CB0BB8AB8B703EC337CC5FD00B85@mhtml.blink)

[iframe](cid:frame-1962B178BE135E9EA7667713EF471940@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-21B22163DD8D8A658D3B46612694F06E@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_5688eb33-b7b8-4036-8a34-ceadfd77bad6&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_5688eb33-b7b8-4036-8a34-ceadfd77bad6)

![](https://match.adsrvr.org/track/cmf/casale)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876ctHM4NsAEb6EAjzMEAAAFuYAAAAB&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876ctHM4NsAEb6EAjzMEAAAFuYAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://ssbsync.smartadserver.com/api/sync?callerId=82&gdpr=$%7bGDPR%7d&gdpr_consent=$%7bGDPR_CONSENT%7d)![](https://www.temu.com/api/adx/cm/pixel-index?cm_user_id=Z876ctHM4NsAEb6EAjzMEAAAFuYAAAAB)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://secure.adnxs.com/getuid?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=46&external_user_id=$UID)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876ctHM4NsAEb6EAjzMEAAAFuYAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=a0f5a0c0-4c6a-4836-8798-5c28a73afbda)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=YTBmNWEwYzAtNGM2YS00ODM2LTg3OTgtNWMyOGE3M2FmYmRh)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://b1sync.zemanta.com/usersync/sharethrough?cb=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_user_id%3D__ZUID__%26gdpr%3D%7BGDPR%7D%26gdpr_consent%3D%7BGDPR_CONSENT_80%7D)![](https://secure.adnxs.com/getuid?https://match.sharethrough.com/sync/v1?source_id=0e8893f90b606c9c5d33f1be&gdpr=0&gdpr_consent=&source_user_id=$UID)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=00049F27-F291-46E7-8D0D-D3529DAEF8FA)[iframe](cid:frame-2ADC875ADCC5C3416F339A5FCCA5B307@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=00049F27-F291-46E7-8D0D-D3529DAEF8FA&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=00049F27-F291-46E7-8D0D-D3529DAEF8FA&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=MDAwNDlGMjctRjI5MS00NkU3LThEMEQtRDM1MjlEQUVGOEZB&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=AASfJ_KRRueNDdNSna74-g%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=00049F27-F291-46E7-8D0D-D3529DAEF8FA&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-AB8A87492C67EE714F0B1B4232220C61@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIZ7qFijY1D)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIZ7qFijY1D&cb=1741617778382&url={{REFERRER}}&gdpr=0&gdpr_consent=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=d007aa25-0689-c064-334f-ef7f886b1871)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/1c16b01c-8a8f-e9d7-c296-7b1d1f0f1ed8?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=88d1d658-1a23-7b9e-f341-6de8e058d391&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=YTRiZTA1OTItZDM1NC0yNTNhLWU2YTEtMzc1MTJhYmExZGYx)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-4213D1E12384780EC64CDEA33EE6BE01@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-80C33549443F8825E090EE52F7A89F60@mhtml.blink)

Topics Frame

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876ctHM4NsAEb6EAjzMEAAA%265862&gpdr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876ctHM4NsAEb6EAjzMEAAAFuYAAAAB?gdpr_consent=&us_privacy=1YNY&gdpr=&gpp=&gpp_sid=)![](https://cms.quantserve.com/pixel/p-Z8PuJEk6U7Hyq.gif?idmatch=0&us_privacy=1YNY)![](https://s.company-target.com/s/ix?cm_dsp_id=18&us_privacy=1YNY&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D&us_privacy=1YNY)![](https://dsp.360yield.com/dsp_match/275?ssp=10&gdpr=&gdpr_consent=&r=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fcm_dsp_id%3D15%26external_user_id%3D%7BDSP_USER_ID%7D&userId=Z876ctHM4NsAEb6EAjzMEAAA%265862&us_privacy=1YNY)![](https://match.deepintent.com/usersync/113?us_privacy=1YNY)![](https://c1.adform.net/serving/cookie/match?party=29&us_privacy=1YNY)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=Z876ctHM4NsAEb6EAjzMEAAA%265862)

## D3.js Data Manipulation
# Mathematics

* * *

###### Get the maximum value of a column called `value`

```
d3.max(data, function(d) { return +d.value; })])

```

###### Get the minimum value of a column called `value`

```
d3.min(data, function(d) { return +d.value; })])

```

# Object and Arrays

* * *

###### JavaScript `objects` are containers for named values called  properties or methods. We can call any element of the object with its  name:

```
var myObject = {name:"Nicolas", sex:"Male", age:34}
myObject.name
myObject["name"]

```

###### Create an `array` of 5 numbers

An array is a special variable, which can hold more than one value at
a time. Arrays use numbered indexes.


```
var myArray = [12, 34, 23, 12, 89]

```

###### Access the first element in the array.

```
myArray[0]

```

###### Access the last element in the array.

```
myArray[myArray.length - 1]

```

###### Remove last element of the array. Add a new element a the end.

```
myArray.pop()
myArray.push(45)

```

###### What is the index of the element '34' in the array?.

```
myArray.indexOf(34)

```

###### Remove elements that are provided in a second array:

```
var myArray = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
var toRemove = ['b', 'c', 'g'];
filteredArray = myArray.filter( function( el ) {
  return !toRemove.includes( el );
} );

```

###### Keep only elements that are provided in a second array:

```
var myArray = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
var tokeep = ['b', 'c', 'g', 'o', 'z'];
filteredArray = myArray.filter( function( el ) {
  return tokeep.includes( el );
} );

```

Note: an array can be composed by several objects!


# Filtering

* * *

###### Keep rows where the variable `name` is `toto`

```
data.filter(function(d){ return d.name == "toto" })

```

###### Keep rows where the variable `name` is  different from `toto`

```
data.filter(function(d){ return d.name != "toto" })

```

###### Keep rows where the variable `name` is `toto` OR  `tutu`

```
data.filter(function(d){ return  (d.name == "toto" || d.name == "tutu") })

```

###### Keep rows where the variable `name` has a value included in  the list `tokeep`

```
tokeep = ["option1", "option2", "option3"]
data.filter(function(d,i){ return tokeep.indexOf(d.name) >= 0 })

```

###### Keep the 10 first rows

```
data.filter(function(d,i){ return i<10 })

```

###### color points using `ifelse` statement

```
.style("fill", function(d){ if(d.x<140){return "orange"} else {return "blue"}})

```

# Sorting

* * *

###### Sorting on 1 numeric column called `value`. Use  `+` instead of `-` for reverse order.

```
data.sort(function(a,b) { return +a.value - +b.value })

```

###### Sorting alphabetically on 1 categoric column called `name`.  Use `descending` for reverse order.

```
data.sort(function (a,b) {return d3.ascending(a.name, b.name);});

```

###### Sorting alphabetically on 2 categoric columns called  `name1` and `name2`.

```
data.sort(function(a,b) { return d3.ascending(a.name1, b.name1) ||  d3.ascending(a.name1, b.name2) } )

```

###### Sorting on 1 categoric columns called `name1` and then on 1  numeric called `value`.

```
data.sort(function(a,b) { return d3.ascending(a.name1, b.name1) ||  (a.value - b.value) } )

```

###### Sorting on 1 categoric columns called `name1` according to  the order provided in the variable `targetOrder`.

```
data.sort(function(a,b) {
    return targetOrder.indexOf( a.name1 ) > targetOrder.indexOf( b.name1 );
});

```

# Nesting

* * *

###### Sorting on 1 numeric column called `value`. Use  `+` instead of `-` for reverse order.

```
data.sort(function(a,b) { return +a.value - +b.value })

```

###### Sorting alphabetically on 1 categoric column called `name`.  Use `descending` for reverse order.

```
data.sort(function (a,b) {return d3.ascending(a.name, b.name);});

```

# Grouping

* * *

###### Get a list of unique entries of a column called `name`

```
var allGroup = d3.map(data, function(d){return(d.name)}).keys()

```

# Loop

* * *

###### A `for` loop from one to ten:

```
var i
for (i = 0; i < 10; i++) {
  console.log(i)
}

```

###### A `for` loop for all the elements of a list: (Note that it  returns 0, 1, 2, not a, b, c)

```
var allGroup = ["a", "b", "c"]
for (i in allGroup){
  console.log(i)
}

```

###### A `while` loop to count from 0 to 10

```
while (i < 10) {
  console.log(i)
  i++;
}

```

# Reshape

* * *

It is a common task in data science to swap between wide (or
untidy) format to long (or tidy) format. In R, there is a
package called `tidyr` that is entirely dedicated to it. It
is definitely doable in Javascript using the code snippets below. In
case you're not familiar with this concept, here is a description of
what these formats are:


![long versus wide data format summary](https://d3-graph-gallery.com/img/other/long_vs_wide_data_format.png)

Note: it is strongly advised to perform these data wrangling
steps out of your javascript to save loading time of your
dataviz


###### Going from `wide to long` format.

```
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_correlogram.csv", function(data) {

  // Going from wide to long format
  var data_long = [];
  data.forEach(function(d) {
    var x = d[""];
    delete d[""];
    for (prop in d) {
      var y = prop,
        value = d[prop];
      data_long.push({
        x: x,
        y: y,
        value: +value
      });
    }
  });

  // Show result
  console.log(data_long)

```

###### Going from `long to wide` format.

```
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data.csv", function(data) {
  //todo
})

```

# Stack

* * *

Stacking data is a common practice in dataviz, notably for
[barcharts](https://d3-graph-gallery.com/barplot.html) and
[area charts](https://d3-graph-gallery.com/area.html). Stacking applies when a
dataset is composed by groups (like species) and
subgroups like soil condition. Stacking is possible thanks to
the `d3.stack()` function, which is part of the
[d3-shape module](https://github.com/d3/d3-shape#stacks).
Here is an illustration of what happens when you read data from
`.csv` format and stack it.


![Stacking data explanation](https://d3-graph-gallery.com/img/other/stackingExpla.png)

###### Stacking from `.csv` format

```
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv", function(data) {

  // Have a look to the data
  console.log(data)

  // List of subgroups = header of the csv files = soil condition here
  var subgroups = data.columns.slice(1)

  // List of groups = species here = value of the first column called group
  var groups = d3.map(data, function(d){return(d.group)}).keys()

  //stack the data? --> stack per subgroup
  var stackedData = d3.stack()
    .keys(subgroups)
    (data)

  // Have a look to the stacked data
  console.log(stackedData)

  // Get the stacked data for the second group

})

```

###### Get the key of each element of stackedData ???

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.008676570629667868)

Prebid User Sync

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_b321b932-353c-4219-a866-c309eb6175e4&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-3D7DECE851D88D689B1C2FD7C887B3F8@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-E8C3946EE030C3D536ACB73AC33D3019@mhtml.blink)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=60FAF799-D492-4E56-BC7B-2CAD7286341F)[iframe](cid:frame-81D7BE36FC88EB589ADB2865FAD26DE2@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=60FAF799-D492-4E56-BC7B-2CAD7286341F&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=60FAF799-D492-4E56-BC7B-2CAD7286341F&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=NjBGQUY3OTktRDQ5Mi00RTU2LUJDN0ItMkNBRDcyODYzNDFG&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=YPr3mdSSTla8eyytcoY0Hw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=60FAF799-D492-4E56-BC7B-2CAD7286341F&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/60FAF799-D492-4E56-BC7B-2CAD7286341F?gdpr=0&gdpr_consent=)[iframe](cid:frame-15F5130DEE1EB3C75D33368FABA879E0@mhtml.blink)

match.deepintent.com

# This site can’t be reached

The webpage at **https://match.deepintent.com/usersync/141?gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.deepintent.com/usersync/141?gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

**ib.adnxs.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ib.adnxs.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-0DA90AA6595D83885C5EF25CC2B0916E@mhtml.blink)

[iframe](cid:frame-69CD02327BABDE7CDAE397CF961E7E70@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-8A53D87DDF6E987D0CE4BF3F3D0B61E7@mhtml.blink)[iframe](cid:frame-0046E019D5BB7DF17FCFF8D4E1918813@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_b321b932-353c-4219-a866-c309eb6175e4)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

[iframe](cid:frame-7364D57824359E2AA1E69FCE85454993@mhtml.blink)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_b321b932-353c-4219-a866-c309eb6175e4&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-479FBD6D8E3605705277A420A042FFD0@mhtml.blink)[iframe](cid:frame-92FAE7B672B6B7DCF45338AD4ADA0770@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_b321b932-353c-4219-a866-c309eb6175e4&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

[iframe](cid:frame-7980BDEDC1AF66C426F67C852198EF06@mhtml.blink)

[iframe](cid:frame-648AE0F06DDBA1B638D0AC63278DC0A6@mhtml.blink)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_b321b932-353c-4219-a866-c309eb6175e4)

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876ctHM4OAAEPn6AlXTCgAA%265867&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876ctHM4OAAEPn6AlXTCgAAFusAAAIB&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://sync.mathtag.com/sync/img?mt_exid=15&redir=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fcm_dsp_id%3D3%26external_user_id%3D%5BMM_UUID%5D&us_privacy=&gdpr=&gdpr_consent=)![](https://a.tribalfusion.com/i.match?p=b20&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com/crum%3Fcm_dsp_id%3D131%26external_user_id%3D%24TF_USER_ID_ENC%24&cm_callback_url=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum&cm_user_id=Z876ctHM4OAAEPn6AlXTCgAA)![](https://beacon.lynx.cognitivlabs.com/ix.gif)![](https://match.deepintent.com/usersync/113)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876ctHM4OAAEPn6AlXTCgAAFusAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=4d3dc000-ea9b-41c8-9d4a-99ae7dcbb492)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=NGQzZGMwMDAtZWE5Yi00MWM4LTlkNGEtOTlhZTdkY2JiNDky)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ssp.disqus.com/redirectuser?r=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3D7rkJAhPCWXbw9Lq5dZxc6TvN%26source_user_id%3D%24UID&partner=sharethrough)![](https://sync.1rx.io/usersync2/sharethrough)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIuUEDr7uZj)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIuUEDr7uZj)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIuUEDr7uZj)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIuUEDr7uZj&cb=1741617778467&url={{REFERRER}}&gdpr=0&gdpr_consent=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=c0c0473c-ceff-cd6b-0cc2-f14a4f518e99)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/0cd15d05-42f9-e4d8-fd1b-6528d8358830?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=98163b41-d255-7691-cccc-73dd27624579&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=YjQ3OWU4OGItMWIyMi0yODM1LWQ5MmMtMjk2NGVkODA4YjE5)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-8DE0CFA1052E46ACF3916272019275E6@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-5E4CC0030D61263912B11221BBCB01BC@mhtml.blink)

Topics Frame

## Bubble Map Visualization
##### Steps:

- First of all, you need to know how to plot a
[basic background map](https://d3-graph-gallery.com/graph/backgroundmap_country.html).


- Then we just add circles for each data points as we would do
for a [scatter plot](https://d3-graph-gallery.com/scatter.html) or a
[bubble plot](https://d3-graph-gallery.com/bubble.html).


- The only trick is that the `projection` function
needs to be applied to the circle X and Y coordinates


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js and the geo projection plugin -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="440" height="300"></svg>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="440" height="300"></svg>

```

``` js
<script>

// The svg
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// Map and projection
var projection = d3.geoMercator()
    .center([2, 47])                // GPS of location to zoom on
    .scale(1020)                       // This is like the zoom
    .translate([ width/2, height/2 ])

// Create data for circles:
var markers = [\
  {long: 9.083, lat: 42.149}, // corsica\
  {long: 7.26, lat: 43.71}, // nice\
  {long: 2.349, lat: 48.864}, // Paris\
  {long: -1.397, lat: 43.664}, // Hossegor\
  {long: 3.075, lat: 50.640}, // Lille\
  {long: -3.83, lat: 58}, // Morlaix\
];

// Load external data and boot
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data){

    // Filter data
    data.features = data.features.filter( function(d){return d.properties.name=="France"} )

    // Draw the map
    svg.append("g")
        .selectAll("path")
        .data(data.features)
        .enter()
        .append("path")
          .attr("fill", "#b8b8b8")
          .attr("d", d3.geoPath()
              .projection(projection)
          )
        .style("stroke", "black")
        .style("opacity", .3)

    // Add circles:
    svg
      .selectAll("myCircles")
      .data(markers)
      .enter()
      .append("circle")
        .attr("cx", function(d){ return projection([d.long, d.lat])[0] })
        .attr("cy", function(d){ return projection([d.long, d.lat])[1] })
        .attr("r", 14)
        .style("fill", "69b3a2")
        .attr("stroke", "#69b3a2")
        .attr("stroke-width", 3)
        .attr("fill-opacity", .4)
})

</script>
```

``` js
<script>

// The svg
const svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// Map and projection
const projection = d3.geoMercator()
    .center([2, 47])                // GPS of location to zoom on
    .scale(1020)                       // This is like the zoom
    .translate([ width/2, height/2 ])

// Create data for circles:
const markers = [\
  {long: 9.083, lat: 42.149}, // corsica\
  {long: 7.26, lat: 43.71}, // nice\
  {long: 2.349, lat: 48.864}, // Paris\
  {long: -1.397, lat: 43.664}, // Hossegor\
  {long: 3.075, lat: 50.640}, // Lille\
  {long: -3.83, lat: 58}, // Morlaix\
];

// Load external data and boot
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson").then( function(data){

    // Filter data
    data.features = data.features.filter( d => d.properties.name=="France")

    // Draw the map
    svg.append("g")
        .selectAll("path")
        .data(data.features)
        .join("path")
          .attr("fill", "#b8b8b8")
          .attr("d", d3.geoPath()
              .projection(projection)
          )
        .style("stroke", "black")
        .style("opacity", .3)

    // Add circles:
    svg
      .selectAll("myCircles")
      .data(markers)
      .join("circle")
        .attr("cx", d => projection([d.long, d.lat])[0])
        .attr("cy", d => projection([d.long, d.lat])[1])
        .attr("r", 14)
        .style("fill", "69b3a2")
        .attr("stroke", "#69b3a2")
        .attr("stroke-width", 3)
        .attr("fill-opacity", .4)
})
</script>
```

### Related blocks →

- _France population -_ by
[Brice Pierre de la Briere](https://bl.ocks.org/bricedev/97c53d6ed168902239f7)

- _D3-geo-projection Documentation -_ by
[Mike Bostock](https://github.com/d3/d3-geo-projection)

- _Basic background map -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/graph/backgroundmap_basic.html)

- _D3.js Custom Map Markers -_ by
[Aleksander Lenart](https://codepen.io/znak/pen/XXrRvj)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.6996405369933807)[iframe](https://ads.adthrive.com/builds/prebid/load-cookie.html?endpoint=https://prebid.production.adthrive.com/cookie_sync&max_sync_count=15&coop_sync=true&bidders=undertone,gumgum,appnexus,adf,colossus,ix,kargo,openx,pubmatic,rubicon,triplelift,triplelift_native,33across,conversant,epsilon,unruly,yieldmo,resetDigital,grid,yahoossp,improvedigital,aidem,criteo&args=account:1234)[iframe](about:blank)[iframe](https://ads.adthrive.com/builds/core/a34aebd/html/i.html)[iframe](https://ads.adthrive.com/builds/core/a34aebd/html/rnf.html)[iframe](https://gpsb-reims.criteo.com/paapi/join_ig?advertiser_id=500002_500329&ig_name=r6NnpiEx)![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

[iframe](https://ads.optable.co/ca/paapi/v1/dsp/ig/join?origin=da215d57-dd2c-41a8-b7e0-0f68f321aa3d&vid=v%3A4TX4ObEkjhDuOtj1UjGcJi)

[iframe](https://s.amazon-adsystem.com/iu3?cm3ppd=1&d=dtb-pub&csif=t&dl=gg_n-index_n-sharethrough_pm-db5_ym_rbd_ox-db5_an-db5_n-opera3pb_3lift)[iframe](https://securepubads.g.doubleclick.net/static/topics/topics_frame.html)

## D3.js Zoom Interactivity
# Basic zoom with `d3.zoom()`

* * *

##### Notes:

- Zooming + panning. Double click zoom as well.

- Note that the circle gets bigger when you zoom.

- No axis

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the circle will take place -->
<div id="dataviz_basicZoom"></div>

```

``` js
<script>

// append the svg object to the body of the page
var svg = d3.select("#dataviz_basicZoom")
  .append("svg")
    .attr("width",  460)
    .attr("height",  460)
    .call(d3.zoom().on("zoom", function () {
       svg.attr("transform", d3.event.transform)
    }))
  .append("g")

svg
  .append("circle")
    .attr("cx", 300)
    .attr("cy", 300)
    .attr("r", 40)
    .style("fill", "#68b2a1")

</script>
```

# Zoom with axis

* * *

4.04.55.05.56.06.57.07.58.00123456789

##### Notes:

- Same concept as before, but updates axis as well.

- todo -> understand better

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the circle will take place -->
<div id="dataviz_axisZoom"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the SVG object to the body of the page
var SVG = d3.select("#dataviz_axisZoom")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", function(data) {

  // Add X axis
  var x = d3.scaleLinear()
    .domain([4, 8])
    .range([ 0, width ]);
  var xAxis = SVG.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, 9])
    .range([ height, 0]);
  var yAxis = SVG.append("g")
    .call(d3.axisLeft(y));

  // Add a clipPath: everything out of this area won't be drawn.
  var clip = SVG.append("defs").append("SVG:clipPath")
      .attr("id", "clip")
      .append("SVG:rect")
      .attr("width", width )
      .attr("height", height )
      .attr("x", 0)
      .attr("y", 0);

  // Create the scatter variable: where both the circles and the brush take place
  var scatter = SVG.append('g')
    .attr("clip-path", "url(#clip)")

  // Add circles
  scatter
    .selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
      .attr("cx", function (d) { return x(d.Sepal_Length); } )
      .attr("cy", function (d) { return y(d.Petal_Length); } )
      .attr("r", 8)
      .style("fill", "#61a3a9")
      .style("opacity", 0.5)

  // Set the zoom and Pan features: how much you can zoom, on which part, and what to do when there is a zoom
  var zoom = d3.zoom()
      .scaleExtent([.5, 20])  // This control how much you can unzoom (x0.5) and zoom (x20)
      .extent([[0, 0], [width, height]])
      .on("zoom", updateChart);

  // This add an invisible rect on top of the chart area. This rect can recover pointer events: necessary to understand when the user zoom
  SVG.append("rect")
      .attr("width", width)
      .attr("height", height)
      .style("fill", "none")
      .style("pointer-events", "all")
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
      .call(zoom);
  // now the user can zoom and it will trigger the function called updateChart

  // A function that updates the chart when the user zoom and thus new boundaries are available
  function updateChart() {

    // recover the new scale
    var newX = d3.event.transform.rescaleX(x);
    var newY = d3.event.transform.rescaleY(y);

    // update axes with these new boundaries
    xAxis.call(d3.axisBottom(newX))
    yAxis.call(d3.axisLeft(newY))

    // update circle position
    scatter
      .selectAll("circle")
      .attr('cx', function(d) {return newX(d.Sepal_Length)})
      .attr('cy', function(d) {return newY(d.Petal_Length)});
  }

})
</script>
```

# Brushing for zooming

* * *

4.04.55.05.56.06.57.07.58.00123456789

##### Notes:

- Select a zone to zoom on it (X axis only). Double click to
unzoom.


- A `clipPath` is used to avoid displaying the
circle outside the chart area.


- `all(brush.move, null)` is used to dismiss the
grey brushing area once the selection has been done.


- But this leads to synchronization problems: the brush
boundaries are erased as soon as the selection is done -->
It is necessary to wait a little bit to have time to update
axis and circles


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the circle will take place -->
<div id="dataviz_brushZoom"></div>

```

``` js
<script>
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var Svg = d3.select("#dataviz_brushZoom")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", function(data) {

  // Add X axis
  var x = d3.scaleLinear()
    .domain([4, 8])
    .range([ 0, width ]);
  var xAxis = Svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, 9])
    .range([ height, 0]);
  Svg.append("g")
    .call(d3.axisLeft(y));

  // Add a clipPath: everything out of this area won't be drawn.
  var clip = Svg.append("defs").append("svg:clipPath")
      .attr("id", "clip")
      .append("svg:rect")
      .attr("width", width )
      .attr("height", height )
      .attr("x", 0)
      .attr("y", 0);

  // Color scale: give me a specie name, I return a color
  var color = d3.scaleOrdinal()
    .domain(["setosa", "versicolor", "virginica" ])
    .range([ "#440154ff", "#21908dff", "#fde725ff"])

  // Add brushing
  var brush = d3.brushX()                 // Add the brush feature using the d3.brush function
      .extent( [ [0,0], [width,height] ] ) // initialise the brush area: start at 0,0 and finishes at width,height: it means I select the whole graph area
      .on("end", updateChart) // Each time the brush selection changes, trigger the 'updateChart' function

  // Create the scatter variable: where both the circles and the brush take place
  var scatter = Svg.append('g')
    .attr("clip-path", "url(#clip)")

  // Add circles
  scatter
    .selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
      .attr("cx", function (d) { return x(d.Sepal_Length); } )
      .attr("cy", function (d) { return y(d.Petal_Length); } )
      .attr("r", 8)
      .style("fill", function (d) { return color(d.Species) } )
      .style("opacity", 0.5)

  // Add the brushing
  scatter
    .append("g")
      .attr("class", "brush")
      .call(brush);

  // A function that set idleTimeOut to null
  var idleTimeout
  function idled() { idleTimeout = null; }

  // A function that update the chart for given boundaries
  function updateChart() {

    extent = d3.event.selection

    // If no selection, back to initial coordinate. Otherwise, update X axis domain
    if(!extent){
      if (!idleTimeout) return idleTimeout = setTimeout(idled, 350); // This allows to wait a little bit
      x.domain([ 4,8])
    }else{
      x.domain([ x.invert(extent[0]), x.invert(extent[1]) ])
      scatter.select(".brush").call(brush.move, null) // This remove the grey brush area as soon as the selection has been done
    }

    // Update axis and circle position
    xAxis.transition().duration(1000).call(d3.axisBottom(x))
    scatter
      .selectAll("circle")
      .transition().duration(1000)
      .attr("cx", function (d) { return x(d.Sepal_Length); } )
      .attr("cy", function (d) { return y(d.Petal_Length); } )

    }

})

</script>
```

## Related blocks

- _Simplest way to add zoom/pan on d3.js-_ by
[Sébastien Gruhier.](https://coderwall.com/p/psogia/simplest-way-to-add-zoom-pan-on-d3-js)

- _Click-to-Recenter Brush -_ by
[Mike Bostock](https://bl.ocks.org/mbostock/6498000)

- _Scatter plot with zoom_ \- by
[Efrat Vilenski](https://bl.ocks.org/EfratVil/d956f19f2e56a05c31fb6583beccfda7)

- _D3 v4 - Scatter Plot - Semantic Zooming_ \- by
[Aleereza](https://bl.ocks.org/aleereza/d2be3d62a09360a770b79f4e5527eea8)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.7756002433939129)

Prebid User Sync

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=182496&gdpr=&gdpr\_consent=&us\_privacy=&gpp=&gpp\_sid=&cb=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dix%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=182496&gdpr=&gdpr\_consent=&us\_privacy=&gpp=&gpp\_sid=&cb=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dix%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=4160582329318313152760&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=4160582329318313152760)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/4160582329318313152760?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=4160582329318313152760&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=4160582329318313152760)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_5cb358f9-a398-4d9e-81a0-3c73542257ab&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV81Y2IzNThmOS1hMzk4LTRkOWUtODFhMC0zYzczNTQyMjU3YWI=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv&google\_tc=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV81Y2IzNThmOS1hMzk4LTRkOWUtODFhMC0zYzczNTQyMjU3YWI=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv&google\_tc=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-4FEB0587CF8CC232269F845DCB083A71@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-EF1A44C2AA11389EA125E7A04EA99416@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum&tc=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum&tc=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_5cb358f9-a398-4d9e-81a0-3c73542257ab&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_5cb358f9-a398-4d9e-81a0-3c73542257ab)

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876ctHM4McABgZfAHgUBQAA%261097&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876ctHM4McABgZfAHgUBQAABEkAAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://pm.w55c.net/ping_match.gif?ei=CASALE&rurl=https://dsum-sec.casalemedia.com/crum?cm_dsp_id=47&external_user_id=_wfivefivec_)![](https://ad.turn.com/r/cs?pid=21)![](https://s.company-target.com/s/ix?cm_dsp_id=18&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://www.temu.com/api/adx/cm/pixel-index?cm_user_id=Z876ctHM4McABgZfAHgUBQAABEkAAAIB)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876ctHM4McABgZfAHgUBQAABEkAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=3b864762-0e2e-4e05-a3c0-592354af9a08)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=M2I4NjQ3NjItMGUyZS00ZTA1LWEzYzAtNTkyMzU0YWY5YTA4)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://pm.w55c.net/ping_match.gif?st=ShareThrough&rurl=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DYnUBs5Yz9Zqjy9VCcoCxquFP%26source_user_id%3D_wfivefivec_)![](https://ssbsync.smartadserver.com/api/sync?callerId=47&gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=1B53205F-B612-43AB-8E3C-96535743221F)[iframe](cid:frame-BDDF732F29C57FEF760A091FB106FF66@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=1B53205F-B612-43AB-8E3C-96535743221F&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=1B53205F-B612-43AB-8E3C-96535743221F&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=MUI1MzIwNUYtQjYxMi00M0FCLThFM0MtOTY1MzU3NDMyMjFG&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=G1MgX7YSQ6uOPJZTV0MiHw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=1B53205F-B612-43AB-8E3C-96535743221F&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-08B03CF8F0CE75AACB57A1E168A348BE@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIq7lH_3heC)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElxN2xIXzNoZUM=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIq7lH_3heC)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIq7lH_3heC&cb=1741617778324&url={{REFERRER}}&gdpr=0&gdpr_consent=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=70541b0c-cf1a-c427-3384-fe854aee10d8)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/bc450135-431c-ed94-c25d-6ae7dd8a1671?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=28826771-d3b0-7fdd-f38a-7c1222dddb38&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=MDRlZGI0YmItMWFjNy0yMTc5LWU2NmEtMjZhYmU4M2YxNTU4)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-24E8C7F174F97FCAC361A7485836526A@mhtml.blink)

Topics Frame

## Sankey Diagram Basics
node0
There is 4 stuff in this nodenode0node1
There is 4 stuff in this nodenode1node2
There is 4 stuff in this nodenode2node3
There is 4 stuff in this nodenode3node4
There is 8 stuff in this nodenode4

##### Notes:

- Disclaimer: This code comes almost
directly from this
[block](https://bl.ocks.org/d3noob/013054e8d7807dff76247b81b0e29030)
by
[Malcolm Maclean](https://leanpub.com/u/d3noob).
Have a look to
[his book on d3!](https://leanpub.com/d3-t-and-t-v4)

- Sankey diagrams are built thanks to the
[d3-Sankey](https://github.com/d3/d3-sankey)
plugin, you have to load it.


- [Data](https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_sankey.json)
is composed by 2 parts: `nodes` (feature of each
elements) and `links` (how elements are
connected)


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.min.js"></script>

<!-- Load the sankey.js function -->
<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/sankey.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<!-- Add style to links or they won't appear properly-->
<style>
.link {
  fill: none;
  stroke: #000;
  stroke-opacity: .2;
}
.link:hover {
  stroke-opacity: .5;
}
</style>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 10, bottom: 10, left: 10},
    width = 450 - margin.left - margin.right,
    height = 480 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Color scale used
var color = d3.scaleOrdinal(d3.schemeCategory20);

// Set the sankey diagram properties
var sankey = d3.sankey()
    .nodeWidth(36)
    .nodePadding(290)
    .size([width, height]);

// load the data
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_sankey.json", function(error, graph) {

  // Constructs a new Sankey generator with the default settings.
  sankey
      .nodes(graph.nodes)
      .links(graph.links)
      .layout(1);

  // add in the links
  var link = svg.append("g")
    .selectAll(".link")
    .data(graph.links)
    .enter()
    .append("path")
      .attr("class", "link")
      .attr("d", sankey.link() )
      .style("stroke-width", function(d) { return Math.max(1, d.dy); })
      .sort(function(a, b) { return b.dy - a.dy; });

  // add in the nodes
  var node = svg.append("g")
    .selectAll(".node")
    .data(graph.nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .call(d3.drag()
        .subject(function(d) { return d; })
        .on("start", function() { this.parentNode.appendChild(this); })
        .on("drag", dragmove));

  // add the rectangles for the nodes
  node
    .append("rect")
      .attr("height", function(d) { return d.dy; })
      .attr("width", sankey.nodeWidth())
      .style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
      .style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
    // Add hover text
    .append("title")
      .text(function(d) { return d.name + "\n" + "There is " + d.value + " stuff in this node"; });

  // add in the title for the nodes
    node
      .append("text")
        .attr("x", -6)
        .attr("y", function(d) { return d.dy / 2; })
        .attr("dy", ".35em")
        .attr("text-anchor", "end")
        .attr("transform", null)
        .text(function(d) { return d.name; })
      .filter(function(d) { return d.x < width / 2; })
        .attr("x", 6 + sankey.nodeWidth())
        .attr("text-anchor", "start");

  // the function for moving the nodes
  function dragmove(d) {
    d3.select(this)
      .attr("transform",
            "translate("
               + d.x + ","
               + (d.y = Math.max(
                  0, Math.min(height - d.dy, d3.event.y))
                 ) + ")");
    sankey.relayout();
    link.attr("d", sankey.link() );
  }

});

</script>
```

### Related blocks →

- _Sankey diagram from formatted JSON -_ [link](https://bl.ocks.org/d3noob/013054e8d7807dff76247b81b0e29030)

- _Sankey plugin documentation -_ [link](https://github.com/d3/d3-sankey)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.5036248962475962)

Document

Prebid User Sync

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_f11e70ee-5bab-4426-8eb3-1462f383dc92&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

**c1.adform.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**c1.adform.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9mMTFlNzBlZS01YmFiLTQ0MjYtOGViMy0xNDYyZjM4M2RjOTI=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9mMTFlNzBlZS01YmFiLTQ0MjYtOGViMy0xNDYyZjM4M2RjOTI=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=FA6E7A3A-048E-4444-9EE6-9801F370EA1B)[iframe](cid:frame-6EA044040BFD19EFAD409893A3B08BA2@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=FA6E7A3A-048E-4444-9EE6-9801F370EA1B&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=FA6E7A3A-048E-4444-9EE6-9801F370EA1B&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=-m56OgSORESe5pgB83DqGw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=FA6E7A3A-048E-4444-9EE6-9801F370EA1B&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/FA6E7A3A-048E-4444-9EE6-9801F370EA1B?gdpr=0&gdpr_consent=)[iframe](cid:frame-810D5F9171D66BEE91DD43A97F3CDEB5@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)

match.deepintent.com

# This site can’t be reached

The webpage at **https://match.deepintent.com/usersync/141?gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.deepintent.com/usersync/141?gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTc4JnRsPTE1NzY4MDA=&piggybackCookie=$UID&gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTc4JnRsPTE1NzY4MDA=&piggybackCookie=$UID&gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-4CFC6CD7D8EF3285DEFE9025853C287F@mhtml.blink)

[iframe](cid:frame-3EBC1C6B9C4FB3906FDBE5E3BC1FDE85@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-3F1EA095F26CCCB126ED667732773E42@mhtml.blink)[iframe](cid:frame-96F56F2A0282C794EB4CC509C29D5298@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_f11e70ee-5bab-4426-8eb3-1462f383dc92)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_f11e70ee-5bab-4426-8eb3-1462f383dc92&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)[iframe](cid:frame-BC90DBE2EAD23E5AD64D49574E40C2AA@mhtml.blink)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)

[iframe](cid:frame-46127FD41166B4C570DBC6140AD721EF@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_f11e70ee-5bab-4426-8eb3-1462f383dc92&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_f11e70ee-5bab-4426-8eb3-1462f383dc92)

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876c8AoIjwAC0owAQmZKQAAB9sAAAIB&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://match.adsrvr.org/track/cmf/casale)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876c8AoIjwAC0owAQmZKQAAB9sAAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://www.temu.com/api/adx/cm/pixel-index?cm_user_id=Z876c8AoIjwAC0owAQmZKQAAB9sAAAIB)![](https://b1sync.zemanta.com/usersync/index/?puid=Z876c8AoIjwAC0owAQmZKQAA%262011&cb=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fexternal_user_id%3D_ZUID_&gdpr=&gdpr_consent=&us_privacy=)![](https://casale-match.dotomi.com/match/bounce/current?networkId=19998&version=1)![](https://match.deepintent.com/usersync/113)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876c8AoIjwAC0owAQmZKQAAB9sAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHutI0RHIkCV_2eHtR)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHutI0RHIkCV_2eHtR)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHutI0RHIkCV_2eHtR)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-E0909870244F26B7FE3D4AB9FAEC7AF9@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-6354A8B142B063E2AD1E0F5BC14F73D9@mhtml.blink)

Topics Frame

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=4696769810839250785750&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=4696769810839250785750)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/4696769810839250785750?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=4696769810839250785750&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=4696769810839250785750)

## Dynamic Barplot Visualization
Variable 1Variable 2

ABC02468101214161820

##### Steps:

- First of all, understand how to build a
[basic barplot.](https://d3-graph-gallery.com/graph/barplot_basic.html)

- Add 2 `buttons` in the html part. When you click
the button, a function called `update()` is
triggered.


- This `update()` function updates the value of the
3 groups


- See [here](https://d3-graph-gallery.com/graph/barplot_button_data_simple.html) for more info on transition

d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Add 2 buttons -->
<button onclick="update(data1)">Variable 1</button>
<button onclick="update(data2)">Variable 2</button>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Add 2 buttons -->
<button onclick="update(data1)">Variable 1</button>
<button onclick="update(data2)">Variable 2</button>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// create 2 data_set
var data1 = [\
   {group: "A", value: 4},\
   {group: "B", value: 16},\
   {group: "C", value: 8}\
];

var data2 = [\
   {group: "A", value: 7},\
   {group: "B", value: 1},\
   {group: "C", value: 20}\
];

// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 70, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// X axis
var x = d3.scaleBand()
  .range([ 0, width ])
  .domain(data1.map(function(d) { return d.group; }))
  .padding(0.2);
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))

// Add Y axis
var y = d3.scaleLinear()
  .domain([0, 20])
  .range([ height, 0]);
svg.append("g")
  .attr("class", "myYaxis")
  .call(d3.axisLeft(y));

// A function that create / update the plot for a given variable:
function update(data) {

  var u = svg.selectAll("rect")
    .data(data)

  u
    .enter()
    .append("rect")
    .merge(u)
    .transition()
    .duration(1000)
      .attr("x", function(d) { return x(d.group); })
      .attr("y", function(d) { return y(d.value); })
      .attr("width", x.bandwidth())
      .attr("height", function(d) { return height - y(d.value); })
      .attr("fill", "#69b3a2")
}

// Initialize the plot with the first dataset
update(data1)

</script>
```

``` js
<script>

// create 2 data_set
const data1 = [\
   {group: "A", value: 4},\
   {group: "B", value: 16},\
   {group: "C", value: 8}\
];

const data2 = [\
   {group: "A", value: 7},\
   {group: "B", value: 1},\
   {group: "C", value: 20}\
];

// set the dimensions and margins of the graph
const margin = {top: 30, right: 30, bottom: 70, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

// X axis
const x = d3.scaleBand()
  .range([ 0, width ])
  .domain(data1.map(d => d.group))
  .padding(0.2);
svg.append("g")
  .attr("transform", `translate(0,${height})`)
  .call(d3.axisBottom(x))

// Add Y axis
const y = d3.scaleLinear()
  .domain([0, 20])
  .range([ height, 0]);
svg.append("g")
  .attr("class", "myYaxis")
  .call(d3.axisLeft(y));

// A function that create / update the plot for a given variable:
function update(data) {

  var u = svg.selectAll("rect")
    .data(data)

  u
    .join("rect")
    .transition()
    .duration(1000)
      .attr("x", d => x(d.group))
      .attr("y", d => y(d.value))
      .attr("width", x.bandwidth())
      .attr("height", d => height - y(d.value))
      .attr("fill", "#69b3a2")
}

// Initialize the plot with the first dataset
update(data1)

</script>
```

### Related blocks →

- _Simple bar graph in v4 -_ [link](https://bl.ocks.org/d3noob/bdf28027e0ce70bd132edc64f1dd7ea4)

- _Let's make a bar chart -_ [link](https://bost.ocks.org/mike/bar/)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.9040988686914868)

Prebid User Sync

![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://match.adsrvr.org/track/cmf/casale)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876csAoIrUALMEtAPAtdgAA%262608&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876csAoIrUALMEtAPAtdgAACjAAAAIB&gpp=&gpp_sid=)[iframe](cid:frame-684B3A2BB624DB6E77C356538D30025A@mhtml.blink)![](https://csync.loopme.me/?pubid=11466&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D24%26external_user_id%3D%7Bviewer_token%7D&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876csAoIrUALMEtAPAtdgAACjAAAAIB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://trace.mediago.io/ju/cs/indexexchange)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876csAoIrUALMEtAPAtdgAA%262608)

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_b55bea46-d545-4749-a6ee-018f3457ed6e&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-F42D69B55097F928BBF6237DAFFD4B8A@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-B14DE982EFF15E225B1BC2162F82A203@mhtml.blink)

[iframe](cid:frame-5CFF0971C1E0A138FB85618EF354AEF8@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-31484BE2A21072A5AD59CB3C10ED21CC@mhtml.blink)[iframe](cid:frame-EBEA9E602CD995C9E7FC04589FDC2232@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_b55bea46-d545-4749-a6ee-018f3457ed6e&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_b55bea46-d545-4749-a6ee-018f3457ed6e)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=f7f55436-18f3-4c53-b6eb-3735a9c14fa6)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=ZjdmNTU0MzYtMThmMy00YzUzLWI2ZWItMzczNWE5YzE0ZmE2)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://pixel.rubiconproject.com/exchange/sync.php?p=18694&gdpr=0&gdpr_consent=)![](https://secure.adnxs.com/getuid?https://match.sharethrough.com/sync/v1?source_id=0e8893f90b606c9c5d33f1be&gdpr=0&gdpr_consent=&source_user_id=$UID)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=DA133014-E6B5-4B7A-AAB0-4CE001A2867A)[iframe](cid:frame-0E64842B44EFAE770C7D7CD0CA40F0BF@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=DA133014-E6B5-4B7A-AAB0-4CE001A2867A&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=DA133014-E6B5-4B7A-AAB0-4CE001A2867A&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=2hMwFOa1S3qqsEzgAaKGeg%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=DA133014-E6B5-4B7A-AAB0-4CE001A2867A&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/DA133014-E6B5-4B7A-AAB0-4CE001A2867A?gdpr=0&gdpr_consent=)[iframe](cid:frame-4E9DA254F8E013220CE756F9D3245B63@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIxLTqAqPA1)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIxLTqAqPA1&cb=1741617779629&url={{REFERRER}}&gdpr=0&gdpr_consent=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=9c7729be-bdc4-c850-089d-fe9163172b4c)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/50663387-31c2-e1e3-f944-6af3f4732de5?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=c4a155c3-a16e-73aa-c893-7c060b24e0ac&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZThjZTg2MDktNjgxOS0yZDBlLWRkNzMtMjZiZmMxYzYyZWNj)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-F31FF11BB0142D032AE6656BD610A2D4@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-AB828CB46D2A4FA92FF87821B058D66A@mhtml.blink)

Topics Frame

## D3.js Connection Maps
##### Steps:

- First of all, learn how to build a basic
[background map](https://d3-graph-gallery.com/graph/backgroundmap_basic.html).


- Then create a path generator called `path`.
Basically, give it 2 set of coordinates and it will return a
list of coordinates all along the great circle between them.


- If you're not sure, try to add
`console.log(path(link))` and you will see the
svg path that has been generated.


- Finally it is easy to append a path calling this generator.


- Try to play with the input data to understand how the great
circle shape changes.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="440" height="300"></svg>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="440" height="300"></svg>

```

``` js
<script>

// The svg
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// Map and projection
var projection = d3.geoMercator()
    .scale(85)
    .translate([width/2, height/2*1.3])

// Create data: coordinates of start and end
var link = [\
  {type: "LineString", coordinates: [[100, 60], [-60, -30]]},\
  {type: "LineString", coordinates: [[10, -20], [-60, -30]]},\
  {type: "LineString", coordinates: [[10, -20], [130, -30]]}\
]

// A path generator
var path = d3.geoPath()
    .projection(projection)

// Load world shape
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data){

    // Draw the map
    svg.append("g")
        .selectAll("path")
        .data(data.features)
        .enter().append("path")
            .attr("fill", "#b8b8b8")
            .attr("d", d3.geoPath()
                .projection(projection)
            )
            .style("stroke", "#fff")
            .style("stroke-width", 0)

    // Add the path
    svg.selectAll("myPath")
      .data(link)
      .enter()
      .append("path")
        .attr("d", function(d){ return path(d)})
        .style("fill", "none")
        .style("stroke", "orange")
        .style("stroke-width", 7)

})

</script>
```

``` js
<script>

// The svg
const svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// Map and projection
const projection = d3.geoMercator()
    .scale(85)
    .translate([width/2, height/2*1.3])

// Create data: coordinates of start and end
const link = [\
  {type: "LineString", coordinates: [[100, 60], [-60, -30]]},\
  {type: "LineString", coordinates: [[10, -20], [-60, -30]]},\
  {type: "LineString", coordinates: [[10, -20], [130, -30]]}\
]

// A path generator
const path = d3.geoPath()
    .projection(projection)

// Load world shape
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson").then( function(data){

    // Draw the map
    svg.append("g")
        .selectAll("path")
        .data(data.features)
        .join("path")
            .attr("fill", "#b8b8b8")
            .attr("d", path)
            .style("stroke", "#fff")
            .style("stroke-width", 0)

    // Add the path
    svg.selectAll("myPath")
      .data(link)
      .join("path")
        .attr("d", function(d){ return path(d)})
        .style("fill", "none")
        .style("stroke", "orange")
        .style("stroke-width", 7)

})
</script>
```

### Related blocks →

- _Stack Overflow question -_ by
[altocumulus](https://stackoverflow.com/questions/39982729/drawing-connecting-lines-great-arcs-on-a-d3-symbol-map/39988387)

- _Basic map with d3 -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/graph/backgroundmap_basic.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.4350506767051989)

Prebid User Sync

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876e9HM4MgALBUBAIRX3QAA%261098&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876e9HM4MgALBUBAIRX3QAABEoAAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876e9HM4MgALBUBAIRX3QAABEoAAAIB&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://dpm.demdex.net/ibs:dpid=23728&dpuuid=Z876e9HM4MgALBUBAIRX3QAA%261098?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://csync.loopme.me/?pubid=11466&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D24%26external_user_id%3D%7Bviewer_token%7D&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://b1sync.zemanta.com/usersync/index/?puid=Z876e9HM4MgALBUBAIRX3QAA%261098&cb=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fexternal_user_id%3D_ZUID_&gdpr=&gdpr_consent=&us_privacy=)![](https://secure.adnxs.com/getuid?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=46&external_user_id=$UID)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876e9HM4MgALBUBAIRX3QAA%261098)

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=f3f52ec5-a6d4-4e0e-8bdb-fb2ff7c45399)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/5eecc74e-8fe7-efae-d180-2dcf89c85c5d?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=ca2ba10a-1f4b-7de7-e057-3b3a769f9114&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZTY0NDcyYzAtZDYzYy0yMzQzLWY1YjctNjE4M2JjN2Q1Zjc0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_fb03d16b-a000-4571-9f52-96cb5e609d73&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-04AC0EB6401E9D064A278FB375E28DAE@mhtml.blink)

match.adsrvr.org

# This site can’t be reached

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-D0CC39EAF662AEDFEE18C4196EAB8FCB@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_fb03d16b-a000-4571-9f52-96cb5e609d73&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_fb03d16b-a000-4571-9f52-96cb5e609d73)

![](https://match.adsrvr.org/track/cmf/casale)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876e9HM4MgALBUBAIRX3QAABEoAAAIB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://cms.quantserve.com/pixel/p-Z8PuJEk6U7Hyq.gif?idmatch=0)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://tr.blismedia.com/v1/api/sync/indexexchange?gdpr=&userId=Z876e9HM4MgALBUBAIRX3QAA%261098&gpp=&gpp_sid=&us_privacy=&gdpr_consent=)![](https://rtb.adentifi.com/CookieIndex)![](https://pm.w55c.net/ping_match.gif?ei=CASALE&rurl=https://dsum-sec.casalemedia.com/crum?cm_dsp_id=47&external_user_id=_wfivefivec_)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876e9HM4MgALBUBAIRX3QAABEoAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=cb7a9c50-5dbd-4dc7-bd76-d65445e65ce7)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=Y2I3YTljNTAtNWRiZC00ZGM3LWJkNzYtZDY1NDQ1ZTY1Y2U3)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://b1sync.zemanta.com/usersync/sharethrough?cb=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_user_id%3D__ZUID__%26gdpr%3D%7BGDPR%7D%26gdpr_consent%3D%7BGDPR_CONSENT_80%7D)![](https://creativecdn.com/cm-notify?pi=sharethrough&gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=C18B761D-88C8-4F5D-A036-E1C44DA77DFD)[iframe](cid:frame-6B1942E87789D5205F2F31B58B3B499F@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=C18B761D-88C8-4F5D-A036-E1C44DA77DFD&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=C18B761D-88C8-4F5D-A036-E1C44DA77DFD&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=QzE4Qjc2MUQtODhDOC00RjVELUEwMzYtRTFDNDREQTc3REZE&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=wYt2HYjIT12gNuHETad9_Q%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=C18B761D-88C8-4F5D-A036-E1C44DA77DFD&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-6510AAEF078310A8A8907A3B6E2ED7AE@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIdT9tTPm_D)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIdT9tTPm_D)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElkVDl0VFBtX0Q=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

**ib.adnxs.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ib.adnxs.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?ld=1&gdpr=0&cmp\_cs=&us\_privacy=&redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?ld=1&gdpr=0&cmp\_cs=&us\_privacy=&redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D1YNY%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ?us_privacy=1YNY)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D&us_privacy=1YNY)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID&us_privacy=1YNY)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776&us_privacy=1YNY)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=&us_privacy=1YNY)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D&us_privacy=1YNY)

## World Population Choropleth
##### Steps:

- First of all, see the
[background map](https://d3-graph-gallery.com/backgroundmap.html) section
to understand the basics of mapping with d3, and the
[most basic choropleth](https://d3-graph-gallery.com/graph/choropleth_basic.html)
map post.


- Map shows the world population per country in 2005. Data
comes from
[here](https://www.r-graph-gallery.com/183-choropleth-map-with-leaflet/), stored
[here](https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv)

- Each country is actually a `path`. Two functions
are triggered when the mouse hover/leave the country:
`mouseOver` and `mouseLeave`

- Those two functions basically modify the
`opacity` and the `stroke` of paths.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="http://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="400" height="300"></svg>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="400" height="300"></svg>

```

``` js
<script>

// The svg
var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

// Map and projection
var path = d3.geoPath();
var projection = d3.geoMercator()
  .scale(70)
  .center([0,20])
  .translate([width / 2, height / 2]);

// Data and color scale
var data = d3.map();
var colorScale = d3.scaleThreshold()
  .domain([100000, 1000000, 10000000, 30000000, 100000000, 500000000])
  .range(d3.schemeBlues[7]);

// Load external data and boot
d3.queue()
  .defer(d3.json, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson")
  .defer(d3.csv, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv", function(d) { data.set(d.code, +d.pop); })
  .await(ready);

function ready(error, topo) {

  let mouseOver = function(d) {
    d3.selectAll(".Country")
      .transition()
      .duration(200)
      .style("opacity", .5)
    d3.select(this)
      .transition()
      .duration(200)
      .style("opacity", 1)
      .style("stroke", "black")
  }

  let mouseLeave = function(d) {
    d3.selectAll(".Country")
      .transition()
      .duration(200)
      .style("opacity", .8)
    d3.select(this)
      .transition()
      .duration(200)
      .style("stroke", "transparent")
  }

  // Draw the map
  svg.append("g")
    .selectAll("path")
    .data(topo.features)
    .enter()
    .append("path")
      // draw each country
      .attr("d", d3.geoPath()
        .projection(projection)
      )
      // set the color of each country
      .attr("fill", function (d) {
        d.total = data.get(d.id) || 0;
        return colorScale(d.total);
      })
      .style("stroke", "transparent")
      .attr("class", function(d){ return "Country" } )
      .style("opacity", .8)
      .on("mouseover", mouseOver )
      .on("mouseleave", mouseLeave )
    }

</script>
```

``` js
<script>

// The svg
const svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

// Map and projection
const path = d3.geoPath();
const projection = d3.geoMercator()
  .scale(70)
  .center([0,20])
  .translate([width / 2, height / 2]);

// Data and color scale
const data = new Map();
const colorScale = d3.scaleThreshold()
  .domain([100000, 1000000, 10000000, 30000000, 100000000, 500000000])
  .range(d3.schemeBlues[7]);

// Load external data and boot
Promise.all([\
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"),\
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv", function(d) {\
    data.set(d.code, +d.pop)\
})]).then(function(loadData){
    let topo = loadData[0]

    let mouseOver = function(d) {
    d3.selectAll(".Country")
      .transition()
      .duration(200)
      .style("opacity", .5)
    d3.select(this)
      .transition()
      .duration(200)
      .style("opacity", 1)
      .style("stroke", "black")
  }

  let mouseLeave = function(d) {
    d3.selectAll(".Country")
      .transition()
      .duration(200)
      .style("opacity", .8)
    d3.select(this)
      .transition()
      .duration(200)
      .style("stroke", "transparent")
  }

  // Draw the map
  svg.append("g")
    .selectAll("path")
    .data(topo.features)
    .enter()
    .append("path")
      // draw each country
      .attr("d", d3.geoPath()
        .projection(projection)
      )
      // set the color of each country
      .attr("fill", function (d) {
        d.total = data.get(d.id) || 0;
        return colorScale(d.total);
      })
      .style("stroke", "transparent")
      .attr("class", function(d){ return "Country" } )
      .style("opacity", .8)
      .on("mouseover", mouseOver )
      .on("mouseleave", mouseLeave )

})

</script>
```

### Related blocks →

- _World Choropleth -_ [link](http://bl.ocks.org/palewire/d2906de347a160f38bc0b7ca57721328)

- _Projection Transitions -_ [link](https://bl.ocks.org/alexmacy/6700d44240d2b6d3ec9767a5a5854e42)

- _Choropleth section -_ [link](https://d3-graph-gallery.com/choropleth.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.007498444167341134)

Prebid User Sync

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=ffab959c-2656-473f-8ac6-034c7dba3379)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/52b27c17-0f65-e69f-d09d-d5ac03b63cbd?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=c6751a53-9fc9-74d6-e14a-c359fce1f1f4&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZWExYWM5OTktNTZiZS0yYTcyLWY0YWEtOTllMDM2MDMzZjk0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_40abb5ff-36de-4d78-b5f6-256eb847e674&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-BBF7F22BE2895A2BFAF01191808B6E32@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-9A5E49C441C8D2665CEF238DD6C880BE@mhtml.blink)

[iframe](cid:frame-5E2B195DEDA7A4F95D470F67FAD64F60@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-0CFF9A1705531173A39483541AF7AD5D@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_40abb5ff-36de-4d78-b5f6-256eb847e674&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_40abb5ff-36de-4d78-b5f6-256eb847e674)

![](https://match.adsrvr.org/track/cmf/casale)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876e8AoJSsACg4lAG26EQAABpIAAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876e8AoJSsACg4lAG26EQAABpIAAAIB&gpp=&gpp_sid=)![](https://bttrack.com/pixel/cookiesync?source=67e94f23-25d6-4008-8236-375d1743c2e0&secure=1)![](https://ad.turn.com/r/cs?pid=21)![](https://ib.adnxs.com/getuid?https://dsum.casalemedia.com/crum?cm_dsp_id=190&external_user_id=$UID)![](https://tr.blismedia.com/v1/api/sync/indexexchange?gdpr=&userId=Z876e8AoJSsACg4lAG26EQAA%261682&gpp=&gpp_sid=&us_privacy=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876e8AoJSsACg4lAG26EQAABpIAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=4cfe808d-812b-4446-9dcf-e97ec664d2d2)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=NGNmZTgwOGQtODEyYi00NDQ2LTlkY2YtZTk3ZWM2NjRkMmQy)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/sharethrough)![](https://pixel.rubiconproject.com/exchange/sync.php?p=18694&gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=A4DB15ED-BA40-4CB6-B0DC-A1226B82AFEF)[iframe](cid:frame-F7510D0FCBB2963EE60C9A1133B41D86@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=A4DB15ED-BA40-4CB6-B0DC-A1226B82AFEF&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=A4DB15ED-BA40-4CB6-B0DC-A1226B82AFEF&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=QTREQjE1RUQtQkE0MC00Q0I2LUIwREMtQTEyMjZCODJBRkVG&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=pNsV7bpATLaw3KEia4Kv7w%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=A4DB15ED-BA40-4CB6-B0DC-A1226B82AFEF&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-0686FDC1F028DD220FD810D5CB146CBD@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIS8ttdsUal)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIS8ttdsUal)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=9ea3662e-8363-cf2c-2144-41ce94d23a14)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=c00b69af-c4ce-4951-abab-5b8fcf6d30f8)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)

[iframe](cid:frame-F1E6B6339DBE490B83DA1146910337CA@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

## Leaflet Map Layers
![](https://a.tile.openstreetmap.org/4/7/5.png)![](https://b.tile.openstreetmap.org/4/8/5.png)![](https://c.tile.openstreetmap.org/4/7/4.png)![](https://a.tile.openstreetmap.org/4/8/4.png)![](https://b.tile.openstreetmap.org/4/7/6.png)![](https://c.tile.openstreetmap.org/4/8/6.png)![](https://c.tile.openstreetmap.org/4/6/5.png)![](https://c.tile.openstreetmap.org/4/9/5.png)![](https://b.tile.openstreetmap.org/4/6/4.png)![](https://b.tile.openstreetmap.org/4/9/4.png)![](https://a.tile.openstreetmap.org/4/6/6.png)![](https://a.tile.openstreetmap.org/4/9/6.png)![](https://b.tile.openstreetmap.org/4/5/5.png)![](https://a.tile.openstreetmap.org/4/10/5.png)![](https://a.tile.openstreetmap.org/4/5/4.png)![](https://c.tile.openstreetmap.org/4/10/4.png)![](https://c.tile.openstreetmap.org/4/5/6.png)![](https://b.tile.openstreetmap.org/4/10/6.png)![](https://a.tile.openstreetmap.org/4/4/5.png)![](https://b.tile.openstreetmap.org/4/11/5.png)![](https://c.tile.openstreetmap.org/4/4/4.png)![](https://a.tile.openstreetmap.org/4/11/4.png)![](https://b.tile.openstreetmap.org/4/4/6.png)![](https://c.tile.openstreetmap.org/4/11/6.png)

[+](https://d3-graph-gallery.com/graph/backgroundmap_leaflet_buttonLayer.html# "Zoom in") [−](https://d3-graph-gallery.com/graph/backgroundmap_leaflet_buttonLayer.html# "Zoom out")

[Layers](https://d3-graph-gallery.com/graph/backgroundmap_leaflet_buttonLayer.html# "Layers")

Open streetmap

Open streetmap: Hot

Open streetmap: Osm

[Leaflet](http://leafletjs.com/ "A JS library for interactive maps") \| Map data © [OpenStreetMap](https://www.openstreetmap.org/)

##### Steps:

- List of tiles?

- https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
- http://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png

- http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png

- http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png


- In this example the world country boundaries are used. Data
comes from
[here](http://enjalot.github.io/wwsd/data/world/world-110m.geojson). They are provided at `geojson` format. If you
have a `shapefile` format, visit the
[background map](https://www.d3-graph-gallery.com/backgroundmap)
section to see how to proceed.


- Note that the
[geo.projection](https://github.com/d3/d3-geo-projection)
plugin is used. It allows to represent the world using
different projection. See
[this page of the gallery](https://d3-graph-gallery.com/graph/backgroundmap_leaflet_buttonLayer.html) to see the
possibilities.


- Note: I don't understand the logic behind the
`.scale` part.


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>

<!-- Create an element where the map will take place -->
<div id="mapid"></div>

<style>
#mapid { height: 400px; }
</style>

```

``` js
<script>

// Initialize the map
// [50, -0.1] are the latitude and longitude
// 4 is the zoom
// mapid is the id of the div where the map will appear
var map = L
  .map('mapid')
  .setView([50, -0.1], 4);

// Tile type: openstreetmap normal
var openstreetmap = L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
  maxZoom: 6
})

// Tile type: openstreetmap Hot
var openstreetmapHot = L.tileLayer(
  'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
  maxZoom: 6
})

// Tile type: openstreetmap Osm
var openstreetmapOsm = L.tileLayer(
  'http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
  maxZoom: 6
})

//Base layers definition and addition
var allOptions = {
	"Open streetmap": openstreetmap,
  "Open streetmap: Hot": openstreetmapHot,
  "Open streetmap: Osm": openstreetmapOsm
};

// Initialize with openstreetmap
openstreetmap.addTo(map);

// Add baseLayers to map as control layers
L.control.layers(allOptions).addTo(map);

</script>
```

### Related blocks →

- _Leaflet.js multiple basemap tiles example -_ by
[Camilo Cruz](http://bl.ocks.org/cccruzr/2be38431f91ff2adb9ded7c0e0950382)

- _Basic background with Leaflet -_ [link](https://d3-graph-gallery.com/graph/backgroundmap_leaflet.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.3100489448146102)

Prebid User Sync

![](https://idsync.rlcdn.com/420486.gif?partner_uid=F5FAB2B6-D060-4D4D-BF4D-E8EC4500AB38)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=14&cid=F5FAB2B6-D060-4D4D-BF4D-E8EC4500AB38&gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=14&cid=F5FAB2B6-D060-4D4D-BF4D-E8EC4500AB38&gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.onaudience.com/?partner=214&mapped=F5FAB2B6-D060-4D4D-BF4D-E8EC4500AB38&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=F5FAB2B6-D060-4D4D-BF4D-E8EC4500AB38&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=RjVGQUIyQjYtRDA2MC00RDRELUJGNEQtRThFQzQ1MDBBQjM4&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=9fqyttBgTU2_TejsRQCrOA%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=F5FAB2B6-D060-4D4D-BF4D-E8EC4500AB38&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/F5FAB2B6-D060-4D4D-BF4D-E8EC4500AB38?gdpr=0&gdpr_consent=)[iframe](cid:frame-91F425FC7E8F9C80989C70B00A149EA1@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)

image2.pubmatic.com

# This site can’t be reached

The webpage at **https://image2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTM0MzAmdGw9MTI5NjAw&piggybackCookie=di\_a1b187fc274740829d59c** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://image2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZjb2RlPTM0MzAmdGw9MTI5NjAw&piggybackCookie=di\_a1b187fc274740829d59c** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=1693467924635065030378&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=1693467924635065030378)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/1693467924635065030378?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=1693467924635065030378&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=1693467924635065030378)

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=d62ee96c-5c63-4887-913a-6570d42f6b2f)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=e98e155f-befb-46e9-b057-3db366f868ae)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_4f51af98-0b8b-4eec-b86f-549ab92058b8&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-3EEA117410FCDA5A354E8CB33580DAFF@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-70517BF539132056C28038DBB30C9D62@mhtml.blink)

[iframe](cid:frame-5904AA3B2CA9EF4665329B60F6E56838@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-0BC5237BFD4AE81E5FE34855FE6E79E8@mhtml.blink)[iframe](cid:frame-06A33725CAB248B9CD8DC40B1E1A1414@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_4f51af98-0b8b-4eec-b86f-549ab92058b8&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_4f51af98-0b8b-4eec-b86f-549ab92058b8)

![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876e8AoIp8AKuNgAO5tAgAAChoAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876e8AoIp8AKuNgAO5tAgAAChoAAAAB&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://sync.srv.stackadapt.com/sync?nid=68)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876e8AoIp8AKuNgAO5tAgAAChoAAAAB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.deepintent.com/usersync/113)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876e8AoIp8AKuNgAO5tAgAAChoAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIk6zmAsf3P)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIk6zmAsf3P)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIk6zmAsf3P)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=aa07e30b-886f-c919-0209-4212b12868a0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/6616f932-0469-e0aa-f3d0-d670264c6e09?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=f2d19f76-94c5-72e3-c207-c085d91ba340&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZGViZTRjYmMtNWRiMi0yYzQ3LWQ3ZTctOWEzYzEzZjk2ZDIw)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-DC5F001408F243BF9B40DF10ED7EA8A6@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-654C3D5038F32EF698B0B59D6C8F4ECB@mhtml.blink)

Topics Frame

## Circular Packing Dragging
##### Steps:

- This post follows the
[most basic circular packing](https://d3-graph-gallery.com/graph/circularpacking_basic.html), have a look to it first.


- It just shows how to add a dragging features to the nodes.


- Each time you use your mouse to drag one of the circle, a
set of functions are triggered to run the simulation
algorithm and position the circles at a position respecting
the force constraints.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var width = 450
var height = 450

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", 450)
    .attr("height", 450)

// create dummy data -> just one element per circle
var data = [{ "name": "A" }, { "name": "B" }, { "name": "C" }, { "name": "D" }, { "name": "E" }, { "name": "F" }, { "name": "G" }, { "name": "H" }]

// Initialize the circle: all located at the center of the svg area
var node = svg.append("g")
  .selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
    .attr("r", 25)
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .style("fill", "#19d3a2")
    .style("fill-opacity", 0.3)
    .attr("stroke", "#b3a2c8")
    .style("stroke-width", 4)
    .call(d3.drag() // call specific function when circle is dragged
         .on("start", dragstarted)
         .on("drag", dragged)
         .on("end", dragended));

// Features of the forces applied to the nodes:
var simulation = d3.forceSimulation()
    .force("center", d3.forceCenter().x(width / 2).y(height / 2)) // Attraction to the center of the svg area
    .force("charge", d3.forceManyBody().strength(1)) // Nodes are attracted one each other of value is > 0
    .force("collide", d3.forceCollide().strength(.1).radius(30).iterations(1)) // Force that avoids circle overlapping

// Apply these forces to the nodes and update their positions.
// Once the force algorithm is happy with positions ('alpha' value is low enough), simulations will stop.
simulation
    .nodes(data)
    .on("tick", function(d){
      node
          .attr("cx", function(d){ return d.x; })
          .attr("cy", function(d){ return d.y; })
    });

// What happens when a circle is dragged?
function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(.03).restart();
  d.fx = d.x;
  d.fy = d.y;
}
function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}
function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(.03);
  d.fx = null;
  d.fy = null;
}

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const width = 450
const height = 450

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", 450)
    .attr("height", 450)

// create dummy data -> just one element per circle
const data = [{ "name": "A" }, { "name": "B" }, { "name": "C" }, { "name": "D" }, { "name": "E" }, { "name": "F" }, { "name": "G" }, { "name": "H" }]

// Initialize the circle: all located at the center of the svg area
const node = svg.append("g")
  .selectAll("circle")
  .data(data)
  .join("circle")
    .attr("r", 25)
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .style("fill", "#19d3a2")
    .style("fill-opacity", 0.3)
    .attr("stroke", "#b3a2c8")
    .style("stroke-width", 4)
    .call(d3.drag() // call specific function when circle is dragged
         .on("start", dragstarted)
         .on("drag", dragged)
         .on("end", dragended));

// Features of the forces applied to the nodes:
const simulation = d3.forceSimulation()
    .force("center", d3.forceCenter().x(width / 2).y(height / 2)) // Attraction to the center of the svg area
    .force("charge", d3.forceManyBody().strength(1)) // Nodes are attracted one each other of value is > 0
    .force("collide", d3.forceCollide().strength(.1).radius(30).iterations(1)) // Force that avoids circle overlapping

// Apply these forces to the nodes and update their positions.
// Once the force algorithm is happy with positions ('alpha' value is low enough), simulations will stop.
simulation
    .nodes(data)
    .on("tick", function(d){
      node
          .attr("cx", d => d.x)
          .attr("cy", d => d.y)
    });

// What happens when a circle is dragged?
function dragstarted(event, d) {
 if (!event.active) simulation.alphaTarget(.03).restart();
  d.fx = d.x;
  d.fy = d.y;
}
function dragged(event, d) {
  d.fx = event.x;
  d.fy = event.y;
}
function dragended(event, d) {
 if (!event.active) simulation.alphaTarget(.03);
  d.fx = null;
  d.fy = null;
}

</script>
```

### Related blocks →

- _Force layout -_ by
[d3 in depth](https://d3indepth.com/force-layout/)

- _Force Simulation -_ by
[Harry Stevens](https://bl.ocks.org/HarryStevens/f636199a46fc4b210fbca3b1dc4ef372)

- _Circular packing -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/circularpacking.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.19072836769110957)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=105739543863114038962&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=105739543863114038962)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/105739543863114038962?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=105739543863114038962&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=105739543863114038962)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_6a962645-1e9b-498f-910e-f74d15bfdcbd&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-B2F8C71939A142C3345AF95A020CB145@mhtml.blink)

[iframe](cid:frame-9C37F5D2B4FA0E271B5774DFB873599B@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-47DD73820295A8B1D892E3B02B042FF0@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_6a962645-1e9b-498f-910e-f74d15bfdcbd&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_6a962645-1e9b-498f-910e-f74d15bfdcbd)

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876e9HM40EAMt25AEH-0wAAAmUAAAIB&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876e9HM40EAMt25AEH.0wAA%26613&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876e9HM40EAMt25AEH-0wAAAmUAAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://creativecdn.com/cm-notify?pi=index&gpdr=&gdpr_consent=&us_privacy=&user_id=Z876e9HM40EAMt25AEH.0wAA%26613)![](https://s.c.appier.net/index?userId=Z876e9HM40EAMt25AEH.0wAA%26613&gdpr=&us_privacy=)![](https://trace.mediago.io/ju/cs/indexexchange)![](https://match.adsrvr.org/track/cmf/casale)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876e9HM40EAMt25AEH-0wAAAmUAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=87f4cf1c-120b-4aca-bb7f-392cb6114d7b)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=ODdmNGNmMWMtMTIwYi00YWNhLWJiN2YtMzkyY2I2MTE0ZDdi)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://pixel.rubiconproject.com/exchange/sync.php?p=18694&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/rmpssp?sub=sharethrough)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=5F8A0789-6433-4369-B50F-28366CD302AB)[iframe](cid:frame-A2696EE44FB552C80E0BD0E1E29015E8@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=5F8A0789-6433-4369-B50F-28366CD302AB&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=5F8A0789-6433-4369-B50F-28366CD302AB&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=X4oHiWQzQ2m1Dyg2bNMCqw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=5F8A0789-6433-4369-B50F-28366CD302AB&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/5F8A0789-6433-4369-B50F-28366CD302AB?gdpr=0&gdpr_consent=)[iframe](cid:frame-54E3447DAFB449190E6359B0EB81092A@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIYZa8RxUUD)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElZWmE4UnhVVUQ=)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=aab9991a-fd23-c16e-388d-979f18d666f9)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/66a88323-7125-e8dd-c954-03fd8fb26050?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=f26fe567-e189-7a94-f883-150870e5ad19&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZGUwMDM2YWQtMjhmZS0yNDMwLWVkNjMtNGZiMWJhMDc2Mzc5)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-FA473418301C3FBBA6F732C8A45B1547@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-4C5484D1AD3F30C096E5A1C4112AA950@mhtml.blink)

Topics Frame

Pixels![](https://pbs-raptive-us.ay.delivery/setuid?bidder=openx&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=cbb16aa8-5816-497d-930f-d51df1be6f94)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=f411969b-ba8e-4713-b262-8dde43696c15)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

## 2D Histogram Visualization
45678910111213141516171867891011121314151617181920

##### Steps:

- The Html part of the code just creates a
`div` that will be modified by d3 later on. It
also load the
[d3-hexbin plugin](https://github.com/d3/d3-hexbin)

- The
[input dataset](https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_for_density2d.csv)
has 2 numeric variables: `x` and `y`.
A 2d histogram basically represents the amount of data point
on each part of the grid.


- The d3-rectbin plugin allows to group two-dimensional points
into hexagonal bins using the `d3.rectbin()`.


- Finally, paths can be drawn using `rect`

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- specific plugin -->
<script src="https://cdn.rawgit.com/fabid/d3-rectbin/master/rectbin.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 20, right: 30, bottom: 30, left: 30},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// read data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_for_density2d.csv", function(data) {

  // Get max and min of data
  var xLim = [4,18]
  var yLim = [6,20]

  // Add X axis
  var x = d3.scaleLinear()
    .nice()
    .domain(xLim)
    .range([ 0, width ]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // Add Y axis
  var y = d3.scaleLinear()
    .nice()
    .domain(yLim)
    .range([ height, 0 ]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Reformat the data: d3.rectbin() needs a specific format
  var inputForRectBinning = []
  data.forEach(function(d) {
    inputForRectBinning.push( [+d.x, +d.y] )  // Note that we had the transform value of X and Y !
  })

  // Compute the rectbin
  var size = 0.5
  var rectbinData = d3.rectbin()
    .dx(size)
    .dy(size)
    (inputForRectBinning)

  // Prepare a color palette
  var color = d3.scaleLinear()
      .domain([0, 350]) // Number of points in the bin?
      .range(["transparent",  "#69a3b2"])

  // What is the height of a square in px?
  heightInPx = y( yLim[1]-size )

  // What is the width of a square in px?
  var widthInPx = x(xLim[0]+size)

  // Now we can add the squares
  svg.append("clipPath")
      .attr("id", "clip")
    .append("rect")
      .attr("width", width)
      .attr("height", height)
  svg.append("g")
      .attr("clip-path", "url(#clip)")
    .selectAll("myRect")
    .data(rectbinData)
    .enter().append("rect")
      .attr("x", function(d) { return x(d.x) })
      .attr("y", function(d) { return y(d.y) - heightInPx })
      .attr("width", widthInPx )
      .attr("height", heightInPx )
      .attr("fill", function(d) { return color(d.length); })
      .attr("stroke", "black")
      .attr("stroke-width", "0.4")

})
</script>
```

### Related blocks →

- _D3-rectbin documentation -_ by
[Fabian Dubois](https://github.com/fabid/d3-rectbin)

- _Rectangular binning -_ by
[Fabian Dubois](http://blockbuilder.org/fabid/a1a7d04bdd34c2096eaf)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.8490774239843881)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=1794133621025399506359&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=1794133621025399506359)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/1794133621025399506359?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=1794133621025399506359&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=1794133621025399506359)

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_de408a8f-56f6-4105-a029-0fa084716574&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-3E93176308CE7535F3F8B7C9D8761514@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)[iframe](cid:frame-675D0B2C02DBD174FCF4A10D617A72EE@mhtml.blink)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_de408a8f-56f6-4105-a029-0fa084716574)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_de408a8f-56f6-4105-a029-0fa084716574&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-5530C2283277CE7BA8BCCE8F3AD816AE@mhtml.blink)

[iframe](cid:frame-B9C1DFB99DCEFFD3A9B025AFDE985E00@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-431AF7A1CF253C0A413C78961842DCCE@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_de408a8f-56f6-4105-a029-0fa084716574&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

**secure-assets.rubiconproject.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**secure-assets.rubiconproject.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_de408a8f-56f6-4105-a029-0fa084716574)

![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876e8AoIpgALqP1APAQ_wAAChMAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876e8AoIpgALqP1APAQ_wAAChMAAAAB&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876e8AoIpgALqP1APAQ-wAA%262579&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://a.tribalfusion.com/i.match?p=b20&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com/crum%3Fcm_dsp_id%3D131%26external_user_id%3D%24TF_USER_ID_ENC%24&cm_callback_url=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum&cm_user_id=Z876e8AoIpgALqP1APAQ-wAA)![](https://sync.srv.stackadapt.com/sync?nid=68)![](https://t.adx.opera.com/pub/sync?pubid=pub10256699365696&userId=Z876e8AoIpgALqP1APAQ-wAA%262579&gdpr=&us_privacy=)![](https://d.adroll.com/cm/index/tp_out?advertisable=3GMDZMBFQREVBC75SYYKWH)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876e8AoIpgALqP1APAQ_wAAChMAAAAB)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=A881C1CC-DAF5-42E3-9820-2D14278601E7)[iframe](cid:frame-B18B456C49D17E12A7D55373F85B0C4C@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=A881C1CC-DAF5-42E3-9820-2D14278601E7&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=A881C1CC-DAF5-42E3-9820-2D14278601E7&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=qIHBzNr1QuOYIC0UJ4YB5w%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=A881C1CC-DAF5-42E3-9820-2D14278601E7&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/A881C1CC-DAF5-42E3-9820-2D14278601E7?gdpr=0&gdpr_consent=)[iframe](cid:frame-2275065A96F64A8FE7C0F480F8FD56D8@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIKwDII0lwt)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElLd0RJSTBsd3Q=)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=e3808bd5-72d6-c5f5-299a-e2eef7b09119)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/2f9191ec-fed0-ec46-d843-768c60d497b0?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=bb56f7a8-6e7c-7e0f-e994-60799f835af9&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=OTczOTI0NjItYTcwYi0yMGFiLWZjNzQtM2FjMDU1NjE5NDk5)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-C1D1C25798F7687B37632DB4BD830534@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-AE72C7CD31B877A56765AC3E77381A9C@mhtml.blink)

Topics Frame

## Stacked Area Chart
1,8801,9001,9201,9401,9601,9802,000010,00020,00030,00040,00050,00060,00070,00080,00090,000100,000110,000

##### Steps:

- The Html part of the code just creates a
`div` that will be modified by d3 later on.


- The first part of the javascript code set a
`svg` area. It specify the chart size and its
margin. [Read more](https://d3-graph-gallery.com/graph/stackedarea_basic.html).


- Data is available
[here](https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/5_OneCatSevNumOrdered.csv). It shows the evolution of baby names in the US. Note that
it is a long format: 3 columns only.


- To build a stacked area chart, data must be stacked, using
the `d3.stack()` function.


- Once the new coordinates are available, shapes can be added
through `path`, using the
`d3.area()` helper.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/5_OneCatSevNumOrdered.csv", function(data) {

  // group the data: one array for each value of the X axis.
  var sumstat = d3.nest()
    .key(function(d) { return d.year;})
    .entries(data);

  // Stack the data: each group will be represented on top of each other
  var mygroups = ["Helen", "Amanda", "Ashley"] // list of group names
  var mygroup = [1,2,3] // list of group names
  var stackedData = d3.stack()
    .keys(mygroup)
    .value(function(d, key){
      return d.values[key].n
    })
    (sumstat)

  // Add X axis --> it is a date format
  var x = d3.scaleLinear()
    .domain(d3.extent(data, function(d) { return d.year; }))
    .range([ 0, width ]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).ticks(5));

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) { return +d.n; })*1.2])
    .range([ height, 0 ]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // color palette
  var color = d3.scaleOrdinal()
    .domain(mygroups)
    .range(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999'])

  // Show the areas
  svg
    .selectAll("mylayers")
    .data(stackedData)
    .enter()
    .append("path")
      .style("fill", function(d) { name = mygroups[d.key-1] ;  return color(name); })
      .attr("d", d3.area()
        .x(function(d, i) { return x(d.data.key); })
        .y0(function(d) { return y(d[0]); })
        .y1(function(d) { return y(d[1]); })
    )

})
</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          `translate(${margin.left}, ${margin.top})`);

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/5_OneCatSevNumOrdered.csv").then( function(data) {

  // group the data: one array for each value of the X axis.
  const sumstat = d3.group(data, d => d.year);

  // Stack the data: each group will be represented on top of each other
  const mygroups = ["Helen", "Amanda", "Ashley"] // list of group names
  const mygroup = [1,2,3] // list of group names
  const stackedData = d3.stack()
    .keys(mygroup)
    .value(function(d, key){
      return d[1][key].n
    })
    (sumstat)

  // Add X axis --> it is a date format
  const x = d3.scaleLinear()
    .domain(d3.extent(data, function(d) { return d.year; }))
    .range([ 0, width ]);
  svg.append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x).ticks(5));

  // Add Y axis
  const y = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) { return +d.n; })*1.2])
    .range([ height, 0 ]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // color palette
  const color = d3.scaleOrdinal()
    .domain(mygroups)
    .range(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999'])

  // Show the areas
  svg
    .selectAll("mylayers")
    .data(stackedData)
    .join("path")
      .style("fill", function(d) { name = mygroups[d.key-1] ;  return color(name); })
      .attr("d", d3.area()
        .x(function(d, i) { return x(d.data[0]); })
        .y0(function(d) { return y(d[0]); })
        .y1(function(d) { return y(d[1]); })
    )
})
</script>
```

### Related blocks →

- _TO DO -_ [link](https://d3-graph-gallery.com/graph/stackedarea_basic.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.8824693027479067)

Prebid User Sync

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=e6fe5b38-6c6c-45ba-b1c8-753ca49761d5)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/4be7b2b3-455f-e41a-eb93-a3dcda9b6e11?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=df20d4f7-d5f3-7653-da44-b52925cca358&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZjM0ZjA3M2QtMWM4NC0yOGY3LWNmYTQtZWY5MGVmMmU2ZDM4)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=33across&endpoint=us-east&us\_privacy=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=33across&endpoint=us-east&us\_privacy=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_4bb31484-c6f6-4624-8c31-46c0ce24e9d4&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-2110BAC2A9E8D9FB3F16DB3A163F8F5D@mhtml.blink)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.adsrvr.org

# This site can’t be reached

**match.adsrvr.org** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**match.adsrvr.org** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-58078504B6AA10E9D4925087032D25A2@mhtml.blink)[iframe](cid:frame-59A4EBEA0B003ED63CD847093142063A@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_4bb31484-c6f6-4624-8c31-46c0ce24e9d4&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_4bb31484-c6f6-4624-8c31-46c0ce24e9d4)

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876fMAoJcsAOI5ZAHctLgAA%262942&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876fMAoJcsAOI5ZAHctLgAAC34AAAAB&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://match.adsrvr.org/track/cmf/casale)![](https://pm.w55c.net/ping_match.gif?ei=CASALE&rurl=https://dsum-sec.casalemedia.com/crum?cm_dsp_id=47&external_user_id=_wfivefivec_)![](https://cm.adgrx.com/bridge?AG_PID=casale&AG_SETCOOKIE)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://www.temu.com/api/adx/cm/pixel-index?cm_user_id=Z876fMAoJcsAOI5ZAHctLgAAC34AAAAB)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876fMAoJcsAOI5ZAHctLgAAC34AAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=100728a6-0646-4a14-b00d-e16a3a54ba1b)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=MTAwNzI4YTYtMDY0Ni00YTE0LWIwMGQtZTE2YTNhNTRiYTFi)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://c1.adform.net/serving/cookie/match?party=1294&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/sharethrough)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=CD48D693-63DE-44C1-A0D9-F1F0C61C47B3)[iframe](cid:frame-FBD55FCB4826456851A8E86B5562518F@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=CD48D693-63DE-44C1-A0D9-F1F0C61C47B3&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=CD48D693-63DE-44C1-A0D9-F1F0C61C47B3&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=Q0Q0OEQ2OTMtNjNERS00NEMxLUEwRDktRjFGMEM2MUM0N0Iz&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=zUjWk2PeRMGg2fHwxhxHsw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=CD48D693-63DE-44C1-A0D9-F1F0C61C47B3&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-47EF77478FE09E22991B52D3F1B2BD1D@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHI15QcB_rqU)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHI15QcB_rqU&cb=1741617788054&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSEkxNVFjQl9ycVU=)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=87f6a88a-c959-cda9-1a4a-37be4dff68b8)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=d95ea70b-8ef4-4bd4-90a5-2dff16406254)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)

[iframe](cid:frame-B3D55052F640F5FC265556F6EB74266E@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-C92473C1FE98219ECB96A7786CDA7D83@mhtml.blink)

securepubads.g.doubleclick.net

# This site can’t be reached

**securepubads.g.doubleclick.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**securepubads.g.doubleclick.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://pbs-raptive-us.ay.delivery/setuid?bidder=openx&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=e6fe5b38-6c6c-45ba-b1c8-753ca49761d5)![](https://x.bidswitch.net/sync?ssp=openx)![](https://id.rlcdn.com/709996.gif)![](https://idpix.media6degrees.com/orbserv/hbpix?pixId=856286&pcv=125&ptid=23&tpuv=00&tpu=738d417d-cd6b-5365-2d6d-feda0001e39a)![](https://sync.srv.stackadapt.com/sync?nid=268)![](https://b1sync.zemanta.com/usersync/openx?puid=f4edaeb1-3e7b-47d1-8d77-29eb06dc7d23&cb=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D560843120%26val%3D__ZUID__)![](https://rtb.openx.net/sync/dds)

## D3.js Pie Chart Tutorial
grp agrp bgrp cgrp dgrp e

##### Steps:

- Warning: are you sure you want to use a pie chart?
Learn why
[it is not recommended](https://www.data-to-viz.com/caveat/pie.html).


- Start by learning how to build the most basic
[pie chart](https://d3-graph-gallery.com/graph/pie_basic.html).


- Here the label positions are computed thanks to the
`centroid()` function.


- Note that a color scale is used for group, as explained
[here](https://d3-graph-gallery.com/graph/custom_color.html).


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<!-- Color scale -->
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var width = 450
    height = 450
    margin = 40

// The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.
var radius = Math.min(width, height) / 2 - margin

// append the svg object to the div called 'my_dataviz'
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// Create dummy data
var data = {a: 9, b: 20, c:30, d:8, e:12}

// set the color scale
var color = d3.scaleOrdinal()
  .domain(data)
  .range(d3.schemeSet2);

// Compute the position of each group on the pie:
var pie = d3.pie()
  .value(function(d) {return d.value; })
var data_ready = pie(d3.entries(data))
// Now I know that group A goes from 0 degrees to x degrees and so on.

// shape helper to build arcs:
var arcGenerator = d3.arc()
  .innerRadius(0)
  .outerRadius(radius)

// Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
svg
  .selectAll('mySlices')
  .data(data_ready)
  .enter()
  .append('path')
    .attr('d', arcGenerator)
    .attr('fill', function(d){ return(color(d.data.key)) })
    .attr("stroke", "black")
    .style("stroke-width", "2px")
    .style("opacity", 0.7)

// Now add the annotation. Use the centroid method to get the best coordinates
svg
  .selectAll('mySlices')
  .data(data_ready)
  .enter()
  .append('text')
  .text(function(d){ return "grp " + d.data.key})
  .attr("transform", function(d) { return "translate(" + arcGenerator.centroid(d) + ")";  })
  .style("text-anchor", "middle")
  .style("font-size", 17)

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const width = 450,
    height = 450,
    margin = 40;

// The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.
const radius = Math.min(width, height) / 2 - margin

// append the svg object to the div called 'my_dataviz'
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", `translate(${width / 2}, ${height / 2})`);

// Create dummy data
const data = {a: 9, b: 20, c:30, d:8, e:12}

// set the color scale
const color = d3.scaleOrdinal()
  .range(d3.schemeSet2);

// Compute the position of each group on the pie:
const pie = d3.pie()
  .value(function(d) {return d[1]})
const data_ready = pie(Object.entries(data))
// Now I know that group A goes from 0 degrees to x degrees and so on.

// shape helper to build arcs:
const arcGenerator = d3.arc()
  .innerRadius(0)
  .outerRadius(radius)

// Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
svg
  .selectAll('mySlices')
  .data(data_ready)
  .join('path')
    .attr('d', arcGenerator)
    .attr('fill', function(d){ return(color(d.data[0])) })
    .attr("stroke", "black")
    .style("stroke-width", "2px")
    .style("opacity", 0.7)

// Now add the annotation. Use the centroid method to get the best coordinates
svg
  .selectAll('mySlices')
  .data(data_ready)
  .join('text')
  .text(function(d){ return "grp " + d.data[0]})
  .attr("transform", function(d) { return `translate(${arcGenerator.centroid(d)})`})
  .style("text-anchor", "middle")
  .style("font-size", 17)
</script>
```

### Related blocks →

- _Shape helpers -_ in
[the d3 graph gallery](https://d3-graph-gallery.com/graph/shape.html)

- _Create Pie Chart using D3 -_ in
[TutorialsTeacher](http://www.tutorialsteacher.com/d3js/create-pie-chart-using-d3js)

- _Arc generator (centroid) -_ in
[d3indepth](https://bl.ocks.org/d3indepth/c9fd848b9410cc543a437b34c266ac64)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.5239246587461093)

Document

Prebid User Sync

![](https://idsync.rlcdn.com/420486.gif?partner_uid=FC926A01-E935-4629-B3F9-DE55292D035F)

c1.adform.net

# This site can’t be reached

**c1.adform.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**c1.adform.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.onaudience.com/?partner=214&mapped=FC926A01-E935-4629-B3F9-DE55292D035F&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=FC926A01-E935-4629-B3F9-DE55292D035F&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=_JJqAek1Rimz-d5VKS0DXw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=FC926A01-E935-4629-B3F9-DE55292D035F&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/FC926A01-E935-4629-B3F9-DE55292D035F?gdpr=0&gdpr_consent=)[iframe](cid:frame-F4DBFFEE980D21986FC2EB88410A1EA5@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)

match.deepintent.com

# This site can’t be reached

**match.deepintent.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**match.deepintent.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-F5E8631D0AEBEAFA4EA4E8AEA3917DDC@mhtml.blink)

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_22e504d8-8b0e-4be4-8b3a-04ac5e065891&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

**c1.adform.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**c1.adform.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-767E72FA399BE6579A2E48E78362D373@mhtml.blink)

[iframe](cid:frame-BAAC69EA78C83AFB62AC03652836A39A@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-AF9AEA1E7C2106A7A8978E9B06BA3B69@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

secure-assets.rubiconproject.com

# This site can’t be reached

**secure-assets.rubiconproject.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**secure-assets.rubiconproject.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_22e504d8-8b0e-4be4-8b3a-04ac5e065891)

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=ceab77f0-502c-4479-a3b7-0a338699bc68)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=f10b8bc3-b2b4-4a17-82da-52f0344ebfe9)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=71948724469647642641&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=71948724469647642641)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/71948724469647642641?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=71948724469647642641&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=71948724469647642641)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)

![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_22e504d8-8b0e-4be4-8b3a-04ac5e065891&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-8827F50E3B8283B61A7487312D141B7A@mhtml.blink)

creativecdn.com

# This site can’t be reached

**creativecdn.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**creativecdn.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_22e504d8-8b0e-4be4-8b3a-04ac5e065891&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

[iframe](cid:frame-399B2B2FCEA9E5D35BED2797F20DB9B3@mhtml.blink)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_22e504d8-8b0e-4be4-8b3a-04ac5e065891)

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876fNHM4IIAJtiQAIVXigAA%26428&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876fNHM4IIAJtiQAIVXigAAAawAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876fNHM4IIAJtiQAIVXigAAAawAAAAB&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://trace.mediago.io/ju/cs/indexexchange)![](https://match.deepintent.com/usersync/113)![](https://beacon.lynx.cognitivlabs.com/ix.gif)![](https://s.company-target.com/s/ix?cm_dsp_id=18&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876fNHM4IIAJtiQAIVXigAAAawAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=3c70b80c-6d40-4f08-993a-09332fae20c7)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=M2M3MGI4MGMtNmQ0MC00ZjA4LTk5M2EtMDkzMzJmYWUyMGM3)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://bttrack.com/pixel/cookiesyncredir?rurl=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DFGhqNjC2WnFmmvNpTL32LMME%26source_user_id%3D%7Bglobalid%7D%26gdpr%3D0%26gdpr_consent%3D)![](https://sid.storygize.net/ccm/c9dd71b6-fd13-4133-bf5d-b88619cef491)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHuII0RHI2U61FtboZ)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHuII0RHI2U61FtboZ&cb=1741617788206&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHuII0RHI2U61FtboZ)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=afa38442-f519-cc6a-0835-48b16ff1b505)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/63b29e7b-791f-e5d9-f9ec-dcd3f895b3ac?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=f775f83f-e9b3-7790-c83b-ca2607c27ee5&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZGIxYTJiZjUtMjBjNC0yOTM0LWRkZGItOTA5ZmNkMjBiMDg1)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-187733BE5C53511FA8690FF8C8831180@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-54FA669B050CFACDDDBF305076E8BE3C@mhtml.blink)

Topics Frame

## Responsive D3.js Charts
# Most basic example

* * *

A common pattern to make a chart responsive:

- Recover the current div `width` with this piece of code: `parseInt(d3.select('#my_dataviz').style('width'), 10)`
- A function that draws a chart for a specific `width` is created
- An event listener will run this function each time the `div` size changes

020406080100120140

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the chart will take place -->
<div id="div_basicResize"></div>

```

``` js
<script>

// Initialize a SVG area. Note that the width is not specified yet, since unknown
var Svg = d3.select("#div_basicResize")
  .append("svg")
  .attr("height", 200)

// Create dummy data
var data = [19, 13, 54, 78, 98, 120, 138]

// Add X axis. Note that we don't know the range yet, so we cannot draw it.
var x = d3.scaleLinear()
  .domain([0, 150])
var xAxis = Svg.append("g")
  .attr("transform", "translate(0,150)")

// Initialize circles. Note that the X scale is not available yet, so we cannot draw them
var myCircles = Svg
  .selectAll("circles")
  .data(data)
  .enter()
  .append("circle")
    .style("fill", "#69b2b3")
    .attr("r", 20)
    .attr("cy", 100)

// A function that finishes to draw the chart for a specific device size.
function drawChart() {

  // get the current width of the div where the chart appear, and attribute it to Svg
  currentWidth = parseInt(d3.select('#div_basicResize').style('width'), 10)
  Svg.attr("width", currentWidth)

  // Update the X scale and Axis (here the 20 is just to have a bit of margin)
  x.range([ 20, currentWidth-20 ]);
  xAxis.call(d3.axisBottom(x))

  // Add the last information needed for the circles: their X position
  myCircles
    .attr("cx", function(d){ return x(d)})
  }

// Initialize the chart
drawChart()

// Add an event listener that run the function when dimension change
window.addEventListener('resize', drawChart );

</script>
```

# Application to an area chart

* * *

First of all, make sure you understood how this [basic area chart](https://d3-graph-gallery.com/graph/area_basic.html) is built with d3.js. The following example just uses the concept described above to make it responsive. Try to change the window size!

# Better performance with `debouncing`

* * *

The most common way to add responsiveness in d3.js is to use an event listener. Here is the basic idea:

# The advantage of bootstrap

* * *

Using the bootstrap grid as a workaround for responsiveness

## Related blocks

- _Responsive D3js chart -_ by [Derek Morash](https://ablesense.com/blogs/news/responsive-d3js-charts)

- _D3.js v4 Example/Tutorial: Responsive Bar Chart -_ by [Alan Villalobos](https://bl.ocks.org/alanvillalobos/14e9f0d80ea6b0d8083ba95a9d571d13)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

Prebid User Sync

rtb.gumgum.com

# This site can’t be reached

The webpage at **https://rtb.gumgum.com/usync/11685?gdpr=&gdpr\_consent=&us\_privacy=&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dgumgum%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://rtb.gumgum.com/usync/11685?gdpr=&gdpr\_consent=&us\_privacy=&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dgumgum%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=3558474573167100805565&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=3558474573167100805565)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/3558474573167100805565?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=3558474573167100805565&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3558474573167100805565)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_f381d98c-401b-4de7-bdcd-7522efbcd567&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9mMzgxZDk4Yy00MDFiLTRkZTctYmRjZC03NTIyZWZiY2Q1Njc=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9mMzgxZDk4Yy00MDFiLTRkZTctYmRjZC03NTIyZWZiY2Q1Njc=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-5B32C2F51B6FB459EC9D4C5084D7C2D3@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-52FC1906D64E20B84D3A8A1CB338083F@mhtml.blink)[iframe](cid:frame-F56A88C0749C27E78B263C14876E88C9@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_f381d98c-401b-4de7-bdcd-7522efbcd567&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_f381d98c-401b-4de7-bdcd-7522efbcd567)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=394C172D-A47C-47D7-ABA4-A13FF0EC7EE3)[iframe](cid:frame-19D823267D4838990D58B0F6C493F69F@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=394C172D-A47C-47D7-ABA4-A13FF0EC7EE3&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=394C172D-A47C-47D7-ABA4-A13FF0EC7EE3&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=Mzk0QzE3MkQtQTQ3Qy00N0Q3LUFCQTQtQTEzRkYwRUM3RUUz&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=OUwXLaR8R9erpKE_8Ox-4w%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=394C172D-A47C-47D7-ABA4-A13FF0EC7EE3&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-4E749221A1DD459A3280BFDA16558698@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHI8XuSnaVFW)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHI8XuSnaVFW)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSEk4WHVTbmFWRlc=)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=dea3d349-748c-ca22-2aa1-36cb023e7c74)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/12b2c970-f88a-e391-db78-a2a9955a7add?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=8675af34-6826-71d8-eaaf-b45c6a0db794&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=YWExYTdjZmUtYTE1MS0yZjdjLWZmNGYtZWVlNWEwZWY3OWY0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/bounce?%2Fgetuid%3Fhttps%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fid%3D%24UID%26ex%3Dappnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/bounce?%2Fgetuid%3Fhttps%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fid%3D%24UID%26ex%3Dappnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

ssp-sync.criteo.com

# This site can’t be reached

**ssp-sync.criteo.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ssp-sync.criteo.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-BE0426B3D115CB18062F4FC235BBFC65@mhtml.blink)

## Bubble Map Visualization
![](https://c.tile.openstreetmap.org/5/15/11.png)![](https://a.tile.openstreetmap.org/5/16/11.png)![](https://b.tile.openstreetmap.org/5/15/10.png)![](https://c.tile.openstreetmap.org/5/16/10.png)![](https://a.tile.openstreetmap.org/5/15/12.png)![](https://b.tile.openstreetmap.org/5/16/12.png)![](https://b.tile.openstreetmap.org/5/14/11.png)![](https://b.tile.openstreetmap.org/5/17/11.png)![](https://a.tile.openstreetmap.org/5/14/10.png)![](https://a.tile.openstreetmap.org/5/17/10.png)![](https://c.tile.openstreetmap.org/5/14/12.png)![](https://c.tile.openstreetmap.org/5/17/12.png)![](https://a.tile.openstreetmap.org/5/13/11.png)![](https://c.tile.openstreetmap.org/5/18/11.png)![](https://c.tile.openstreetmap.org/5/13/10.png)![](https://b.tile.openstreetmap.org/5/18/10.png)![](https://b.tile.openstreetmap.org/5/13/12.png)![](https://a.tile.openstreetmap.org/5/18/12.png)![](https://c.tile.openstreetmap.org/5/12/11.png)![](https://a.tile.openstreetmap.org/5/19/11.png)![](https://b.tile.openstreetmap.org/5/12/10.png)![](https://c.tile.openstreetmap.org/5/19/10.png)![](https://a.tile.openstreetmap.org/5/12/12.png)![](https://b.tile.openstreetmap.org/5/19/12.png)

[+](https://d3-graph-gallery.com/graph/bubblemap_leaflet_basic.html# "Zoom in") [−](https://d3-graph-gallery.com/graph/bubblemap_leaflet_basic.html# "Zoom out")

[Leaflet](http://leafletjs.com/ "A JS library for interactive maps") \| Map data © [OpenStreetMap](https://www.openstreetmap.org/)

##### Steps:

- First of all, you need to know how to plot a
[basic background map with leaflet](https://d3-graph-gallery.com/graph/backgroundmap_leaflet.html).


- Then we just add circles for each data points as we would do
for a [scatter plot](https://d3-graph-gallery.com/scatter.html) or a
[bubble plot](https://d3-graph-gallery.com/bubble.html).


- The only trick is that latitude and longitude coordinates
must be converted to pixels. This is done thanks to the
`latLngToLayerPoint` leaflet function.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js and the geo projection plugin -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<!-- Load Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>

<!-- Create an element where the map will take place -->
<div id="mapid"></div>

<style>
#mapid { height: 400px; }
</style>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Load Leaflet -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>

<!-- Create an element where the map will take place -->
<div id="mapid"></div>

<style>
#mapid { height: 400px; }
</style>

```

``` js
<script>
// mapid is the id of the div where the map will appear
var map = L
  .map('mapid')
  .setView([47, 2], 5);   // center position + zoom

// Add a tile to the map = a background. Comes from OpenStreetmap
L.tileLayer(
    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
    maxZoom: 6,
    }).addTo(map);

// Add a svg layer to the map
L.svg().addTo(map);

// Create data for circles:
var markers = [\
  {long: 9.083, lat: 42.149}, // corsica\
  {long: 7.26, lat: 43.71}, // nice\
  {long: 2.349, lat: 48.864}, // Paris\
  {long: -1.397, lat: 43.664}, // Hossegor\
  {long: 3.075, lat: 50.640}, // Lille\
  {long: -3.83, lat: 48}, // Morlaix\
];

// Select the svg area and add circles:
d3.select("#mapid")
  .select("svg")
  .selectAll("myCircles")
  .data(markers)
  .enter()
  .append("circle")
    .attr("cx", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).x })
    .attr("cy", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).y })
    .attr("r", 14)
    .style("fill", "red")
    .attr("stroke", "red")
    .attr("stroke-width", 3)
    .attr("fill-opacity", .4)

// Function that update circle position if something change
function update() {
  d3.selectAll("circle")
    .attr("cx", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).x })
    .attr("cy", function(d){ return map.latLngToLayerPoint([d.lat, d.long]).y })
}

// If the user change the map (zoom or drag), I update circle position:
map.on("moveend", update)

</script>
```

``` js
<script>

// mapid is the id of the div where the map will appear
const map = L
  .map('mapid')
  .setView([47, 2], 5);   // center position + zoom

// Add a tile to the map = a background. Comes from OpenStreetmap
L.tileLayer(
    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
    maxZoom: 6,
    }).addTo(map);

// Add a svg layer to the map
L.svg().addTo(map);

// Create data for circles:
const markers = [\
  {long: 9.083, lat: 42.149}, // corsica\
  {long: 7.26, lat: 43.71}, // nice\
  {long: 2.349, lat: 48.864}, // Paris\
  {long: -1.397, lat: 43.664}, // Hossegor\
  {long: 3.075, lat: 50.640}, // Lille\
  {long: -3.83, lat: 48}, // Morlaix\
];

// Select the svg area and add circles:
d3.select("#mapid")
  .select("svg")
  .selectAll("myCircles")
  .data(markers)
  .join("circle")
    .attr("cx", d => map.latLngToLayerPoint([d.lat, d.long]).x)
    .attr("cy", d => map.latLngToLayerPoint([d.lat, d.long]).y)
    .attr("r", 14)
    .style("fill", "red")
    .attr("stroke", "red")
    .attr("stroke-width", 3)
    .attr("fill-opacity", .4)

// Function that update circle position if something change
function update() {
  d3.selectAll("circle")
    .attr("cx", d => map.latLngToLayerPoint([d.lat, d.long]).x)
    .attr("cy", d => map.latLngToLayerPoint([d.lat, d.long]).y)
}

// If the user change the map (zoom or drag), I update circle position:
map.on("moveend", update)

</script>
```

### Related blocks →

- _France population -_ by
[Brice Pierre de la Briere](https://bl.ocks.org/bricedev/97c53d6ed168902239f7)

- _D3-geo-projection Documentation -_ by
[Mike Bostock](https://github.com/d3/d3-geo-projection)

- _Basic background map -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/graph/backgroundmap_basic.html)

- _D3 v4 + leaflet v1 -_ by
[shimizu](http://bl.ocks.org/shimizu/749df041c1945aef78fd992c7dfbe0e1)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.8033693212671436)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/casale)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876fMAoIrUALMEtAPAvMgAACjAAAAIB&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876fMAoIrUALMEtAPAvMgAACjAAAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876fMAoIrUALMEtAPAvMgAA%262608&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://www.temu.com/api/adx/cm/pixel-index?cm_user_id=Z876fMAoIrUALMEtAPAvMgAACjAAAAIB)![](https://p.rfihub.com/cm?in=1&pub=2079)![](https://c1.adform.net/serving/cookie/match?party=29)![](https://sync.mathtag.com/sync/img?mt_exid=15&redir=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fcm_dsp_id%3D3%26external_user_id%3D%5BMM_UUID%5D&us_privacy=&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876fMAoIrUALMEtAPAvMgAA%262608)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_0a8fe715-f096-42fd-8d91-0e5aa77bba61&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-9655E2092A20F64914B64E55AC16FAD8@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-4012A7B137115B33B5B7EAAE97690C31@mhtml.blink)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=98976273-3E2A-4C7B-981B-64A2AB19D1E4)[iframe](cid:frame-132AE56592704B4E99F7847234233C17@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=98976273-3E2A-4C7B-981B-64A2AB19D1E4&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=98976273-3E2A-4C7B-981B-64A2AB19D1E4&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=OTg5NzYyNzMtM0UyQS00QzdCLTk4MUItNjRBMkFCMTlEMUU0&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=mJdicz4qTHuYG2SiqxnR5A%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=98976273-3E2A-4C7B-981B-64A2AB19D1E4&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/98976273-3E2A-4C7B-981B-64A2AB19D1E4?gdpr=0&gdpr_consent=)[iframe](cid:frame-B53CFE90860381E71DB16E013100D0F1@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)[iframe](cid:frame-564FB66736C6302F3C63E97B4807C805@mhtml.blink)[iframe](cid:frame-1A345FB35EC89A8ECAE9B93A63E3F715@mhtml.blink)

[iframe](cid:frame-AD36F492E81AE09E81E2D41383817B4C@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-1D894B1C8C8FF7E397F8ABAAC421614A@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_0a8fe715-f096-42fd-8d91-0e5aa77bba61&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_0a8fe715-f096-42fd-8d91-0e5aa77bba61)

ssum-sec.casalemedia.com

# This site can’t be reached

**ssum-sec.casalemedia.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ssum-sec.casalemedia.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.sharethrough.com

# This site can’t be reached

**match.sharethrough.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**match.sharethrough.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

**ads.pubmatic.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ads.pubmatic.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

sync-amz.ads.yieldmo.com

# This site can’t be reached

**sync-amz.ads.yieldmo.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**sync-amz.ads.yieldmo.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

**u.openx.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**u.openx.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-14833F774A66AFDF84348A2F76B56952@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

**eb2.3lift.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**eb2.3lift.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?gdpr=&gdpr\_consent=&us\_privacy=1YNY&gpp=&gpp\_sid=&predirect=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dpubmatic%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D1YNY%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?gdpr=&gdpr\_consent=&us\_privacy=1YNY&gpp=&gpp\_sid=&predirect=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dpubmatic%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D1YNY%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/sync?us\_privacy=1YNY&** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/sync?us\_privacy=1YNY&** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

gum.criteo.com

# This site can’t be reached

The webpage at **https://gum.criteo.com/syncframe?origin=criteoPrebidAdapter&topUrl=d3-graph-gallery.com&us\_privacy=1YNY&gpp=#{"bundle":"MqE08V82UEtSYlBHNVh2ZkVEbUwlMkZHU1N6VXYwdjlnS2s0SEJoJTJCdzFZQjJtNkd4dzJma3RrblFOZmhBS1NYT0xBcFBndWNXdlhQWXB5bkdSbyUyRkJqRSUyRlRYS2wyRElFYXVhUlNlcnY5STFyOHFEJTJCcWtRdkNIMGpEWGlKajhnRSUyQjJOc0E1MA","cw":false,"lsw":true,"origin":"criteoPrebidAdapter","requestId":"0.3800684379399397","tld":"d3-graph-gallery.com","topUrl":"d3-graph-gallery.com","version":"9\_26\_0"}** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://gum.criteo.com/syncframe?origin=criteoPrebidAdapter&topUrl=d3-graph-gallery.com&us\_privacy=1YNY&gpp=#{"bundle":"MqE08V82UEtSYlBHNVh2ZkVEbUwlMkZHU1N6VXYwdjlnS2s0SEJoJTJCdzFZQjJtNkd4dzJma3RrblFOZmhBS1NYT0xBcFBndWNXdlhQWXB5bkdSbyUyRkJqRSUyRlRYS2wyRElFYXVhUlNlcnY5STFyOHFEJTJCcWtRdkNIMGpEWGlKajhnRSUyQjJOc0E1MA","cw":false,"lsw":true,"origin":"criteoPrebidAdapter","requestId":"0.3800684379399397","tld":"d3-graph-gallery.com","topUrl":"d3-graph-gallery.com","version":"9\_26\_0"}** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=3551247529473696977419&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=3551247529473696977419)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/3551247529473696977419?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=3551247529473696977419&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)

Pixels![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/090dec40-ee65-ede1-ea0c-4cfee1760863?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=9dca8a04-7ec9-7fa8-dbdb-5a0b1e21c52a&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=YjFhNTU5Y2UtYjdiZS0yMTBjLWNlM2ItMDBiMmQ0YzMwYjRh)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/pd?us\_privacy=1YNY&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/pd?us\_privacy=1YNY&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

cdn.undertone.com

# This site can’t be reached

The webpage at **https://cdn.undertone.com/js/usersync.html?ccpa=1YNY** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cdn.undertone.com/js/usersync.html?ccpa=1YNY** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

User-Sync

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?kdntuid=1&p=157347&us\_privacy=1YNY** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?kdntuid=1&p=157347&us\_privacy=1YNY** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

## D3.js Heatmap Tooltip
ABCDEFGHIJv1v2v3v4v5v6v7v8v9v10

##### Steps:

- The Html part of the code just creates a
`div` that will be modified by d3 later on.


- The first part of the javascript code set a
`svg` area. It specify the chart size and its
margin. [Read more](https://d3-graph-gallery.com/graph/heatmap_tooltip.html).


- A
[dummy dataset](https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv)
has been created for this example, at the long format. (3
columns: row, col, value).


- The first step is to build scales and axis. Thus each entity
will have a position on the grid.


- A `scaleBand()` is used, which allows to control
the size of each square using the
`padding property`. If padding is close from 1,
square are very small. (0 for very big)


- Finally, each square can be added using a
`rect` element.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 30, left: 30},
  width = 450 - margin.left - margin.right,
  height = 450 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
.append("g")
  .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");

// Labels of row and columns
var myGroups = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
var myVars = ["v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "v10"]

// Build X scales and axis:
var x = d3.scaleBand()
  .range([ 0, width ])
  .domain(myGroups)
  .padding(0.01);
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))

// Build X scales and axis:
var y = d3.scaleBand()
  .range([ height, 0 ])
  .domain(myVars)
  .padding(0.01);
svg.append("g")
  .call(d3.axisLeft(y));

// Build color scale
var myColor = d3.scaleLinear()
  .range(["white", "#69b3a2"])
  .domain([1,100])

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv", function(data) {

  // create a tooltip
  var tooltip = d3.select("#my_dataviz")
    .append("div")
    .style("opacity", 0)
    .attr("class", "tooltip")
    .style("background-color", "white")
    .style("border", "solid")
    .style("border-width", "2px")
    .style("border-radius", "5px")
    .style("padding", "5px")

  // Three function that change the tooltip when user hover / move / leave a cell
  var mouseover = function(d) {
    tooltip.style("opacity", 1)
  }
  var mousemove = function(d) {
    tooltip
      .html("The exact value of<br>this cell is: " + d.value)
      .style("left", (d3.mouse(this)[0]+70) + "px")
      .style("top", (d3.mouse(this)[1]) + "px")
  }
  var mouseleave = function(d) {
    tooltip.style("opacity", 0)
  }

  // add the squares
  svg.selectAll()
    .data(data, function(d) {return d.group+':'+d.variable;})
    .enter()
    .append("rect")
      .attr("x", function(d) { return x(d.group) })
      .attr("y", function(d) { return y(d.variable) })
      .attr("width", x.bandwidth() )
      .attr("height", y.bandwidth() )
      .style("fill", function(d) { return myColor(d.value)} )
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseleave", mouseleave)
})

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 30, right: 30, bottom: 30, left: 30},
  width = 450 - margin.left - margin.right,
  height = 450 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
.append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
.append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

// Labels of row and columns
const myGroups = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"]
const myVars = ["v1", "v2", "v3", "v4", "v5", "v6", "v7", "v8", "v9", "v10"]

// Build X scales and axis:
const x = d3.scaleBand()
  .range([ 0, width ])
  .domain(myGroups)
  .padding(0.01);
svg.append("g")
  .attr("transform", `translate(0, ${height})`)
  .call(d3.axisBottom(x))

// Build X scales and axis:
const y = d3.scaleBand()
  .range([ height, 0 ])
  .domain(myVars)
  .padding(0.01);
svg.append("g")
  .call(d3.axisLeft(y));

// Build color scale
const myColor = d3.scaleLinear()
  .range(["white", "#69b3a2"])
  .domain([1,100])

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv").then( function(data) {

  // create a tooltip
  const tooltip = d3.select("#my_dataviz")
    .append("div")
    .style("opacity", 0)
    .attr("class", "tooltip")
    .style("background-color", "white")
    .style("border", "solid")
    .style("border-width", "2px")
    .style("border-radius", "5px")
    .style("padding", "5px")

  // Three function that change the tooltip when user hover / move / leave a cell
  const mouseover = function(event,d) {
    tooltip.style("opacity", 1)
  }
  const mousemove = function(event,d) {
    tooltip
      .html("The exact value of<br>this cell is: " + d.value)
      .style("left", (event.x)/2 + "px")
      .style("top", (event.y)/2 + "px")
  }
  const mouseleave = function(d) {
    tooltip.style("opacity", 0)
  }

  // add the squares
  svg.selectAll()
    .data(data, function(d) {return d.group+':'+d.variable;})
    .enter()
    .append("rect")
      .attr("x", function(d) { return x(d.group) })
      .attr("y", function(d) { return y(d.variable) })
      .attr("width", x.bandwidth() )
      .attr("height", y.bandwidth() )
      .style("fill", function(d) { return myColor(d.value)} )
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseleave", mouseleave)
})
</script>
```

### Related blocks →

- _Day / Hour Heatmap -_ by
[Tom May](http://bl.ocks.org/tjdecke/5558084)

- _Visualize Data with a HeatMap using d3.js -_ [Robert Valmassoi](https://codepen.io/valmassoi/pen/aNGryB)

- _heatmap -_ by
[Ian YF Chang](http://bl.ocks.org/ianyfchang/8119685)

- _Basic tooltip in d3.js_ [link](https://d3-graph-gallery.com/graph/interactivity_tooltip.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.004132550528286538)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=4563681805492774803730&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=4563681805492774803730)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/4563681805492774803730?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=4563681805492774803730&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=4563681805492774803730)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_c5105d8b-5a30-4fca-a253-c8a2b20717ee&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9jNTEwNWQ4Yi01YTMwLTRmY2EtYTI1My1jOGEyYjIwNzE3ZWU=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9jNTEwNWQ4Yi01YTMwLTRmY2EtYTI1My1jOGEyYjIwNzE3ZWU=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-0F82C6F5F3DF6A2848D5C0FADD8E13D8@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-B49841B730CA7B4129C6493BB584A071@mhtml.blink)[iframe](cid:frame-753E0BA40506355147D78B8663726D35@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_c5105d8b-5a30-4fca-a253-c8a2b20717ee&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_c5105d8b-5a30-4fca-a253-c8a2b20717ee)

![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876e8AoJcUANULcAGzqJgAAC3gAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876e8AoJcUANULcAGzqJgAA%262936&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876e8AoJcUANULcAGzqJgAAC3gAAAAB&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://tr.blismedia.com/v1/api/sync/indexexchange?gdpr=&userId=Z876e8AoJcUANULcAGzqJgAA%262936&gpp=&gpp_sid=&us_privacy=&gdpr_consent=)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://b1sync.zemanta.com/usersync/index/?puid=Z876e8AoJcUANULcAGzqJgAA%262936&cb=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fexternal_user_id%3D_ZUID_&gdpr=&gdpr_consent=&us_privacy=)![](https://secure.adnxs.com/getuid?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=46&external_user_id=$UID)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876e8AoJcUANULcAGzqJgAAC3gAAAAB)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=C5F5849A-3DD6-4640-A62F-DD23C565BB83)[iframe](cid:frame-6F3C1CE671B954B8AC55AA5B2F757051@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=C5F5849A-3DD6-4640-A62F-DD23C565BB83&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=C5F5849A-3DD6-4640-A62F-DD23C565BB83&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=QzVGNTg0OUEtM0RENi00NjQwLUE2MkYtREQyM0M1NjVCQjgz&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=xfWEmj3WRkCmL90jxWW7gw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=C5F5849A-3DD6-4640-A62F-DD23C565BB83&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-0E59AF0A348F162ED469ED9F8AE7B04B@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIZvQU5H95A)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIZvQU5H95A)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIZvQU5H95A)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=e7f197af-b808-c048-0f3a-17a11548ef15)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/2be08d96-340e-e9fb-fee3-83c3822ce9bc?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=bf27ebd2-a4a2-7bb2-cf34-95367d7b24f5&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=OTM0ODM4MTgtNmRkNS0yNTE2LWRhZDQtY2Y4ZmI3OTllYTk1)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-BACF82842CB744D5C3A761993D4D1E41@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-17EF33B561F6FFF936881686BD405FCD@mhtml.blink)

Topics Frame

Pixels![](https://pbs-raptive-us.ay.delivery/setuid?bidder=openx&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=86f9641d-1d3d-485b-a4b8-5523fc20e678)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=b959982e-ffa5-4635-85d5-0de04ef7e5f9)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

## D3.js Stacked Barplot
bananapoaceesorghotriticum051015202530354045505560

##### Steps:

- Follows the previous
[basic stacked barplot](https://d3-graph-gallery.com/graph/barplot_stacked_basicWide.html)

- Visit the
[tooltip section](https://d3-graph-gallery.com/graph/interactivity_tooltip.html) of
the gallery to understand the general logic behind tooltip.


- Here, the tricky part is to recover the subgroup name to
show it in the tooltip. The trick is to use
`d3.select(this.parentNode).datum().key`

d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 20, left: 50},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv", function(data) {

  // List of subgroups = header of the csv files = soil condition here
  var subgroups = data.columns.slice(1)

  // List of groups = species here = value of the first column called group -> I show them on the X axis
  var groups = d3.map(data, function(d){return(d.group)}).keys()

  // Add X axis
  var x = d3.scaleBand()
      .domain(groups)
      .range([0, width])
      .padding([0.2])
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).tickSizeOuter(0));

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, 60])
    .range([ height, 0 ]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // color palette = one color per subgroup
  var color = d3.scaleOrdinal()
    .domain(subgroups)
    .range(['#C7EFCF','#FE5F55','#EEF5DB'])

  //stack the data? --> stack per subgroup
  var stackedData = d3.stack()
    .keys(subgroups)
    (data)

  // ----------------
  // Create a tooltip
  // ----------------
  var tooltip = d3.select("#my_dataviz")
    .append("div")
    .style("opacity", 0)
    .attr("class", "tooltip")
    .style("background-color", "white")
    .style("border", "solid")
    .style("border-width", "1px")
    .style("border-radius", "5px")
    .style("padding", "10px")

  // Three function that change the tooltip when user hover / move / leave a cell
  var mouseover = function(d) {
    var subgroupName = d3.select(this.parentNode).datum().key;
    var subgroupValue = d.data[subgroupName];
    tooltip
        .html("subgroup: " + subgroupName + "<br>" + "Value: " + subgroupValue)
        .style("opacity", 1)
  }
  var mousemove = function(d) {
    tooltip
      .style("left", (d3.mouse(this)[0]+90) + "px") // It is important to put the +90: other wise the tooltip is exactly where the point is an it creates a weird effect
      .style("top", (d3.mouse(this)[1]) + "px")
  }
  var mouseleave = function(d) {
    tooltip
      .style("opacity", 0)
  }

  // Show the bars
  svg.append("g")
    .selectAll("g")
    // Enter in the stack data = loop key per key = group per group
    .data(stackedData)
    .enter().append("g")
      .attr("fill", function(d) { return color(d.key); })
      .selectAll("rect")
      // enter a second time = loop subgroup per subgroup to add all rectangles
      .data(function(d) { return d; })
      .enter().append("rect")
        .attr("x", function(d) { return x(d.data.group); })
        .attr("y", function(d) { return y(d[1]); })
        .attr("height", function(d) { return y(d[0]) - y(d[1]); })
        .attr("width",x.bandwidth())
        .attr("stroke", "grey")
      .on("mouseover", mouseover)
      .on("mousemove", mousemove)
      .on("mouseleave", mouseleave)

})

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 20, left: 50},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",`translate(${margin.left},${margin.top})`);

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv").then( function(data) {

  // List of subgroups = header of the csv files = soil condition here
  const subgroups = data.columns.slice(1)

  // List of groups = species here = value of the first column called group -> I show them on the X axis
  const groups = data.map(d => d.group)

  // Add X axis
  const x = d3.scaleBand()
      .domain(groups)
      .range([0, width])
      .padding([0.2])
  svg.append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x).tickSizeOuter(0));

  // Add Y axis
  const y = d3.scaleLinear()
    .domain([0, 60])
    .range([ height, 0 ]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // color palette = one color per subgroup
  const color = d3.scaleOrdinal()
    .domain(subgroups)
    .range(['#C7EFCF','#FE5F55','#EEF5DB'])

  //stack the data? --> stack per subgroup
  const stackedData = d3.stack()
    .keys(subgroups)
    (data)

  // ----------------
  // Create a tooltip
  // ----------------
  const tooltip = d3.select("#my_dataviz")
    .append("div")
    .style("opacity", 0)
    .attr("class", "tooltip")
    .style("background-color", "white")
    .style("border", "solid")
    .style("border-width", "1px")
    .style("border-radius", "5px")
    .style("padding", "10px")

  // Three function that change the tooltip when user hover / move / leave a cell
  const mouseover = function(event, d) {
    const subgroupName = d3.select(this.parentNode).datum().key;
    const subgroupValue = d.data[subgroupName];
    tooltip
        .html("subgroup: " + subgroupName + "<br>" + "Value: " + subgroupValue)
        .style("opacity", 1)

  }
  const mousemove = function(event, d) {
    tooltip.style("transform","translateY(-55%)")
           .style("left",(event.x)/2+"px")
           .style("top",(event.y)/2-30+"px")
  }
  const mouseleave = function(event, d) {
    tooltip
      .style("opacity", 0)
  }

  // Show the bars
  svg.append("g")
    .selectAll("g")
    // Enter in the stack data = loop key per key = group per group
    .data(stackedData)
    .join("g")
      .attr("fill", d => color(d.key))
      .selectAll("rect")
      // enter a second time = loop subgroup per subgroup to add all rectangles
      .data(d => d)
      .join("rect")
        .attr("x", d =>  x(d.data.group))
        .attr("y", d => y(d[1]))
        .attr("height", d => y(d[0]) - y(d[1]))
        .attr("width",x.bandwidth())
        .attr("stroke", "grey")
      .on("mouseover", mouseover)
      .on("mousemove", mousemove)
      .on("mouseleave", mouseleave)

})

</script>
```

### Related blocks →

- _Simple Box Plot Example in d3.js v4.0 -_ [link](https://bl.ocks.org/rjurney/e04ceddae2e8f85cf3afe4681dac1d74)

- _D3.js Boxplot with Axes and Labels -_ [link](http://bl.ocks.org/anaeliaovalle/60a7ed1f4e55a9052caab3c69668a306)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.8200147556312689)

Prebid User Sync

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=1d73e981-82c5-4204-b97f-4a4fed5ceea4)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/b06a000a-abf6-e3a4-e324-9caf9350e160?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=24ad664e-3b5a-71ed-d2f3-8a5a6c072c29&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=MDhjMmI1ODQtZjIyZC0yZjQ5LWM3MTMtZDBlM2E2ZTVlMjQ5)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=125&redir=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D54%26uid%3D%7BuserId%7D)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=12776** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=12776** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_f177ff51-00b7-495c-b7c0-ecd9fe17706b&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-27A5E947CB64BF7CE1203599FD5139E0@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-3F96264048611697937B56FF764F41EB@mhtml.blink)

ads.pubmatic.com

# This site can’t be reached

**ads.pubmatic.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ads.pubmatic.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-529568675EC5297524CD0E7E5C469053@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-C1CBCC35758FE4345D0AA14EC00E0C33@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_f177ff51-00b7-495c-b7c0-ecd9fe17706b&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_f177ff51-00b7-495c-b7c0-ecd9fe17706b)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=a28cad7b-0c05-48dd-abda-7799e321962d)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=YTI4Y2FkN2ItMGMwNS00OGRkLWFiZGEtNzc5OWUzMjE5NjJk)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://b1sync.zemanta.com/usersync/sharethrough?cb=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_user_id%3D__ZUID__%26gdpr%3D%7BGDPR%7D%26gdpr_consent%3D%7BGDPR_CONSENT_80%7D)![](https://c1.adform.net/serving/cookie/match?party=1294&gdpr=0&gdpr_consent=)

ads.pubmatic.com

# This site can’t be reached

**ads.pubmatic.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ads.pubmatic.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHuII0RHIX4vvOZk2J)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHuII0RHIX4vvOZk2J)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHuII0RHIX4vvOZk2J&cb=1741617793994&url={{REFERRER}}&gdpr=0&gdpr_consent=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=7c7b1a33-27f0-ca17-12fd-08cd0434e7c9)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=22d315b2-605d-4c6a-9812-128c5f8bed25)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

[iframe](cid:frame-E8838F1AA443FD3C2D930268A34618E5@mhtml.blink)[iframe](cid:frame-6AD2C0AA67AC7F632E89A19E26009EAD@mhtml.blink)

## Stacked Bar Plot
bananapoaceesorghotriticum0102030405060708090100

##### Steps:

- Start by understanding the
[basics of barplot](https://d3-graph-gallery.com/graph/barplot_basic.html) in d3.js.


- Data is available
[here](https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv). Have a look to it. Note the wide (untidy) format:
each group is provided in a specific line, each subgroup in
a specific column.


- The `d3.stack()` function is used to stack the
data: it computes the new position of each subgroup on the Y
axis


- The output of `d3.stack()` can be used to create
a set of `rect` as for a normal barplot.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 20, left: 50},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv", function(data) {

  // List of subgroups = header of the csv files = soil condition here
  var subgroups = data.columns.slice(1)

  // List of groups = species here = value of the first column called group -> I show them on the X axis
  var groups = d3.map(data, function(d){return(d.group)}).keys()

  // Add X axis
  var x = d3.scaleBand()
      .domain(groups)
      .range([0, width])
      .padding([0.2])
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).tickSizeOuter(0));

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, 100])
    .range([ height, 0 ]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // color palette = one color per subgroup
  var color = d3.scaleOrdinal()
    .domain(subgroups)
    .range(['#e41a1c','#377eb8','#4daf4a'])

  // Normalize the data -> sum of each group must be 100!
  console.log(data)
  dataNormalized = []
  data.forEach(function(d){
    // Compute the total
    tot = 0
    for (i in subgroups){ name=subgroups[i] ; tot += +d[name] }
    // Now normalize
    for (i in subgroups){ name=subgroups[i] ; d[name] = d[name] / tot * 100}
  })

  //stack the data? --> stack per subgroup
  var stackedData = d3.stack()
    .keys(subgroups)
    (data)

  // Show the bars
  svg.append("g")
    .selectAll("g")
    // Enter in the stack data = loop key per key = group per group
    .data(stackedData)
    .enter().append("g")
      .attr("fill", function(d) { return color(d.key); })
      .selectAll("rect")
      // enter a second time = loop subgroup per subgroup to add all rectangles
      .data(function(d) { return d; })
      .enter().append("rect")
        .attr("x", function(d) { return x(d.data.group); })
        .attr("y", function(d) { return y(d[1]); })
        .attr("height", function(d) { return y(d[0]) - y(d[1]); })
        .attr("width",x.bandwidth())
})

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 20, left: 50},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv").then ( function(data) {

  // List of subgroups = header of the csv files = soil condition here
  const subgroups = data.columns.slice(1)

  // List of groups = species here = value of the first column called group -> I show them on the X axis
  const groups = data.map(d => d.group)

  // Add X axis
  const x = d3.scaleBand()
      .domain(groups)
      .range([0, width])
      .padding([0.2])
  svg.append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x).tickSizeOuter(0));

  // Add Y axis
  const y = d3.scaleLinear()
    .domain([0, 100])
    .range([ height, 0 ]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // color palette = one color per subgroup
  const color = d3.scaleOrdinal()
    .domain(subgroups)
    .range(['#e41a1c','#377eb8','#4daf4a'])

  // Normalize the data -> sum of each group must be 100!
  console.log(data)
  dataNormalized = []
  data.forEach(function(d){
    // Compute the total
    tot = 0
    for (i in subgroups){ name=subgroups[i] ; tot += +d[name] }
    // Now normalize
    for (i in subgroups){ name=subgroups[i] ; d[name] = d[name] / tot * 100}
  })

  //stack the data? --> stack per subgroup
  const stackedData = d3.stack()
    .keys(subgroups)
    (data)

  // Show the bars
  svg.append("g")
    .selectAll("g")
    // Enter in the stack data = loop key per key = group per group
    .data(stackedData)
    .join("g")
      .attr("fill", d => color(d.key))
      .selectAll("rect")
      // enter a second time = loop subgroup per subgroup to add all rectangles
      .data(d => d)
      .join("rect")
        .attr("x", d => x(d.data.group))
        .attr("y", d => y(d[1]))
        .attr("height", d => y(d[0]) - y(d[1]))
        .attr("width",x.bandwidth())
})

</script>
```

### Related blocks →

- _Simple Box Plot Example in d3.js v4.0 -_ [link](https://bl.ocks.org/rjurney/e04ceddae2e8f85cf3afe4681dac1d74)

- _D3.js Boxplot with Axes and Labels -_ [link](http://bl.ocks.org/anaeliaovalle/60a7ed1f4e55a9052caab3c69668a306)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.16174471940701252)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/casale)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876gdHM5VAAIWKQAGdk7QAAFgUAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876gdHM5VAAIWKQAGdk7QAA%265637&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://www.temu.com/api/adx/cm/pixel-index?cm_user_id=Z876gdHM5VAAIWKQAGdk7QAAFgUAAAAB)![](https://secure.adnxs.com/getuid?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=46&external_user_id=$UID)![](https://tr.blismedia.com/v1/api/sync/indexexchange?gdpr=&userId=Z876gdHM5VAAIWKQAGdk7QAA%265637&gpp=&gpp_sid=&us_privacy=&gdpr_consent=)![](https://dsp.360yield.com/dsp_match/275?ssp=10&gdpr=&gdpr_consent=&r=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fcm_dsp_id%3D15%26external_user_id%3D%7BDSP_USER_ID%7D&userId=Z876gdHM5VAAIWKQAGdk7QAA%265637&us_privacy=)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876gdHM5VAAIWKQAGdk7QAA%265637)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=3065343008841404646864&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=3065343008841404646864)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/3065343008841404646864?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=3065343008841404646864&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3065343008841404646864)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_f245bbba-7162-47a6-9ec9-8bab1bc7eeb6&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9mMjQ1YmJiYS03MTYyLTQ3YTYtOWVjOS04YmFiMWJjN2VlYjY=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9mMjQ1YmJiYS03MTYyLTQ3YTYtOWVjOS04YmFiMWJjN2VlYjY=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.adsrvr.org

# This site can’t be reached

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-E2AA8F801CAED99E71A24604DB9890B3@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_f245bbba-7162-47a6-9ec9-8bab1bc7eeb6&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_f245bbba-7162-47a6-9ec9-8bab1bc7eeb6)

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876gdHM5VAAIWKQAGdk7QAAFgUAAAAB&gpp=&gpp_sid=)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876gdHM5VAAIWKQAGdk7QAAFgUAAAAB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://cms.quantserve.com/pixel/p-Z8PuJEk6U7Hyq.gif?idmatch=0)![](https://pm.w55c.net/ping_match.gif?ei=CASALE&rurl=https://dsum-sec.casalemedia.com/crum?cm_dsp_id=47&external_user_id=_wfivefivec_)![](https://ssbsync.smartadserver.com/api/sync?callerId=82&gdpr=$%7bGDPR%7d&gdpr_consent=$%7bGDPR_CONSENT%7d)![](https://dmp.brand-display.com/cm/api/index?cm_dsp_id=191&cm_user_id=%3cIndex_user_id%3e)![](https://d.adroll.com/cm/index/tp_out?advertisable=3GMDZMBFQREVBC75SYYKWH)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876gdHM5VAAIWKQAGdk7QAAFgUAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=e69f1831-2d2d-4117-94f1-d76d1abf5dc9)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=ZTY5ZjE4MzEtMmQyZC00MTE3LTk0ZjEtZDc2ZDFhYmY1ZGM5)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://u.openx.net/w/1.0/cm?gdpr=0&gdpr_consent=&id=7ead435e-a2cd-4cbf-8876-adb66822613f&ph=c6b01e12-aa62-4ae6-9e10-71346e597c31&r=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DF2Stothm3wg5g6opTuaPadz9%26source_user_id%3D)![](https://sync.1rx.io/usersync2/sharethrough)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHuII0RHIABu0x6KwS)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHVJSTBSSElBQnUweDZLd1M=)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-2BF1051DBCFF7866E4C6E39FDF60033A@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

**eb2.3lift.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**eb2.3lift.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=19c6a871-3e52-487b-b501-01c689a4399e)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/b4df41fa-1761-e9db-ef5a-d726f7a8365a?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=201827be-87cd-7b92-de8d-c1d308fffb13&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=MGM3N2Y0NzQtNGViYS0yNTM2LWNiNmQtOWI2YWMyMWQzNTcz)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

## D3.js Heatmap Guide
A d3.js heatmapA short description of the take-away message of this chart.ABCDEFGHIJv1v2v3v4v5v6v7v8v9v10

##### Steps:

- The Html part of the code just creates a
`div` that will be modified by d3 later on.


- The first part of the javascript code set a
`svg` area. It specify the chart size and its
margin. [Read more](https://d3-graph-gallery.com/graph/heatmap_style.html).


- A
[dummy dataset](https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv)
has been created for this example, at the long format. (3
columns: row, col, value).


- The first step is to build scales and axis. Thus each entity
will have a position on the grid.


- A `scaleBand()` is used, which allows to control
the size of each square using the
`padding property`. If padding is close from 1,
square are very small. (0 for very big)


- Finally, each square can be added using a
`rect` element.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<!-- Load color palettes -->
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 80, right: 25, bottom: 30, left: 40},
  width = 450 - margin.left - margin.right,
  height = 450 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
.append("g")
  .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv", function(data) {

  // Labels of row and columns -> unique identifier of the column called 'group' and 'variable'
  var myGroups = d3.map(data, function(d){return d.group;}).keys()
  var myVars = d3.map(data, function(d){return d.variable;}).keys()

  // Build X scales and axis:
  var x = d3.scaleBand()
    .range([ 0, width ])
    .domain(myGroups)
    .padding(0.05);
  svg.append("g")
    .style("font-size", 15)
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).tickSize(0))
    .select(".domain").remove()

  // Build Y scales and axis:
  var y = d3.scaleBand()
    .range([ height, 0 ])
    .domain(myVars)
    .padding(0.05);
  svg.append("g")
    .style("font-size", 15)
    .call(d3.axisLeft(y).tickSize(0))
    .select(".domain").remove()

  // Build color scale
  var myColor = d3.scaleSequential()
    .interpolator(d3.interpolateInferno)
    .domain([1,100])

  // create a tooltip
  var tooltip = d3.select("#my_dataviz")
    .append("div")
    .style("opacity", 0)
    .attr("class", "tooltip")
    .style("background-color", "white")
    .style("border", "solid")
    .style("border-width", "2px")
    .style("border-radius", "5px")
    .style("padding", "5px")

  // Three function that change the tooltip when user hover / move / leave a cell
  var mouseover = function(d) {
    tooltip
      .style("opacity", 1)
    d3.select(this)
      .style("stroke", "black")
      .style("opacity", 1)
  }
  var mousemove = function(d) {
    tooltip
      .html("The exact value of<br>this cell is: " + d.value)
      .style("left", (d3.mouse(this)[0]+70) + "px")
      .style("top", (d3.mouse(this)[1]) + "px")
  }
  var mouseleave = function(d) {
    tooltip
      .style("opacity", 0)
    d3.select(this)
      .style("stroke", "none")
      .style("opacity", 0.8)
  }

  // add the squares
  svg.selectAll()
    .data(data, function(d) {return d.group+':'+d.variable;})
    .enter()
    .append("rect")
      .attr("x", function(d) { return x(d.group) })
      .attr("y", function(d) { return y(d.variable) })
      .attr("rx", 4)
      .attr("ry", 4)
      .attr("width", x.bandwidth() )
      .attr("height", y.bandwidth() )
      .style("fill", function(d) { return myColor(d.value)} )
      .style("stroke-width", 4)
      .style("stroke", "none")
      .style("opacity", 0.8)
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseleave", mouseleave)
})

// Add title to graph
svg.append("text")
        .attr("x", 0)
        .attr("y", -50)
        .attr("text-anchor", "left")
        .style("font-size", "22px")
        .text("A d3.js heatmap");

// Add subtitle to graph
svg.append("text")
        .attr("x", 0)
        .attr("y", -20)
        .attr("text-anchor", "left")
        .style("font-size", "14px")
        .style("fill", "grey")
        .style("max-width", 400)
        .text("A short description of the take-away message of this chart.");

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 80, right: 25, bottom: 30, left: 40},
  width = 450 - margin.left - margin.right,
  height = 450 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
.append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
.append("g")
  .attr("transform", `translate(${margin.left}, ${margin.top})`);

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/heatmap_data.csv").then(function(data) {

  // Labels of row and columns -> unique identifier of the column called 'group' and 'variable'
  const myGroups = Array.from(new Set(data.map(d => d.group)))
  const myVars = Array.from(new Set(data.map(d => d.variable)))

  // Build X scales and axis:
  const x = d3.scaleBand()
    .range([ 0, width ])
    .domain(myGroups)
    .padding(0.05);
  svg.append("g")
    .style("font-size", 15)
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x).tickSize(0))
    .select(".domain").remove()

  // Build Y scales and axis:
  const y = d3.scaleBand()
    .range([ height, 0 ])
    .domain(myVars)
    .padding(0.05);
  svg.append("g")
    .style("font-size", 15)
    .call(d3.axisLeft(y).tickSize(0))
    .select(".domain").remove()

  // Build color scale
  const myColor = d3.scaleSequential()
    .interpolator(d3.interpolateInferno)
    .domain([1,100])

  // create a tooltip
  const tooltip = d3.select("#my_dataviz")
    .append("div")
    .style("opacity", 0)
    .attr("class", "tooltip")
    .style("background-color", "white")
    .style("border", "solid")
    .style("border-width", "2px")
    .style("border-radius", "5px")
    .style("padding", "5px")

  // Three function that change the tooltip when user hover / move / leave a cell
  const mouseover = function(event,d) {
    tooltip
      .style("opacity", 1)
    d3.select(this)
      .style("stroke", "black")
      .style("opacity", 1)
  }
  const mousemove = function(event,d) {
    tooltip
      .html("The exact value of<br>this cell is: " + d.value)
      .style("left", (event.x)/2 + "px")
      .style("top", (event.y)/2 + "px")
  }
  const mouseleave = function(event,d) {
    tooltip
      .style("opacity", 0)
    d3.select(this)
      .style("stroke", "none")
      .style("opacity", 0.8)
  }

  // add the squares
  svg.selectAll()
    .data(data, function(d) {return d.group+':'+d.variable;})
    .join("rect")
      .attr("x", function(d) { return x(d.group) })
      .attr("y", function(d) { return y(d.variable) })
      .attr("rx", 4)
      .attr("ry", 4)
      .attr("width", x.bandwidth() )
      .attr("height", y.bandwidth() )
      .style("fill", function(d) { return myColor(d.value)} )
      .style("stroke-width", 4)
      .style("stroke", "none")
      .style("opacity", 0.8)
    .on("mouseover", mouseover)
    .on("mousemove", mousemove)
    .on("mouseleave", mouseleave)
})

// Add title to graph
svg.append("text")
        .attr("x", 0)
        .attr("y", -50)
        .attr("text-anchor", "left")
        .style("font-size", "22px")
        .text("A d3.js heatmap");

// Add subtitle to graph
svg.append("text")
        .attr("x", 0)
        .attr("y", -20)
        .attr("text-anchor", "left")
        .style("font-size", "14px")
        .style("fill", "grey")
        .style("max-width", 400)
        .text("A short description of the take-away message of this chart.");

</script>
```

### Related blocks →

- _Day / Hour Heatmap -_ by
[Tom May](http://bl.ocks.org/tjdecke/5558084)

- _Visualize Data with a HeatMap using d3.js -_ [Robert Valmassoi](https://codepen.io/valmassoi/pen/aNGryB)

- _heatmap -_ by
[Ian YF Chang](http://bl.ocks.org/ianyfchang/8119685)

- _Basic tooltip in d3.js_ [link](https://www.d3-graph-gallery.com/graph/interactivity_tooltip.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.5394918157403343)

Prebid User Sync

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=125&redir=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D54%26uid%3D%7BuserId%7D)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=12776** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=12776** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

![](https://match.adsrvr.org/track/cmf/casale)![](https://secure.adnxs.com/getuid?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=46&external_user_id=$UID)![](https://cms.quantserve.com/pixel/p-Z8PuJEk6U7Hyq.gif?idmatch=0)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://c1.adform.net/serving/cookie/match?party=29)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876gtHM4IkALwJJAJmqlgAAAbMAAAAB&gpp=&gpp_sid=)![](https://sync.mathtag.com/sync/img?mt_exid=15&redir=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fcm_dsp_id%3D3%26external_user_id%3D%5BMM_UUID%5D&us_privacy=&gdpr=&gdpr_consent=)![](https://a.tribalfusion.com/i.match?p=b20&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com/crum%3Fcm_dsp_id%3D131%26external_user_id%3D%24TF_USER_ID_ENC%24&cm_callback_url=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum&cm_user_id=Z876gtHM4IkALwJJAJmqlgAA)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876gtHM4IkALwJJAJmqlgAA%26435)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=417419252894840138563&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=417419252894840138563)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/417419252894840138563?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=417419252894840138563&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=417419252894840138563)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_8546a9df-04a0-4c82-87ea-87808000ceea&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-BCA73855F3157858B28935D4468BFB89@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-7D61CA69647E3E4DDA794068AD139A59@mhtml.blink)

[iframe](cid:frame-E62BD4BD77F7045AB116AE590ADCA2FA@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-4AA9B7C8FE737489ECA20C671DFCE0B3@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_8546a9df-04a0-4c82-87ea-87808000ceea&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_8546a9df-04a0-4c82-87ea-87808000ceea)

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876gtHM4IkALwJJAJmqlgAA%26435&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876gtHM4IkALwJJAJmqlgAAAbMAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876gtHM4IkALwJJAJmqlgAAAbMAAAAB&gpp=&gpp_sid=)![](https://creativecdn.com/cm-notify?pi=index&gpdr=&gdpr_consent=&us_privacy=&user_id=Z876gtHM4IkALwJJAJmqlgAA%26435)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876gtHM4IkALwJJAJmqlgAAAbMAAAAB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://dsp.360yield.com/dsp_match/275?ssp=10&gdpr=&gdpr_consent=&r=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fcm_dsp_id%3D15%26external_user_id%3D%7BDSP_USER_ID%7D&userId=Z876gtHM4IkALwJJAJmqlgAA%26435&us_privacy=)![](https://t.adx.opera.com/pub/sync?pubid=pub10256699365696&userId=Z876gtHM4IkALwJJAJmqlgAA%26435&gdpr=&us_privacy=)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876gtHM4IkALwJJAJmqlgAAAbMAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=55238a0a-c805-4600-b1ca-201f68a09f08)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=NTUyMzhhMGEtYzgwNS00NjAwLWIxY2EtMjAxZjY4YTA5ZjA4)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://secure.adnxs.com/getuid?https://match.sharethrough.com/sync/v1?source_id=0e8893f90b606c9c5d33f1be&gdpr=0&gdpr_consent=&source_user_id=$UID)![](https://b1sync.zemanta.com/usersync/sharethrough?cb=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_user_id%3D__ZUID__%26gdpr%3D%7BGDPR%7D%26gdpr_consent%3D%7BGDPR_CONSENT_80%7D)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=18789171-8510-4C0A-8AA7-44A8D84FB54C)[iframe](cid:frame-8EFE5A15E75C2BB97A6C427AEDAEEF4A@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=18789171-8510-4C0A-8AA7-44A8D84FB54C&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=18789171-8510-4C0A-8AA7-44A8D84FB54C&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=MTg3ODkxNzEtODUxMC00QzBBLThBQTctNDRBOEQ4NEZCNTRD&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=GHiRcYUQTAqKp0So2E-1TA%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=18789171-8510-4C0A-8AA7-44A8D84FB54C&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-A26C4117BA906B0D88EEF2AAB696264D@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIq_57tZZ8o)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElxXzU3dFpaOG8=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIq_57tZZ8o)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=a9b6f6fa-247c-c197-24d4-aef8797b0c86)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/65a7ecc3-a87a-e824-d50d-3a9aee1f0a2f?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=f1608a87-38d6-7a6d-e4da-2c6f1148c766&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZGQwZjU5NGQtZjFhMS0yNGM5LWYxM2EtNzZkNmRiYWEwOTA2)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

[iframe](cid:frame-B3A7472FE047BA7E7916EE0ADB8D4AED@mhtml.blink)

## Interactive Scatterplot
4.04.55.05.56.06.57.07.58.00123456789

##### Steps:

- Extension of the previous
[static grouped scatterplot](https://d3-graph-gallery.com/graph/scatter_grouped.html)

- Here each circle is gonna trigger a function when hovered
thanks to the `.on("mouseover",..)`.


- The triggered function called `highlight` change
the css of the group: the color is updated.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", function(data) {

  // Add X axis
  var x = d3.scaleLinear()
    .domain([4, 8])
    .range([ 0, width ]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, 9])
    .range([ height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Color scale: give me a specie name, I return a color
  var color = d3.scaleOrdinal()
    .domain(["setosa", "versicolor", "virginica" ])
    .range([ "#440154ff", "#21908dff", "#fde725ff"])

  // Highlight the specie that is hovered
  var highlight = function(d){

    selected_specie = d.Species

    d3.selectAll(".dot")
      .transition()
      .duration(200)
      .style("fill", "lightgrey")
      .attr("r", 3)

    d3.selectAll("." + selected_specie)
      .transition()
      .duration(200)
      .style("fill", color(selected_specie))
      .attr("r", 7)
  }

  // Highlight the specie that is hovered
  var doNotHighlight = function(){
    d3.selectAll(".dot")
      .transition()
      .duration(200)
      .style("fill", "lightgrey")
      .attr("r", 5 )
  }

  // Add dots
  svg.append('g')
    .selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
      .attr("class", function (d) { return "dot " + d.Species } )
      .attr("cx", function (d) { return x(d.Sepal_Length); } )
      .attr("cy", function (d) { return y(d.Petal_Length); } )
      .attr("r", 5)
      .style("fill", function (d) { return color(d.Species) } )
    .on("mouseover", highlight)
    .on("mouseleave", doNotHighlight )

})

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          `translate(${margin.left}, ${margin.top})`);

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv").then( function(data) {

  // Add X axis
  const x = d3.scaleLinear()
    .domain([4, 8])
    .range([ 0, width ]);
  svg.append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x));

  // Add Y axis
  const y = d3.scaleLinear()
    .domain([0, 9])
    .range([ height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Color scale: give me a specie name, I return a color
  const color = d3.scaleOrdinal()
    .domain(["setosa", "versicolor", "virginica" ])
    .range([ "#440154ff", "#21908dff", "#fde725ff"])

  // Highlight the specie that is hovered
  const highlight = function(event,d){

    selected_specie = d.Species

    d3.selectAll(".dot")
      .transition()
      .duration(200)
      .style("fill", "lightgrey")
      .attr("r", 3)

    d3.selectAll("." + selected_specie)
      .transition()
      .duration(200)
      .style("fill", color(selected_specie))
      .attr("r", 7)
  }

  // Highlight the specie that is hovered
  const doNotHighlight = function(event,d){
    d3.selectAll(".dot")
      .transition()
      .duration(200)
      .style("fill", d => color(d.Species))
      .attr("r", 5 )
  }

  // Add dots
  svg.append('g')
    .selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
      .attr("class", function (d) { return "dot " + d.Species } )
      .attr("cx", function (d) { return x(d.Sepal_Length); } )
      .attr("cy", function (d) { return y(d.Petal_Length); } )
      .attr("r", 5)
      .style("fill", function (d) { return color(d.Species) } )
    .on("mouseover", highlight)
    .on("mouseleave", doNotHighlight )

})
</script>
```

### Related blocks →

- _Basic scatterplot -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/graph/scatter_basic.html)

- _Interactivity -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/interactivity.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.5163968715379597)

Document

Prebid User Sync

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=12776** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=12776** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_4266b1b2-09a1-4965-bf60-ba1dabcee3cb&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-FC10964707C0723CCD3FF3270FEA7E02@mhtml.blink)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-E334A0A964821F655CC3BFFDA3ED743C@mhtml.blink)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-09070AF69C4DCA157DC4B40EAE69446E@mhtml.blink)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_4266b1b2-09a1-4965-bf60-ba1dabcee3cb)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_4266b1b2-09a1-4965-bf60-ba1dabcee3cb&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

**c1.adform.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**c1.adform.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-9791A5C23EBD341D041CF5A376471846@mhtml.blink)

[iframe](cid:frame-F9DBCD72FE65094B90807BF5304FF9C3@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-2ACA9F3E784CAB1CE26F182429683F45@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_4266b1b2-09a1-4965-bf60-ba1dabcee3cb&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_4266b1b2-09a1-4965-bf60-ba1dabcee3cb)

![](https://match.adsrvr.org/track/cmf/casale)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876gsAoInsAKnzbAQzOpgAA%262634&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876gsAoInsAKnzbAQzOpgAACkoAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://bttrack.com/pixel/cookiesync?source=67e94f23-25d6-4008-8236-375d1743c2e0&secure=1)![](https://a.tribalfusion.com/i.match?p=b20&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com/crum%3Fcm_dsp_id%3D131%26external_user_id%3D%24TF_USER_ID_ENC%24&cm_callback_url=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum&cm_user_id=Z876gsAoInsAKnzbAQzOpgAA)![](https://www.temu.com/api/adx/cm/pixel-index?cm_user_id=Z876gsAoInsAKnzbAQzOpgAACkoAAAAB)![](https://capi.connatix.com/us/pixel?puid=Z876gsAoInsAKnzbAQzOpgAACkoAAAAB&pId=17&gdpr_consent=&us_privacy=)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876gsAoInsAKnzbAQzOpgAACkoAAAAB)

match.sharethrough.com

# This site can’t be reached

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=CEB8DBB2-1C82-4EC0-B730-FBAEB1F4D198)[iframe](cid:frame-60B7FDB105FD5F43C5697A2C4BEC080D@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=CEB8DBB2-1C82-4EC0-B730-FBAEB1F4D198&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=CEB8DBB2-1C82-4EC0-B730-FBAEB1F4D198&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=CEB8DBB2-1C82-4EC0-B730-FBAEB1F4D198&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/CEB8DBB2-1C82-4EC0-B730-FBAEB1F4D198?gdpr=0&gdpr_consent=)[iframe](cid:frame-4950C750979EEFE1C268F58591BC4378@mhtml.blink)[iframe](cid:frame-121D9505A4A04A33F61BFB443651EE26@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHutI0RHIYk_rGBxa1)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHutI0RHIYk_rGBxa1&cb=1741617794257&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=f586fca5-3846-c799-2f32-f8dc3d365402)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/3997e69c-b440-ee2a-deeb-6cbeaa5252ab?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=ad5080d8-24ec-7c63-ef3c-7a4b55059fe2&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ODEzZjUzMTItZWQ5Yi0yMmM3LWZhZGMtMjBmMjlmZTc1MTgy)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-065FB0AF38985BD75EC6828C98C93E0B@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

ssc-cms.33across.com

# This site can’t be reached

**ssc-cms.33across.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ssc-cms.33across.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=948e0f17-9d73-4f8a-84b0-ba5ed45e5d6f)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=ab2ef324-7feb-41e4-a5dd-e29d66895eee)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

## Custom Treemap Visualization
abcdefghijklmn2819181914111516101313251628boss1boss2boss3Three group leaders and 14 employees

##### Steps:

- The input dataset used here is stored at the
`.json` format.
[Have a look](https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_dendrogram_full.json)

- If you have a `.csv` input, you can transform it
with the code below, or see
[this example](https://d3-graph-gallery.com/graph/treemap_basic.html).


- Start by understanding how to build a
[basic treemap](https://d3-graph-gallery.com/graph/treemap_json.html) with d3 and
json input.


- Margin between group is possible thanks to the
`paddingTop`, `paddingRight` and
`paddingInner` arguments. Play with them in the
code beside to understand how they work.


- One color per group, opacity proportional to value: classic
use of scale, as described in
[this document](https://d3-graph-gallery.com/graph/custom_axis.html).


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 10, bottom: 10, left: 10},
  width = 445 - margin.left - margin.right,
  height = 445 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
.append("g")
  .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");

// read json data
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_dendrogram_full.json", function(data) {

  // Give the data to this cluster layout:
  var root = d3.hierarchy(data).sum(function(d){ return d.value}) // Here the size of each leave is given in the 'value' field in input data

  // Then d3.treemap computes the position of each element of the hierarchy
  d3.treemap()
    .size([width, height])
    .paddingTop(28)
    .paddingRight(7)
    .paddingInner(3)      // Padding between each rectangle
    //.paddingOuter(6)
    //.padding(20)
    (root)

  // prepare a color scale
  var color = d3.scaleOrdinal()
    .domain(["boss1", "boss2", "boss3"])
    .range([ "#402D54", "#D18975", "#8FD175"])

  // And an opacity scale
  var opacity = d3.scaleLinear()
    .domain([10, 30])
    .range([.5,1])

  // use this information to add rectangles:
  svg
    .selectAll("rect")
    .data(root.leaves())
    .enter()
    .append("rect")
      .attr('x', function (d) { return d.x0; })
      .attr('y', function (d) { return d.y0; })
      .attr('width', function (d) { return d.x1 - d.x0; })
      .attr('height', function (d) { return d.y1 - d.y0; })
      .style("stroke", "black")
      .style("fill", function(d){ return color(d.parent.data.name)} )
      .style("opacity", function(d){ return opacity(d.data.value)})

  // and to add the text labels
  svg
    .selectAll("text")
    .data(root.leaves())
    .enter()
    .append("text")
      .attr("x", function(d){ return d.x0+5})    // +10 to adjust position (more right)
      .attr("y", function(d){ return d.y0+20})    // +20 to adjust position (lower)
      .text(function(d){ return d.data.name.replace('mister_','') })
      .attr("font-size", "19px")
      .attr("fill", "white")

  // and to add the text labels
  svg
    .selectAll("vals")
    .data(root.leaves())
    .enter()
    .append("text")
      .attr("x", function(d){ return d.x0+5})    // +10 to adjust position (more right)
      .attr("y", function(d){ return d.y0+35})    // +20 to adjust position (lower)
      .text(function(d){ return d.data.value })
      .attr("font-size", "11px")
      .attr("fill", "white")

  // Add title for the 3 groups
  svg
    .selectAll("titles")
    .data(root.descendants().filter(function(d){return d.depth==1}))
    .enter()
    .append("text")
      .attr("x", function(d){ return d.x0})
      .attr("y", function(d){ return d.y0+21})
      .text(function(d){ return d.data.name })
      .attr("font-size", "19px")
      .attr("fill",  function(d){ return color(d.data.name)} )

  // Add title for the 3 groups
  svg
    .append("text")
      .attr("x", 0)
      .attr("y", 14)    // +20 to adjust position (lower)
      .text("Three group leaders and 14 employees")
      .attr("font-size", "19px")
      .attr("fill",  "grey" )

})
</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 10, right: 10, bottom: 10, left: 10},
  width = 445 - margin.left - margin.right,
  height = 445 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
.append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
.append("g")
  .attr("transform",
        `translate(${margin.left}, ${margin.top})`);

// read json data
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_dendrogram_full.json").then( function(data) {

  // Give the data to this cluster layout:
  const root = d3.hierarchy(data).sum(function(d){ return d.value}) // Here the size of each leave is given in the 'value' field in input data

  // Then d3.treemap computes the position of each element of the hierarchy
  d3.treemap()
    .size([width, height])
    .paddingTop(28)
    .paddingRight(7)
    .paddingInner(3)      // Padding between each rectangle
    //.paddingOuter(6)
    //.padding(20)
    (root)

  // prepare a color scale
  const color = d3.scaleOrdinal()
    .domain(["boss1", "boss2", "boss3"])
    .range([ "#402D54", "#D18975", "#8FD175"])

  // And a opacity scale
  const opacity = d3.scaleLinear()
    .domain([10, 30])
    .range([.5,1])

  // use this information to add rectangles:
  svg
    .selectAll("rect")
    .data(root.leaves())
    .join("rect")
      .attr('x', function (d) { return d.x0; })
      .attr('y', function (d) { return d.y0; })
      .attr('width', function (d) { return d.x1 - d.x0; })
      .attr('height', function (d) { return d.y1 - d.y0; })
      .style("stroke", "black")
      .style("fill", function(d){ return color(d.parent.data.name)} )
      .style("opacity", function(d){ return opacity(d.data.value)})

  // and to add the text labels
  svg
    .selectAll("text")
    .data(root.leaves())
    .enter()
    .append("text")
      .attr("x", function(d){ return d.x0+5})    // +10 to adjust position (more right)
      .attr("y", function(d){ return d.y0+20})    // +20 to adjust position (lower)
      .text(function(d){ return d.data.name.replace('mister_','') })
      .attr("font-size", "19px")
      .attr("fill", "white")

  // and to add the text labels
  svg
    .selectAll("vals")
    .data(root.leaves())
    .enter()
    .append("text")
      .attr("x", function(d){ return d.x0+5})    // +10 to adjust position (more right)
      .attr("y", function(d){ return d.y0+35})    // +20 to adjust position (lower)
      .text(function(d){ return d.data.value })
      .attr("font-size", "11px")
      .attr("fill", "white")

  // Add title for the 3 groups
  svg
    .selectAll("titles")
    .data(root.descendants().filter(function(d){return d.depth==1}))
    .enter()
    .append("text")
      .attr("x", function(d){ return d.x0})
      .attr("y", function(d){ return d.y0+21})
      .text(function(d){ return d.data.name })
      .attr("font-size", "19px")
      .attr("fill",  function(d){ return color(d.data.name)} )

  // Add title for the 3 groups
  svg
    .append("text")
      .attr("x", 0)
      .attr("y", 14)    // +20 to adjust position (lower)
      .text("Three group leaders and 14 employees")
      .attr("font-size", "19px")
      .attr("fill",  "grey" )

})
</script>
```

# Building the `Json` format

* * *

The
[d3r R library](https://github.com/timelyportfolio/d3r)
allows to switch from
[.csv](https://github.com/timelyportfolio/d3r) format to
[json](https://github.com/timelyportfolio/d3r) format. Here
is the R code allowing to build the `json` file used above.


```
# Load library
library(d3r)

# Build a dummy data frame
data <- data.frame(
  level2=c( rep("boss1",4), rep("boss2",4), rep("boss3",6)),
  level3=paste0("mister_", letters[1:14]),
  value=rep(23,14),
  group=c("A","A","C","C","C","A","B","B","B","A","A","D","D","D" )
)

# Create the json format. Note that columns that are leave features are specified.
a <- d3_nest(data, root="CEO", value_cols=c("group", "value"))

# Save it in a .json file
write(a, "data_dendrogram_full.json")

```

### Related blocks →

- _Nested Treemap -_ by
[Mike Bostock](https://bl.ocks.org/mbostock/911ad09bdead40ec0061)

- _D3-hierarchy documentation -_ by
[Mike Bostock](https://github.com/d3/d3-hierarchy)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.8651907161805863)

Prebid User Sync

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=125&redir=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D54%26uid%3D%7BuserId%7D)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=4043450754936106984116&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=4043450754936106984116)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=4043450754936106984116)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_8e0d6579-41e5-4fed-9f73-2758199320a5&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV84ZTBkNjU3OS00MWU1LTRmZWQtOWY3My0yNzU4MTk5MzIwYTU=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV84ZTBkNjU3OS00MWU1LTRmZWQtOWY3My0yNzU4MTk5MzIwYTU=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.adsrvr.org

# This site can’t be reached

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-DEDAE39239DF933BEF4BE3D912609310@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_8e0d6579-41e5-4fed-9f73-2758199320a5&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_8e0d6579-41e5-4fed-9f73-2758199320a5)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.sharethrough.com

# This site can’t be reached

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=2AED0753-F0AD-433B-BF57-A7A6DEC17E32)[iframe](cid:frame-00F7E6C6552E2C0C444934D9DEB1FD3C@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=2AED0753-F0AD-433B-BF57-A7A6DEC17E32&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=2AED0753-F0AD-433B-BF57-A7A6DEC17E32&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=Ku0HU_CtQzu_V6em3sF-Mg%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=2AED0753-F0AD-433B-BF57-A7A6DEC17E32&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/2AED0753-F0AD-433B-BF57-A7A6DEC17E32?gdpr=0&gdpr_consent=)[iframe](cid:frame-E20F86D2D0BD4462C06C5759E75B1807@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHItTCxZCaow)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHItTCxZCaow&cb=1741617794479&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHItTCxZCaow)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

js-sec.indexww.com

# This site can’t be reached

The webpage at **https://js-sec.indexww.com/um/ixmatch.html** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://js-sec.indexww.com/um/ixmatch.html** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/866e4b3c-971a-e611-ce4b-40041b2c31d4?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=12a92d78-07b6-7458-ff9c-56f1e47bfc9d&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=M2VjNmZlYjItY2VjMS0yYWZjLWVhN2MtMGM0ODJlOTkzMmZk)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=4043450754936106984116&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=4043450754936106984116)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/4043450754936106984116?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=4043450754936106984116&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)

![](https://sync.crwdcntrl.net/qmap?c=2700&tp=UNDR&gdpr=&gdpr_consent=&tpid=470fpqnblvd2qf1uqq357h6kr)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3484&partner_device_id=470fpqnblvd2qf1uqq357h6kr)![](https://idsync.rlcdn.com/403716.gif?partner_uid=470fpqnblvd2qf1uqq357h6kr)![](https://dpm.demdex.net/ibs:dpid=152416&dpuuid=470fpqnblvd2qf1uqq357h6kr)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

gum.criteo.com

# This site can’t be reached

The webpage at **https://gum.criteo.com/syncframe?origin=criteoPrebidAdapter&topUrl=d3-graph-gallery.com&us\_privacy=1YNY&gpp=#{"bundle":"g5OpNF9YN3ZzckMwYlEyQjVjREp5c0RpVldwdFNDT0xyZjcweEhJbjJ3Qll3ZGtISlNJYnl3QTBOZjdydWpxUmc3JTJGdVRBMVhyZGhYZWxrSEZKZ04xMFdhc1RRJTJGelJiUGVnZERyYXJ0NTdoRiUyQmdqSTJ1a2ZsJTJGVnZHd0xsUWlKRTdMelJm","cw":false,"lsw":true,"origin":"criteoPrebidAdapter","requestId":"0.3738723687762566","tld":"d3-graph-gallery.com","topUrl":"d3-graph-gallery.com","version":"9\_26\_0"}** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://gum.criteo.com/syncframe?origin=criteoPrebidAdapter&topUrl=d3-graph-gallery.com&us\_privacy=1YNY&gpp=#{"bundle":"g5OpNF9YN3ZzckMwYlEyQjVjREp5c0RpVldwdFNDT0xyZjcweEhJbjJ3Qll3ZGtISlNJYnl3QTBOZjdydWpxUmc3JTJGdVRBMVhyZGhYZWxrSEZKZ04xMFdhc1RRJTJGelJiUGVnZERyYXJ0NTdoRiUyQmdqSTJ1a2ZsJTJGVnZHd0xsUWlKRTdMelJm","cw":false,"lsw":true,"origin":"criteoPrebidAdapter","requestId":"0.3738723687762566","tld":"d3-graph-gallery.com","topUrl":"d3-graph-gallery.com","version":"9\_26\_0"}** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?us\_privacy=1YNY** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?us\_privacy=1YNY** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

gum.criteo.com

# This site can’t be reached

The webpage at **https://gum.criteo.com/syncframe?origin=criteoPrebidAdapter&topUrl=d3-graph-gallery.com&us\_privacy=1YNY&gpp=#{"bundle":"g5OpNF9YN3ZzckMwYlEyQjVjREp5c0RpVldwdFNDT0xyZjcweEhJbjJ3Qll3ZGtISlNJYnl3QTBOZjdydWpxUmc3JTJGdVRBMVhyZGhYZWxrSEZKZ04xMFdhc1RRJTJGelJiUGVnZERyYXJ0NTdoRiUyQmdqSTJ1a2ZsJTJGVnZHd0xsUWlKRTdMelJm","cw":false,"lsw":true,"origin":"criteoPrebidAdapter","requestId":"0.25265355337791906","tld":"d3-graph-gallery.com","topUrl":"d3-graph-gallery.com","version":"9\_26\_0"}** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://gum.criteo.com/syncframe?origin=criteoPrebidAdapter&topUrl=d3-graph-gallery.com&us\_privacy=1YNY&gpp=#{"bundle":"g5OpNF9YN3ZzckMwYlEyQjVjREp5c0RpVldwdFNDT0xyZjcweEhJbjJ3Qll3ZGtISlNJYnl3QTBOZjdydWpxUmc3JTJGdVRBMVhyZGhYZWxrSEZKZ04xMFdhc1RRJTJGelJiUGVnZERyYXJ0NTdoRiUyQmdqSTJ1a2ZsJTJGVnZHd0xsUWlKRTdMelJm","cw":false,"lsw":true,"origin":"criteoPrebidAdapter","requestId":"0.25265355337791906","tld":"d3-graph-gallery.com","topUrl":"d3-graph-gallery.com","version":"9\_26\_0"}** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=4043450754936106984116&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=4043450754936106984116)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/4043450754936106984116?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=4043450754936106984116&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)

![](https://sync.crwdcntrl.net/qmap?c=2700&tp=UNDR&gdpr=&gdpr_consent=&tpid=470fpqnblvd2qf1uqq357h6kr)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3484&partner_device_id=470fpqnblvd2qf1uqq357h6kr)![](https://idsync.rlcdn.com/403716.gif?partner_uid=470fpqnblvd2qf1uqq357h6kr)![](https://dpm.demdex.net/ibs:dpid=152416&dpuuid=470fpqnblvd2qf1uqq357h6kr)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/pd?us\_privacy=1YNY&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/pd?us\_privacy=1YNY&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

## Density Estimation Chart
variable Avariable B-10-8-6-4-2024681012140.000.010.020.030.040.050.060.070.080.090.100.110.12

##### Notes:

- This chart is an extension of the previous
[basic density chart](https://d3-graph-gallery.com/graph/density_basic.html).


- It splits the dataset in 2 parts thanks to the
`filter()` function. See more on
[data manipulation](https://d3-graph-gallery.com/graph/basic_datamanipulation.html).
Density is estimated and plotted for each part.


- This posts also shows how to add a basic legend to the chart


- Todo: code is currently hardcoded for 2 groups. It
would be better to loop on every group of the dataset.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 30, left: 50},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// get the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_doubleHist.csv", function(data) {

  // add the x Axis
  var x = d3.scaleLinear()
      .domain([-10,15])
      .range([0, width]);
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // add the y Axis
  var y = d3.scaleLinear()
            .range([height, 0])
            .domain([0, 0.12]);
  svg.append("g")
      .call(d3.axisLeft(y));

  // Compute kernel density estimation
  var kde = kernelDensityEstimator(kernelEpanechnikov(7), x.ticks(60))
  var density1 =  kde( data
      .filter( function(d){return d.type === "variable 1"} )
      .map(function(d){  return d.value; }) )
  var density2 =  kde( data
      .filter( function(d){return d.type === "variable 2"} )
      .map(function(d){  return d.value; }) )

  // Plot the area
  svg.append("path")
      .attr("class", "mypath")
      .datum(density1)
      .attr("fill", "#69b3a2")
      .attr("opacity", ".6")
      .attr("stroke", "#000")
      .attr("stroke-width", 1)
      .attr("stroke-linejoin", "round")
      .attr("d",  d3.line()
        .curve(d3.curveBasis)
          .x(function(d) { return x(d[0]); })
          .y(function(d) { return y(d[1]); })
      );

  // Plot the area
  svg.append("path")
      .attr("class", "mypath")
      .datum(density2)
      .attr("fill", "#404080")
      .attr("opacity", ".6")
      .attr("stroke", "#000")
      .attr("stroke-width", 1)
      .attr("stroke-linejoin", "round")
      .attr("d",  d3.line()
        .curve(d3.curveBasis)
          .x(function(d) { return x(d[0]); })
          .y(function(d) { return y(d[1]); })
      );

});

// Handmade legend
svg.append("circle").attr("cx",300).attr("cy",30).attr("r", 6).style("fill", "#69b3a2")
svg.append("circle").attr("cx",300).attr("cy",60).attr("r", 6).style("fill", "#404080")
svg.append("text").attr("x", 320).attr("y", 30).text("variable A").style("font-size", "15px").attr("alignment-baseline","middle")
svg.append("text").attr("x", 320).attr("y", 60).text("variable B").style("font-size", "15px").attr("alignment-baseline","middle")

// Function to compute density
function kernelDensityEstimator(kernel, X) {
  return function(V) {
    return X.map(function(x) {
      return [x, d3.mean(V, function(v) { return kernel(x - v); })];
    });
  };
}
function kernelEpanechnikov(k) {
  return function(v) {
    return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;
  };
}

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 30, right: 30, bottom: 30, left: 50},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

// get the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_doubleHist.csv").then( function(data) {

  // add the x Axis
  const x = d3.scaleLinear()
      .domain([-10,15])
      .range([0, width]);
  svg.append("g")
      .attr("transform", `translate(0, ${height})`)
      .call(d3.axisBottom(x));

  // add the y Axis
  const y = d3.scaleLinear()
            .range([height, 0])
            .domain([0, 0.12]);
  svg.append("g")
      .call(d3.axisLeft(y));

  // Compute kernel density estimation
  const kde = kernelDensityEstimator(kernelEpanechnikov(7), x.ticks(60))
  const density1 =  kde( data
      .filter( function(d){return d.type === "variable 1"} )
      .map(function(d){  return d.value; }) )
  const density2 =  kde( data
      .filter( function(d){return d.type === "variable 2"} )
      .map(function(d){  return d.value; }) )

  // Plot the area
  svg.append("path")
      .attr("class", "mypath")
      .datum(density1)
      .attr("fill", "#69b3a2")
      .attr("opacity", ".6")
      .attr("stroke", "#000")
      .attr("stroke-width", 1)
      .attr("stroke-linejoin", "round")
      .attr("d",  d3.line()
        .curve(d3.curveBasis)
          .x(function(d) { return x(d[0]); })
          .y(function(d) { return y(d[1]); })
      );

  // Plot the area
  svg.append("path")
      .attr("class", "mypath")
      .datum(density2)
      .attr("fill", "#404080")
      .attr("opacity", ".6")
      .attr("stroke", "#000")
      .attr("stroke-width", 1)
      .attr("stroke-linejoin", "round")
      .attr("d",  d3.line()
        .curve(d3.curveBasis)
          .x(function(d) { return x(d[0]); })
          .y(function(d) { return y(d[1]); })
      );

});

// Handmade legend
svg.append("circle").attr("cx",300).attr("cy",30).attr("r", 6).style("fill", "#69b3a2")
svg.append("circle").attr("cx",300).attr("cy",60).attr("r", 6).style("fill", "#404080")
svg.append("text").attr("x", 320).attr("y", 30).text("variable A").style("font-size", "15px").attr("alignment-baseline","middle")
svg.append("text").attr("x", 320).attr("y", 60).text("variable B").style("font-size", "15px").attr("alignment-baseline","middle")

// Function to compute density
function kernelDensityEstimator(kernel, X) {
  return function(V) {
    return X.map(function(x) {
      return [x, d3.mean(V, function(v) { return kernel(x - v); })];
    });
  };
}
function kernelEpanechnikov(k) {
  return function(v) {
    return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;
  };
}
</script>
```

### Related blocks →

- _Density chart -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/density.html)

- _Kernel Density Estimation - by_ [Mike Bostock](https://bl.ocks.org/mbostock/4341954)

- _Double histogram -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/graph/histogram_double.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.27667918510557143)

Prebid User Sync

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=7f753ae2-fcd6-4086-a8bc-280f5f49bf20)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/d26cd369-d5e5-e126-f2e7-feef2145b0e4?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=46abb52d-4549-736f-c330-e81ade127dad&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NmFjNDY2ZTctOGMzZS0yZGNiLWQ2ZDAtYjJhMzE0ZjBiM2Nk)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_b045e1fb-9de1-49be-ba8d-653f9b06e8a7&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-B6D199781DAE690DFC79C6DE4A85D4E9@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-4427A32E280BBAD05C03DEBFD5F05343@mhtml.blink)

[iframe](cid:frame-B14891F9E471EB06ACBD976406A72363@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-CE58B9ED39F0814E803BFA4AE96A8B16@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_b045e1fb-9de1-49be-ba8d-653f9b06e8a7&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_b045e1fb-9de1-49be-ba8d-653f9b06e8a7)

![](https://match.adsrvr.org/track/cmf/casale)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876gcAoIkQAKN6gAO2gmgAA%262019&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876gcAoIkQAKN6gAO2gmgAAB-MAAAIB&gpp=&gpp_sid=)![](https://rtb.adentifi.com/CookieIndex)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876gcAoIkQAKN6gAO2gmgAAB-MAAAIB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://cms.quantserve.com/pixel/p-Z8PuJEk6U7Hyq.gif?idmatch=0)![](https://pm.w55c.net/ping_match.gif?ei=CASALE&rurl=https://dsum-sec.casalemedia.com/crum?cm_dsp_id=47&external_user_id=_wfivefivec_)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876gcAoIkQAKN6gAO2gmgAAB-MAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=29c3a409-1b04-4420-99f7-20c5ae634303)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=MjljM2E0MDktMWIwNC00NDIwLTk5ZjctMjBjNWFlNjM0MzAz)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://image8.pubmatic.com/AdServer/ImgSync?p=156557&gdpr=0&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D156557%26pr%3Dhttps%253A%252F%252Fmatch.sharethrough.com%252Fsync%252Fv1%253Fsource_id%253DuFFr5RFBYgoUJbWMAWGEZKS3%2526source_user_id%253D%2523PMUID)![](https://c1.adform.net/serving/cookie/match?party=1294&gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=C891E04C-8CC7-477F-98D3-D81BC2F3F657)[iframe](cid:frame-474D7E91AFD17C829C6C3DAF927687E8@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=C891E04C-8CC7-477F-98D3-D81BC2F3F657&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=C891E04C-8CC7-477F-98D3-D81BC2F3F657&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=Qzg5MUUwNEMtOENDNy00NzdGLTk4RDMtRDgxQkMyRjNGNjU3&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=yJHgTIzHR3-Y09gbwvP2Vw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=C891E04C-8CC7-477F-98D3-D81BC2F3F657&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-AF7FB3A05DA76CF2AE978225C8E36147@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIoPDk7vBxC)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElvUERrN3ZCeEM=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIoPDk7vBxC)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIoPDk7vBxC)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=1e7dc950-59e3-c895-033e-6a8db621b64d)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=40d5c6d1-1e4e-4ee8-89d1-70cced9ebca1)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)

[iframe](cid:frame-3D81CBB867C7246577288F0692A28602@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-6D2820510940B305C7BFEF0D2ED0095F@mhtml.blink)

Topics Frame

## D3.js Network Graphs
##### Steps:

- First of all, it is important to understand that network
input data is composed by a list of nodes and a list
of links. Have a look to the
[data](https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_network.json).


- After the `d3.csv()` call, you can do
`console.log(data.links)` to check how the data
looks like.


- In the links part, elements must be called
`source` and `target` to be recognized
by d3


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 40},
  width = 400 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
.append("g")
  .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");

d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_network.json", function( data) {

  // Initialize the links
  var link = svg
    .selectAll("line")
    .data(data.links)
    .enter()
    .append("line")
      .style("stroke", "#aaa")

  // Initialize the nodes
  var node = svg
    .selectAll("circle")
    .data(data.nodes)
    .enter()
    .append("circle")
      .attr("r", 20)
      .style("fill", "#69b3a2")

  // Let's list the force we wanna apply on the network
  var simulation = d3.forceSimulation(data.nodes)                 // Force algorithm is applied to data.nodes
      .force("link", d3.forceLink()                               // This force provides links between nodes
            .id(function(d) { return d.id; })                     // This provide  the id of a node
            .links(data.links)                                    // and this the list of links
      )
      .force("charge", d3.forceManyBody().strength(-400))         // This adds repulsion between nodes. Play with the -400 for the repulsion strength
      .force("center", d3.forceCenter(width / 2, height / 2))     // This force attracts nodes to the center of the svg area
      .on("end", ticked);

  // This function is run at each iteration of the force algorithm, updating the nodes position.
  function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node
         .attr("cx", function (d) { return d.x+6; })
         .attr("cy", function(d) { return d.y-6; });
  }

});

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 30, left: 40},
  width = 400 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
.append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
.append("g")
  .attr("transform",
        `translate(${margin.left}, ${margin.top})`);

d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_network.json").then( function( data) {

  // Initialize the links
  const link = svg
    .selectAll("line")
    .data(data.links)
    .join("line")
      .style("stroke", "#aaa")

  // Initialize the nodes
  const node = svg
    .selectAll("circle")
    .data(data.nodes)
    .join("circle")
      .attr("r", 20)
      .style("fill", "#69b3a2")

  // Let's list the force we wanna apply on the network
  const simulation = d3.forceSimulation(data.nodes)                 // Force algorithm is applied to data.nodes
      .force("link", d3.forceLink()                               // This force provides links between nodes
            .id(function(d) { return d.id; })                     // This provide  the id of a node
            .links(data.links)                                    // and this the list of links
      )
      .force("charge", d3.forceManyBody().strength(-400))         // This adds repulsion between nodes. Play with the -400 for the repulsion strength
      .force("center", d3.forceCenter(width / 2, height / 2))     // This force attracts nodes to the center of the svg area
      .on("end", ticked);

  // This function is run at each iteration of the force algorithm, updating the nodes position.
  function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node
         .attr("cx", function (d) { return d.x+6; })
         .attr("cy", function(d) { return d.y-6; });
  }

});
</script>
```

### Related blocks →

- _Force layout -_ by
[D3 in depth](https://d3indepth.com/force-layout/)

- _V4 simple network graph -_ by
[Efrat Vilenski](https://bl.ocks.org/EfratVil/58b872b4f15a358c3a9822f5a285c5be)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.39962522147078805)

Prebid User Sync

![](https://idsync.rlcdn.com/420486.gif?partner_uid=1962B953-1808-48E4-A1D3-AAE467C2049A)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=14&cid=1962B953-1808-48E4-A1D3-AAE467C2049A&gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=14&cid=1962B953-1808-48E4-A1D3-AAE467C2049A&gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.onaudience.com/?partner=214&mapped=1962B953-1808-48E4-A1D3-AAE467C2049A&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=1962B953-1808-48E4-A1D3-AAE467C2049A&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=MTk2MkI5NTMtMTgwOC00OEU0LUExRDMtQUFFNDY3QzIwNDlB&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=GWK5UxgISOSh06rkZ8IEmg%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=1962B953-1808-48E4-A1D3-AAE467C2049A&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/1962B953-1808-48E4-A1D3-AAE467C2049A?gdpr=0&gdpr_consent=)[iframe](cid:frame-2C294E443C185E97C9D616BD95366F16@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)[iframe](cid:frame-B4EFB21A207CBBBA94AF218FBDA7397C@mhtml.blink)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=3949255715407353210424&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=3949255715407353210424)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/3949255715407353210424?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=3949255715407353210424&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3949255715407353210424)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_8e9a08f6-b9ec-42f5-bc9f-83404ba32178&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-EED6E82C1001908ED38E74F1355E1787@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-DD7BAECB0BA3CFF90BDB6E9531119A16@mhtml.blink)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-78F90E6783FDF0934CF7C027AFA3AD1A@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-39BC5D008F391123BD29A9048B899009@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_8e9a08f6-b9ec-42f5-bc9f-83404ba32178&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_8e9a08f6-b9ec-42f5-bc9f-83404ba32178)

ssum-sec.casalemedia.com

# This site can’t be reached

**ssum-sec.casalemedia.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ssum-sec.casalemedia.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=141402f1-13c4-4cea-b1e0-f657d9a8c038)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=MTQxNDAyZjEtMTNjNC00Y2VhLWIxZTAtZjY1N2Q5YThjMDM4)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://secure.adnxs.com/getuid?https://match.sharethrough.com/sync/v1?source_id=0e8893f90b606c9c5d33f1be&gdpr=0&gdpr_consent=&source_user_id=$UID)![](https://ssc-cms.33across.com/ps/?ri=0013300001kQj2HAAS&ru=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DkzFyzzqXEqukMDumpVLB6Eq3%26source_user_id%3D33XUSERID33X)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHImBVqXcfYA)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHImBVqXcfYA&cb=1741617794389&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSEltQlZxWGNmWUE=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-3209499EAB87C3EB8E93833E41BD05D4@mhtml.blink)

Topics Frame

## Hexbin Map Tutorial
##### Steps:

- Hexagon coordinates have been downloaded to the geoJson
format from
[this website](https://team.carto.com/u/andrew/tables/andrew.us_states_hexgrid/public/map).


- Once you have the geoJson file, the process to map it is
exactly the same as described in the
[background map section](https://d3-graph-gallery.com/backgroundmap.html).


- See the
[hexbinmap section](https://d3-graph-gallery.com/hexbinmap.html) for more
example.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="440" height="300"></svg>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="440" height="300"></svg>

```

``` js
<script>

// The svg
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// Map and projection
var projection = d3.geoMercator()
    .scale(350) // This is the zoom
    .translate([850, 440]); // You have to play with these values to center your map

// Load external data and boot
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/us_states_hexgrid.geojson.json", function(data){

  // Draw the map
  svg.append("g")
      .selectAll("path")
      .data(data.features)
      .enter()
      .append("path")
          .attr("fill", "#69a2a2")
          .attr("d", d3.geoPath()
              .projection(projection)
          )
          .attr("stroke", "black")

})

</script>
```

``` js
<script>

// The svg
const svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// Map and projection
const projection = d3.geoMercator()
    .scale(350) // This is the zoom
    .translate([850, 440]); // You have to play with these values to center your map

// Load external data and boot
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/us_states_hexgrid.geojson.json").then(function(data){

  // Draw the map
  svg.append("g")
      .selectAll("path")
      .data(data.features)
      .join("path")
          .attr("fill", "#69a2a2")
          .attr("d", d3.geoPath()
              .projection(projection)
          )
          .attr("stroke", "black")

})
</script>
```

### Related blocks →

- _Background map in d3.js -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/backgroundmap.html)

- _Hexbin maps -_ by
[data to viz](https://www.data-to-viz.com/graph/hexbinmap.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.8229948825915971)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=4512244279844294166729&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=4512244279844294166729)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/4512244279844294166729?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=4512244279844294166729&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=4512244279844294166729)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_7db6a173-aa43-4728-866d-a086538811c5&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

**c1.adform.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**c1.adform.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-D09BC2AD43B0DDD4F99AF2A591593541@mhtml.blink)

[iframe](cid:frame-0B5D2D3E1ADED45C18A29BEB93110667@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-0D492207ECB31C35C67EC181F124C70C@mhtml.blink)[iframe](cid:frame-0270E9BC2A61742E3DF3BB242FE1D7C4@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_7db6a173-aa43-4728-866d-a086538811c5&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

**secure-assets.rubiconproject.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**secure-assets.rubiconproject.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_7db6a173-aa43-4728-866d-a086538811c5)

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876gcAoIlQALRYTAO0C8AAAB_MAAAAB&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876gcAoIlQALRYTAO0C8AAAB_MAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://dsp.360yield.com/dsp_match/275?ssp=10&gdpr=&gdpr_consent=&r=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fcm_dsp_id%3D15%26external_user_id%3D%7BDSP_USER_ID%7D&userId=Z876gcAoIlQALRYTAO0C8AAA%262035&us_privacy=)![](https://csync.loopme.me/?pubid=11466&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D24%26external_user_id%3D%7Bviewer_token%7D&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876gcAoIlQALRYTAO0C8AAAB_MAAAAB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://bttrack.com/pixel/cookiesync?source=67e94f23-25d6-4008-8236-375d1743c2e0&secure=1)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876gcAoIlQALRYTAO0C8AAAB_MAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=5e36560e-ef3e-4426-8745-6b25a424d072)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=NWUzNjU2MGUtZWYzZS00NDI2LTg3NDUtNmIyNWE0MjRkMDcy)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://cs.admanmedia.com/c01d0246d79eba64b8a7cca07e5b7dc7.gif?puid=5e36560e-ef3e-4426-8745-6b25a424d072&gdpr=0&gdpr_consent=&redir=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DqUVJTHutDLcyGRS8xfsW2M4g%26source_user_id%3D%5BUID%5D%26gdpr%3D0%26gdpr_consent%3D)![](https://cms.quantserve.com/pixel/p-_jQ037pSmtjhN.gif?idmatch=1&gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=B3AF81F4-FC26-432A-BECD-657913B2C26A)[iframe](cid:frame-956116C7598DA897BF0A75B4DB35402A@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=B3AF81F4-FC26-432A-BECD-657913B2C26A&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=B3AF81F4-FC26-432A-BECD-657913B2C26A&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=QjNBRjgxRjQtRkMyNi00MzJBLUJFQ0QtNjU3OTEzQjJDMjZB&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=s6-B9PwmQyq-zWV5E7LCag%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=B3AF81F4-FC26-432A-BECD-657913B2C26A&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-E80DF062EE54E72A7C1EC38D7BE94567@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIlmRwaxpuF)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIlmRwaxpuF)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIlmRwaxpuF)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElsbVJ3YXhwdUY=)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=79ac898f-3801-c0b0-2ca6-47cae98aeefd)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/b5bd93b6-b407-e903-dd7f-d3a87eeee854?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=217af5f2-24ab-7b4a-eca8-c55d81b9251d&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=MGQxNTI2MzgtZWRkYy0yNWVlLWY5NDgtOWZlNDRiNWJlYjdk)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-8A4116FD8BE7D82D4E1755D071893DA0@mhtml.blink)

Topics Frame

## D3 Chord Diagram Labels
0255075100125150175025507510012502550751001251501752002252502753003253503750255075100125150175200225250275300

##### Steps:

- See the [previous post](https://d3-graph-gallery.com/graph/chord_basic.html) for the
basics of chord diagram.


- Ticks position is first computed using the
`groupTicks()` function that is defined at the
end of the script. This function returns info allowing to
place ticks thanks to a translation.


- Adding labels follows almost the same process. Note the
formula `d.angle * 180 / Math.PI - 90` to go from
radian to degree


- Next step: [control color](https://d3-graph-gallery.com/graph/chord_colors).

d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// create the svg area
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", 440)
    .attr("height", 440)
  .append("g")
    .attr("transform", "translate(220,220)")

// create a matrix
var matrix = [\
  [11,  58, 89, 28],\
  [ 51, 18, 20, 61],\
  [ 80, 145, 80, 85],\
  [ 103,   99,  40, 71]\
];

// give this matrix to d3.chord(): it will calculates all the info we need to draw arc and ribbon
var res = d3.chord()
    .padAngle(0.05)
    .sortSubgroups(d3.descending)
    (matrix)

// Add the links between groups
svg
  .datum(res)
  .append("g")
  .selectAll("path")
  .data(function(d) { return d; })
  .enter()
  .append("path")
    .attr("d", d3.ribbon()
      .radius(190)
    )
    .style("fill", "#69b3a2")
    .style("stroke", "black");

// this group object use each group of the data.groups object
var group = svg
  .datum(res)
  .append("g")
  .selectAll("g")
  .data(function(d) { return d.groups; })
  .enter()

// add the group arcs on the outer part of the circle
group.append("g")
    .append("path")
    .style("fill", "grey")
    .style("stroke", "black")
    .attr("d", d3.arc()
      .innerRadius(190)
      .outerRadius(200)
    )

// Add the ticks
group
  .selectAll(".group-tick")
  .data(function(d) { return groupTicks(d, 25); })    // Controls the number of ticks: one tick each 25 here.
  .enter()
  .append("g")
    .attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + 200 + ",0)"; })
  .append("line")               // By default, x1 = y1 = y2 = 0, so no need to specify it.
    .attr("x2", 6)
    .attr("stroke", "black")

// Add the labels of a few ticks:
group
  .selectAll(".group-tick-label")
  .data(function(d) { return groupTicks(d, 25); })
  .enter()
  .filter(function(d) { return d.value % 25 === 0; })
  .append("g")
    .attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + 200 + ",0)"; })
  .append("text")
    .attr("x", 8)
    .attr("dy", ".35em")
    .attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180) translate(-16)" : null; })
    .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
    .text(function(d) { return d.value })
    .style("font-size", 9)

// Returns an array of tick angles and values for a given group and step.
function groupTicks(d, step) {
  var k = (d.endAngle - d.startAngle) / d.value;
  return d3.range(0, d.value, step).map(function(value) {
    return {value: value, angle: value * k + d.startAngle};
  });
}

</script>
```

``` js
<script>

// create the svg area
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", 440)
    .attr("height", 440)
  .append("g")
    .attr("transform", "translate(220,220)")

// create a matrix
const matrix = [\
  [11,  58, 89, 28],\
  [ 51, 18, 20, 61],\
  [ 80, 145, 80, 85],\
  [ 103,   99,  40, 71]\
];

// give this matrix to d3.chord(): it will calculates all the info we need to draw arc and ribbon
const res = d3.chord()
    .padAngle(0.05)
    .sortSubgroups(d3.descending)
    (matrix)

// Add the links between groups
svg
  .datum(res)
  .append("g")
  .selectAll("path")
  .data(d => d)
  .join("path")
    .attr("d", d3.ribbon()
      .radius(190)
    )
    .style("fill", "#69b3a2")
    .style("stroke", "black");

// this group object use each group of the data.groups object
const group = svg
  .datum(res)
  .append("g")
  .selectAll("g")
  .data(d => d.groups)
  .enter()

// add the group arcs on the outer part of the circle
group.append("g")
    .append("path")
    .style("fill", "grey")
    .style("stroke", "black")
    .attr("d", d3.arc()
      .innerRadius(190)
      .outerRadius(200)
    )

// Add the ticks
group
  .selectAll(".group-tick")
  .data(d => groupTicks(d, 25))    // Controls the number of ticks: one tick each 25 here.
  .join("g")
  .attr("transform", d => `rotate(${d.angle * 180 / Math.PI - 90}) translate(200,0)`)
  .append("line")               // By default, x1 = y1 = y2 = 0, so no need to specify it.
    .attr("x2", 6)
    .attr("stroke", "black")

// Add the labels of a few ticks:
group
  .selectAll(".group-tick-label")
  .data(d => groupTicks(d, 25))
  .enter()
  .filter(d => d.value % 25 === 0)
  .append("g")
    .attr("transform", d => `rotate(${d.angle * 180 / Math.PI - 90}) translate(200,0)`)
  .append("text")
    .attr("x", 8)
    .attr("dy", ".35em")
    .attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180) translate(-16)" : null; })
    .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
    .text(d => d.value)
    .style("font-size", 9)

// Returns an array of tick angles and values for a given group and step.
function groupTicks(d, step) {
  const k = (d.endAngle - d.startAngle) / d.value;
  return d3.range(0, d.value, step).map(function(value) {
    return {value: value, angle: value * k + d.startAngle};
  });
}

</script>
```

### Related blocks →

- _d3-chord documentation -_ by
[Mike Bostock](https://github.com/d3/d3-chord)

- _D3 Chord Diagram (v5) -_ by
[Mike Bostock](https://beta.observablehq.com/@mbostock/d3-chord-diagram)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.7627570460047088)

Prebid User Sync

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

rtb.gumgum.com

# This site can’t be reached

The webpage at **https://rtb.gumgum.com/usync/amzns2s?r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dgg.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://rtb.gumgum.com/usync/amzns2s?r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dgg.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.sharethrough.com

# This site can’t be reached

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

**ads.pubmatic.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ads.pubmatic.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

sync-amz.ads.yieldmo.com

# This site can’t be reached

**sync-amz.ads.yieldmo.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**sync-amz.ads.yieldmo.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

**ib.adnxs.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ib.adnxs.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

## Interactive Bar Plots
Variable 1Variable 2

ABCDEFGHIJ0246810121416182022

##### Steps:

- First of all, understand how to build a
[basic barplot.](https://d3-graph-gallery.com/graph/barplot_basic.html)

- Add 2 `buttons` in the html part. When you click
the button, a function called `update()` is
triggered.


- Read
[this post](https://d3-graph-gallery.com/graph/barplot_button_data_simple.html) for
a basic version. Here it's just an adaptation for
`.csv` input format.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Add 2 buttons -->
<button onclick="update('var1')">Variable 1</button>
<button onclick="update('var2')">Variable 2</button>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Add 2 buttons -->
<button onclick="update('var1')">Variable 1</button>
<button onclick="update('var2')">Variable 2</button>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 70, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Initialize the X axis
var x = d3.scaleBand()
  .range([ 0, width ])
  .padding(0.2);
var xAxis = svg.append("g")
  .attr("transform", "translate(0," + height + ")")

// Initialize the Y axis
var y = d3.scaleLinear()
  .range([ height, 0]);
var yAxis = svg.append("g")
  .attr("class", "myYaxis")

// A function that create / update the plot for a given variable:
function update(selectedVar) {

  // Parse the Data
  d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/barplot_change_data.csv", function(data) {

    // X axis
    x.domain(data.map(function(d) { return d.group; }))
    xAxis.transition().duration(1000).call(d3.axisBottom(x))

    // Add Y axis
    y.domain([0, d3.max(data, function(d) { return +d[selectedVar] }) ]);
    yAxis.transition().duration(1000).call(d3.axisLeft(y));

    // variable u: map data to existing bars
    var u = svg.selectAll("rect")
      .data(data)

    // update bars
    u
      .enter()
      .append("rect")
      .merge(u)
      .transition()
      .duration(1000)
        .attr("x", function(d) { return x(d.group); })
        .attr("y", function(d) { return y(d[selectedVar]); })
        .attr("width", x.bandwidth())
        .attr("height", function(d) { return height - y(d[selectedVar]); })
        .attr("fill", "#69b3a2")
  })

}

// Initialize plot
update('var1')

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 30, right: 30, bottom: 70, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

// Initialize the X axis
const x = d3.scaleBand()
  .range([ 0, width ])
  .padding(0.2);
const xAxis = svg.append("g")
  .attr("transform", `translate(0,${height})`);

// Initialize the Y axis
const y = d3.scaleLinear()
  .range([ height, 0]);
const yAxis = svg.append("g")
  .attr("class", "myYaxis");

// A function that create / update the plot for a given variable:
function update(selectedVar) {

  // Parse the Data
  d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/barplot_change_data.csv").then( function(data) {

    // X axis
    x.domain(data.map(d => d.group));
    xAxis.transition().duration(1000).call(d3.axisBottom(x));

    // Add Y axis
    y.domain([0, d3.max(data, d => +d[selectedVar]) ]);
    yAxis.transition().duration(1000).call(d3.axisLeft(y));

    // variable u: map data to existing bars
    const u = svg.selectAll("rect")
      .data(data)

    // update bars
    u.join("rect")
      .transition()
      .duration(1000)
        .attr("x", d => x(d.group))
        .attr("y", d => y(d[selectedVar]))
        .attr("width", x.bandwidth())
        .attr("height", d => height - y(d[selectedVar]))
        .attr("fill", "#69b3a2")
  })

}

// Initialize plot
update('var1')

</script>
```

### Related blocks →

- _Simple bar graph in v4 -_ [link](https://bl.ocks.org/d3noob/bdf28027e0ce70bd132edc64f1dd7ea4)

- _Let's make a bar chart -_ [link](https://bost.ocks.org/mike/bar/)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.06845286213607404)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=95364506230190598892&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=95364506230190598892)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/95364506230190598892?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=95364506230190598892&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=95364506230190598892)

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_efdd04fe-f676-4b12-ba7f-abeb09f9bcb2&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9lZmRkMDRmZS1mNjc2LTRiMTItYmE3Zi1hYmViMDlmOWJjYjI=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9lZmRkMDRmZS1mNjc2LTRiMTItYmE3Zi1hYmViMDlmOWJjYjI=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.adsrvr.org

# This site can’t be reached

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-93238EEC2BC73E1456EC8C1BE361890C@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_efdd04fe-f676-4b12-ba7f-abeb09f9bcb2&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_efdd04fe-f676-4b12-ba7f-abeb09f9bcb2)

![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876gdHM75MAAHIOAG5tZQAAAkEAAAAB&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876gdHM75MAAHIOAG5tZQAA%26577&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://trace.mediago.io/ju/cs/indexexchange)![](https://um.simpli.fi/pm_match?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=90&external_user_id=$UID)![](https://rtb.adentifi.com/CookieIndex)![](https://tr.blismedia.com/v1/api/sync/indexexchange?gdpr=&userId=Z876gdHM75MAAHIOAG5tZQAA%26577&gpp=&gpp_sid=&us_privacy=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876gdHM75MAAHIOAG5tZQAAAkEAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=cec7ed87-c13d-4aa6-abcd-7c8653722e61)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=Y2VjN2VkODctYzEzZC00YWE2LWFiY2QtN2M4NjUzNzIyZTYx)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/rmpssp?sub=sharethrough)![](https://sync-tm.everesttech.net/upi/pid/byN59NcB?redir=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DSvWuQHUbMWnhsCDYjeaq81U2%26source_user_id%3D%24%7BTM_USER_ID%7D%0A)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=492E1C28-08DC-4D52-A112-6E5218A98F9E)[iframe](cid:frame-0502D4AF76FD64DCCB10158321E2E96A@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=492E1C28-08DC-4D52-A112-6E5218A98F9E&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=492E1C28-08DC-4D52-A112-6E5218A98F9E&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=SS4cKAjcTVKhEm5SGKmPng%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=492E1C28-08DC-4D52-A112-6E5218A98F9E&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/492E1C28-08DC-4D52-A112-6E5218A98F9E?gdpr=0&gdpr_consent=)[iframe](cid:frame-7F133755273F1C0F93C7400889683E96@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHILiuMnQeN4)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHILiuMnQeN4&cb=1741617793810&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElMaXVNblFlTjQ=)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=c37cc9ba-2ad0-c6b1-25cf-2fc765078a6a)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/0f6dd383-a6d6-ef02-d416-bba5f2638cc3?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=9baab5c7-367a-7d4b-e5c1-ad500d34418a&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=YjdjNTY2MGQtZmYwZC0yM2VmLWYwMjEtZjdlOWM3ZDY4ZmVh)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

**ib.adnxs.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ib.adnxs.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-B3C3779ED9D01496528025C22DA84D33@mhtml.blink)

Topics Frame

## Connected Scatterplot Tutorial
01234567891002468101214161820valueAvalueBvalueC

##### Steps:

- First, you need to understand how to build a
[basic connected scatterplot](https://d3-graph-gallery.com/graph/connectedscatter_basic.html).


- The first tricky step is to reformat the
[data](https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_connectedscatter.csv). Here, we start with a _wide_ or
_untidy_ format: each series is stored in a different
column. We need to reformat it in a format where each
group is a key.


- Adding the elements is tricky: first we have to
`enter()` the reformatted dataset. Once in a
group, we have to `enter()` the list of x and y
coordinates.


- Last step is to add the labels at the end of each line. Need
to enter the data and then use `datum()` to
extract the position of the last data point.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<!-- Color Scale -->
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 100, bottom: 30, left: 30},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_connectedscatter.csv", function(data) {

    // List of groups (here I have one group per column)
    var allGroup = ["valueA", "valueB", "valueC"]

    // Reformat the data: we need an array of arrays of {x, y} tuples
    var dataReady = allGroup.map( function(grpName) { // .map allows to do something for each element of the list
      return {
        name: grpName,
        values: data.map(function(d) {
          return {time: d.time, value: +d[grpName]};
        })
      };
    });
    // I strongly advise to have a look to dataReady with
    // console.log(dataReady)

    // A color scale: one color for each group
    var myColor = d3.scaleOrdinal()
      .domain(allGroup)
      .range(d3.schemeSet2);

    // Add X axis --> it is a date format
    var x = d3.scaleLinear()
      .domain([0,10])
      .range([ 0, width ]);
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    // Add Y axis
    var y = d3.scaleLinear()
      .domain( [0,20])
      .range([ height, 0 ]);
    svg.append("g")
      .call(d3.axisLeft(y));

    // Add the lines
    var line = d3.line()
      .x(function(d) { return x(+d.time) })
      .y(function(d) { return y(+d.value) })
    svg.selectAll("myLines")
      .data(dataReady)
      .enter()
      .append("path")
        .attr("d", function(d){ return line(d.values) } )
        .attr("stroke", function(d){ return myColor(d.name) })
        .style("stroke-width", 4)
        .style("fill", "none")

    // Add the points
    svg
      // First we need to enter in a group
      .selectAll("myDots")
      .data(dataReady)
      .enter()
        .append('g')
        .style("fill", function(d){ return myColor(d.name) })
      // Second we need to enter in the 'values' part of this group
      .selectAll("myPoints")
      .data(function(d){ return d.values })
      .enter()
      .append("circle")
        .attr("cx", function(d) { return x(d.time) } )
        .attr("cy", function(d) { return y(d.value) } )
        .attr("r", 5)
        .attr("stroke", "white")

    // Add a legend at the end of each line
    svg
      .selectAll("myLabels")
      .data(dataReady)
      .enter()
        .append('g')
        .append("text")
          .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) // keep only the last value of each time series
          .attr("transform", function(d) { return "translate(" + x(d.value.time) + "," + y(d.value.value) + ")"; }) // Put the text at the position of the last point
          .attr("x", 12) // shift the text a bit more right
          .text(function(d) { return d.name; })
          .style("fill", function(d){ return myColor(d.name) })
          .style("font-size", 15)

})

</script>
```

``` js
<script>
// set the dimensions and margins of the graph
const margin = {top: 10, right: 100, bottom: 30, left: 30},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",`translate(${margin.left},${margin.top})`);

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_connectedscatter.csv").then(function(data) {

    // List of groups (here I have one group per column)
    const allGroup = ["valueA", "valueB", "valueC"]

    // Reformat the data: we need an array of arrays of {x, y} tuples
    const dataReady = allGroup.map( function(grpName) { // .map allows to do something for each element of the list
      return {
        name: grpName,
        values: data.map(function(d) {
          return {time: d.time, value: +d[grpName]};
        })
      };
    });
    // I strongly advise to have a look to dataReady with
    // console.log(dataReady)

    // A color scale: one color for each group
    const myColor = d3.scaleOrdinal()
      .domain(allGroup)
      .range(d3.schemeSet2);

    // Add X axis --> it is a date format
    const x = d3.scaleLinear()
      .domain([0,10])
      .range([ 0, width ]);
    svg.append("g")
      .attr("transform", `translate(0, ${height})`)
      .call(d3.axisBottom(x));

    // Add Y axis
    const y = d3.scaleLinear()
      .domain( [0,20])
      .range([ height, 0 ]);
    svg.append("g")
      .call(d3.axisLeft(y));

    // Add the lines
    const line = d3.line()
      .x(d => x(+d.time))
      .y(d => y(+d.value))
    svg.selectAll("myLines")
      .data(dataReady)
      .join("path")
        .attr("d", d => line(d.values))
        .attr("stroke", d => myColor(d.name))
        .style("stroke-width", 4)
        .style("fill", "none")

    // Add the points
    svg
      // First we need to enter in a group
      .selectAll("myDots")
      .data(dataReady)
      .join('g')
        .style("fill", d => myColor(d.name))
      // Second we need to enter in the 'values' part of this group
      .selectAll("myPoints")
      .data(d => d.values)
      .join("circle")
        .attr("cx", d => x(d.time))
        .attr("cy", d => y(d.value))
        .attr("r", 5)
        .attr("stroke", "white")

    // Add a legend at the end of each line
    svg
      .selectAll("myLabels")
      .data(dataReady)
      .join('g')
        .append("text")
          .datum(d => { return {name: d.name, value: d.values[d.values.length - 1]}; }) // keep only the last value of each time series
          .attr("transform",d => `translate(${x(d.value.time)},${y(d.value.value)})`) // Put the text at the position of the last point
          .attr("x", 12) // shift the text a bit more right
          .text(d => d.name)
          .style("fill", d => myColor(d.name))
          .style("font-size", 15)

})
</script>
```

### Related blocks →

- _Line Chart -_ [link](https://bl.ocks.org/mbostock/3883245)

- _Multi Series Line Chart -_ by
[SalvoB](https://bl.ocks.org/salvob41/df700ff6bbeed285de043955785775c5)

- _Basic line plot -_ by
[d3 graph gallery](https://d3-graph-gallery.com/graph/line_basic.html)

- _Scatterplot with Multiple Series -_ by
[Mike Bostock](https://bl.ocks.org/mbostock/3183403)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.8263736428045212)

Prebid User Sync

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=c4ef1a45-bcb7-4f42-9e95-92112d8af0ec)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/69f6f3ce-9584-eee2-c4ce-44f15386ff28?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=fd31958a-0528-7cab-f519-5204acd13261&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZDE1ZTQ2NDAtY2M1Zi0yMjBmLWUwZjktMDhiZDY2MzNmYzAx)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=1623832327998180450169&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=1623832327998180450169)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/1623832327998180450169?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=1623832327998180450169&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=1623832327998180450169)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_4b0559e1-873f-46cf-b845-9f138bcea429&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-A7F510BA3FDE0082EADB04E96ECE9E64@mhtml.blink)

[iframe](cid:frame-702F23F5EFEC95C0C719A31B7330A390@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-064578F7D95994FEDDFE12B493A2496A@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_4b0559e1-873f-46cf-b845-9f138bcea429&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_4b0559e1-873f-46cf-b845-9f138bcea429)

![](https://match.adsrvr.org/track/cmf/casale)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876iMAoInIAK22XAPhc3QAACkEAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876iMAoInIAK22XAPhc3QAACkEAAAAB&gpp=&gpp_sid=)![](https://rtb.adentifi.com/CookieIndex)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://bttrack.com/pixel/cookiesync?source=67e94f23-25d6-4008-8236-375d1743c2e0&secure=1)![](https://pm.w55c.net/ping_match.gif?ei=CASALE&rurl=https://dsum-sec.casalemedia.com/crum?cm_dsp_id=47&external_user_id=_wfivefivec_)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876iMAoInIAK22XAPhc3QAACkEAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=7010d14e-f31a-4065-ad57-f379ffe659fd)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=NzAxMGQxNGUtZjMxYS00MDY1LWFkNTctZjM3OWZmZTY1OWZk)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/sharethrough)![](https://secure.adnxs.com/getuid?https://match.sharethrough.com/sync/v1?source_id=0e8893f90b606c9c5d33f1be&gdpr=0&gdpr_consent=&source_user_id=$UID)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=264A96A8-3510-436A-9775-9A0A91C63B5E)[iframe](cid:frame-08353F3AA56F257682EB68B8B58AA84E@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=264A96A8-3510-436A-9775-9A0A91C63B5E&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=264A96A8-3510-436A-9775-9A0A91C63B5E&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=MjY0QTk2QTgtMzUxMC00MzZBLTk3NzUtOUEwQTkxQzYzQjVF&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=JkqWqDUQQ2qXdZoKkcY7Xg%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=264A96A8-3510-436A-9775-9A0A91C63B5E&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-15A1E3B900CEAFE559CC1EDA574371DF@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIdoWfj5aQf)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIdoWfj5aQf&cb=1741617800641&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIdoWfj5aQf)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=a5e7e9f7-1982-c751-3517-d093c4e2f981)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=fb4fe676-5e2f-412c-bff8-cad29f5df36d)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)

ib.adnxs.com

# This site can’t be reached

**ib.adnxs.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ib.adnxs.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-9FF182E6525A933E64BE3DE5A3BFE055@mhtml.blink)

Topics Frame

## Horizontal Lollipop Chart
01,0002,0003,0004,0005,0006,0007,0008,0009,00010,00011,00012,00013,000United StatesRussiaGermany (FRG)FranceUnited KingdomChinaSpainNetherlandsItalyIsrael

##### Steps:

- Almost the same than previous post: the
[most basic lollipop plot](https://d3-graph-gallery.com/graph/lollipop_basic.html)

- Just need to swap X and Y axis, good way to work on your
axis and scale skills. [Read more](https://d3-graph-gallery.com/graph/lollipop_horizontal.html)

d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 40, left: 100},
    width = 460 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum_header.csv", function(data) {

  // Add X axis
  var x = d3.scaleLinear()
    .domain([0, 13000])
    .range([ 0, width]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))
    .selectAll("text")
      .attr("transform", "translate(-10,0)rotate(-45)")
      .style("text-anchor", "end");

// Y axis
var y = d3.scaleBand()
  .range([ 0, height ])
  .domain(data.map(function(d) { return d.Country; }))
  .padding(1);
svg.append("g")
  .call(d3.axisLeft(y))

// Lines
svg.selectAll("myline")
  .data(data)
  .enter()
  .append("line")
    .attr("x1", function(d) { return x(d.Value); })
    .attr("x2", x(0))
    .attr("y1", function(d) { return y(d.Country); })
    .attr("y2", function(d) { return y(d.Country); })
    .attr("stroke", "grey")

// Circles
svg.selectAll("mycircle")
  .data(data)
  .enter()
  .append("circle")
    .attr("cx", function(d) { return x(d.Value); })
    .attr("cy", function(d) { return y(d.Country); })
    .attr("r", "4")
    .style("fill", "#69b3a2")
    .attr("stroke", "black")
})

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 40, left: 100},
    width = 460 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`);

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum_header.csv").then( function(data) {

  // Add X axis
  const x = d3.scaleLinear()
    .domain([0, 13000])
    .range([ 0, width]);
  svg.append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x))
    .selectAll("text")
      .attr("transform", "translate(-10,0)rotate(-45)")
      .style("text-anchor", "end");

// Y axis
const y = d3.scaleBand()
  .range([ 0, height ])
  .domain(data.map(function(d) { return d.Country; }))
  .padding(1);
svg.append("g")
  .call(d3.axisLeft(y))

// Lines
svg.selectAll("myline")
  .data(data)
  .enter()
  .append("line")
    .attr("x1", function(d) { return x(d.Value); })
    .attr("x2", x(0))
    .attr("y1", function(d) { return y(d.Country); })
    .attr("y2", function(d) { return y(d.Country); })
    .attr("stroke", "grey")

// Circles
svg.selectAll("mycircle")
  .data(data)
  .enter()
  .append("circle")
    .attr("cx", function(d) { return x(d.Value); })
    .attr("cy", function(d) { return y(d.Country); })
    .attr("r", "4")
    .style("fill", "#69b3a2")
    .attr("stroke", "black")
})
</script>
```

### Related blocks →

- _The most basic barplot with d3.js_ -
[link](https://www.d3-graph-gallery.com/graph/barplot_basic.html)

- _Lollipop chart -_ [link](https://bl.ocks.org/curran/d867264d468b323c2e76886d44e7e8f9)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.7417930454308825)

Prebid User Sync

User-Sync

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_c42874b5-170e-4945-806a-6258fa859819&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-ED94713B57F7FA7D553F9A0EEC305655@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-ECCBECE803E45F46EDB1DFAFC030F4AE@mhtml.blink)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.adsrvr.org

# This site can’t be reached

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)

[iframe](cid:frame-32FC25280B66A6829ACA235E1CCCB822@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_c42874b5-170e-4945-806a-6258fa859819&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

**secure-assets.rubiconproject.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**secure-assets.rubiconproject.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_c42874b5-170e-4945-806a-6258fa859819)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=1931a0fd-27eb-4cc9-bf52-38bdcd88768a)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=MTkzMWEwZmQtMjdlYi00Y2M5LWJmNTItMzhiZGNkODg3Njhh)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://match.prod.bidr.io/cookie-sync/shr?gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=sharethrough&user_id=1931a0fd-27eb-4cc9-bf52-38bdcd88768a&gdpr=0&gdpr_consent=&gdpr_pd=1&us_privacy=&expires=365)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

## Interactive Bubble Chart
020,00040,000Gdp per Capita354045505560657075808590Life expectancy101001000Population (M)AsiaEuropeAmericasAfricaOceania

##### Steps:

- First of all, you need to understand how to build a
[basic bubble chart](https://d3-graph-gallery.com/graph/bubble_basic.html).


- This post aims to show how to add tooltip. The technique is
always almost the same:


- Create a `tooltip` element that will contain
the text. Hide it with css (use `opacity` or
`display`)

- Create 3 functions that show the tooltip
( `showTooltip`), update its position
( `moveTooltip`) and hide it when mouse leave
( `hideTooltip`)

- Trigger these functions when the user hover / unhover the
circles.


- Note: It is a good practice to change circle feature
on hover, to make sure what data point you are looking at.
Here it is done with `css`, changing the stroke
color.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Load color scale -->
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<!-- A bit of CSS: change stroke color of circle on hover (white -> black) -->
<style>
.bubbles {
  stroke-width: 1px;
  stroke: black;
  opacity: .8
}
.bubbles:hover {
  stroke: black;
}
</style>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<!-- A bit of CSS: change stroke color of circle on hover (white -> black) -->
<style>
  .bubbles {
    stroke-width: 1px;
    stroke: black;
    opacity: .8
  }
  .bubbles:hover {
    stroke: black;
  }
</style>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 40, right: 150, bottom: 60, left: 30},
    width = 500 - margin.left - margin.right,
    height = 420 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/4_ThreeNum.csv", function(data) {

  // ---------------------------//
  //       AXIS  AND SCALE      //
  // ---------------------------//

  // Add X axis
  var x = d3.scaleLinear()
    .domain([0, 45000])
    .range([ 0, width ]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).ticks(3));

  // Add X axis label:
  svg.append("text")
      .attr("text-anchor", "end")
      .attr("x", width)
      .attr("y", height+50 )
      .text("Gdp per Capita");

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([35, 90])
    .range([ height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Add Y axis label:
  svg.append("text")
      .attr("text-anchor", "end")
      .attr("x", 0)
      .attr("y", -20 )
      .text("Life expectancy")
      .attr("text-anchor", "start")

  // Add a scale for bubble size
  var z = d3.scaleSqrt()
    .domain([200000, 1310000000])
    .range([ 2, 30]);

  // Add a scale for bubble color
  var myColor = d3.scaleOrdinal()
    .domain(["Asia", "Europe", "Americas", "Africa", "Oceania"])
    .range(d3.schemeSet1);

  // ---------------------------//
  //      TOOLTIP               //
  // ---------------------------//

  // -1- Create a tooltip div that is hidden by default:
  var tooltip = d3.select("#my_dataviz")
    .append("div")
      .style("opacity", 0)
      .attr("class", "tooltip")
      .style("background-color", "black")
      .style("border-radius", "5px")
      .style("padding", "10px")
      .style("color", "white")

  // -2- Create 3 functions to show / update (when mouse move but stay on same circle) / hide the tooltip
  var showTooltip = function(d) {
    tooltip
      .transition()
      .duration(200)
    tooltip
      .style("opacity", 1)
      .html("Country: " + d.country)
      .style("left", (d3.mouse(this)[0]+30) + "px")
      .style("top", (d3.mouse(this)[1]+30) + "px")
  }
  var moveTooltip = function(d) {
    tooltip
      .style("left", (d3.mouse(this)[0]+30) + "px")
      .style("top", (d3.mouse(this)[1]+30) + "px")
  }
  var hideTooltip = function(d) {
    tooltip
      .transition()
      .duration(200)
      .style("opacity", 0)
  }

  // ---------------------------//
  //       HIGHLIGHT GROUP      //
  // ---------------------------//

  // What to do when one group is hovered
  var highlight = function(d){
    // reduce opacity of all groups
    d3.selectAll(".bubbles").style("opacity", .05)
    // expect the one that is hovered
    d3.selectAll("."+d).style("opacity", 1)
  }

  // And when it is not hovered anymore
  var noHighlight = function(d){
    d3.selectAll(".bubbles").style("opacity", 1)
  }

  // ---------------------------//
  //       CIRCLES              //
  // ---------------------------//

  // Add dots
  svg.append('g')
    .selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
      .attr("class", function(d) { return "bubbles " + d.continent })
      .attr("cx", function (d) { return x(d.gdpPercap); } )
      .attr("cy", function (d) { return y(d.lifeExp); } )
      .attr("r", function (d) { return z(d.pop); } )
      .style("fill", function (d) { return myColor(d.continent); } )
    // -3- Trigger the functions for hover
    .on("mouseover", showTooltip )
    .on("mousemove", moveTooltip )
    .on("mouseleave", hideTooltip )

    // ---------------------------//
    //       LEGEND              //
    // ---------------------------//

    // Add legend: circles
    var valuesToShow = [10000000, 100000000, 1000000000]
    var xCircle = 390
    var xLabel = 440
    svg
      .selectAll("legend")
      .data(valuesToShow)
      .enter()
      .append("circle")
        .attr("cx", xCircle)
        .attr("cy", function(d){ return height - 100 - z(d) } )
        .attr("r", function(d){ return z(d) })
        .style("fill", "none")
        .attr("stroke", "black")

    // Add legend: segments
    svg
      .selectAll("legend")
      .data(valuesToShow)
      .enter()
      .append("line")
        .attr('x1', function(d){ return xCircle + z(d) } )
        .attr('x2', xLabel)
        .attr('y1', function(d){ return height - 100 - z(d) } )
        .attr('y2', function(d){ return height - 100 - z(d) } )
        .attr('stroke', 'black')
        .style('stroke-dasharray', ('2,2'))

    // Add legend: labels
    svg
      .selectAll("legend")
      .data(valuesToShow)
      .enter()
      .append("text")
        .attr('x', xLabel)
        .attr('y', function(d){ return height - 100 - z(d) } )
        .text( function(d){ return d/1000000 } )
        .style("font-size", 10)
        .attr('alignment-baseline', 'middle')

    // Legend title
    svg.append("text")
      .attr('x', xCircle)
      .attr("y", height - 100 +30)
      .text("Population (M)")
      .attr("text-anchor", "middle")

    // Add one dot in the legend for each name.
    var size = 20
    var allgroups = ["Asia", "Europe", "Americas", "Africa", "Oceania"]
    svg.selectAll("myrect")
      .data(allgroups)
      .enter()
      .append("circle")
        .attr("cx", 390)
        .attr("cy", function(d,i){ return 10 + i*(size+5)}) // 100 is where the first dot appears. 25 is the distance between dots
        .attr("r", 7)
        .style("fill", function(d){ return myColor(d)})
        .on("mouseover", highlight)
        .on("mouseleave", noHighlight)

    // Add labels beside legend dots
    svg.selectAll("mylabels")
      .data(allgroups)
      .enter()
      .append("text")
        .attr("x", 390 + size*.8)
        .attr("y", function(d,i){ return i * (size + 5) + (size/2)}) // 100 is where the first dot appears. 25 is the distance between dots
        .style("fill", function(d){ return myColor(d)})
        .text(function(d){ return d})
        .attr("text-anchor", "left")
        .style("alignment-baseline", "middle")
        .on("mouseover", highlight)
        .on("mouseleave", noHighlight)
  })
</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 40, right: 150, bottom: 60, left: 30},
    width = 500 - margin.left - margin.right,
    height = 420 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/4_ThreeNum.csv").then( function(data) {

  // ---------------------------//
  //       AXIS  AND SCALE      //
  // ---------------------------//

  // Add X axis
  const x = d3.scaleLinear()
    .domain([0, 45000])
    .range([ 0, width ]);
  svg.append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x).ticks(3));

  // Add X axis label:
  svg.append("text")
      .attr("text-anchor", "end")
      .attr("x", width)
      .attr("y", height+50 )
      .text("Gdp per Capita");

  // Add Y axis
  const y = d3.scaleLinear()
    .domain([35, 90])
    .range([ height, 0]);
  svg.append("g")
    .call(d3.axisLeft(y));

  // Add Y axis label:
  svg.append("text")
      .attr("text-anchor", "end")
      .attr("x", 0)
      .attr("y", -20 )
      .text("Life expectancy")
      .attr("text-anchor", "start")

  // Add a scale for bubble size
  const z = d3.scaleSqrt()
    .domain([200000, 1310000000])
    .range([ 2, 30]);

  // Add a scale for bubble color
  const myColor = d3.scaleOrdinal()
    .domain(["Asia", "Europe", "Americas", "Africa", "Oceania"])
    .range(d3.schemeSet1);

  // ---------------------------//
  //      TOOLTIP               //
  // ---------------------------//

  // -1- Create a tooltip div that is hidden by default:
  const tooltip = d3.select("#my_dataviz")
    .append("div")
      .style("opacity", 0)
      .attr("class", "tooltip")
      .style("background-color", "black")
      .style("border-radius", "5px")
      .style("padding", "10px")
      .style("color", "white")

  // -2- Create 3 functions to show / update (when mouse move but stay on same circle) / hide the tooltip
  const showTooltip = function(event,d) {
    tooltip
      .transition()
      .duration(200)
    tooltip
      .style("opacity", 1)
      .html("Country: " + d.country)
      .style("left", (event.x)/2 + "px")
      .style("top", (event.y)/2-50 + "px")
  }
  const moveTooltip = function(event, d) {
    tooltip
      .style("left", (event.x)/2 + "px")
      .style("top", (event.y)/2-50 + "px")
  }
  const hideTooltip = function(event, d) {
    tooltip
      .transition()
      .duration(200)
      .style("opacity", 0)
  }

  // ---------------------------//
  //       HIGHLIGHT GROUP      //
  // ---------------------------//

  // What to do when one group is hovered
  const highlight = function(event, d){
    // reduce opacity of all groups
    d3.selectAll(".bubbles").style("opacity", .05)
    // expect the one that is hovered
    d3.selectAll("."+d).style("opacity", 1)
  }

  // And when it is not hovered anymore
  const noHighlight = function(event, d){
    d3.selectAll(".bubbles").style("opacity", 1)
  }

  // ---------------------------//
  //       CIRCLES              //
  // ---------------------------//

  // Add dots
  svg.append('g')
    .selectAll("dot")
    .data(data)
    .join("circle")
      .attr("class", function(d) { return "bubbles " + d.continent })
      .attr("cx", d => x(d.gdpPercap))
      .attr("cy", d => y(d.lifeExp))
      .attr("r", d => z(d.pop))
      .style("fill", d => myColor(d.continent))
    // -3- Trigger the functions for hover
    .on("mouseover", showTooltip )
    .on("mousemove", moveTooltip )
    .on("mouseleave", hideTooltip )

    // ---------------------------//
    //       LEGEND              //
    // ---------------------------//

    // Add legend: circles
    const valuesToShow = [10000000, 100000000, 1000000000]
    const xCircle = 390
    const xLabel = 440
    svg
      .selectAll("legend")
      .data(valuesToShow)
      .join("circle")
        .attr("cx", xCircle)
        .attr("cy", d => height - 100 - z(d))
        .attr("r", d => z(d))
        .style("fill", "none")
        .attr("stroke", "black")

    // Add legend: segments
    svg
      .selectAll("legend")
      .data(valuesToShow)
      .join("line")
        .attr('x1', d => xCircle + z(d))
        .attr('x2', xLabel)
        .attr('y1', d => height - 100 - z(d))
        .attr('y2', d => height - 100 - z(d))
        .attr('stroke', 'black')
        .style('stroke-dasharray', ('2,2'))

    // Add legend: labels
    svg
      .selectAll("legend")
      .data(valuesToShow)
      .join("text")
        .attr('x', xLabel)
        .attr('y', d => height - 100 - z(d))
        .text( d => d/1000000)
        .style("font-size", 10)
        .attr('alignment-baseline', 'middle')

    // Legend title
    svg.append("text")
      .attr('x', xCircle)
      .attr("y", height - 100 +30)
      .text("Population (M)")
      .attr("text-anchor", "middle")

    // Add one dot in the legend for each name.
    const size = 20
    const allgroups = ["Asia", "Europe", "Americas", "Africa", "Oceania"]
    svg.selectAll("myrect")
      .data(allgroups)
      .join("circle")
        .attr("cx", 390)
        .attr("cy", (d,i) => 10 + i*(size+5)) // 100 is where the first dot appears. 25 is the distance between dots
        .attr("r", 7)
        .style("fill", d =>  myColor(d))
        .on("mouseover", highlight)
        .on("mouseleave", noHighlight)

    // Add labels beside legend dots
    svg.selectAll("mylabels")
      .data(allgroups)
      .enter()
      .append("text")
        .attr("x", 390 + size*.8)
        .attr("y", (d,i) =>  i * (size + 5) + (size/2)) // 100 is where the first dot appears. 25 is the distance between dots
        .style("fill", d => myColor(d))
        .text(d => d)
        .attr("text-anchor", "left")
        .style("alignment-baseline", "middle")
        .on("mouseover", highlight)
        .on("mouseleave", noHighlight)
  })

</script>
```

### Related blocks →

- _Bubble chart section -_ [link](https://d3-graph-gallery.com/bubble.html)

- _Bubble chart -_ by
[Cale Tilford](https://bl.ocks.org/tlfrd/aa1bb8f6f3dae3148345fbb54305bdf7)

- _About scales -_ by
[d3 in depth](https://d3indepth.com/scales/)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.027012730999079304)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=4204747833715728863411&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=4204747833715728863411)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/4204747833715728863411?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=4204747833715728863411&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=4204747833715728863411)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_349b6532-6d12-4c9c-94ae-0d91d24e1d9e&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-0A2ED6567FCA84ECBFD856F8C8E09BF0@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-86CFB079C4883F559290F5F64E626EE2@mhtml.blink)

[iframe](cid:frame-5A0F0BADCFCAD44598F6498E3FD124BA@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-E740770055088004DA5A3FE5540EC393@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_349b6532-6d12-4c9c-94ae-0d91d24e1d9e&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_349b6532-6d12-4c9c-94ae-0d91d24e1d9e)

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876iNHM5GsAMypEADjZEwAACqUAAAAB&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876iNHM5GsAMypEADjZEwAACqUAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://csync.loopme.me/?pubid=11466&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D24%26external_user_id%3D%7Bviewer_token%7D&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://www.temu.com/api/adx/cm/pixel-index?id=Z876iNHM5GsAMypEADjZEwAACqUAAAAB)![](https://ads.stickyadstv.com/user-registering?dataProviderId=1025&userId=Z876iNHM5GsAMypEADjZEwAA%262725&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://c1.adform.net/serving/cookie/match?party=29)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876iNHM5GsAMypEADjZEwAACqUAAAAB)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=8C7CD05A-FE1C-4B42-9B5B-5FB353084728)[iframe](cid:frame-32D7A06C4B789E5957ADA7A760CCE873@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=8C7CD05A-FE1C-4B42-9B5B-5FB353084728&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=8C7CD05A-FE1C-4B42-9B5B-5FB353084728&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=jHzQWv4cS0KbW1-zUwhHKA%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=8C7CD05A-FE1C-4B42-9B5B-5FB353084728&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/8C7CD05A-FE1C-4B42-9B5B-5FB353084728?gdpr=0&gdpr_consent=)[iframe](cid:frame-54FFFC31348A9CF27A403534626836AD@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHI7Ere7sS_J)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSEk3RXJlN3NTX0o=)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=0eb3df62-8f76-c92d-2f65-5a650eccc162)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/c2a2c55b-0370-e09e-debc-ce0799a8c7cb?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=5665a31f-93dc-72d7-ef6b-d8f266ff0a82&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=N2EwYTcwZDUtNWFhYi0yYzczLWZhOGItODI0YmFjMWRjNGUy)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-0DB6D8DBEEA80E29C2DEE516F706FD83@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-7B3CA504E415E905DD596403375D57DA@mhtml.blink)

Topics Frame

## D3.js Boxplot Visualization
setosaversicolorvirginica3.03.54.04.55.05.56.06.57.07.58.08.59.0

##### Steps:

- Read the previous
[basic boxplot](https://d3-graph-gallery.com/graph/boxplot_basic.html) to understand
how to build one box.


- This chart uses a
[scaleBand](https://www.d3-graph-gallery.com/graph/custom_axis.html)
for the X axis: each group as dedicated section of the X
axis


- Using the `d3.nest()` function here is the key
step: it computes all the necessary box features per level
of factor. This
[post](http://learnjsdata.com/group_data.html)
helped me understand how this function work.


- Next step: adding
[individual observations](https://d3-graph-gallery.com/graph/boxplot_show_individual_points.html)
to be sure not to
[miss a story](https://www.data-to-viz.com/caveat/boxplot.html)
in the boxplot.


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 40},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Read the data and compute summary statistics for each specie
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", function(data) {

  // Compute quartiles, median, inter quantile range min and max --> these info are then used to draw the box.
  var sumstat = d3.nest() // nest function allows to group the calculation per level of a factor
    .key(function(d) { return d.Species;})
    .rollup(function(d) {
      q1 = d3.quantile(d.map(function(g) { return g.Sepal_Length;}).sort(d3.ascending),.25)
      median = d3.quantile(d.map(function(g) { return g.Sepal_Length;}).sort(d3.ascending),.5)
      q3 = d3.quantile(d.map(function(g) { return g.Sepal_Length;}).sort(d3.ascending),.75)
      interQuantileRange = q3 - q1
      min = q1 - 1.5 * interQuantileRange
      max = q3 + 1.5 * interQuantileRange
      return({q1: q1, median: median, q3: q3, interQuantileRange: interQuantileRange, min: min, max: max})
    })
    .entries(data)

  // Show the X scale
  var x = d3.scaleBand()
    .range([ 0, width ])
    .domain(["setosa", "versicolor", "virginica"])
    .paddingInner(1)
    .paddingOuter(.5)
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))

  // Show the Y scale
  var y = d3.scaleLinear()
    .domain([3,9])
    .range([height, 0])
  svg.append("g").call(d3.axisLeft(y))

  // Show the main vertical line
  svg
    .selectAll("vertLines")
    .data(sumstat)
    .enter()
    .append("line")
      .attr("x1", function(d){return(x(d.key))})
      .attr("x2", function(d){return(x(d.key))})
      .attr("y1", function(d){return(y(d.value.min))})
      .attr("y2", function(d){return(y(d.value.max))})
      .attr("stroke", "black")
      .style("width", 40)

  // rectangle for the main box
  var boxWidth = 100
  svg
    .selectAll("boxes")
    .data(sumstat)
    .enter()
    .append("rect")
        .attr("x", function(d){return(x(d.key)-boxWidth/2)})
        .attr("y", function(d){return(y(d.value.q3))})
        .attr("height", function(d){return(y(d.value.q1)-y(d.value.q3))})
        .attr("width", boxWidth )
        .attr("stroke", "black")
        .style("fill", "#69b3a2")

  // Show the median
  svg
    .selectAll("medianLines")
    .data(sumstat)
    .enter()
    .append("line")
      .attr("x1", function(d){return(x(d.key)-boxWidth/2) })
      .attr("x2", function(d){return(x(d.key)+boxWidth/2) })
      .attr("y1", function(d){return(y(d.value.median))})
      .attr("y2", function(d){return(y(d.value.median))})
      .attr("stroke", "black")
      .style("width", 80)
})

</script>
```

### Related blocks →

- _Simple Box Plot Example in d3.js v4.0 -_ [link](https://bl.ocks.org/rjurney/e04ceddae2e8f85cf3afe4681dac1d74)

- _D3.js Boxplot with Axes and Labels -_ [link](http://bl.ocks.org/anaeliaovalle/60a7ed1f4e55a9052caab3c69668a306)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.40512214613403685)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=1690463017672206401853&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=1690463017672206401853)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/1690463017672206401853?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=1690463017672206401853&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=1690463017672206401853)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=1690463017672206401853&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=1690463017672206401853)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=1690463017672206401853)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_e44a3cb7-764b-4366-9921-98098e7383b6&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9lNDRhM2NiNy03NjRiLTQzNjYtOTkyMS05ODA5OGU3MzgzYjY=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv&google\_tc=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9lNDRhM2NiNy03NjRiLTQzNjYtOTkyMS05ODA5OGU3MzgzYjY=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv&google\_tc=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.adsrvr.org

# This site can’t be reached

**match.adsrvr.org** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**match.adsrvr.org** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-C6CA52AA543036638C8C65445E5FF577@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_e44a3cb7-764b-4366-9921-98098e7383b6&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_e44a3cb7-764b-4366-9921-98098e7383b6)

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876idHM5WkAEdyUAQtOJwAAFqMAAAAB&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876idHM5WkAEdyUAQtOJwAA%265795&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876idHM5WkAEdyUAQtOJwAAFqMAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://x.bidswitch.net/sync?ssp=index)![](https://ib.adnxs.com/getuid?https://dsum.casalemedia.com/crum?cm_dsp_id=190&external_user_id=$UID)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876idHM5WkAEdyUAQtOJwAAFqMAAAAB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://a.tribalfusion.com/i.match?p=b20&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com/crum%3Fcm_dsp_id%3D131%26external_user_id%3D%24TF_USER_ID_ENC%24&cm_callback_url=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum&cm_user_id=Z876idHM5WkAEdyUAQtOJwAA)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876idHM5WkAEdyUAQtOJwAAFqMAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=2fc257c7-dc09-4489-91b6-c6a8cf4b6700)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=MmZjMjU3YzctZGMwOS00NDg5LTkxYjYtYzZhOGNmNGI2NzAw)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://bttrack.com/pixel/cookiesyncredir?rurl=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DFGhqNjC2WnFmmvNpTL32LMME%26source_user_id%3D%7Bglobalid%7D%26gdpr%3D0%26gdpr_consent%3D)![](https://match.prod.bidr.io/cookie-sync/shr?gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=844BBFFE-132D-4404-90E0-35E19C4EE1FC)[iframe](cid:frame-6D64EFB886258B1E453BB988FC3C4560@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=844BBFFE-132D-4404-90E0-35E19C4EE1FC&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=844BBFFE-132D-4404-90E0-35E19C4EE1FC&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=ODQ0QkJGRkUtMTMyRC00NDA0LTkwRTAtMzVFMTlDNEVFMUZD&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=hEu__hMtRASQ4DXhnE7h_A%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=844BBFFE-132D-4404-90E0-35E19C4EE1FC&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-D6AE691DF320341BF9A7A135C0D82134@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHInNCKajPl8)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHInNCKajPl8)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHInNCKajPl8)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=21778395-85b3-c074-1561-a3e063a6bb8c)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/ed6699ac-09b5-e9c7-e4b8-3782f4c2bd25?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=79a1ffe8-9919-7b8e-d56f-21770b95706c&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NTVjZTJjMjItNTA2ZS0yNTJhLWMwOGYtN2JjZWMxNzdiZTBj)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-01E84C62AA21DB00F50B55BEA5E183D3@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-469CE648B9A56BB2525B7066DC7534EA@mhtml.blink)

Topics Frame

## Custom Parallel Coordinates
02468Petal\_Length02468Petal\_Width02468Sepal\_Length02468Sepal\_Width

##### Steps:

- You probably want to understand the previous
[basic parallel coordinate chart](https://d3-graph-gallery.com/graph/parallel_basic.html)
first.


- Here hover effects are triggered following 2 different
strategies:
- axis: pure `css` \- axis have a
specific class called `axis`. It is possible
to specify a style when hovering with
`axis:hover`
- groups: use `javascript` \- a function
is triggered when a group is hovered, another when group
is not hovered anymore.

d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<!-- A bit of style -->
<style>
.axis {
  opacity: 0.4;
}
.axis:hover {
  opacity: 1;
}
</style>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 30, right: 50, bottom: 10, left: 50},
  width = 460 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
.append("g")
  .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", function(data) {

  // Color scale: give me a specie name, I return a color
  var color = d3.scaleOrdinal()
    .domain(["setosa", "versicolor", "virginica" ])
    .range([ "#440154ff", "#21908dff", "#fde725ff"])

  // Here I set the list of dimension manually to control the order of axis:
  dimensions = ["Petal_Length", "Petal_Width", "Sepal_Length", "Sepal_Width"]

  // For each dimension, I build a linear scale. I store all in a y object
  var y = {}
  for (i in dimensions) {
    name = dimensions[i]
    y[name] = d3.scaleLinear()
      .domain( [0,8] ) // --> Same axis range for each group
      // --> different axis range for each group --> .domain( [d3.extent(data, function(d) { return +d[name]; })] )
      .range([height, 0])
  }

  // Build the X scale -> it find the best position for each Y axis
  x = d3.scalePoint()
    .range([0, width])
    .domain(dimensions);

  // Highlight the specie that is hovered
  var highlight = function(d){

    selected_specie = d.Species

    // first every group turns grey
    d3.selectAll(".line")
      .transition().duration(200)
      .style("stroke", "lightgrey")
      .style("opacity", "0.2")
    // Second the hovered specie takes its color
    d3.selectAll("." + selected_specie)
      .transition().duration(200)
      .style("stroke", color(selected_specie))
      .style("opacity", "1")
  }

  // Unhighlight
  var doNotHighlight = function(d){
    d3.selectAll(".line")
      .transition().duration(200).delay(1000)
      .style("stroke", function(d){ return( color(d.Species))} )
      .style("opacity", "1")
  }

  // The path function take a row of the csv as input, and return x and y coordinates of the line to draw for this raw.
  function path(d) {
      return d3.line()(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
  }

  // Draw the lines
  svg
    .selectAll("myPath")
    .data(data)
    .enter()
    .append("path")
      .attr("class", function (d) { return "line " + d.Species } ) // 2 class for each line: 'line' and the group name
      .attr("d",  path)
      .style("fill", "none" )
      .style("stroke", function(d){ return( color(d.Species))} )
      .style("opacity", 0.5)
      .on("mouseover", highlight)
      .on("mouseleave", doNotHighlight )

  // Draw the axis:
  svg.selectAll("myAxis")
    // For each dimension of the dataset I add a 'g' element:
    .data(dimensions).enter()
    .append("g")
    .attr("class", "axis")
    // I translate this element to its right position on the x axis
    .attr("transform", function(d) { return "translate(" + x(d) + ")"; })
    // And I build the axis with the call function
    .each(function(d) { d3.select(this).call(d3.axisLeft().ticks(5).scale(y[d])); })
    // Add axis title
    .append("text")
      .style("text-anchor", "middle")
      .attr("y", -9)
      .text(function(d) { return d; })
      .style("fill", "black")

})

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 30, right: 50, bottom: 10, left: 50},
  width = 460 - margin.left - margin.right,
  height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
.append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
.append("g")
  .attr("transform",
        `translate(${margin.left},${margin.top})`);

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv").then( function(data) {

  // Color scale: give me a specie name, I return a color
  const color = d3.scaleOrdinal()
    .domain(["setosa", "versicolor", "virginica" ])
    .range([ "#440154ff", "#21908dff", "#fde725ff"])

  // Here I set the list of dimension manually to control the order of axis:
  dimensions = ["Petal_Length", "Petal_Width", "Sepal_Length", "Sepal_Width"]

  // For each dimension, I build a linear scale. I store all in a y object
  const y = {}
  for (i in dimensions) {
    name = dimensions[i]
    y[name] = d3.scaleLinear()
      .domain( [0,8] ) // --> Same axis range for each group
      // --> different axis range for each group --> .domain( [d3.extent(data, function(d) { return +d[name]; })] )
      .range([height, 0])
  }

  // Build the X scale -> it find the best position for each Y axis
  x = d3.scalePoint()
    .range([0, width])
    .domain(dimensions);

  // Highlight the specie that is hovered
  const highlight = function(event, d){

    selected_specie = d.Species

    // first every group turns grey
    d3.selectAll(".line")
      .transition().duration(200)
      .style("stroke", "lightgrey")
      .style("opacity", "0.2")
    // Second the hovered specie takes its color
    d3.selectAll("." + selected_specie)
      .transition().duration(200)
      .style("stroke", color(selected_specie))
      .style("opacity", "1")
  }

  // Unhighlight
  const doNotHighlight = function(event, d){
    d3.selectAll(".line")
      .transition().duration(200).delay(1000)
      .style("stroke", function(d){ return( color(d.Species))} )
      .style("opacity", "1")
  }

  // The path function take a row of the csv as input, and return x and y coordinates of the line to draw for this raw.
  function path(d) {
      return d3.line()(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
  }

  // Draw the lines
  svg
    .selectAll("myPath")
    .data(data)
    .join("path")
      .attr("class", function (d) { return "line " + d.Species } ) // 2 class for each line: 'line' and the group name
      .attr("d",  path)
      .style("fill", "none" )
      .style("stroke", function(d){ return( color(d.Species))} )
      .style("opacity", 0.5)
      .on("mouseover", highlight)
      .on("mouseleave", doNotHighlight )

  // Draw the axis:
  svg.selectAll("myAxis")
    // For each dimension of the dataset I add a 'g' element:
    .data(dimensions).enter()
    .append("g")
    .attr("class", "axis")
    // I translate this element to its right position on the x axis
    .attr("transform", function(d) { return `translate(${x(d)})`})
    // And I build the axis with the call function
    .each(function(d) { d3.select(this).call(d3.axisLeft().ticks(5).scale(y[d])); })
    // Add axis title
    .append("text")
      .style("text-anchor", "middle")
      .attr("y", -9)
      .text(function(d) { return d; })
      .style("fill", "black")

})
</script>
```

### Related blocks →

- _Parallel Coordinates -_ by
[J. Carson](https://bl.ocks.org/jerdak/5d37e36603bd4397ac51fe5032bcfe3e)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.39470886387218673)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=1447808018059327002821&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=1447808018059327002821)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/1447808018059327002821?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=1447808018059327002821&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=1447808018059327002821)

[iframe](cid:frame-8179D2F4F5346F2F6B1056B716D97439@mhtml.blink)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_02107409-24e3-44f2-bbf5-f681b9f2f56c&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-AE86CC6445C6683296D87C30BB588599@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-0CFA097E4BE091C7D69A8ECD63EAADEB@mhtml.blink)

[iframe](cid:frame-DA86A3782BE4CC3743F2593857CE0D96@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-085B5D2D179B733FFCF0AF9C4ECE2E59@mhtml.blink)[iframe](cid:frame-987EF1A2AA9EE6649BF8D45C48E880CC@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_02107409-24e3-44f2-bbf5-f681b9f2f56c&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_02107409-24e3-44f2-bbf5-f681b9f2f56c)

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876idHM72UAPkQFAHUS4AAA%26391&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876idHM72UAPkQFAHUS4AAAAYcAAAIB&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://sync-tm.everesttech.net/upi/pid/ZMAwryCI?redir=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D88%26external_user_id%3D%24%7BTM_USER_ID%7D)![](https://pm.w55c.net/ping_match.gif?ei=CASALE&rurl=https://dsum-sec.casalemedia.com/crum?cm_dsp_id=47&external_user_id=_wfivefivec_)![](https://a.tribalfusion.com/i.match?p=b20&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com/crum%3Fcm_dsp_id%3D131%26external_user_id%3D%24TF_USER_ID_ENC%24&cm_callback_url=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum&cm_user_id=Z876idHM72UAPkQFAHUS4AAA)![](https://dpm.demdex.net/ibs:dpid=23728&dpuuid=Z876idHM72UAPkQFAHUS4AAA%26391?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876idHM72UAPkQFAHUS4AAAAYcAAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=63dd2bb3-a8c1-41b0-aa29-d628f22dac25)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=NjNkZDJiYjMtYThjMS00MWIwLWFhMjktZDYyOGYyMmRhYzI1)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync-tm.everesttech.net/upi/pid/byN59NcB?redir=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DSvWuQHUbMWnhsCDYjeaq81U2%26source_user_id%3D%24%7BTM_USER_ID%7D%0A)![](https://ssp.disqus.com/redirectuser?r=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3D7rkJAhPCWXbw9Lq5dZxc6TvN%26source_user_id%3D%24UID&partner=sharethrough)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=37E32E1D-0079-4D90-9292-6004E65FFBC9)[iframe](cid:frame-66D9A6F8D0C838F33F145B9F0875E808@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=37E32E1D-0079-4D90-9292-6004E65FFBC9&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=37E32E1D-0079-4D90-9292-6004E65FFBC9&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=N-MuHQB5TZCSkmAE5l_7yQ%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=37E32E1D-0079-4D90-9292-6004E65FFBC9&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/37E32E1D-0079-4D90-9292-6004E65FFBC9?gdpr=0&gdpr_consent=)[iframe](cid:frame-CBA25982D578ED0E522C44A5054FCB57@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIzOKbs6Wk4)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIzOKbs6Wk4)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSEl6T0ticzZXazQ=)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIzOKbs6Wk4&cb=1741617801162&url={{REFERRER}}&gdpr=0&gdpr_consent=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=2e546802-6c70-c79b-1206-515922d00013)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/e245723b-e076-ee28-e3df-c53bb5b406ba?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=7682147f-70da-7c61-d208-d3ce4ae3cbf3&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NWFlZGM3YjUtYjlhZC0yMmM1LWM3ZTgtODk3NzgwMDEwNTkz)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-DF762B78B36150D2B719498921F993C4@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-505A332DB0D0FCD9C2F462DF3A08D63F@mhtml.blink)

Topics Frame

## Circular Barplot Visualization
United StatesRussiaGermany (FRG)FranceUnited KingdomChinaSoviet UnionNetherlandsItalyIsraelUkraineSpainSwedenSwitzerlandCanadaSouth KoreaBelarusNorwayTurkeySouth AfricaCzech RepublicPolandBelgiumAustraliaBrazilCzechoslovakiaNorth KoreaFinlandUzbekistanJapanSlovakiaDenmarkBulgariaAustriaYugoslaviaJordanUAESingaporeMoldovaUnknown supplier(s)IndonesiaIranLibyaRomaniaPortugalIndiaKazakhstanSerbiaIrelandHungaryOthers

##### Steps:

- Almost the same chart that the previous
[basic circular barplot](https://d3-graph-gallery.com/graph/circular_barplot_basic.html).


- One more code chunk is added for text labels. Positioning
the x and y position of labels is easy using the existing
scales.


- However, the orientation and text-anchoring is
pretty hard. A good amount of calculation is needed to flip
labels upside down when needed.


- Note: I lost the origin of this last code chunk:
please contact me if you want to be cited.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Function for radial charts -->
<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/d3-scale-radial.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 100, right: 0, bottom: 0, left: 0},
    width = 460 - margin.left - margin.right,
    height = 460 - margin.top - margin.bottom,
    innerRadius = 90,
    outerRadius = Math.min(width, height) / 2;   // the outerRadius goes from the middle of the SVG area to the border

// append the svg object
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + (width / 2 + margin.left) + "," + (height / 2 + margin.top) + ")");

d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum.csv", function(data) {

  // Scales
  var x = d3.scaleBand()
      .range([0, 2 * Math.PI])    // X axis goes from 0 to 2pi = all around the circle. If I stop at 1Pi, it will be around a half circle
      .align(0)                  // This does nothing
      .domain(data.map(function(d) { return d.Country; })); // The domain of the X axis is the list of states.
  var y = d3.scaleRadial()
      .range([innerRadius, outerRadius])   // Domain will be define later.
      .domain([0, 14000]); // Domain of Y is from 0 to the max seen in the data

  // Add the bars
  svg.append("g")
    .selectAll("path")
    .data(data)
    .enter()
    .append("path")
      .attr("fill", "#69b3a2")
      .attr("d", d3.arc()     // imagine your doing a part of a donut plot
          .innerRadius(innerRadius)
          .outerRadius(function(d) { return y(d['Value']); })
          .startAngle(function(d) { return x(d.Country); })
          .endAngle(function(d) { return x(d.Country) + x.bandwidth(); })
          .padAngle(0.01)
          .padRadius(innerRadius))

  // Add the labels
  svg.append("g")
      .selectAll("g")
      .data(data)
      .enter()
      .append("g")
        .attr("text-anchor", function(d) { return (x(d.Country) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "end" : "start"; })
        .attr("transform", function(d) { return "rotate(" + ((x(d.Country) + x.bandwidth() / 2) * 180 / Math.PI - 90) + ")"+"translate(" + (y(d['Value'])+10) + ",0)"; })
      .append("text")
        .text(function(d){return(d.Country)})
        .attr("transform", function(d) { return (x(d.Country) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "rotate(180)" : "rotate(0)"; })
        .style("font-size", "11px")
        .attr("alignment-baseline", "middle")

});

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 100, right: 0, bottom: 0, left: 0},
    width = 460 - margin.left - margin.right,
    height = 460 - margin.top - margin.bottom,
    innerRadius = 90,
    outerRadius = Math.min(width, height) / 2;   // the outerRadius goes from the middle of the SVG area to the border

// append the svg object
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${width/2+margin.left}, ${height/2+margin.top})`);

d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum.csv").then( function(data) {

  // Scales
  const x = d3.scaleBand()
      .range([0, 2 * Math.PI])    // X axis goes from 0 to 2pi = all around the circle. If I stop at 1Pi, it will be around a half circle
      .align(0)                  // This does nothing
      .domain(data.map(d => d.Country)); // The domain of the X axis is the list of states.
  const y = d3.scaleRadial()
      .range([innerRadius, outerRadius])   // Domain will be define later.
      .domain([0, 14000]); // Domain of Y is from 0 to the max seen in the data

  // Add the bars
  svg.append("g")
    .selectAll("path")
    .data(data)
    .join("path")
      .attr("fill", "#69b3a2")
      .attr("d", d3.arc()     // imagine your doing a part of a donut plot
          .innerRadius(innerRadius)
          .outerRadius(d => y(d['Value']))
          .startAngle(d => x(d.Country))
          .endAngle(d => x(d.Country) + x.bandwidth())
          .padAngle(0.01)
          .padRadius(innerRadius))

  // Add the labels
  svg.append("g")
      .selectAll("g")
      .data(data)
      .join("g")
        .attr("text-anchor", function(d) { return (x(d.Country) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "end" : "start"; })
        .attr("transform", function(d) { return "rotate(" + ((x(d.Country) + x.bandwidth() / 2) * 180 / Math.PI - 90) + ")"+"translate(" + (y(d['Value'])+10) + ",0)"; })
      .append("text")
        .text(function(d){return(d.Country)})
        .attr("transform", function(d) { return (x(d.Country) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "rotate(180)" : "rotate(0)"; })
        .style("font-size", "11px")
        .attr("alignment-baseline", "middle")

});

</script>
```

### Related blocks →

- _d3-scale documentation-_ by
[Mike Bostock](https://github.com/d3/d3-scale)

- _discussion on d3.scaleRadial -_ by
[Mike Bostock and others](https://github.com/d3/d3-scale/issues/90)

- _Radial Stacked Bar -_ by
[Mike Bostock](https://bl.ocks.org/mbostock/6fead6d1378d6df5ae77bb6a719afcb2)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.9325376770255749)

Prebid User Sync

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=12776** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=12776** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_46f06e61-f76f-4146-bf9d-adfa1e92b889&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?CC=1&party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV80NmYwNmU2MS1mNzZmLTQxNDYtYmY5ZC1hZGZhMWU5MmI4ODk=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv&google\_tc=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV80NmYwNmU2MS1mNzZmLTQxNDYtYmY5ZC1hZGZhMWU5MmI4ODk=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv&google\_tc=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=E3EF52E4-9BDC-4ED7-9446-733DE9BC4C25)[iframe](cid:frame-72028580AE324970ECDF94105B55245D@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=E3EF52E4-9BDC-4ED7-9446-733DE9BC4C25&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=E3EF52E4-9BDC-4ED7-9446-733DE9BC4C25&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=RTNFRjUyRTQtOUJEQy00RUQ3LTk0NDYtNzMzREU5QkM0QzI1&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=4-9S5JvcTteURnM96bxMJQ%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=E3EF52E4-9BDC-4ED7-9446-733DE9BC4C25&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/E3EF52E4-9BDC-4ED7-9446-733DE9BC4C25?gdpr=0&gdpr_consent=)[iframe](cid:frame-1551A07C1485085A72CA7FBF1E3F0064@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)[iframe](cid:frame-70C81E3FA3360A09807D98B2F46F8D92@mhtml.blink)[iframe](cid:frame-4600E823BCB5E33DBE2789A5070055C4@mhtml.blink)

[iframe](cid:frame-E149CF449E91C41897493BF0971F0FEB@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-CE85F0674BF092125DFD09AB0C22291A@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_46f06e61-f76f-4146-bf9d-adfa1e92b889&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

eus.rubiconproject.com

# This site can’t be reached

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eus.rubiconproject.com/usync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_46f06e61-f76f-4146-bf9d-adfa1e92b889)

![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876iMAoJJkAPt_qAGxQtQAABl0AAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876iMAoJJkAPt-qAGxQtQAA%261629&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876iMAoJJkAPt_qAGxQtQAABl0AAAAB&gpp=&gpp_sid=)![](https://t.adx.opera.com/pub/sync?pubid=pub10256699365696&userId=Z876iMAoJJkAPt-qAGxQtQAA%261629&gdpr=&us_privacy=)![](https://dmp.brand-display.com/cm/api/index?cm_dsp_id=191&cm_user_id=%3cIndex_user_id%3e)![](https://cm.ctnsnet.com/int/cm?exc=19)![](https://d.adroll.com/cm/index/tp_out?advertisable=3GMDZMBFQREVBC75SYYKWH)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876iMAoJJkAPt_qAGxQtQAABl0AAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=f5b25f27-1933-43b0-985d-157c8f624686)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=ZjViMjVmMjctMTkzMy00M2IwLTk4NWQtMTU3YzhmNjI0Njg2)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://cms.quantserve.com/pixel/p-_jQ037pSmtjhN.gif?idmatch=1&gdpr=0&gdpr_consent=)![](https://stx-match.dotomi.com/match/bounce/current?networkId=44410&version=1&nuid=f5b25f27-1933-43b0-985d-157c8f624686&gdpr=0&gdpr_consent=)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

sync-amz.ads.yieldmo.com

# This site can’t be reached

**sync-amz.ads.yieldmo.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**sync-amz.ads.yieldmo.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

Pixels![](https://pbs-raptive-us.ay.delivery/setuid?bidder=openx&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=37a045a3-30a1-44bb-a329-c703397bcbc2)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/9ab9ac28-1992-e51b-f972-11e34777c406?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=0e7eca6c-893e-7752-c8a5-0716b820094f&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=MjIxMTE5YTYtNDA0OS0yOWY2LWRkNDUtNWRhZjcyYzJjNzJm)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

## Animated Lollipop Charts
01,0002,0003,0004,0005,0006,0007,0008,0009,00010,00011,00012,00013,000United StatesRussiaFranceGermany (FRG)IsraelUnited KingdomNetherlandsChinaSpainItaly

##### Steps:

- Start by understanding the
[basic horizontal lollipop chart.](https://d3-graph-gallery.com/graph/lollipop_horizontal.html)

- For the animation, first make the plot with dots and lines
at `x = 0`. Then, change their positions to their
true value using the `transition()` function.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 40, left: 100},
    width = 460 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum_header.csv", function(data) {

// sort data
data.sort(function(b, a) {
  return a.Value - b.Value;
});

// Add X axis
var x = d3.scaleLinear()
  .domain([0, 13000])
  .range([ 0, width]);
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))
  .selectAll("text")
    .attr("transform", "translate(-10,0)rotate(-45)")
    .style("text-anchor", "end");

// Y axis
var y = d3.scaleBand()
  .range([ 0, height ])
  .domain(data.map(function(d) { return d.Country; }))
  .padding(1);
svg.append("g")
  .call(d3.axisLeft(y))

// Lines
svg.selectAll("myline")
  .data(data)
  .enter()
  .append("line")
    .attr("x1", x(0))
    .attr("x2", x(0))
    .attr("y1", function(d) { return y(d.Country); })
    .attr("y2", function(d) { return y(d.Country); })
    .attr("stroke", "grey")

// Circles -> start at X=0
svg.selectAll("mycircle")
  .data(data)
  .enter()
  .append("circle")
    .attr("cx", x(0) )
    .attr("cy", function(d) { return y(d.Country); })
    .attr("r", "7")
    .style("fill", "#69b3a2")
    .attr("stroke", "black")

// Change the X coordinates of line and circle
svg.selectAll("circle")
  .transition()
  .duration(2000)
  .attr("cx", function(d) { return x(d.Value); })

svg.selectAll("line")
  .transition()
  .duration(2000)
  .attr("x1", function(d) { return x(d.Value); })

})

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 40, left: 100},
    width = 460 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          `translate(${margin.left}, ${margin.top})`);

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/7_OneCatOneNum_header.csv").then( function(data) {

// sort data
data.sort(function(b, a) {
  return a.Value - b.Value;
});

// Add X axis
const x = d3.scaleLinear()
  .domain([0, 13000])
  .range([ 0, width]);
svg.append("g")
  .attr("transform", `translate(0, ${height})`)
  .call(d3.axisBottom(x))
  .selectAll("text")
    .attr("transform", "translate(-10,0)rotate(-45)")
    .style("text-anchor", "end");

// Y axis
const y = d3.scaleBand()
  .range([ 0, height ])
  .domain(data.map(function(d) { return d.Country; }))
  .padding(1);
svg.append("g")
  .call(d3.axisLeft(y))

// Lines
svg.selectAll("myline")
  .data(data)
  .join("line")
    .attr("x1", x(0))
    .attr("x2", x(0))
    .attr("y1", function(d) { return y(d.Country); })
    .attr("y2", function(d) { return y(d.Country); })
    .attr("stroke", "grey")

// Circles -> start at X=0
svg.selectAll("mycircle")
  .data(data)
  .join("circle")
    .attr("cx", x(0) )
    .attr("cy", function(d) { return y(d.Country); })
    .attr("r", "7")
    .style("fill", "#69b3a2")
    .attr("stroke", "black")

// Change the X coordinates of line and circle
svg.selectAll("circle")
  .transition()
  .duration(2000)
  .attr("cx", function(d) { return x(d.Value); })

svg.selectAll("line")
  .transition()
  .duration(2000)
  .attr("x1", function(d) { return x(d.Value); })

})
</script>
```

### Related blocks →

- _The most basic barplot with d3.js_ -
[link](https://www.d3-graph-gallery.com/graph/barplot_basic.html)

- _Lollipop chart -_ [link](https://bl.ocks.org/curran/d867264d468b323c2e76886d44e7e8f9)

- _Horizontal Bar Chart Sort -_ [link](https://bl.ocks.org/anonymous/e88acea4307a96d5e267daaf737192e6)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.15024445770600003)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=4227313140780774431027&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=4227313140780774431027)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/4227313140780774431027?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=4227313140780774431027&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=4227313140780774431027)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_86e72b47-27b1-4a7c-8edc-4b038f447f8d&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-FA588E457BCC5081DF6A53C18AC429EF@mhtml.blink)

[iframe](cid:frame-F8728989853E810593316681E8565D99@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-689478C0C665820F4E8507CF7254160D@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_86e72b47-27b1-4a7c-8edc-4b038f447f8d&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_86e72b47-27b1-4a7c-8edc-4b038f447f8d)

![](https://match.adsrvr.org/track/cmf/casale)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876icAoImwALXQ1AOqoFwAACAsAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876icAoImwALXQ1AOqoFwAA%262059&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://tr.blismedia.com/v1/api/sync/indexexchange?gdpr=&userId=Z876icAoImwALXQ1AOqoFwAA%262059&gpp=&gpp_sid=&us_privacy=&gdpr_consent=)![](https://capi.connatix.com/us/pixel?puid=Z876icAoImwALXQ1AOqoFwAACAsAAAAB&pId=17&gdpr_consent=&us_privacy=)![](https://csync.loopme.me/?pubid=11466&redirect=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D24%26external_user_id%3D%7Bviewer_token%7D&us_privacy=&gdpr=&gdpr_consent=&gpp=&gpp_sid=)![](https://ad.turn.com/r/cs?pid=21)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876icAoImwALXQ1AOqoFwAACAsAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=cd45043b-c7dd-4ba1-bc8f-f8d1841d763e)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=Y2Q0NTA0M2ItYzdkZC00YmExLWJjOGYtZjhkMTg0MWQ3NjNl)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/rmpssp?sub=sharethrough)![](https://secure.adnxs.com/getuid?https://match.sharethrough.com/sync/v1?source_id=0e8893f90b606c9c5d33f1be&gdpr=0&gdpr_consent=&source_user_id=$UID)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=CD538F4F-D7B8-42E5-B66B-F269014BF862)[iframe](cid:frame-434AE6D1AECB8B63AA2E00623590CD2C@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=CD538F4F-D7B8-42E5-B66B-F269014BF862&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=CD538F4F-D7B8-42E5-B66B-F269014BF862&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=zVOPT9e4QuW2a_JpAUv4Yg%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=CD538F4F-D7B8-42E5-B66B-F269014BF862&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/CD538F4F-D7B8-42E5-B66B-F269014BF862?gdpr=0&gdpr_consent=)[iframe](cid:frame-CF6B1C8D3BD886EC13CCF5DC90D67B2B@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIQQ11NGvx6)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIQQ11NGvx6)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIQQ11NGvx6&cb=1741617801011&url={{REFERRER}}&gdpr=0&gdpr_consent=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=bf12c7b6-9e5e-c290-0c73-12df2faf34a0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/7303dd8f-1258-eb23-fdaa-86bdb8cb3209?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=e7c4bbcb-82f4-796a-cc7d-9048479cff40&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=Y2JhYjY4MDEtNGI4My0yN2NlLWQ5OWQtY2FmMThkN2UzMTIw)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=1YNY&gpp=&gpp_sid=&f=b&uid=de1a3404-3b6b-4a83-a7f1-505dc6c73dcd)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=e1bac837-d9f3-44ed-869c-089e74103e4c)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

## Ridgeline Plot Basics
020406080100120140Almost CertainlyHighly LikelyVery Good ChanceProbableLikelyProbablyWe BelieveBetter Than EvenAbout EvenWe DoubtImprobableUnlikelyProbably NotLittle ChanceAlmost No ChanceHighly UnlikelyChances Are Slight

##### Steps:

- A ridgeline plot basically displays many
[densities](https://d3-graph-gallery.com/density.html). You probably want
to visit the
[density section](https://d3-graph-gallery.com/density.html) of the gallery
if this is new for you.


- Here, two Y axis are built. The first is for density, using
`scaleLinear()`. The second for the groups, with
`scaleBand()`

- Density curve is computed using
`kernelDensityEstimator`

- Curve are drawn using `d3.line()`. Learn more
about shape helpers
[here](https://www.d3-graph-gallery.com/graph/shape.html).


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 60, right: 30, bottom: 20, left:110},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

//read data
d3.csv("https://raw.githubusercontent.com/zonination/perceptions/master/probly.csv", function(data) {

  // Get the different categories and count them
  var categories = data.columns
  var n = categories.length

  // Add X axis
  var x = d3.scaleLinear()
    .domain([-10, 140])
    .range([ 0, width ]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));

  // Create a Y scale for densities
  var y = d3.scaleLinear()
    .domain([0, 0.4])
    .range([ height, 0]);

  // Create the Y axis for names
  var yName = d3.scaleBand()
    .domain(categories)
    .range([0, height])
    .paddingInner(1)
  svg.append("g")
    .call(d3.axisLeft(yName));

  // Compute kernel density estimation for each column:
  var kde = kernelDensityEstimator(kernelEpanechnikov(7), x.ticks(40)) // increase this 40 for more accurate density.
  var allDensity = []
  for (i = 0; i < n; i++) {
      key = categories[i]
      density = kde( data.map(function(d){  return d[key]; }) )
      allDensity.push({key: key, density: density})
  }

  // Add areas
  svg.selectAll("areas")
    .data(allDensity)
    .enter()
    .append("path")
      .attr("transform", function(d){return("translate(0," + (yName(d.key)-height) +")" )})
      .datum(function(d){return(d.density)})
      .attr("fill", "#69b3a2")
      .attr("stroke", "#000")
      .attr("stroke-width", 1)
      .attr("d",  d3.line()
          .curve(d3.curveBasis)
          .x(function(d) { return x(d[0]); })
          .y(function(d) { return y(d[1]); })
      )

})

// This is what I need to compute kernel density estimation
function kernelDensityEstimator(kernel, X) {
  return function(V) {
    return X.map(function(x) {
      return [x, d3.mean(V, function(v) { return kernel(x - v); })];
    });
  };
}
function kernelEpanechnikov(k) {
  return function(v) {
    return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;
  };
}

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 60, right: 30, bottom: 20, left:110},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          `translate(${margin.left}, ${margin.top})`);

//read data
d3.csv("https://raw.githubusercontent.com/zonination/perceptions/master/probly.csv").then(function(data) {

  // Get the different categories and count them
  const categories = data.columns
  const n = categories.length

  // Add X axis
  const x = d3.scaleLinear()
    .domain([-10, 140])
    .range([ 0, width ]);
  svg.append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x));

  // Create a Y scale for densities
  const y = d3.scaleLinear()
    .domain([0, 0.4])
    .range([ height, 0]);

  // Create the Y axis for names
  const yName = d3.scaleBand()
    .domain(categories)
    .range([0, height])
    .paddingInner(1)
  svg.append("g")
    .call(d3.axisLeft(yName));

  // Compute kernel density estimation for each column:
  const kde = kernelDensityEstimator(kernelEpanechnikov(7), x.ticks(40)) // increase this 40 for more accurate density.
  const allDensity = []
  for (i = 0; i < n; i++) {
      key = categories[i]
      density = kde( data.map(function(d){  return d[key]; }) )
      allDensity.push({key: key, density: density})
  }

  // Add areas
  svg.selectAll("areas")
    .data(allDensity)
    .join("path")
      .attr("transform", function(d){return(`translate(0, ${(yName(d.key)-height)})`)})
      .datum(function(d){return(d.density)})
      .attr("fill", "#69b3a2")
      .attr("stroke", "#000")
      .attr("stroke-width", 1)
      .attr("d",  d3.line()
          .curve(d3.curveBasis)
          .x(function(d) { return x(d[0]); })
          .y(function(d) { return y(d[1]); })
      )

})

// This is what I need to compute kernel density estimation
function kernelDensityEstimator(kernel, X) {
  return function(V) {
    return X.map(function(x) {
      return [x, d3.mean(V, function(v) { return kernel(x - v); })];
    });
  };
}
function kernelEpanechnikov(k) {
  return function(v) {
    return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;
  };
}
</script>
```

### Related blocks →

- _Joyplot -_ by
[Andrew Mollica](https://bl.ocks.org/armollica/3b5f83836c1de5cca7b1d35409a013e3)

- _Basic density plot -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/graph/density_basic.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.37095075032536906)

Prebid User Sync

ssc-cms.33across.com

# This site can’t be reached

**ssc-cms.33across.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ssc-cms.33across.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=33across&endpoint=us-east&us\_privacy=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=33across&endpoint=us-east&us\_privacy=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_4d9c5906-ed7d-47aa-a5d0-9759479ca459&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

**cm.g.doubleclick.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**cm.g.doubleclick.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-E1941451CE321A1064853BCF6852769F@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-4D2C2EF096CE21144696E0A94A2AA671@mhtml.blink)[iframe](cid:frame-932F6517363D3C1D8C4F664A14882815@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_4d9c5906-ed7d-47aa-a5d0-9759479ca459&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_4d9c5906-ed7d-47aa-a5d0-9759479ca459)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?s=192259&cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=90e25c99-ce20-4d77-aadc-3c3788f7d8ce)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=OTBlMjVjOTktY2UyMC00ZDc3LWFhZGMtM2MzNzg4ZjdkOGNl)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ssbsync.smartadserver.com/api/sync?callerId=47&gdpr=0&gdpr_consent=)![](https://pm.w55c.net/ping_match.gif?st=ShareThrough&rurl=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DYnUBs5Yz9Zqjy9VCcoCxquFP%26source_user_id%3D_wfivefivec_)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=663F2C4A-CEFA-41C4-A40A-6D8C1C97E4EE)[iframe](cid:frame-70F36E7AF0A9B7B67A8A5F0EB95F83DB@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=663F2C4A-CEFA-41C4-A40A-6D8C1C97E4EE&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=663F2C4A-CEFA-41C4-A40A-6D8C1C97E4EE&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=NjYzRjJDNEEtQ0VGQS00MUM0LUE0MEEtNkQ4QzFDOTdFNEVF&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=Zj8sSs76QcSkCm2MHJfk7g%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=663F2C4A-CEFA-41C4-A40A-6D8C1C97E4EE&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-22E92256757E1D17A34D104BCC587311@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHI_1mpYOG0i)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHI_1mpYOG0i)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHI_1mpYOG0i)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-FE1AF8135449E0340367DEFE0BA14E68@mhtml.blink)

Topics Frame

## D3.js Area Charts
1,9001,9502,000020,00040,00060,00080,000Helen1,9001,9502,000020,00040,00060,00080,000Amanda1,9001,9502,000020,00040,00060,00080,000Betty1,9001,9502,000020,00040,00060,00080,000Dorothy1,9001,9502,000020,00040,00060,00080,000Linda1,9001,9502,000020,00040,00060,00080,000Deborah1,9001,9502,000020,00040,00060,00080,000Jessica1,9001,9502,000020,00040,00060,00080,000Patricia1,9001,9502,000020,00040,00060,00080,000Ashley

##### Steps:

- This is an advance technique. You probably need to
understand how to build a
[basic area chart](https://d3-graph-gallery.com/graph/area_basic.html) first, and
then have a look to the
[lineplot with several groups](https://d3-graph-gallery.com/graph/line_several_group.html)
to understand how nesting works.


- Instead of building one main svg area as usual,
many svg areas are created: one per group


- To do so, data is bound to each svg area. This is very
handy: each time a component will be created, it will be
done for each subchart


- ToDo: improve explanation

d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 30, right: 0, bottom: 30, left: 50},
    width = 210 - margin.left - margin.right,
    height = 210 - margin.top - margin.bottom;

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/5_OneCatSevNumOrdered.csv", function(data) {

  // group the data: I want to draw one line per group
  var sumstat = d3.nest() // nest function allows to group the calculation per level of a factor
    .key(function(d) { return d.name;})
    .entries(data);

  // What is the list of groups?
  allKeys = sumstat.map(function(d){return d.key})

  // Add an svg element for each group. The will be one beside each other and will go on the next row when no more room available
  var svg = d3.select("#my_dataviz")
    .selectAll("uniqueChart")
    .data(sumstat)
    .enter()
    .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

  // Add X axis --> it is a date format
  var x = d3.scaleLinear()
    .domain(d3.extent(data, function(d) { return d.year; }))
    .range([ 0, width ]);
  svg
    .append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).ticks(3));

  //Add Y axis
  var y = d3.scaleLinear()
    .domain([0, d3.max(data, function(d) { return +d.n; })])
    .range([ height, 0 ]);
  svg.append("g")
    .call(d3.axisLeft(y).ticks(5));

  // color palette
  var color = d3.scaleOrdinal()
    .domain(allKeys)
    .range(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999'])

    // Draw the line
    svg
      .append("path")
        .attr("fill", function(d){ return color(d.key) })
        .attr("stroke", "none")
        .attr("d", function(d){
          return d3.area()
          .x(function(d) { return x(d.year) })
          .y0(y(0))
          .y1(function(d) { return y(+d.n) })
            (d.values)
        })

  // Add titles
  svg
    .append("text")
    .attr("text-anchor", "start")
    .attr("y", -5)
    .attr("x", 0)
    .text(function(d){ return(d.key)})
    .style("fill", function(d){ return color(d.key) })

})
</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 30, right: 0, bottom: 30, left: 50},
      width = 210 - margin.left - margin.right,
      height = 210 - margin.top - margin.bottom;

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/5_OneCatSevNumOrdered.csv").then( function(data) {

  // group the data: I want to draw one line per group
  const sumstat = d3.group(data, d => d.name); // d3.group function allows to group the calculation per level of a factor

  // What is the list of groups?
  const allKeys = data.map(d => d.name);

  // Add an svg element for each group. The will be one beside each other and will go on the next row when no more room available
  const svg = d3.select("#my_dataviz")
    .selectAll("uniqueChart")
    .data(sumstat)
    .join("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform",`translate(${margin.left},${margin.top})`);

  // Add X axis --> it is a date format
  const x = d3.scaleLinear()
    .domain(d3.extent(data, d => d.year))
    .range([ 0, width ]);
  svg
    .append("g")
    .attr("transform", `translate(0, ${height} )`)
    .call(d3.axisBottom(x).ticks(3));

  //Add Y axis
  const y = d3.scaleLinear()
    .domain([0, d3.max(data, d => +d.n )])
    .range([ height, 0 ]);
  svg.append("g")
    .call(d3.axisLeft(y).ticks(5));

  // color palette
  const color = d3.scaleOrdinal()
    .domain(allKeys)
    .range(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999'])

    // Draw the line
    svg
      .append("path")
        .attr("fill", d => color(d[0]))
        .attr("stroke", "none")
        .attr("d", d => {
          return d3.area()
          .x(d => x(d.year))
          .y0(y(0))
          .y1(d => y(+d.n))
            (d[1])
        })

  // Add titles
  svg
    .append("text")
    .attr("text-anchor", "start")
    .attr("y", -5)
    .attr("x", 0)
    .text(d => d[0])
    .style("fill", d => color(d[0]))

})
</script>
```

### Related blocks →

- _Small multiple area line charts -_ by
[Tom Shanley](https://bl.ocks.org/tomshanley/b841837f5414b34b7c45055d97e7674d)

- _Basic area chart -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/graph/area_basic.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.9976158511986863)

Prebid User Sync

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876iNHM4JcALiU-AIM9TAAAAcEAAAAB&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876iNHM4JcALiU-AIM9TAAAAcEAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://ad.turn.com/r/cs?pid=21)![](https://ssbsync.smartadserver.com/api/sync?callerId=82&gdpr=$%7bGDPR%7d&gdpr_consent=$%7bGDPR_CONSENT%7d)![](https://pm.w55c.net/ping_match.gif?ei=CASALE&rurl=https://dsum-sec.casalemedia.com/crum?cm_dsp_id=47&external_user_id=_wfivefivec_)![](https://p.rfihub.com/cm?in=1&pub=2079)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876iNHM4JcALiU.AIM9TAAA%26449)

ssc-cms.33across.com

# This site can’t be reached

The webpage at **https://ssc-cms.33across.com/ps/?m=xch&rt=html&gdpr=&gdpr\_consent=&us\_privacy=&id=zzz000000000002zzz&ru=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3D33across%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D33XUSERID33X** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssc-cms.33across.com/ps/?m=xch&rt=html&gdpr=&gdpr\_consent=&us\_privacy=&id=zzz000000000002zzz&ru=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3D33across%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D33XUSERID33X** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_81919ac2-f109-4e32-aecd-e09a84d1fbe9&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-8EA2DC018835DAA5F0901A28619D2941@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-46D2326E07A90FC1EE8BE1E193D9BD39@mhtml.blink)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=7FFF6371-777F-4BE4-9D18-C5C74B67EEA6)[iframe](cid:frame-7A2CE16E4AEB41FB79AC19D9AF5E46AE@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=7FFF6371-777F-4BE4-9D18-C5C74B67EEA6&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=7FFF6371-777F-4BE4-9D18-C5C74B67EEA6&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=N0ZGRjYzNzEtNzc3Ri00QkU0LTlEMTgtQzVDNzRCNjdFRUE2&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=f_9jcXd_S-SdGMXHS2fupg%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=7FFF6371-777F-4BE4-9D18-C5C74B67EEA6&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/7FFF6371-777F-4BE4-9D18-C5C74B67EEA6?gdpr=0&gdpr_consent=)[iframe](cid:frame-7F349302E352410AAB4A55AF53C1CA07@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)[iframe](cid:frame-A7679019F0E8F10E7B98B5F3519EA66E@mhtml.blink)[iframe](cid:frame-9F3FCE75913D2D54766F745F18094469@mhtml.blink)

[iframe](cid:frame-D9A963F3DF1EF54280468A360B8DE621@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-4B50716B04936D58F123DB1D19D669B9@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_81919ac2-f109-4e32-aecd-e09a84d1fbe9&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_81919ac2-f109-4e32-aecd-e09a84d1fbe9)

match.sharethrough.com

# This site can’t be reached

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIl1ZfDimKk)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSElsMVpmRGltS2s=)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIl1ZfDimKk)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=758335f5-7668-c6a2-1f2e-2518b4002943)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/b9922fcc-fa6e-ef11-eef7-b17a23642fea?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=2d554988-6ac2-7d58-df20-a78fdc33e2a3&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=MDEzYTlhNDItYTNiNS0yM2ZjLWNhYzAtZmQzNjE2ZDEyY2Mz)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-330A8F1E014CDB047E05AB30B1DD1BEE@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-152875366BA72A97E193BFF01856DC45@mhtml.blink)

Topics Frame

## D3 Background Maps
##### Steps:

- The Html part of the code just creates a
`div` that will be modified by d3 later on.


- In this example the world country boundaries are used. Data
comes from
[here](http://enjalot.github.io/wwsd/data/world/world-110m.geojson). They are provided at `geojson` format. If you
have a `shapefile` format, visit the
[background map](https://www.d3-graph-gallery.com/backgroundmap)
section to see how to proceed.


- Note that the
[geo.projection](https://github.com/d3/d3-geo-projection)
plugin is used. It allows to represent the world using
different projection. See
[this page of the gallery](https://d3-graph-gallery.com/graph/backgroundmap_country.html) to see the
possibilities.


- Note: I don't understand the logic behind the
`.scale` part.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="440" height="300"></svg>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create an element where the map will take place -->
<svg id="my_dataviz" width="400" height="300"></svg>

```

``` js
<script>

// The svg
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// Map and projection
var projection = d3.geoMercator()
    .center([2, 47])                // GPS of location to zoom on
    .scale(980)                       // This is like the zoom
    .translate([ width/2, height/2 ])

// Load external data and boot
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson", function(data){

    // Filter data
    data.features = data.features.filter(function(d){console.log(d.properties.name) ; return d.properties.name=="France"})

    // Draw the map
    svg.append("g")
        .selectAll("path")
        .data(data.features)
        .enter()
        .append("path")
          .attr("fill", "grey")
          .attr("d", d3.geoPath()
              .projection(projection)
          )
        .style("stroke", "none")
})

</script>
```

``` js
<script>
// The svg
const svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

// Map and projection
const projection = d3.geoMercator()
    .center([2, 47])                // GPS of location to zoom on
    .scale(980)                       // This is like the zoom
    .translate([ width/2, height/2 ])

// Load external data and boot
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson").then( function(data){

    // Filter data
    data.features = data.features.filter(d => {console.log(d.properties.name); return d.properties.name=="France"})

    // Draw the map
    svg.append("g")
        .selectAll("path")
        .data(data.features)
        .join("path")
          .attr("fill", "grey")
          .attr("d", d3.geoPath()
              .projection(projection)
          )
        .style("stroke", "none")
})
</script>
```

### Related blocks →

- _World Choropleth -_ [link](http://bl.ocks.org/palewire/d2906de347a160f38bc0b7ca57721328)

- _Projection Transitions -_ [link](https://bl.ocks.org/alexmacy/6700d44240d2b6d3ec9767a5a5854e42)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.4182935097530589)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=2532181605309090889389&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=2532181605309090889389)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/2532181605309090889389?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=2532181605309090889389&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=2532181605309090889389)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_cef96947-d2b0-4792-8928-b41a585132c0&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

**c1.adform.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**c1.adform.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-885912EB19448EC588A20E06439E1A74@mhtml.blink)

[iframe](cid:frame-31280697747D5BB0B7ED7A078D0BA86A@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-79C86B0474D71B992786ABCA66001562@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_cef96947-d2b0-4792-8928-b41a585132c0&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_cef96947-d2b0-4792-8928-b41a585132c0)

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876iMAoImUAKaoTAOy5NwAA%262052&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876iMAoImUAKaoTAOy5NwAACAQAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876iMAoImUAKaoTAOy5NwAACAQAAAAB&gpp=&gpp_sid=)![](https://t.adx.opera.com/pub/sync?pubid=pub10256699365696&userId=Z876iMAoImUAKaoTAOy5NwAA%262052&gdpr=&us_privacy=)![](https://bttrack.com/pixel/cookiesync?source=67e94f23-25d6-4008-8236-375d1743c2e0&secure=1)![](https://casale-match.dotomi.com/match/bounce/current?networkId=19998&version=1)![](https://pm.w55c.net/ping_match.gif?ei=CASALE&rurl=https://dsum-sec.casalemedia.com/crum?cm_dsp_id=47&external_user_id=_wfivefivec_)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876iMAoImUAKaoTAOy5NwAACAQAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=61e1c847-ecbb-41d8-8df1-4a6361828cf8)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=NjFlMWM4NDctZWNiYi00MWQ4LThkZjEtNGE2MzYxODI4Y2Y4)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://creativecdn.com/cm-notify?pi=sharethrough&gdpr=0&gdpr_consent=)![](https://ssbsync.smartadserver.com/api/sync?callerId=47&gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=7C41DAFA-C015-4103-AC97-E2E0EA08A72B)[iframe](cid:frame-E7C181A26CB0FBDCD536BA7C9C5E6D3B@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=7C41DAFA-C015-4103-AC97-E2E0EA08A72B&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=7C41DAFA-C015-4103-AC97-E2E0EA08A72B&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=N0M0MURBRkEtQzAxNS00MTAzLUFDOTctRTJFMEVBMDhBNzJC&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=fEHa-sAVQQOsl-Lg6ginKw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=7C41DAFA-C015-4103-AC97-E2E0EA08A72B&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-DB06F0B17F1763FA1638D69B6800110B@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIZi73qGJmh)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIZi73qGJmh)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIZi73qGJmh&cb=1741617800610&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=512223a6-e12f-c41c-2959-f0c93a345929)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/9d33399f-6d29-edaf-d880-64abad505f80?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=09f45fdb-fd85-7fe6-e957-725e520792c9&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=MjU5YjhjMTEtMzRmMi0yMTQyLWZjYjctMjhlNzk4ZTU1Y2E5)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-0EEC6D236AAB25EFF20E0EAC0EC4A564@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-5698F5E596241A13354C4CC3158C1BD3@mhtml.blink)

Topics Frame

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=2532181605309090889389&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=2532181605309090889389)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)![](https://pbs-raptive-us.ay.delivery/setuid?bidder=triplelift&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=2532181605309090889389)

## Network Data Formats
# The `Json` input format we need for d3.js

* * *

Building a network charts requires information on nodes and links. This information can be stored in many different format as described [here](https://www.data-to-viz.com/graph/network.html).
`Json` format is the most convenient way to work with `d3.js` and looks basically like that:


``` js
{ "nodes": [\
    { "id": 1, "name": "A" },\
    { "id": 2, "name": "B" }\
  ],
  "links": [\
    { "source": 1, "target": 2 }\
  ]}
```

It is unlikely that your data are currently at this format. You probably need to reformat your data first using another tool like `R`. The following sections gives a few examples on how to reformat the most common types of input to get a `json` file.


# Json format from `adjacency matrix`

* * *

An adjacency matrix is a square matrix where individuals are the same in row and columns of the matrix. It’s typically the kind of matrix you get when calculating the correlation between each pair of individual.


The following lines of `R code` build a small adjacency matrix, and use the `igraph` and `d3r` libraries to convert it in a `json` file.

``` js
# Let's build an adjacency matrix
data <- matrix(sample(0:1, 25, replace=TRUE), nrow=5)
colnames(data) <- rownames(data) <- LETTERS[1:5]

# Transform it in a graph format
library(igraph)
network <- graph_from_adjacency_matrix(data)

# Transform it in a JSON format for d3.js
library(d3r)
data_json <- d3_igraph(network)

# Save this file
write(data_json, "data.json")

```

You now have a file called `data.json` that is ready to be used by d3.

# Json format from `edge list`

* * *

An edge list is a table listing all the connections.

The following lines of `R code` build a small edge list, and use the `igraph` and `d3r` libraries to convert it in a `json` file.

``` js
# Let's say I have an edge list
links=data.frame(
  source=c("A","A", "A", "A", "A","F", "B"),
  target=c("B","B", "C", "D", "F","A","E")
)

# Transform it in a graph format
library(igraph)
network=graph_from_data_frame(d=links, directed=F)

# Transform it in a JSON format for d3.js
library(d3r)
data_json <- d3_igraph(network)

# Save this file
write(data_json, "data.json")

```

You now have a file called `data.json` that is ready to be used by d3.

# Json format from `edge and node lists`

* * *

In addition to the previous edge list, it is possible to add a second data input which provides some features concerning each node. It is useful if you want to highlight dot features on your network chart.

The following lines of `R code` build a small edge list and a table with node features, and use the `igraph` and `d3r` libraries to convert it in a `json` file.

``` js
# Let's say I have an edge list + node list with info
links=data.frame(
  source=c("A","A", "A", "A", "A","F", "B"),
  target=c("B","B", "C", "D", "F","A","E")
)
nodes=data.frame(
  name=LETTERS[1:6],
  carac=c( rep(10,3), rep(30,3))
)

# Turn it into igraph object
library(igraph)
network=graph_from_data_frame(d=links, vertices=nodes, directed=F)

# Transform it in a JSON format for d3.js
library(d3r)
data_json <- d3_igraph(network)

# Save this file
write(data_json, "data.json")

```

You now have a file called `data.json` that is ready to be used by d3.

## Related documentation

- _The d3r library -_ by [timelyportfolio](https://github.com/timelyportfolio/d3r)

- _Input format for network charts -_ by [the R graph gallery](https://www.r-graph-gallery.com/257-input-formats-for-network-charts/)

- _Network diagram_ \- by [data to viz](https://www.data-to-viz.com/graph/network.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

Prebid User Sync

ssc-cms.33across.com

# This site can’t be reached

**ssc-cms.33across.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ssc-cms.33across.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_fcc3bff4-72fe-4ea5-a37b-6c6043838419&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9mY2MzYmZmNC03MmZlLTRlYTUtYTM3Yi02YzYwNDM4Mzg0MTk=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV9mY2MzYmZmNC03MmZlLTRlYTUtYTM3Yi02YzYwNDM4Mzg0MTk=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.adsrvr.org

# This site can’t be reached

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)

[iframe](cid:frame-4EAE2FE49F14E407F8DB8EBDD821D6BD@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_fcc3bff4-72fe-4ea5-a37b-6c6043838419&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_fcc3bff4-72fe-4ea5-a37b-6c6043838419)

![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876jtHM5SAAHvK6AGy7cgAAFdcAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876jtHM5SAAHvK6AGy7cgAAFdcAAAAB&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876jtHM5SAAHvK6AGy7cgAA%265591&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://www.temu.com/api/adx/cm/pixel-index?id=Z876jtHM5SAAHvK6AGy7cgAAFdcAAAAB)![](https://creativecdn.com/cm-notify?pi=index&gpdr=&gdpr_consent=&us_privacy=&user_id=Z876jtHM5SAAHvK6AGy7cgAA%265591)![](https://cms.quantserve.com/pixel/p-Z8PuJEk6U7Hyq.gif?idmatch=0)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=48)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876jtHM5SAAHvK6AGy7cgAAFdcAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=cc6d40fd-f1c7-4505-8cd1-bc8d45f36d3e)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=Y2M2ZDQwZmQtZjFjNy00NTA1LThjZDEtYmM4ZDQ1ZjM2ZDNl)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ssp.disqus.com/redirectuser?r=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3D7rkJAhPCWXbw9Lq5dZxc6TvN%26source_user_id%3D%24UID&partner=sharethrough)![](https://secure.adnxs.com/getuid?https://match.sharethrough.com/sync/v1?source_id=0e8893f90b606c9c5d33f1be&gdpr=0&gdpr_consent=&source_user_id=$UID)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIol3xjkEhH)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIol3xjkEhH)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIol3xjkEhH&cb=1741617806978&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIol3xjkEhH)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?ld=1&gdpr=0&cmp\_cs=&us\_privacy=&redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?ld=1&gdpr=0&cmp\_cs=&us\_privacy=&redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

## D3.js Correlogram Guide
mpg-0.85-0.85-0.780.68-0.870.420.660.600.48-0.55cyl0.900.83-0.700.78-0.59-0.81-0.52-0.490.53disp0.79-0.710.89-0.43-0.71-0.59-0.560.39hp-0.450.66-0.71-0.72-0.24-0.130.75drat-0.710.090.440.710.70-0.09wt-0.17-0.55-0.69-0.580.43qsec0.74-0.23-0.21-0.66vs0.170.21-0.57am0.790.06gear0.27carb

##### Steps:

- Disclaimer: This chart is highly inspired from
[this example](http://plnkr.co/edit/RJk5vmROVAJGPHIPutVR?p=preview).


- The idea is to create a `g` element for each cell
of the correlogram and store it in an object called
`cor`

- It is then possible to use `.filter` to add text
to the lower left part of the matrix.


- And then the upper part using `.circle`

d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// Graph dimension
var margin = {top: 20, right: 20, bottom: 20, left: 20},
    width = 430 - margin.left - margin.right,
    height = 430 - margin.top - margin.bottom

// Create the svg area
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_correlogram.csv", function(error, rows) {

  // Going from wide to long format
  var data = [];
  rows.forEach(function(d) {
    var x = d[""];
    delete d[""];
    for (prop in d) {
      var y = prop,
        value = d[prop];
      data.push({
        x: x,
        y: y,
        value: +value
      });
    }
  });

  // List of all variables and number of them
  var domain = d3.set(data.map(function(d) { return d.x })).values()
  var num = Math.sqrt(data.length)

  // Create a color scale
  var color = d3.scaleLinear()
    .domain([-1, 0, 1])
    .range(["#B22222", "#fff", "#000080"]);

  // Create a size scale for bubbles on top right. Watch out: must be a rootscale!
  var size = d3.scaleSqrt()
    .domain([0, 1])
    .range([0, 9]);

  // X scale
  var x = d3.scalePoint()
    .range([0, width])
    .domain(domain)

  // Y scale
  var y = d3.scalePoint()
    .range([0, height])
    .domain(domain)

  // Create one 'g' element for each cell of the correlogram
  var cor = svg.selectAll(".cor")
    .data(data)
    .enter()
    .append("g")
      .attr("class", "cor")
      .attr("transform", function(d) {
        return "translate(" + x(d.x) + "," + y(d.y) + ")";
      });

  // Low left part + Diagonal: Add the text with specific color
  cor
    .filter(function(d){
      var ypos = domain.indexOf(d.y);
      var xpos = domain.indexOf(d.x);
      return xpos <= ypos;
    })
    .append("text")
      .attr("y", 5)
      .text(function(d) {
        if (d.x === d.y) {
          return d.x;
        } else {
          return d.value.toFixed(2);
        }
      })
      .style("font-size", 11)
      .style("text-align", "center")
      .style("fill", function(d){
        if (d.x === d.y) {
          return "#000";
        } else {
          return color(d.value);
        }
      });

  // Up right part: add circles
  cor
    .filter(function(d){
      var ypos = domain.indexOf(d.y);
      var xpos = domain.indexOf(d.x);
      return xpos > ypos;
    })
    .append("circle")
      .attr("r", function(d){ return size(Math.abs(d.value)) })
      .style("fill", function(d){
        if (d.x === d.y) {
          return "#000";
        } else {
          return color(d.value);
        }
      })
      .style("opacity", 0.8)

})

</script>
```

``` js
<script>

// Graph dimension
const margin = {top: 20, right: 20, bottom: 20, left: 20},
    width = 430 - margin.left - margin.right,
    height = 430 - margin.top - margin.bottom

// Create the svg area
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_correlogram.csv").then(function(rows) {
 // if (error) throw error
  // Going from wide to long format
  const data = [];
  rows.forEach(function(d) {
    let x = d[""];
    delete d[""];
    for (prop in d) {
      let y = prop,
        value = d[prop];
      data.push({
        x: x,
        y: y,
        value: +value
      });
    }
  });

  // List of all variables and number of them
  const domain = Array.from(new Set(data.map(function(d) { return d.x })))
  const num = Math.sqrt(data.length)

  // Create a color scale
  const color = d3.scaleLinear()
    .domain([-1, 0, 1])
    .range(["#B22222", "#fff", "#000080"]);

  // Create a size scale for bubbles on top right. Watch out: must be a rootscale!
  const size = d3.scaleSqrt()
    .domain([0, 1])
    .range([0, 9]);

  // X scale
  const x = d3.scalePoint()
    .range([0, width])
    .domain(domain)

  // Y scale
  const y = d3.scalePoint()
    .range([0, height])
    .domain(domain)

  // Create one 'g' element for each cell of the correlogram
  const cor = svg.selectAll(".cor")
    .data(data)
    .join("g")
      .attr("class", "cor")
      .attr("transform", function(d) {
        return `translate(${x(d.x)}, ${y(d.y)})`
      });

  // Low left part + Diagonal: Add the text with specific color
  cor
    .filter(function(d){
      const ypos = domain.indexOf(d.y);
      const xpos = domain.indexOf(d.x);
      return xpos <= ypos;
    })
    .append("text")
      .attr("y", 5)
      .text(function(d) {
        if (d.x === d.y) {
          return d.x;
        } else {
          return d.value.toFixed(2);
        }
      })
      .style("font-size", 11)
      .style("text-align", "center")
      .style("fill", function(d){
        if (d.x === d.y) {
          return "#000";
        } else {
          return color(d.value);
        }
      });

  // Up right part: add circles
  cor
    .filter(function(d){
      const ypos = domain.indexOf(d.y);
      const xpos = domain.indexOf(d.x);
      return xpos > ypos;
    })
    .append("circle")
      .attr("r", function(d){ return size(Math.abs(d.value)) })
      .style("fill", function(d){
        if (d.x === d.y) {
          return "#000";
        } else {
          return color(d.value);
        }
      })
      .style("opacity", 0.8)

})
</script>
```

### Related blocks →

- _Correlogram -_ [link](http://plnkr.co/edit/RJk5vmROVAJGPHIPutVR?p=preview)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.3400131507562001)

Prebid User Sync

hde.tynt.com

# This site can’t be reached

The webpage at **https://hde.tynt.com/deb/?m=xch&rt=html&gdpr=&gdpr\_consent=&us\_privacy=&id=zzz000000000002zzz&ru=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3D33across%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D33XUSERID33X&b=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://hde.tynt.com/deb/?m=xch&rt=html&gdpr=&gdpr\_consent=&us\_privacy=&id=zzz000000000002zzz&ru=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3D33across%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D33XUSERID33X&b=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_c6bd2bef-d310-4259-99b3-44c731f4aa93&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-63FB4BD05C64B5EE54FBDCA44500D343@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-D8B1298A620F8F3D0F78210D66CC66BD@mhtml.blink)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=01C67B9E-9CE4-4973-9848-DF8F989FE683)[iframe](cid:frame-DCF53EC83DAAB2A3354BC9EE5C20E339@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=01C67B9E-9CE4-4973-9848-DF8F989FE683&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=01C67B9E-9CE4-4973-9848-DF8F989FE683&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=MDFDNjdCOUUtOUNFNC00OTczLTk4NDgtREY4Rjk4OUZFNjgz&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=AcZ7npzkSXOYSN-PmJ_mgw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=01C67B9E-9CE4-4973-9848-DF8F989FE683&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/01C67B9E-9CE4-4973-9848-DF8F989FE683?gdpr=0&gdpr_consent=)[iframe](cid:frame-DF40EAF69C7495C0496DF2986D80CB57@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)

match.deepintent.com

# This site can’t be reached

The webpage at **https://match.deepintent.com/usersync/141?gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.deepintent.com/usersync/141?gdpr=0&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-675E22B5DD274F5EB4DAC689C1433CF9@mhtml.blink)

[iframe](cid:frame-B3B2844223CAF7283ADCE5F214A00B9F@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-C71FAAF85C51E5CE47CD8620546804DA@mhtml.blink)[iframe](cid:frame-5892D4CE049CF18E81F4EF976BFFD27C@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_c6bd2bef-d310-4259-99b3-44c731f4aa93)

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=f58900f7-dc88-4de9-9e01-37e50a6a5499)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/5890e97c-f5bb-ec49-c45a-e10574665b5d?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=cc578f38-6517-7e00-f58d-f7f08b319614&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZTAzODVjZjItYWM2MC0yMGE0LWUwNmQtYWQ0OTQxZDM1ODc0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_c6bd2bef-d310-4259-99b3-44c731f4aa93&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-628F32B2F6F747538C1446F5E97FD75C@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)[iframe](cid:frame-7C000A7CE6C151ED66D1DC832603AC78@mhtml.blink)

[iframe](cid:frame-93CF1BE30E4CEB91852B01FCB657F776@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-38D2024822E9B1B5A50568871D6DC1F2@mhtml.blink)[iframe](cid:frame-2C2B1FBFFFB17128D0C4B93DACF0FDE4@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_c6bd2bef-d310-4259-99b3-44c731f4aa93&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_c6bd2bef-d310-4259-99b3-44c731f4aa93)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.sharethrough.com

# This site can’t be reached

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.sharethrough.com/jwumXNuB/v1/?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dsharethrough.com%26id%3D$UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIA1poluOzJ)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIA1poluOzJ)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIA1poluOzJ&cb=1741617807838&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIA1poluOzJ)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

**u.openx.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**u.openx.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-507EDCC0F902730A133097DD279A85A1@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-9CE859778859E4C461BB2EB1141C425B@mhtml.blink)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=75905c27-3158-40b7-93ec-322804e73789%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)

Topics Frame

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=891039ac-a916-42bb-a651-4be9e3b201da&ph=a3aece0c-9e80-4316-8deb-faf804779bd1&gdpr=&gdpr\_consent=&r=https%3A%2F%2Fpbs-raptive-us.ay.delivery%2Fsetuid%3Fbidder%3Dopenx%26gdpr%3D%26gdpr\_consent%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=891039ac-a916-42bb-a651-4be9e3b201da&ph=a3aece0c-9e80-4316-8deb-faf804779bd1&gdpr=&gdpr\_consent=&r=https%3A%2F%2Fpbs-raptive-us.ay.delivery%2Fsetuid%3Fbidder%3Dopenx%26gdpr%3D%26gdpr\_consent%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

## D3.js Donut Chart
##### Steps:

- Warning: are you sure you want to use a donut chart?
Learn why
[it is not recommended](https://www.data-to-viz.com/caveat/pie.html).


- Note: Building a donut chart follows exactly the same
process than a [pie chart](https://d3-graph-gallery.com/pie.html).


- Input dataset provides the group names and their
corresponding numeric value.


- The first step is to use the `pie()` function. It
takes this input and return the coordinates of each part of
the pie.


- For instance: `a:9` becomes
`index:0 / padAngle:0 / startAngle: 0 / endAngle:
                      0.71`

- This new information can finally be given to the
`d3.arc()` helper that will draw the shape.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var width = 450
    height = 450
    margin = 40

// The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.
var radius = Math.min(width, height) / 2 - margin

// append the svg object to the div called 'my_dataviz'
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// Create dummy data
var data = {a: 9, b: 20, c:30, d:8, e:12}

// set the color scale
var color = d3.scaleOrdinal()
  .domain(data)
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"])

// Compute the position of each group on the pie:
var pie = d3.pie()
  .value(function(d) {return d.value; })
var data_ready = pie(d3.entries(data))

// Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
svg
  .selectAll('whatever')
  .data(data_ready)
  .enter()
  .append('path')
  .attr('d', d3.arc()
    .innerRadius(100)         // This is the size of the donut hole
    .outerRadius(radius)
  )
  .attr('fill', function(d){ return(color(d.data.key)) })
  .attr("stroke", "black")
  .style("stroke-width", "2px")
  .style("opacity", 0.7)

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const width = 450,
    height = 450,
    margin = 40;

// The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.
const radius = Math.min(width, height) / 2 - margin

// append the svg object to the div called 'my_dataviz'
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", `translate(${width / 2},${height / 2})`);

// Create dummy data
const data = {a: 9, b: 20, c:30, d:8, e:12}

// set the color scale
const color = d3.scaleOrdinal()
  .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"])

// Compute the position of each group on the pie:
const pie = d3.pie()
  .value(d=>d[1])

const data_ready = pie(Object.entries(data))

// Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.
svg
  .selectAll('whatever')
  .data(data_ready)
  .join('path')
  .attr('d', d3.arc()
    .innerRadius(100)         // This is the size of the donut hole
    .outerRadius(radius)
  )
  .attr('fill', d => color(d.data[0]))
  .attr("stroke", "black")
  .style("stroke-width", "2px")
  .style("opacity", 0.7)
</script>
```

### Related blocks →

- _Shape helpers -_ in
[the d3 graph gallery](https://d3-graph-gallery.com/graph/shape.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=4156483040670461295287&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=4156483040670461295287)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/4156483040670461295287?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=4156483040670461295287&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=4156483040670461295287)

ssc-cms.33across.com

# This site can’t be reached

The webpage at **https://ssc-cms.33across.com/ps/?m=xch&rt=html&gdpr=&gdpr\_consent=&us\_privacy=&id=zzz000000000002zzz&ru=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3D33across%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D33XUSERID33X** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssc-cms.33across.com/ps/?m=xch&rt=html&gdpr=&gdpr\_consent=&us\_privacy=&id=zzz000000000002zzz&ru=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3D33across%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D33XUSERID33X** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=125&redir=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D54%26uid%3D%7BuserId%7D)![](https://ups.analytics.yahoo.com/ups/58545/occ)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.4100197694481078)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_680e99f8-f4d4-4235-aec0-3f6a06f59d8f&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-A27366CFBFABBC9BE7EACF0E93B305B9@mhtml.blink)

[iframe](cid:frame-67C71DE11A953EB7FE11089F9C543BBB@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-81DA05C7918F77423284BDA976EDC799@mhtml.blink)[iframe](cid:frame-CCB35B5451E62CAA78D980D299AE8FA4@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_680e99f8-f4d4-4235-aec0-3f6a06f59d8f&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_680e99f8-f4d4-4235-aec0-3f6a06f59d8f)

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876j9HM4bkACql4AIlgkgAA%262503&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://match.adsrvr.org/track/cmf/casale)![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876j9HM4bkACql4AIlgkgAACccAAAAB&gpp=&gpp_sid=)![](https://sync-tm.everesttech.net/upi/pid/ZMAwryCI?redir=https%3A%2F%2Fdsum-sec.casalemedia.com%2Frum%3Fcm_dsp_id%3D88%26external_user_id%3D%24%7BTM_USER_ID%7D)![](https://ad.turn.com/r/cs?pid=21)![](https://p.rfihub.com/cm?in=1&pub=2079)![](https://pm.w55c.net/ping_match.gif?ei=CASALE&rurl=https://dsum-sec.casalemedia.com/crum?cm_dsp_id=47&external_user_id=_wfivefivec_)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876j9HM4bkACql4AIlgkgAACccAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=4fcd70b1-5790-4eed-85c8-1401a992a70c)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=NGZjZDcwYjEtNTc5MC00ZWVkLTg1YzgtMTQwMWE5OTJhNzBj)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/sharethrough)![](https://sync.1rx.io/usersync2/sharethrough)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=EDBE55E9-8BCD-4EEC-B66B-BF3FD276C743)[iframe](cid:frame-A72E950CDF5CC4E9C8CD40AFC517D691@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=EDBE55E9-8BCD-4EEC-B66B-BF3FD276C743&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=EDBE55E9-8BCD-4EEC-B66B-BF3FD276C743&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=RURCRTU1RTktOEJDRC00RUVDLUI2NkItQkYzRkQyNzZDNzQz&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=7b5V6YvNTuy2a78_0nbHQw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=EDBE55E9-8BCD-4EEC-B66B-BF3FD276C743&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-AC4B4202B4B8CF0142D355B632FBC8F0@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIw2rKuNW9N)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIw2rKuNW9N&cb=1741617807075&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIw2rKuNW9N)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

**u.openx.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**u.openx.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

**ib.adnxs.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ib.adnxs.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-7A1F7AE1A8A2BCA54DC5D4A0D12E845B@mhtml.blink)

Topics Frame

## Lollipop Plot Tutorial
-1.0-0.50.00.51.01.52.02.53.03.54.04.55.05.56.0IAKCSLMGVRXHTNZEUYQJFWOPDB

##### Steps:

- You probably want to understand how to build a
[basic lollipop plot](https://d3-graph-gallery.com/graph/lollipop_basic.html) first.


- Then the idea is pretty much the same, building one
`circle` per variable, and joining them with a
`line`

d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 30},
    width = 460 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_cleveland.csv", function(data) {

  // Add X axis
  var x = d3.scaleLinear()
    .domain([-1, 6])
    .range([ 0, width]);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))

  // Y axis
  var y = d3.scaleBand()
    .range([ 0, height ])
    .domain(data.map(function(d) { return d.group; }))
    .padding(1);
  svg.append("g")
    .call(d3.axisLeft(y))

  // Lines
  svg.selectAll("myline")
    .data(data)
    .enter()
    .append("line")
      .attr("x1", function(d) { return x(d.value1); })
      .attr("x2", function(d) { return x(d.value2); })
      .attr("y1", function(d) { return y(d.group); })
      .attr("y2", function(d) { return y(d.group); })
      .attr("stroke", "grey")
      .attr("stroke-width", "1px")

  // Circles of variable 1
  svg.selectAll("mycircle")
    .data(data)
    .enter()
    .append("circle")
      .attr("cx", function(d) { return x(d.value1); })
      .attr("cy", function(d) { return y(d.group); })
      .attr("r", "6")
      .style("fill", "#69b3a2")

  // Circles of variable 2
  svg.selectAll("mycircle")
    .data(data)
    .enter()
    .append("circle")
      .attr("cx", function(d) { return x(d.value2); })
      .attr("cy", function(d) { return y(d.group); })
      .attr("r", "6")
      .style("fill", "#4C4082")
})

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 30, left: 30},
    width = 460 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`);

// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_cleveland.csv").then( function(data) {

  // Add X axis
  const x = d3.scaleLinear()
    .domain([-1, 6])
    .range([ 0, width]);
  svg.append("g")
    .attr("transform", `translate(0, ${height})`)
    .call(d3.axisBottom(x))

  // Y axis
  const y = d3.scaleBand()
    .range([ 0, height ])
    .domain(data.map(function(d) { return d.group; }))
    .padding(1);
  svg.append("g")
    .call(d3.axisLeft(y))

  // Lines
  svg.selectAll("myline")
    .data(data)
    .join("line")
      .attr("x1", function(d) { return x(d.value1); })
      .attr("x2", function(d) { return x(d.value2); })
      .attr("y1", function(d) { return y(d.group); })
      .attr("y2", function(d) { return y(d.group); })
      .attr("stroke", "grey")
      .attr("stroke-width", "1px")

  // Circles of variable 1
  svg.selectAll("mycircle")
    .data(data)
    .join("circle")
      .attr("cx", function(d) { return x(d.value1); })
      .attr("cy", function(d) { return y(d.group); })
      .attr("r", "6")
      .style("fill", "#69b3a2")

  // Circles of variable 2
  svg.selectAll("mycircle")
    .data(data)
    .join("circle")
      .attr("cx", function(d) { return x(d.value2); })
      .attr("cy", function(d) { return y(d.group); })
      .attr("r", "6")
      .style("fill", "#4C4082")
})
</script>
```

### Related blocks →

- _The most basic barplot with d3.js_ -
[link](https://www.d3-graph-gallery.com/graph/barplot_basic.html)

- _Lollipop chart -_ [link](https://bl.ocks.org/curran/d867264d468b323c2e76886d44e7e8f9)

- _Most basic lollipop chart -_ [link](https://www.d3-graph-gallery.com/graph/lollipop_basic.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.012052601509761063)

Prebid User Sync

rtb.gumgum.com

# This site can’t be reached

The webpage at **https://rtb.gumgum.com/usync/11685?gdpr=&gdpr\_consent=&us\_privacy=&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dgumgum%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://rtb.gumgum.com/usync/11685?gdpr=&gdpr\_consent=&us\_privacy=&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dgumgum%26gdpr%3D%26gdpr\_consent%3D%26us\_privacy%3D%26gpp%3D%26gpp\_sid%3D%26f%3Db%26uid%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://prebid.production.adthrive.com/setuid?bidder=openx&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3c9ec426-a027-4d35-b9fe-c079c7556797)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/91872dad-8914-ec95-e3a5-1699b9596853?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=05404be9-19b8-7edc-d272-006c460ea51a&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=MjkyZjk4MjMtZDBjZi0yMDc4LWM3OTItNWFkNThjZWM2Yjdh)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_b153aae7-e5a9-4fc2-867c-bc3fe98ff166&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

**c1.adform.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**c1.adform.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

**cm.g.doubleclick.net** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**cm.g.doubleclick.net** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.adsrvr.org

# This site can’t be reached

**match.adsrvr.org** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**match.adsrvr.org** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-BFB79AC67D2BA1E62D7B4C208407A366@mhtml.blink)[iframe](cid:frame-B6C1765E457B66FF606E846C3C05AA6C@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_b153aae7-e5a9-4fc2-867c-bc3fe98ff166&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_b153aae7-e5a9-4fc2-867c-bc3fe98ff166)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=307cdeab-014b-4382-9d90-64de15549b1a)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=MzA3Y2RlYWItMDE0Yi00MzgyLTlkOTAtNjRkZTE1NTQ5YjFh)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://pixel.rubiconproject.com/exchange/sync.php?p=18694&gdpr=0&gdpr_consent=)![](https://ssc-cms.33across.com/ps/?ri=0013300001kQj2HAAS&ru=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DkzFyzzqXEqukMDumpVLB6Eq3%26source_user_id%3D33XUSERID33X)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=019DE65E-7D28-4BBB-B777-DDE456AB21AF)[iframe](cid:frame-295CA4E5CFDE9700452560DB8AF1F765@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=019DE65E-7D28-4BBB-B777-DDE456AB21AF&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=019DE65E-7D28-4BBB-B777-DDE456AB21AF&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=AZ3mXn0oS7u3d93kVqshrw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=019DE65E-7D28-4BBB-B777-DDE456AB21AF&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/019DE65E-7D28-4BBB-B777-DDE456AB21AF?gdpr=0&gdpr_consent=)[iframe](cid:frame-539299537A0B9C73BD2B1C166910AD6D@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIyZHHySX4v)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIyZHHySX4v)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160648&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160648%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fsync-pm.ads.yieldmo.com%252Fsync%253Fpn_id%253Dpub%2526id%253D%2523PMUID%2526gdpr%253DPM_GDPR%2526gdpr_consent%253DPM_CONSENT)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIyZHHySX4v)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-D95E5C89FF460BA43A8BFF64F031340F@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-899F05B6E884462F00C1643A4760160C@mhtml.blink)

Topics Frame

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fpbs-raptive-us.ay.delivery%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ?us_privacy=1YNY)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D&us_privacy=1YNY)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID&us_privacy=1YNY)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776&us_privacy=1YNY)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=&us_privacy=1YNY)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D&us_privacy=1YNY)

## Iris Boxplot Visualization
setosaversicolorvirginica45678Sepal Length

##### Features:

- This chart is a
[boxplot with Jitter](https://d3-graph-gallery.com/graph/boxplot_show_individual_points.html), with a few more customization.


- Dot color follows a `scaleSequential` with the
inferno color palette. -->
[read more](https://www.d3-graph-gallery.com/graph/custom_color.html)

- Axis are customized: less tick, less bar and titles. -->
[Read more](https://www.d3-graph-gallery.com/graph/custom_axis.html)

- Tooltip added to get exact value of a dot. -->
[Read more](https://www.d3-graph-gallery.com/interactivity.html)

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<!-- Plugin for color scale -->
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

<!-- Tooltip style -->
<style>
.tooltip {
  background-color: black;
  border: none;
  border-radius: 5px;
  padding: 15px;
  min-width: 400px;
  text-align: left;
  color: white;
}
</style>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 50, left: 70},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Read the data and compute summary statistics for each specie
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", function(data) {

  // Compute quartiles, median, inter quantile range min and max --> these info are then used to draw the box.
  var sumstat = d3.nest() // nest function allows to group the calculation per level of a factor
    .key(function(d) { return d.Species;})
    .rollup(function(d) {
      q1 = d3.quantile(d.map(function(g) { return g.Sepal_Length;}).sort(d3.ascending),.25)
      median = d3.quantile(d.map(function(g) { return g.Sepal_Length;}).sort(d3.ascending),.5)
      q3 = d3.quantile(d.map(function(g) { return g.Sepal_Length;}).sort(d3.ascending),.75)
      interQuantileRange = q3 - q1
      min = q1 - 1.5 * interQuantileRange
      max = q3 + 1.5 * interQuantileRange
      return({q1: q1, median: median, q3: q3, interQuantileRange: interQuantileRange, min: min, max: max})
    })
    .entries(data)

  // Show the Y scale
  var y = d3.scaleBand()
    .range([ height, 0 ])
    .domain(["setosa", "versicolor", "virginica"])
    .padding(.4);
  svg.append("g")
    .call(d3.axisLeft(y).tickSize(0))
    .select(".domain").remove()

  // Show the X scale
  var x = d3.scaleLinear()
    .domain([4,8])
    .range([0, width])
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).ticks(5))
    .select(".domain").remove()

  // Color scale
  var myColor = d3.scaleSequential()
    .interpolator(d3.interpolateInferno)
    .domain([4,8])

  // Add X axis label:
  svg.append("text")
      .attr("text-anchor", "end")
      .attr("x", width)
      .attr("y", height + margin.top + 30)
      .text("Sepal Length");

  // Show the main vertical line
  svg
    .selectAll("vertLines")
    .data(sumstat)
    .enter()
    .append("line")
      .attr("x1", function(d){return(x(d.value.min))})
      .attr("x2", function(d){return(x(d.value.max))})
      .attr("y1", function(d){return(y(d.key) + y.bandwidth()/2)})
      .attr("y2", function(d){return(y(d.key) + y.bandwidth()/2)})
      .attr("stroke", "black")
      .style("width", 40)

  // rectangle for the main box
  svg
    .selectAll("boxes")
    .data(sumstat)
    .enter()
    .append("rect")
        .attr("x", function(d){return(x(d.value.q1))}) // console.log(x(d.value.q1)) ;
        .attr("width", function(d){ ; return(x(d.value.q3)-x(d.value.q1))}) //console.log(x(d.value.q3)-x(d.value.q1))
        .attr("y", function(d) { return y(d.key); })
        .attr("height", y.bandwidth() )
        .attr("stroke", "black")
        .style("fill", "#69b3a2")
        .style("opacity", 0.3)

  // Show the median
  svg
    .selectAll("medianLines")
    .data(sumstat)
    .enter()
    .append("line")
      .attr("y1", function(d){return(y(d.key))})
      .attr("y2", function(d){return(y(d.key) + y.bandwidth()/2)})
      .attr("x1", function(d){return(x(d.value.median))})
      .attr("x2", function(d){return(x(d.value.median))})
      .attr("stroke", "black")
      .style("width", 80)

  // create a tooltip
  var tooltip = d3.select("#my_dataviz")
    .append("div")
      .style("opacity", 0)
      .attr("class", "tooltip")
      .style("font-size", "16px")
  // Three function that change the tooltip when user hover / move / leave a cell
  var mouseover = function(d) {
    tooltip
      .transition()
      .duration(200)
      .style("opacity", 1)
    tooltip
        .html("<span style='color:grey'>Sepal length: </span>" + d.Sepal_Length) // + d.Prior_disorder + "<br>" + "HR: " +  d.HR)
        .style("left", (d3.mouse(this)[0]+30) + "px")
        .style("top", (d3.mouse(this)[1]+30) + "px")
  }
  var mousemove = function(d) {
    tooltip
      .style("left", (d3.mouse(this)[0]+30) + "px")
      .style("top", (d3.mouse(this)[1]+30) + "px")
  }
  var mouseleave = function(d) {
    tooltip
      .transition()
      .duration(200)
      .style("opacity", 0)
  }

  // Add individual points with jitter
  var jitterWidth = 50
  svg
    .selectAll("indPoints")
    .data(data)
    .enter()
    .append("circle")
      .attr("cx", function(d){ return(x(d.Sepal_Length))})
      .attr("cy", function(d){ return( y(d.Species) + (y.bandwidth()/2) - jitterWidth/2 + Math.random()*jitterWidth )})
      .attr("r", 4)
      .style("fill", function(d){ return(myColor(+d.Sepal_Length)) })
      .attr("stroke", "black")
      .on("mouseover", mouseover)
      .on("mousemove", mousemove)
      .on("mouseleave", mouseleave)

})

</script>
```

### Related blocks →

- _Simple Box Plot Example in d3.js v4.0 -_ [link](https://bl.ocks.org/rjurney/e04ceddae2e8f85cf3afe4681dac1d74)

- _D3.js Boxplot with Axes and Labels -_ [link](http://bl.ocks.org/anaeliaovalle/60a7ed1f4e55a9052caab3c69668a306)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.27633462453581115)

Prebid User Sync

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=4325786843442986112121&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=4325786843442986112121)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=4325786843442986112121)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_6dae3942-a4c5-481a-b4dc-f921836a45c2&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV82ZGFlMzk0Mi1hNGM1LTQ4MWEtYjRkYy1mOTIxODM2YTQ1YzI=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV82ZGFlMzk0Mi1hNGM1LTQ4MWEtYjRkYy1mOTIxODM2YTQ1YzI=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-942F6711FAEEF3DE5C8672D374BBEE58@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-BBB3CEE04F9FCFED6D773D4871D210FB@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_6dae3942-a4c5-481a-b4dc-f921836a45c2&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_6dae3942-a4c5-481a-b4dc-f921836a45c2)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=5449d465-6635-4cbf-bfdb-a5b4ae639110)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=NTQ0OWQ0NjUtNjYzNS00Y2JmLWJmZGItYTViNGFlNjM5MTEw)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://secure.adnxs.com/getuid?https://match.sharethrough.com/sync/v1?source_id=0e8893f90b606c9c5d33f1be&gdpr=0&gdpr_consent=&source_user_id=$UID)![](https://c1.adform.net/serving/cookie/match?party=1294&gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=18FC1981-83A4-44ED-AFF4-AF1B92763031)[iframe](cid:frame-0B269397FD12DDBB4E79D09335A2AC24@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=18FC1981-83A4-44ED-AFF4-AF1B92763031&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=18FC1981-83A4-44ED-AFF4-AF1B92763031&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=MThGQzE5ODEtODNBNC00NEVELUFGRjQtQUYxQjkyNzYzMDMx&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=GPwZgYOkRO2v9K8bknYwMQ%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=18FC1981-83A4-44ED-AFF4-AF1B92763031&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-27343E851D02BDF003358BC0D19DFFA6@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIxc5XUyPMk)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIxc5XUyPMk)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIxc5XUyPMk&cb=1741617806866&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/rmpssp?sub=yieldmo&redir%3Dhttps%3A%2F%2Fads.yieldmo.com%2Fv000%2Fsync%3Fpn_id%3Dunl%26id%3D%5BRX_UUID%5D)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHpJSTBSSEl4YzVYVXlQTWs=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=4a9491a8-9efd-cb6a-0059-0c52461537ed)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/86858b91-12fb-e2d9-f180-9830d1713144?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=1242edd5-8257-7090-c057-8ec52e26fc0d&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=M2UyZDNlMWYtNGIyMC0yZTM0LWQ1YjctZDQ3Y2U0YzQzMjZk)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-D2D43149A31EFAC6B7B1EC1412A19EEB@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Topics Frame

Pixels![](https://pbs-raptive-us.ay.delivery/setuid?bidder=openx&gdpr=&gdpr_consent=&gpp=&gpp_sid=&f=b&uid=2b9c621a-3bc8-4379-abdb-4ed0af7d3e80)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://us-u.openx.net/w/1.0/sd?id=537073028&val=${ADELPHIC_CUID})![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=4&gdpr=0)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=1955&partner_device_id=143c9e29-d950-4d17-8ab6-16131daa3d01)![](https://us-u.openx.net/w/1.0/cm?id=e508c905-ddce-4732-92a4-0b0f5b72a28f&r=https%3A%2F%2Fid.rlcdn.com%2F464246.gif%3Fpartner_uid%3D%7BOPENX_ID%7D)![](https://ib.adnxs.com/getuid?https://us-u.openx.net/w/1.0/sd?id=537072399&val=$UID)![](https://ad.turn.com/r/cs?pid=9&gdpr=0)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=4325786843442986112121&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=4325786843442986112121)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/4325786843442986112121?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=4325786843442986112121&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)

cdn.undertone.com

# This site can’t be reached

**cdn.undertone.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**cdn.undertone.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://x.bidswitch.net/sync?ssp=openx)![](https://id.rlcdn.com/709996.gif)![](https://idpix.media6degrees.com/orbserv/hbpix?pixId=856286&pcv=125&ptid=23&tpuv=00&tpu=beef785f-9acf-55a6-377e-c5360bebbccf)![](https://sync.srv.stackadapt.com/sync?nid=268)![](https://b1sync.zemanta.com/usersync/openx?puid=398f9793-69df-4112-9764-12070d362276&cb=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D560843120%26val%3D__ZUID__)![](https://rtb.openx.net/sync/dds)

User-Sync

## Line Chart with Confidence
102030405060708090100012345678910111213

##### Steps:

- Very similar to a basic
[line chart](https://d3-graph-gallery.com/graph/line_basic.html).


- The dataset provides the upper and lower bounds of the
confidence interval. Column names are
`CI_right` and `CI_left`.


- It is thus possible to use `d3.area()` to add the
confidence interval around the line.


- Note: it is a good practice to build the confidence interval
before the line, to avoid overlapping issues.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_IC.csv",function(data) {

    // Add X axis --> it is a date format
    var x = d3.scaleLinear()
      .domain([1,100])
      .range([ 0, width ]);
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    // Add Y axis
    var y = d3.scaleLinear()
      .domain([0, 13])
      .range([ height, 0 ]);
    svg.append("g")
      .call(d3.axisLeft(y));

    // Show confidence interval
    svg.append("path")
      .datum(data)
      .attr("fill", "#cce5df")
      .attr("stroke", "none")
      .attr("d", d3.area()
        .x(function(d) { return x(d.x) })
        .y0(function(d) { return y(d.CI_right) })
        .y1(function(d) { return y(d.CI_left) })
        )

    // Add the line
    svg
      .append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", d3.line()
        .x(function(d) { return x(d.x) })
        .y(function(d) { return y(d.y) })
        )

})

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_IC.csv").then(function(data) {

    // Add X axis --> it is a date format
    const x = d3.scaleLinear()
      .domain([1,100])
      .range([ 0, width ]);
    svg.append("g")
      .attr("transform", `translate(0, ${height})`)
      .call(d3.axisBottom(x));

    // Add Y axis
    const y = d3.scaleLinear()
      .domain([0, 13])
      .range([ height, 0 ]);
    svg.append("g")
      .call(d3.axisLeft(y));

    // Show confidence interval
    svg.append("path")
      .datum(data)
      .attr("fill", "#cce5df")
      .attr("stroke", "none")
      .attr("d", d3.area()
        .x(function(d) { return x(d.x) })
        .y0(function(d) { return y(d.CI_right) })
        .y1(function(d) { return y(d.CI_left) })
        )

    // Add the line
    svg
      .append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-width", 1.5)
      .attr("d", d3.line()
        .x(function(d) { return x(d.x) })
        .y(function(d) { return y(d.y) })
        )

})
</script>
```

### Related blocks →

- _Line Chart -_ [link](https://bl.ocks.org/mbostock/3883245)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.19832903927783763)

Prebid User Sync

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_8ba9ca0c-3be9-4405-be5a-160c0d5cca13&gdpr=&gdpr_consent=&us_privacy=)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)[iframe](cid:frame-A53797BF281A73F8527D3E9EB146DC4A@mhtml.blink)

[iframe](cid:frame-C49F0121900F58C107AA17CECF4045D7@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://prebid.production.adthrive.com/setuid?bidder=gumgum&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=u_8ba9ca0c-3be9-4405-be5a-160c0d5cca13)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_8ba9ca0c-3be9-4405-be5a-160c0d5cca13&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-9EC5F9C32EFA42B71DDAA9B8FA636B9D@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-92041E37EF0C7F20C8209E58F7DD500A@mhtml.blink)

match.adsrvr.org

# This site can’t be reached

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-6427D88FD9790E1018788C4E77BEFC8D@mhtml.blink)[iframe](cid:frame-56E71EF2F30B71660B80FA10DA97D423@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_8ba9ca0c-3be9-4405-be5a-160c0d5cca13&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_8ba9ca0c-3be9-4405-be5a-160c0d5cca13)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=c1b3f8c6-87e2-444e-b995-cd32872b88c7)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=YzFiM2Y4YzYtODdlMi00NDRlLWI5OTUtY2QzMjg3MmI4OGM3)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/rmpssp?sub=sharethrough)![](https://sync.1rx.io/usersync2/sharethrough)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHuII0RHIeAb3s4zIY)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHuII0RHIeAb3s4zIY&cb=1741617806927&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_hm=eHFlSHVJSTBSSEllQWIzczR6SVk=)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://cm.g.doubleclick.net/pixel?google_nid=yieldmo_dbm&google_cm&pn_id=c)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHuII0RHIeAb3s4zIY)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=0c155210-76a8-c5e4-338f-bf50c28dae6a)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/c0044829-faae-ec57-c256-2b3255e9a8c3?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=54c32e6d-6a02-7e1e-f381-3dc7aabe658a&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=NzhhY2ZkYTctYTM3NS0yMGJhLWU2NjEtNjc3ZTYwNWNhYmVh)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-235D4D4F9E2D130BDC6A34B10F80ACAF@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-8569D023A0BECCAE0576456D1A324F27@mhtml.blink)

Topics Frame

## Circular Packing with D3.js
##### Steps:

- Circular packing requires information on nodes as input.
Here the input `data` is pretty simple, each node
just have a name.


- For each node, a circle is created using a classic
`enter()` and `append()` approach. All
circles are initialized with the same position: the center
of the `svg` area.


- D3’s force layout will use a
physics based simulator to find the best circle
positions.

`d3.forceSimulation()` allows to
define the forces we want to apply to circles


- Here, circles are attracted toward the center
( `forceCenter`), are slightly attracted one each
other ( `forceManyBody`), and overlapping is
avoided ( `forceCollide`).


- This forces are applied to nodes through several iteration.
At each iteration ( `tick`), node position is
updated


- D3 knows when the circle position is satisfying and will
stop the simulations.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var width = 450
var height = 450

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", 450)
    .attr("height", 450)

// create dummy data -> just one element per circle
var data = [{ "name": "A" }, { "name": "B" }, { "name": "C" }, { "name": "D" }, { "name": "E" }, { "name": "F" }, { "name": "G" }, { "name": "H" }]

// Initialize the circle: all located at the center of the svg area
var node = svg.append("g")
  .selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
    .attr("r", 25)
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .style("fill", "#69b3a2")
    .style("fill-opacity", 0.3)
    .attr("stroke", "#69a2b2")
    .style("stroke-width", 4)

// Features of the forces applied to the nodes:
var simulation = d3.forceSimulation()
    .force("center", d3.forceCenter().x(width / 2).y(height / 2)) // Attraction to the center of the svg area
    .force("charge", d3.forceManyBody().strength(0.5)) // Nodes are attracted one each other of value is > 0
    .force("collide", d3.forceCollide().strength(.01).radius(30).iterations(1)) // Force that avoids circle overlapping

// Apply these forces to the nodes and update their positions.
// Once the force algorithm is happy with positions ('alpha' value is low enough), simulations will stop.
simulation
    .nodes(data)
    .on("tick", function(d){
      node
          .attr("cx", function(d){ return d.x; })
          .attr("cy", function(d){ return d.y; })
    });

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const width = 450
const height = 450

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", 450)
    .attr("height", 450)

// create dummy data -> just one element per circle
const data = [{ "name": "A" }, { "name": "B" }, { "name": "C" }, { "name": "D" }, { "name": "E" }, { "name": "F" }, { "name": "G" }, { "name": "H" }]

// Initialize the circle: all located at the center of the svg area
const node = svg.append("g")
  .selectAll("circle")
  .data(data)
  .join("circle")
    .attr("r", 25)
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .style("fill", "#69b3a2")
    .style("fill-opacity", 0.3)
    .attr("stroke", "#69a2b2")
    .style("stroke-width", 4)

// Features of the forces applied to the nodes:
const simulation = d3.forceSimulation()
    .force("center", d3.forceCenter().x(width / 2).y(height / 2)) // Attraction to the center of the svg area
    .force("charge", d3.forceManyBody().strength(0.5)) // Nodes are attracted one each other of value is > 0
    .force("collide", d3.forceCollide().strength(.01).radius(30).iterations(1)) // Force that avoids circle overlapping

// Apply these forces to the nodes and update their positions.
// Once the force algorithm is happy with positions ('alpha' value is low enough), simulations will stop.
simulation
    .nodes(data)
    .on("tick", function(d){
      node
          .attr("cx", d => d.x)
          .attr("cy", d => d.y)
    });

</script>
```

### Related blocks →

- _Force layout -_ by
[d3 in depth](https://d3indepth.com/force-layout/)

- _Force Simulation -_ by
[Harry Stevens](https://bl.ocks.org/HarryStevens/f636199a46fc4b210fbca3b1dc4ef372)

- _Circular packing -_ by
[the d3 graph gallery](https://d3-graph-gallery.com/circularpacking.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.6424061441100399)

Prebid User Sync

![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876j8AoInIAK22XAPhdZgAA%262625&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://dsum-sec.casalemedia.com/rrum?ixi=1&cm_dsp_id=85&cb=https%3A%2F%2Fcm.g.doubleclick.net%2Fpixel%3Fgoogle_nid%3Dcasale_media2_dbm%26google_cm%26google_sc%26google_hm%3D)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876j8AoInIAK22XAPhdZgAACkEAAAAB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://um.simpli.fi/pm_match?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=90&external_user_id=$UID)![](https://trace.mediago.io/ju/cs/indexexchange)![](https://match.prod.bidr.io/cookie-sync/ie)![](https://p.rfihub.com/cm?in=1&pub=2079)![](https://prebid.production.adthrive.com/setuid?gpp=&gpp_sid=&gpp=&gpp_sid=&bidder=ix&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=Z876j8AoInIAK22XAPhdZgAA%262625)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=68339834628358009778&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=68339834628358009778)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/68339834628358009778?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=68339834628358009778&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=68339834628358009778)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_727e5a87-1911-40e2-8ee7-84084f8ec77f&gdpr=&gdpr_consent=&us_privacy=)

c1.adform.net

# This site can’t be reached

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://c1.adform.net/serving/cookie/match?party=1301&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)

cm.g.doubleclick.net

# This site can’t be reached

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV83MjdlNWE4Ny0xOTExLTQwZTItOGVlNy04NDA4NGY4ZWM3N2Y=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://cm.g.doubleclick.net/pixel?google\_nid=gumgum\_dbm&google\_hm=dV83MjdlNWE4Ny0xOTExLTQwZTItOGVlNy04NDA4NGY4ZWM3N2Y=&gdpr=&gdpr\_consent=&google\_redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dgdv** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ads.pubmatic.com

# This site can’t be reached

**ads.pubmatic.com** unexpectedly closed the connection.

Try:

- Checking the connection
- [Checking the proxy and the firewall](chrome-error://chromewebdata/#buttons)

ERR\_CONNECTION\_CLOSED

Reload


Details


Check your Internet connection

Check any cables and reboot any routers, modems, or other network
devices you may be using.

Allow Chrome to access the network in your firewall or antivirus
settings.

If it is already listed as a program allowed to access the network, try
removing it from the list and adding it again.

If you use a proxy server…

Go to
the Chrome menu >
Settings
>
Show advanced settings…
>
Change proxy settings…
and make sure your configuration is set to "no proxy" or "direct."

**ads.pubmatic.com** unexpectedly closed the connection.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

match.adsrvr.org

# This site can’t be reached

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://match.adsrvr.org/track/cmf/generic?ttd\_pid=gumgum&ttd\_tpi=1&gdpr=&gdpr\_consent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-6CC018485B1E4C9F603A4592581D6CF1@mhtml.blink)

creativecdn.com

# This site can’t be reached

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://creativecdn.com/cm-notify?pi=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_727e5a87-1911-40e2-8ee7-84084f8ec77f&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_727e5a87-1911-40e2-8ee7-84084f8ec77f)

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876j8AoInIAK22XAPhdZgAACkEAAAAB&gpp=&gpp_sid=)![](https://secure.adnxs.com/getuid?https://dsum-sec.casalemedia.com/crum?cm_dsp_id=46&external_user_id=$UID)![](https://pr-bh.ybp.yahoo.com/sync/casale/Z876j8AoInIAK22XAPhdZgAACkEAAAAB?gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://cms.quantserve.com/pixel/p-Z8PuJEk6U7Hyq.gif?idmatch=0)![](https://c1.adform.net/serving/cookie/match?party=29)![](https://creativecdn.com/cm-notify?pi=index&gpdr=&gdpr_consent=&us_privacy=&user_id=Z876j8AoInIAK22XAPhdZgAA%262625)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=48)![](https://x.bidswitch.net/sync?ssp=index)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876j8AoInIAK22XAPhdZgAACkEAAAAB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=c0ed1562-7232-4813-a914-a066d7e313ea)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=YzBlZDE1NjItNzIzMi00ODEzLWE5MTQtYTA2NmQ3ZTMxM2Vh)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/sharethrough/c0ed1562-7232-4813-a914-a066d7e313ea?gdpr=0&gdpr_consent=)![](https://stx-match.dotomi.com/match/bounce/current?networkId=44410&version=1&nuid=c0ed1562-7232-4813-a914-a066d7e313ea&gdpr=0&gdpr_consent=)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=43A04B55-6F16-462D-ABA3-C349914F8CB3)[iframe](cid:frame-E65BAD2176A76098943450DF087BEE3B@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=43A04B55-6F16-462D-ABA3-C349914F8CB3&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=43A04B55-6F16-462D-ABA3-C349914F8CB3&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=NDNBMDRCNTUtNkYxNi00NjJELUFCQTMtQzM0OTkxNEY4Q0Iz&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=Q6BLVW8WRi2ro8NJkU-Msw%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=43A04B55-6F16-462D-ABA3-C349914F8CB3&redir=true&gdpr=0&gdpr_consent=)[iframe](cid:frame-9A0CDCB67A7710761021AD655FF54BAC@mhtml.blink)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHIrC0euc7BU)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHIrC0euc7BU&cb=1741617807322&url={{REFERRER}}&gdpr=0&gdpr_consent=)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://pixel.tapad.com/idsync/ex/receive?partner_id=3107&partner_device_id=xqeHzII0RHIrC0euc7BU)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHIrC0euc7BU)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?cc=1&id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

ib.adnxs.com

# This site can’t be reached

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ib.adnxs.com/getuid?https://s.amazon-adsystem.com/ecm3?id=$UID&ex=appnexus.com** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?ld=1&gdpr=0&cmp\_cs=&us\_privacy=&redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?ld=1&gdpr=0&cmp\_cs=&us\_privacy=&redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-6B055010DAFDB8807CFD32029D0BBAEC@mhtml.blink)[iframe](cid:frame-97944B90FCB52C379D7566F81F7FDE3B@mhtml.blink)

Topics Frame

[iframe](cid:frame-68F6E3980C38AB8B5F61D3B87D399431@mhtml.blink)

## D3.js Correlogram Tutorial
45678234456782464567801223445678234246234012246456782462342460120124567801223401224645678234246012

##### Steps:

- First of all, you need to understand how to build a
[scatterplot](https://d3-graph-gallery.com/scatter.html) and a
[histogram](https://d3-graph-gallery.com/histogram.html) with d3.js.


- The previous post explains how to create the
[correlogram with scatterplot](https://d3-graph-gallery.com/graph/correlogram_scatter.html).


- Here, I just add an histogram when
`var1 == var2` in the loop -> when I'm on the
diagonal.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// Dimension of the whole chart. Only one size since it has to be square
var marginWhole = {top: 10, right: 10, bottom: 10, left: 10},
    sizeWhole = 640 - marginWhole.left - marginWhole.right

// Create the svg area
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", sizeWhole  + marginWhole.left + marginWhole.right)
    .attr("height", sizeWhole  + marginWhole.top + marginWhole.bottom)
  .append("g")
    .attr("transform", "translate(" + marginWhole.left + "," + marginWhole.top + ")");

d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv", function(data) {

  // What are the numeric variables in this dataset? How many do I have
  var allVar = ["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"]
  var numVar = allVar.length

  // Now I can compute the size of a single chart
  mar = 20
  size = sizeWhole / numVar

  // ----------------- //
  // Scales
  // ----------------- //

  // Create a scale: gives the position of each pair each variable
  var position = d3.scalePoint()
    .domain(allVar)
    .range([0, sizeWhole-size])

  // Color scale: give me a specie name, I return a color
  var color = d3.scaleOrdinal()
    .domain(["setosa", "versicolor", "virginica" ])
    .range([ "#402D54", "#D18975", "#8FD175"])

  // ------------------------------- //
  // Add charts
  // ------------------------------- //
  for (i in allVar){
    for (j in allVar){

      // Get current variable name
      var var1 = allVar[i]
      var var2 = allVar[j]

      // If var1 == var2 i'm on the diagonal, I skip that
      if (var1 === var2) { continue; }

      // Add X Scale of each graph
      xextent = d3.extent(data, function(d) { return +d[var1] })
      var x = d3.scaleLinear()
        .domain(xextent).nice()
        .range([ 0, size-2*mar ]);

      // Add Y Scale of each graph
      yextent = d3.extent(data, function(d) { return +d[var2] })
      var y = d3.scaleLinear()
        .domain(yextent).nice()
        .range([ size-2*mar, 0 ]);

      // Add a 'g' at the right position
      var tmp = svg
        .append('g')
        .attr("transform", "translate(" + (position(var1)+mar) + "," + (position(var2)+mar) + ")");

      // Add X and Y axis in tmp
      tmp.append("g")
        .attr("transform", "translate(" + 0 + "," + (size-mar*2) + ")")
        .call(d3.axisBottom(x).ticks(3));
      tmp.append("g")
        .call(d3.axisLeft(y).ticks(3));

      // Add circle
      tmp
        .selectAll("myCircles")
        .data(data)
        .enter()
        .append("circle")
          .attr("cx", function(d){ return x(+d[var1]) })
          .attr("cy", function(d){ return y(+d[var2]) })
          .attr("r", 3)
          .attr("fill", function(d){ return color(d.Species)})
    }
  }

  // ------------------------------- //
  // Add histograms = diagonal
  // ------------------------------- //
  for (i in allVar){
    for (j in allVar){

      // variable names
      var var1 = allVar[i]
      var var2 = allVar[j]

      // If var1 == var2 i'm on the diagonal, otherwisee I skip
      if (i != j) { continue; }

      // create X Scale
      xextent = d3.extent(data, function(d) { return +d[var1] })
      var x = d3.scaleLinear()
        .domain(xextent).nice()
        .range([ 0, size-2*mar ]);

      // Add a 'g' at the right position
      var tmp = svg
        .append('g')
        .attr("transform", "translate(" + (position(var1)+mar) + "," + (position(var2)+mar) + ")");

      // Add x axis
      tmp.append("g")
        .attr("transform", "translate(" + 0 + "," + (size-mar*2) + ")")
        .call(d3.axisBottom(x).ticks(3));

      // set the parameters for the histogram
       var histogram = d3.histogram()
           .value(function(d) { return +d[var1]; })   // I need to give the vector of value
           .domain(x.domain())  // then the domain of the graphic
           .thresholds(x.ticks(15)); // then the numbers of bins

       // And apply this function to data to get the bins
       var bins = histogram(data);

       // Y axis: scale and draw:
       var y = d3.scaleLinear()
            .range([ size-2*mar, 0 ])
            .domain([0, d3.max(bins, function(d) { return d.length; })]);   // d3.hist has to be called before the Y axis obviously

       // append the bar rectangles to the svg element
       tmp.append('g')
          .selectAll("rect")
          .data(bins)
          .enter()
          .append("rect")
             .attr("x", 1)
             .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; })
             .attr("width", function(d) { return x(d.x1) - x(d.x0)  ; })
             .attr("height", function(d) { return (size-2*mar) - y(d.length); })
             .style("fill", "#b8b8b8")
             .attr("stroke", "white")
    }
  }

})

</script>
```

``` js
<script>

// Dimension of the whole chart. Only one size since it has to be square
const marginWhole = {top: 10, right: 10, bottom: 10, left: 10},
    sizeWhole = 640 - marginWhole.left - marginWhole.right

// Create the svg area
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", sizeWhole  + marginWhole.left + marginWhole.right)
    .attr("height", sizeWhole  + marginWhole.top + marginWhole.bottom)
  .append("g")
    .attr("transform", `translate(${marginWhole.left},${marginWhole.top})`);

d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/iris.csv").then( function(data) {

  // What are the numeric variables in this dataset? How many do I have
  const allVar = ["Sepal_Length", "Sepal_Width", "Petal_Length", "Petal_Width"]
  const numVar = allVar.length

  // Now I can compute the size of a single chart
  mar = 20
  size = sizeWhole / numVar

  // ----------------- //
  // Scales
  // ----------------- //

  // Create a scale: gives the position of each pair each variable
  const position = d3.scalePoint()
    .domain(allVar)
    .range([0, sizeWhole-size])

  // Color scale: give me a specie name, I return a color
  const color = d3.scaleOrdinal()
    .domain(["setosa", "versicolor", "virginica" ])
    .range([ "#402D54", "#D18975", "#8FD175"])

  // ------------------------------- //
  // Add charts
  // ------------------------------- //
  for (i in allVar){
    for (j in allVar){

      // Get current variable name
      let var1 = allVar[i]
      let var2 = allVar[j]

      // If var1 == var2 i'm on the diagonal, I skip that
      if (var1 === var2) { continue; }

      // Add X Scale of each graph
      xextent = d3.extent(data, function(d) { return +d[var1] })
      const x = d3.scaleLinear()
        .domain(xextent).nice()
        .range([ 0, size-2*mar ]);

      // Add Y Scale of each graph
      yextent = d3.extent(data, function(d) { return +d[var2] })
      const y = d3.scaleLinear()
        .domain(yextent).nice()
        .range([ size-2*mar, 0 ]);

      // Add a 'g' at the right position
      const tmp = svg
        .append('g')
        .attr("transform", `translate(${position(var1)+mar},${position(var2)+mar})`);

      // Add X and Y axis in tmp
      tmp.append("g")
        .attr("transform", `translate(0,${size-mar*2})`)
        .call(d3.axisBottom(x).ticks(3));
      tmp.append("g")
        .call(d3.axisLeft(y).ticks(3));

      // Add circle
      tmp
        .selectAll("myCircles")
        .data(data)
        .join("circle")
          .attr("cx", function(d){ return x(+d[var1]) })
          .attr("cy", function(d){ return y(+d[var2]) })
          .attr("r", 3)
          .attr("fill", function(d){ return color(d.Species)})
    }
  }

  // ------------------------------- //
  // Add histograms = diagonal
  // ------------------------------- //
  for (i in allVar){
    for (j in allVar){

      // variable names
      let var1 = allVar[i]
      let var2 = allVar[j]

      // If var1 == var2 i'm on the diagonal, otherwisee I skip
      if (i != j) { continue; }

      // create X Scale
      xextent = d3.extent(data, function(d) { return +d[var1] })
      const x = d3.scaleLinear()
        .domain(xextent).nice()
        .range([ 0, size-2*mar ]);

      // Add a 'g' at the right position
      const tmp = svg
        .append('g')
        .attr("transform", `translate(${position(var1)+mar},${position(var2)+mar})`);

      // Add x axis
      tmp.append("g")
        .attr("transform", `translate(0,${size-mar*2})`)
        .call(d3.axisBottom(x).ticks(3));

      // set the parameters for the histogram
       const histogram = d3.histogram()
           .value(function(d) { return +d[var1]; })   // I need to give the vector of value
           .domain(x.domain())  // then the domain of the graphic
           .thresholds(x.ticks(15)); // then the numbers of bins

       // And apply this function to data to get the bins
       const bins = histogram(data);

       // Y axis: scale and draw:
       const y = d3.scaleLinear()
            .range([ size-2*mar, 0 ])
            .domain([0, d3.max(bins, function(d) { return d.length; })]);   // d3.hist has to be called before the Y axis obviously

       // append the bar rectangles to the svg element
       tmp.append('g')
          .selectAll("rect")
          .data(bins)
          .join("rect")
             .attr("x", 1)
             .attr("transform", d => `translate(${x(d.x0)},${y(d.length)})`)
             .attr("width", function(d) { return x(d.x1) - x(d.x0)  ; })
             .attr("height", function(d) { return (size-2*mar) - y(d.length); })
             .style("fill", "#b8b8b8")
             .attr("stroke", "white")
    }
  }
})
</script>
```

### Related blocks →

- _Correlogram -_ [link](http://plnkr.co/edit/RJk5vmROVAJGPHIPutVR?p=preview)

- _Scatterplot section -_ [link](https://d3-graph-gallery.com/scatter.html)

- _Correlogram section -_ [link](https://d3-graph-gallery.com/correlogram.html)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.5260878951753847)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=3843869566222130648055&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=3843869566222130648055)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/3843869566222130648055?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=3843869566222130648055&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=3843869566222130648055)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_ccde778a-8e1e-4226-b16c-ef70bc60e1ce&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-1A9845D3621F9092A4D2A598220EB997@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-ECCC866F5474D75569D35D6EE1BE38D5@mhtml.blink)

![](https://idsync.rlcdn.com/420486.gif?partner_uid=2DA4FD28-0D66-41B1-896A-1FF73DA81004)[iframe](cid:frame-84309FD2F2FCF845A2C7F125F682BECA@mhtml.blink)![](https://pixel.onaudience.com/?partner=214&mapped=2DA4FD28-0D66-41B1-896A-1FF73DA81004&gdpr=0&gdpr_consent=)![](https://uipglob.semasio.net/pubmatic/1/info?sType=sync&sExtCookieId=2DA4FD28-0D66-41B1-896A-1FF73DA81004&sInitiator=external&gdpr=0&gdpr_consent=)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_hm=MkRBNEZEMjgtMEQ2Ni00MUIxLTg5NkEtMUZGNzNEQTgxMDA0&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pmeb&google_sc=1&google_hm=LaT9KA1mQbGJah_3PagQBA%3D%3D&gdpr=0&gdpr_consent=&google_cm)![](https://cm.g.doubleclick.net/pixel?google_nid=pubmatic&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://um.simpli.fi/pubmatic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9ODA2JnRsPTUxODQwMA==&piggybackCookie=uid:$UID&gdpr=0&gdpr_consent=)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=pubmatic&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://ups.analytics.yahoo.com/ups/58292/sync?_origin=1&uid=2DA4FD28-0D66-41B1-896A-1FF73DA81004&redir=true&gdpr=0&gdpr_consent=)![](https://pr-bh.ybp.yahoo.com/sync/pubmatic/2DA4FD28-0D66-41B1-896A-1FF73DA81004?gdpr=0&gdpr_consent=)[iframe](cid:frame-71EFD3CF75AF5B2A285A5CE55F56B856@mhtml.blink)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://simage2.pubmatic.com/AdServer/Pug?vcode=bz0yJnR5cGU9MSZqcz0xJmNvZGU9MzI1MCZ0bD0xMjk2MDA=&piggybackCookie=${ADELPHIC_CUID}&gdpr=0&gdpr_consent=)[iframe](cid:frame-960E7D054320A0A664CBABAF669DE1EB@mhtml.blink)[iframe](cid:frame-0B6185D81CEDD7D57452AC86088E8C1E@mhtml.blink)

[iframe](cid:frame-DDBA7E61E566A6465F8CEAAB5FD38158@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)[iframe](cid:frame-5C02CB808300A30AE6F2975A2DDA6BBC@mhtml.blink)[iframe](cid:frame-F757C2525E44D9560F15796227715B4B@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_ccde778a-8e1e-4226-b16c-ef70bc60e1ce&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

secure-assets.rubiconproject.com

# This site can’t be reached

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://secure-assets.rubiconproject.com/utils/xapi/multi-sync.html?p=gumgum** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_ccde778a-8e1e-4226-b16c-ef70bc60e1ce)

![](https://s.amazon-adsystem.com/dcm?pid=78af914c-e755-4b90-bded-1b172aedc763&us_privacy=&gdpr=&gdpr_consent=&id=Z876kMAoIqMALS6qAPde5wAACh4AAAIB&gpp=&gpp_sid=)![](https://match.adsrvr.org/track/cmf/casale)![](https://cm.g.doubleclick.net/pixel?google_nid=index&google_cm&google_hm=Z876kMAoIqMALS6qAPde5wAACh4AAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://i.liadm.com/s/31327?bidder_id=14481&bidder_uuid=Z876kMAoIqMALS6qAPde5wAA%262590&gpdr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=)![](https://cm.adgrx.com/bridge?AG_PID=casale&AG_SETCOOKIE)![](https://sync.srv.stackadapt.com/sync?nid=68)![](https://b1sync.zemanta.com/usersync/index/?puid=Z876kMAoIqMALS6qAPde5wAA%262590&cb=https%3A%2F%2Fdsum-sec.casalemedia.com%2Fcrum%3Fexternal_user_id%3D_ZUID_&gdpr=&gdpr_consent=&us_privacy=)![](https://ads.stickyadstv.com/user-registering?dataProviderId=1025&userId=Z876kMAoIqMALS6qAPde5wAACh4AAAIB&gdpr_consent=&us_privacy=&gdpr=&gpp=&gpp_sid=)![](https://s.amazon-adsystem.com/ecm3?ex=index.com&id=Z876kMAoIqMALS6qAPde5wAACh4AAAIB)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=24e01079-996e-4547-a2ec-517643dbf25e)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=MjRlMDEwNzktOTk2ZS00NTQ3LWEyZWMtNTE3NjQzZGJmMjVl)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync.1rx.io/usersync2/rmpssp?sub=sharethrough)![](https://u.openx.net/w/1.0/cm?gdpr=0&gdpr_consent=&id=7ead435e-a2cd-4cbf-8876-adb66822613f&ph=c6b01e12-aa62-4ae6-9e10-71346e597c31&r=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DF2Stothm3wg5g6opTuaPadz9%26source_user_id%3D)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?p=156011&s=165626&predirect=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dpubmatic.com%26id%3D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

sync-amz.ads.yieldmo.com

# This site can’t be reached

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://sync-amz.ads.yieldmo.com/tamptsync?callback=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dym.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

u.openx.net

# This site can’t be reached

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://u.openx.net/w/1.0/cm?id=e818ca1e-0c23-caa8-0dd3-096b0ada08b7&ph=2d1251ae-7f3a-47cf-bd2a-2f288854a0ba&plm=5&r=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dopenx.com%26id%3D%7BOPENX\_ID%7D** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-AA1D8D68F63C5B9167DCF2D26CBFDA84@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)

eb2.3lift.com

# This site can’t be reached

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://eb2.3lift.com/getuid?redir=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3D3lift.com%26id%3D%24UID** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

![](https://pagead2.googlesyndication.com/pagead/sodar?id=sodar2&v=232&li=gpt_m202503040101&jk=3850075424987692&rc=)

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=tapad&ttd_tpi=1&ttd_puid=d0c908b2-b5a2-4293-85ba-3f7e17e088e3%252C%252C%25257B%252522architecture%252522%25253A%252522%252522%25252C%252522bitness%252522%25253A%252522%252522%25252C%252522brands%252522%25253A%25255B%25255D%25252C%252522fullVersionList%252522%25253A%25255B%25255D%25252C%252522mobile%252522%25253Afalse%25252C%252522model%252522%25253A%252522%252522%25252C%252522platform%252522%25253A%252522%252522%25252C%252522platformVersion%252522%25253A%252522%252522%25257D&gdpr=&gdpr_consent=)

Topics Frame

![](https://usr.undertone.com/userPixel/syncr?gdpr=&gdprstr=&partnerId=null&r=https%3A%2F%2Fprebid.production.adthrive.com%2Fsetuid%3Fbidder%3Dundertone%26gdpr%3D%26gdpr_consent%3D%26us_privacy%3D1YNY%26gpp%3D%26gpp_sid%3D%26f%3Db%26uid%3D%24UIDENC)![](https://ups.analytics.yahoo.com/ups/58545/occ?us_privacy=1YNY)![](https://sync.cootlogix.com/api/user/image/55537adc33d1b40300987e8e?gdpr=&gdpr_consent=&redirect=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D59%26uid%3D%24%7BvdzUserSyncMacro%7D&us_privacy=1YNY)![](https://image8.pubmatic.com/AdServer/ImgSync?p=160318&gdpr=&gdpr_consent=&pu=https%3A%2F%2Fimage4.pubmatic.com%2FAdServer%2FSPug%3Fp%3D160318%26pmc%3DPM_PMC%26pr%3Dhttps%253A%252F%252Fusr.undertone.com%252FuserPixel%252Fsync%253FpartnerId%253D53%2526uid%253D%2523PMUID&us_privacy=1YNY)![](https://pixel.rubiconproject.com/exchange/sync.php?p=12776&us_privacy=1YNY)

User-Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sirnsvg&ttd_tpi=1&gdpr=0&gdpr_consent=&us_privacy=1YNY)![](https://us-u.openx.net/w/1.0/cm?id=fba3d144-1026-4d31-a758-943b9545e305&r=https%3A%2F%2Fusr.undertone.com%2FuserPixel%2Fsync%3FpartnerId%3D39%26uid%3D%7BOPENX_ID%7D&us_privacy=1YNY)

## Interactive Line Charts
HelenAmandaBettyDorothyLindaDeborahJessicaPatriciaAshley

1,8801,9001,9201,9401,9601,9802,000010,00020,00030,00040,00050,00060,00070,00080,00090,000

##### Steps:

- First, you need to understand how to build a
[basic line chart](https://d3-graph-gallery.com/graph/line_basic.html).


- Here the
[input dataset](https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_connectedscatter.csv)
is composed by several columns: one per group.


- Chart is initialized using the first group.

- Then a `update()` function is created. It
smoothly transforms the chart with the value of another
column


- This function is triggered whenever the
`select` button is changed.


d3 v4
\|
d3 v6


``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Initialize a select button -->
<select id="selectButton"></select>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<!-- Color Scale -->
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Initialize a select button -->
<select id="selectButton"></select>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/5_OneCatSevNumOrdered.csv", function(data) {

    // List of groups (here I have one group per column)
    var allGroup = d3.map(data, function(d){return(d.name)}).keys()

    // add the options to the button
    d3.select("#selectButton")
      .selectAll('myOptions')
     	.data(allGroup)
      .enter()
    	.append('option')
      .text(function (d) { return d; }) // text showed in the menu
      .attr("value", function (d) { return d; }) // corresponding value returned by the button

    // A color scale: one color for each group
    var myColor = d3.scaleOrdinal()
      .domain(allGroup)
      .range(d3.schemeSet2);

    // Add X axis --> it is a date format
    var x = d3.scaleLinear()
      .domain(d3.extent(data, function(d) { return d.year; }))
      .range([ 0, width ]);
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).ticks(7));

    // Add Y axis
    var y = d3.scaleLinear()
      .domain([0, d3.max(data, function(d) { return +d.n; })])
      .range([ height, 0 ]);
    svg.append("g")
      .call(d3.axisLeft(y));

    // Initialize line with first group of the list
    var line = svg
      .append('g')
      .append("path")
        .datum(data.filter(function(d){return d.name==allGroup[0]}))
        .attr("d", d3.line()
          .x(function(d) { return x(d.year) })
          .y(function(d) { return y(+d.n) })
        )
        .attr("stroke", function(d){ return myColor("valueA") })
        .style("stroke-width", 4)
        .style("fill", "none")

    // A function that update the chart
    function update(selectedGroup) {

      // Create new data with the selection?
      var dataFilter = data.filter(function(d){return d.name==selectedGroup})

      // Give these new data to update line
      line
          .datum(dataFilter)
          .transition()
          .duration(1000)
          .attr("d", d3.line()
            .x(function(d) { return x(d.year) })
            .y(function(d) { return y(+d.n) })
          )
          .attr("stroke", function(d){ return myColor(selectedGroup) })
    }

    // When the button is changed, run the updateChart function
    d3.select("#selectButton").on("change", function(d) {
        // recover the option that has been chosen
        var selectedOption = d3.select(this).property("value")
        // run the updateChart function with this selected option
        update(selectedOption)
    })

})

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 10, right: 30, bottom: 30, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left}, ${margin.top})`);

//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/5_OneCatSevNumOrdered.csv").then( function(data) {

    // List of groups (here I have one group per column)
    const allGroup = new Set(data.map(d => d.name))

    // add the options to the button
    d3.select("#selectButton")
      .selectAll('myOptions')
     	.data(allGroup)
      .enter()
    	.append('option')
      .text(function (d) { return d; }) // text showed in the menu
      .attr("value", function (d) { return d; }) // corresponding value returned by the button

    // A color scale: one color for each group
    const myColor = d3.scaleOrdinal()
      .domain(allGroup)
      .range(d3.schemeSet2);

    // Add X axis --> it is a date format
    const x = d3.scaleLinear()
      .domain(d3.extent(data, function(d) { return d.year; }))
      .range([ 0, width ]);
    svg.append("g")
      .attr("transform", `translate(0, ${height})`)
      .call(d3.axisBottom(x).ticks(7));

    // Add Y axis
    const y = d3.scaleLinear()
      .domain([0, d3.max(data, function(d) { return +d.n; })])
      .range([ height, 0 ]);
    svg.append("g")
      .call(d3.axisLeft(y));

    // Initialize line with first group of the list
    const line = svg
      .append('g')
      .append("path")
        .datum(data.filter(function(d){return d.name=="Helen"}))
        .attr("d", d3.line()
          .x(function(d) { return x(d.year) })
          .y(function(d) { return y(+d.n) })
        )
        .attr("stroke", function(d){ return myColor("valueA") })
        .style("stroke-width", 4)
        .style("fill", "none")

    // A function that update the chart
    function update(selectedGroup) {

      // Create new data with the selection?
      const dataFilter = data.filter(function(d){return d.name==selectedGroup})

      // Give these new data to update line
      line
          .datum(dataFilter)
          .transition()
          .duration(1000)
          .attr("d", d3.line()
            .x(function(d) { return x(d.year) })
            .y(function(d) { return y(+d.n) })
          )
          .attr("stroke", function(d){ return myColor(selectedGroup) })
    }

    // When the button is changed, run the updateChart function
    d3.select("#selectButton").on("change", function(event,d) {
        // recover the option that has been chosen
        const selectedOption = d3.select(this).property("value")
        // run the updateChart function with this selected option
        update(selectedOption)
    })

})
</script>
```

### Related blocks →

- _Line Chart -_ [link](https://bl.ocks.org/mbostock/3883245)

- _Multi Series Line Chart -_ by
[SalvoB](https://bl.ocks.org/salvob41/df700ff6bbeed285de043955785775c5)

- _Basic line plot -_ by
[d3 graph gallery](https://d3-graph-gallery.com/graph/line_basic.html)

- _Scatterplot with Multiple Series -_ by
[Mike Bostock](https://bl.ocks.org/mbostock/3183403)

- _Line and Point transitions -_ by
[Nick Guernsey's](https://bl.ocks.org/NGuernse/58e1057b7174fd1717993e3f5913d1a7)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!


Subscribe

![High Resolution Poster](https://d3-graph-gallery.com/img/other/poster_small.png)

![](https://ad-delivery.net/px.gif?ch=2)![](https://ad.doubleclick.net/favicon.ico?ad=300x250&ad_box_=1&adnet=1&showad=1&size=250x250)![](https://ad-delivery.net/px.gif?ch=1&e=0.6354282036302548)

Prebid User Sync

![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=svx9t50&ttd_tpi=1&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://cm.g.doubleclick.net/pixel?google_nid=triplelift&google_cm&google_sc&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/sync/google/demand?sync=1&gdpr=0&gdpr_consent=)![](https://eb2.3lift.com/ebda?sync=1&gdpr=0&gdpr_consent=)![](https://px.ads.linkedin.com/setuid?partner=tripleliftdbredirect&tlUid=35179289194362473774&dbredirect=true&gdpr=0&consent=)![](https://i.liadm.com/s/88342?bidder_id=246498&bidder_uuid=35179289194362473774)![](https://pr-bh.ybp.yahoo.com/sync/triplelift/35179289194362473774?gdpr=0&gdpr_consent=)![](https://c.bing.com/c.gif?xid=35179289194362473774&Red3=TLMS_pd)![](https://triplelift-match.dotomi.com/match/bounce/current?networkId=74572&version=1&gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=13&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift_native&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=35179289194362473774)

![](https://match.prod.bidr.io/cookie-sync/trl?gdpr=0&gdpr_consent=)![](https://sync.srv.stackadapt.com/sync?nid=20&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.srv.stackadapt.com/sync?nid=114&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://sync.ipredictive.com/d/sync/cookie/generic?https://eb2.3lift.com/xuid?mid=3702&xuid=${ADELPHIC_CUID}&dongle=d54f&gdpr=0&gdpr_consent=)![](https://pixel-sync.sitescout.com/dmp/pixelSync?nid=83&gdpr=0&gdpr_consent=)![](https://x.bidswitch.net/sync?ssp=triplelift&user_id=35179289194362473774&gdpr=0&gdpr_consent=${GDPR_CONSENT})![](https://ad.turn.com/r/cs?pid=49&gdpr=0&gdpr_consent=)![](https://s.amazon-adsystem.com/x/757c0557066e95cfd4c7?gdpr=0&gdpr_consent=&uid=35179289194362473774)![](https://b1sync.zemanta.com/usersync/triplelift/?gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://um.simpli.fi/triplelift)![](https://prebid.production.adthrive.com/setuid?bidder=triplelift&gdpr=&gdpr_consent=&us_privacy=&gpp=&gpp_sid=&f=b&uid=35179289194362473774)

AdThrive

AdThrive

Protected Audience Demo

![](https://pixel.rubiconproject.com/token?pid=49096&us_privacy=1YNY)

✕

Do not sell or share my personal information.

You have chosen to opt-out of the sale or sharing of your information from this site and any of its affiliates. To opt back in please click the "Customize my ad experience" link.

This site collects information through the use of cookies and other tracking tools. Cookies and these tools do not contain any information that personally identifies a user, but personal information that would be stored about you may be linked to the information stored in and obtained from them. This information would be used and shared for Analytics, Ad Serving, Interest Based Advertising, among other purposes.

For more information please visit this site's Privacy Policy.

CANCEL

CONTINUE

Information from your device can be used to personalize your ad experience.

[Do not sell or share my personal information.](https://d3-graph-gallery.com/)

A Raptive Partner Site

![](https://secure.adnxs.com/getuid?https://usersync.gumgum.com/usersync?b=apn&i=$UID)![](https://x.bidswitch.net/sync?ssp=gumgum2&user_id=u_5a950e9a-2b0b-449d-89b3-3ac186324790&gdpr=&gdpr_consent=&us_privacy=)[iframe](cid:frame-4E608536CCAE3B19B32B09748F419055@mhtml.blink)![](https://us-u.openx.net/w/1.0/cm?_={CACHEBUSTER}&id=47f31213-389c-4904-aaa6-9b11aab9c211&gdpr=&gdpr_consent=&us_privacy=&r=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dopx%26i%3D)![](https://sync.srv.stackadapt.com/sync?nid=1&gdpr=&gdpr_consent=)[iframe](cid:frame-0F168D3FD947AE325D68FC12145CD55B@mhtml.blink)

ads.pubmatic.com

# This site can’t be reached

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ads.pubmatic.com/AdServer/js/user\_sync.html?predirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dpbm%26i%3D&gdpr=&gdprConsent=** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

[iframe](cid:frame-51AD860F8C56AB92695899AD10CCA95B@mhtml.blink)![](https://pr-bh.ybp.yahoo.com/sync/gumgum?gdpr=&gdpr_consent=)![](https://sync.ipredictive.com/d/sync/cookie/generic?partner=gumgum&cspid=9&append=1&cb=${ADELPHIC_CACHE_BUSTER}&gdpr=&gdpr_consent=&us_privacy=&redirect=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dvnt%26i%3D)

[iframe](cid:frame-994E53D5FA7E5B1A37E0D6050BF3FA8A@mhtml.blink)![](https://match.deepintent.com/usersync/142?redir=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Ddit%26i%3D%24%7BDI_USER_ID%7D)![](https://b1sync.zemanta.com/usersync/gumgum/?puid=u_5a950e9a-2b0b-449d-89b3-3ac186324790&gdpr=&gdpr_consent=&us_privacy=&cb=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dzem%26i%3D__ZUID__)

User-Sync

![](https://bh.contextweb.com/bh/rtset?pid=558355&ev=1&us_privacy=${us_privacy}&gpp=$&gpp_sid=$&rurl=https%3A%2F%2Frtb.gumgum.com%2Fusersync%3Fb%3Dpln%26i%3D%25%25VGUID%25%25)![](https://ssbsync.smartadserver.com/api/sync?callerId=15&redirectUri=https%3A%2F%2Fusersync.gumgum.com%2Fusersync%3Fb%3Dsad%26i%3D%5Bssb_sync_pid%5D&gdpr=&gdpr_consent=)![](https://s.amazon-adsystem.com/ecm3?ex=gg.com&id=u_5a950e9a-2b0b-449d-89b3-3ac186324790)

ssum-sec.casalemedia.com

# This site can’t be reached

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

ERR\_SOCKET\_NOT\_CONNECTED

The webpage at **https://ssum-sec.casalemedia.com/usermatch?cb=https%3A%2F%2Fs.amazon-adsystem.com%2Fecm3%3Fex%3Dindex.com%26id%3D%24UID&s=192259&C=1** might be temporarily down or it may have moved permanently to a new web address.

![](<Base64-Image-Removed>)![](<Base64-Image-Removed>)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=sharethrough.com&id=743cc58a-b005-475e-a7cd-dcafe77ccf06)![](https://cm.g.doubleclick.net/pixel?google_nid=sharethrough_ob&gdpr=0&gdpr_consent=&google_hm=NzQzY2M1OGEtYjAwNS00NzVlLWE3Y2QtZGNhZmU3N2NjZjA2)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=sharethrough&ttd_tpi=1&gdpr=0&gdpr_consent=)![](https://sync-tm.everesttech.net/upi/pid/byN59NcB?redir=https%3A%2F%2Fmatch.sharethrough.com%2Fsync%2Fv1%3Fsource_id%3DSvWuQHUbMWnhsCDYjeaq81U2%26source_user_id%3D%24%7BTM_USER_ID%7D%0A)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=ym.com&id=xqeHzII0RHI87s1zKA84)![](https://match.adsrvr.org/track/cmf/generic?ttd_pid=yieldmo&ttd_tpi=1&ttd_puid=xqeHzII0RHI87s1zKA84)![](https://bh.contextweb.com/bh/rtset?pid=561118&ev=1&rurl=https%3a%2f%2fads.yieldmo.com/v000/sync?userid=%%VGUID%%&pn_id=pp&us_privacy=&gdpr=0&gdpr_consent=&gpp=&gpp_sid=)![](https://pixel-us-east.rubiconproject.com/exchange/sync.php?p=yieldmo)![](https://ib.adnxs.com/getuid?https://ads.yieldmo.com/v000/sync?extinit=0&userid=$UID&pn_id=an)![](https://wt.rqtrk.eu/?pid=fc4e1fcf-7b7a-41b5-a689-0f1570fe8fea&src=www&type=100&sid=0&uid=xqeHzII0RHI87s1zKA84&cb=1741617807501&url={{REFERRER}}&gdpr=0&gdpr_consent=)

![](https://pixel.rubiconproject.com/exchange/sync.php?p=a9us)

Pixels![](https://s.amazon-adsystem.com/ecm3?ex=openx.com&id=a0bcd9dd-bb41-ce1f-2f29-c2c0056fc2d0)![](https://sync-tm.everesttech.net/upi/pid/ny75r2x0?redir=https%3A%2F%2Fus-u.openx.net%2Fw%2F1.0%2Fsd%3Fid%3D537148856%26val%3D%24%7BTM_USER_ID%7D)![](https://pr-bh.ybp.yahoo.com/sync/openx/6cadc3e4-3747-e7ac-def0-56a2920bc479?gdpr=0)![](https://match.adsrvr.org/track/cmf/openx?oxid=f86aa5a0-a7eb-75e5-ef27-40576d5c0930&gdpr=0)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_hm=ZDQwNTc2NmEtNmU5Yy0yYjQxLWZhYzctMWFlZWE3YmVjNzUw)![](https://cm.g.doubleclick.net/pixel?google_nid=openx&google_cm&google_sc)

[iframe](cid:frame-7C130C34E5CDF26A29D91F7B606E634E@mhtml.blink)![](https://t.adx.opera.com/pub/sync?pubid=pub12058951686464&k=us)[iframe](cid:frame-7E11886432535A595E1D2C522AF64EB2@mhtml.blink)

Topics Frame

## Vertical Arc Diagrams
ABCDEFGHIJ

##### Steps:

- Data input format is `Json`. [This document](https://d3-graph-gallery.com/graph/network_data_format.html) explains how to get this format from a classic table.

- Plotting the nodes is pretty straightforward: a [scalePoint()](https://d3-graph-gallery.com/graph/custom_axis.html) is set to distribute them uniformly along the Y axis. They are then added using a classing `append("circle")` approach.

- Drawing links is a bit tricky. Code is highly commented and should allow to understand the basic process.

- See also the [horizontal version](https://d3-graph-gallery.com/graph/arc_basic.html).

d3 v4 \| d3 v6

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` html
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v6.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

```

``` js
<script>

// set the dimensions and margins of the graph
var margin = {top: 20, right: 30, bottom: 20, left: 30},
  width = 450 - margin.left - margin.right,
  height = 300 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Read dummy data
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_network.json", function( data) {

  // List of node names
  var allNodes = data.nodes.map(function(d){return d.name})

  // A linear scale to position the nodes on the X axis
  var y = d3.scalePoint()
    .range([0, height])
    .domain(allNodes)

  // Add the circle for the nodes
  svg
    .selectAll("mynodes")
    .data(data.nodes)
    .enter()
    .append("circle")
      .attr("cx", 50)
      .attr("cy", function(d){ return(y(d.name))})
      .attr("r", 8)
      .style("fill", "#69b3a2")

  // And give them a label
  svg
    .selectAll("mylabels")
    .data(data.nodes)
    .enter()
    .append("text")
      .attr("x", 20)
      .attr("y", function(d){ return(y(d.name))})
      .text(function(d){ return(d.name)})
      .style("text-anchor", "middle")
      .style("alignment-baseline", "middle")

  // Add links between nodes. Here is the tricky part.
  // In my input data, links are provided between nodes -id-, NOT between node names.
  // So I have to do a link between this id and the name
  var idToNode = {};
  data.nodes.forEach(function (n) {
    idToNode[n.id] = n;
  });
  // Cool, now if I do idToNode["2"].name I've got the name of the node with id 2

  // Add the links
  svg
    .selectAll('mylinks')
    .data(data.links)
    .enter()
    .append('path')
    .attr('d', function (d) {
      start = y(idToNode[d.source].name)    // X position of start node on the X axis
      end = y(idToNode[d.target].name)      // X position of end node
      return ['M', 50, start,    // the arc starts at the coordinate x=start, y=height-30 (where the starting node is)\
        'A',                            // This means we're gonna build an elliptical arc\
        (start - end)/2*4, ',',    // Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance\
        (start - end)/2, 0, 0, ',',\
        start < end ? 1 : 0, 50, ',', end] // We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down.
        .join(' ');
    })
    .style("fill", "none")
    .attr("stroke", "black")

})

</script>
```

``` js
<script>

// set the dimensions and margins of the graph
const margin = {top: 20, right: 30, bottom: 20, left: 30},
      width = 450 - margin.left - margin.right,
      height = 300 - margin.top - margin.bottom;

// append the svg object to the body of the page
const svg = d3.select("#my_dataviz")
              .append("svg")
              .attr("width", width + margin.left + margin.right)
              .attr("height", height + margin.top + margin.bottom)
              .append("g")
              .attr("transform",`translate(${margin.left},${margin.top})`);

// Read dummy data
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_network.json").then(function(data) {

  // List of node names
  const allNodes = data.nodes.map(d=>d.name)

  // A linear scale to position the nodes on the X axis
  const y = d3.scalePoint()
            .range([0, height])
            .domain(allNodes)

  // Add the circle for the nodes
  svg
    .selectAll("mynodes")
    .data(data.nodes)
    .join("circle")
      .attr("cx", 50)
      .attr("cy", d=>y(d.name))
      .attr("r", 8)
      .style("fill", "#69b3a2")

  // And give them a label
  svg
    .selectAll("mylabels")
    .data(data.nodes)
    .join("text")
    .attr("x", 20)
    .attr("y", d=>y(d.name))
    .text(d=>d.name)
    .style("text-anchor", "middle")
    .style("alignment-baseline", "middle")

  // Add links between nodes. Here is the tricky part.
  // In my input data, links are provided between nodes -id-, NOT between node names.
  // So I have to do a link between this id and the name
  const idToNode = {};
  data.nodes.forEach(function (n) {
    idToNode[n.id] = n;
  });
  // Cool, now if I do idToNode["2"].name I've got the name of the node with id 2
  // Add the links
  svg
    .selectAll('mylinks')
    .data(data.links)
    .join('path')
    .attr('d', d=> {
      start = y(idToNode[d.source].name)    // X position of start node on the X axis
      end = y(idToNode[d.target].name)      // X position of end node
      return ['M', 50, start,    // the arc starts at the coordinate x=start, y=height-30 (where the starting node is)\
        'A',                            // This means we're gonna build an elliptical arc\
        (start - end)/2*4, ',',    // Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance\
        (start - end)/2, 0, 0, ',',\
        start < end ? 1 : 0, 50, ',', end] // We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down.
        .join(' ');
    })
    .style("fill", "none")
    .attr("stroke", "black")

})

</script>
```

### Related blocks →

- _Arc diagram section -_ by [the d3 graph gallery](https://d3-graph-gallery.com/arc.html)

- _Arc diagram -_ by [Robert Gove](https://bl.ocks.org/rpgove/53bb49d6ed762139f33bdaea1f3a9e1c)

- _Arc diagram -_ by [MayBlue9](http://bl.ocks.org/mayblue9/dcc49ef6e3888f37f755177c4a248f2c)

## Dataviz decision tree

Wondering **what chart type** you should use? Check my
[Data To Viz](https://www.data-to-viz.com/) project! It is a
comprehensive **classification** of chart types organized by data
input format. Get a high-resolution version of the decision tree in your
inbox now!

