Datawrapper Grafieken zonder iframe?

[bl0m5t3r]

Ik wordt heel blij van van de custom CCS functionaliteit en gebruik hem dan ook veelvuldig, waaronder om Tweakers in "darkmode" te krijgen met oa. Perfect dark en wat add-ons. Nu blijkt echter de er recentelijk gesleuteld is aan de CCS van de grafieken die via Datawrapper worden vertoond (ver uit de meeste grafieken in reviews en artikelen).

Het was al een beetje puzzelen om een leesbare donkere grafiek te krijgen, ze worden namelijk weergegeven in een iframe waar je niet bij kan met de custom CSS functies van Tweakers. Maar nu hebben de teksten in de grafieken ook nog een witte "text-shadow" attribuut gekregen waardoor het er niet meer uitziet en moeilijk leesbaar is:




Dit terwijl je het in de normale weergave (wit op een witte achtergrond) niet eens kunt zien:




Nu vroeg ik mij 2 dingen af:

1] Is het mogelijk om de grafieken zonder iframe in de site te zetten?
Dit zou ideaal zijn, aangezien we dan vrij spel hebben om de CCS aan te passen en met de rest van de site via snippets te delen.

2] Mocht 1 niet kunnen, zou er dan rekening gehouden kunnen worden qua gebruikte styling, zodat mensen in dark mode de grafieken goed leesbaar kunnen krijgen. bv. geen achtergrond kleur definiëren (dat gaat al goed nu) en geen witte outlines gebruiken (die toch niet zichtbaar zijn in de normale layout).

Bij voorbaat dank!
Hopelijk kan er zo op termijn een perfect "darkmode" voor tweakers gemaakt worden die binnen de community makkelijk toegankelijk is en geen externe plug-ins benodigd.

[Xtuv]

@bl0m5t3r We gebruiken Datawrapper voor dergelijke grafieken. Die moeten we embedden met een iframe, een andere mogelijkheid is er niet. Of we moeten er een png van bakken, maar daarmee gaan de interactieve functies verloren.

Datawrapper heeft wel wat opties voor styling, maar de achtergrond kan ik niet aanpassen voor zover ik zie. Dat Datawrapper die outlines maakt is wel raar, geen idee waarom. Ik zie ook geen optie om dat aan te passen.

Heb je dit probleem bij alle Datawrapper-grafieken die we gebruiken? Hier staan er bijvoorbeeld ook een aantal: reviews: Ssd Best Buy Guide - Oktober 2020

Zo ja, dan is er vanuit de Datawrapper-kant weinig aan te doen vrees ik.

[bl0m5t3r]

@Xtuv Thanks voor de snelle reactie!

Ik snap volledig dat jullie Datawrapper gebruiken voor de functionaliteit, het zijn prima (interactieve) grafieken en alles is beter dan statische plaatjes.

Wat betreft styling, er zit geen achtergrond in, en dat is juist helemaal top! Dit moet ook zeker niet worden aangepast. Juist doordat de grafieken transparant zijn, kun je via Tweakers custom css de gehele iframe een achtergrond kleur geven en daarmee donker maken voor de darkmode.

Ik zal er extra op letten de komende tijd, of sommige wel en niet die outlines hebben. En dat het daarmee misshchien een instelling is of niet. Hierbij vast een screenshot van de SSD Best buy guide, waarop je kan zien dat de grafief het wel heeft, maar de tabel die ook uit Datawrapper komt netjes wordt weergegeven:




En om nog even terug te grijpen op het nieuws: RTX 3080 is meer dan 12x zo populair in Pricewatch als RTX 2080 bij r... artikel. Daar heb je bij de tabel alleen de labels die het vertonen:




Als ik dan de CSS van Datawrapper induik kom ik deze regel tegen die aan de basis hiervan lijkt te staan:

.chart .label span {
text-shadow: 0 0 2px #fff;
}

Te zien aan de selectors, staat het specifiek ingesteld voor de "chart" & "label" classes binnen grafieken en tabellen. Hopelijk helpt dat.

[crisp]

Ik heb zelf geen idee of en waar die styling te beheren is, wellicht weet @Femme dat?

[Xtuv]

Dit is zo'n beetje alles wat in te stellen is bij Datawrapper. We kunnen daar geen css aanpassen of styling van tekst veranderen.

[bl0m5t3r]

Bedankt voor het uitzoeken!

Had zelf ook al even gekeken bij Datawrapper en een dummy grafiek gemaakt. Daar kwam ik inderdaad ook niet verder dan wat jij nu laat zien. Dan moet ik er vrede mee hebben en iets als 'Stylish', 'greasemonkey', etc. gaan gebruiken.

*Edit

Kon er al makkelijk komen met een ublock / adblockplus filter, geen stylish of iets nodig:

! 10/15/2020 datawrapper.dwcdn.net
datawrapper.dwcdn.net##div.label span:style(text-shadow: none !important;)
datawrapper.dwcdn.net##div.axis-label span:style(color: #222 !important;)

Zal het de komende tijd nog wel langzaam uitbreiden om precies de kleurtjes te krijgen zoals ik die graag zie. Helaas zitten ook veel elementen in een <canvas>, nog geen idee hoe ik die moet stylen/tweaken.

Nogmaals dank voor het uitzoeken!

[ Voor 51% gewijzigd door bl0m5t3r op 15-10-2020 17:08 . Reden: Toevoeging persoonlijk oplossing. ]