Introduction

I localized and published a Japanese version of the data visualization tool RAWGraphs.

https://rawgraphs-ja.vercel.app/

RAWGraphs is an open-source web application that can transform complex data into beautiful visualizations. Without any coding, you can create various charts simply by dragging and dropping CSV or JSON data.

Screenshot of RAWGraphs Japanese version

What is RAWGraphs?

RAWGraphs is a data visualization tool developed by DensityDesign Research Lab in Italy.

https://www.rawgraphs.io/

Key features:

  • No coding required: Just paste data in the browser
  • Diverse charts: Over 30 types including Alluvial Diagram, Treemap, Voronoi Tessellation, and more
  • SVG export: Download created charts in SVG or PNG format
  • Privacy protection: Data is not sent to a server; it is processed within the browser

Libraries Used

{}""ir1e8ancetx-ti"1:8n"e^x2t1".:10".^01"1,.18.6"

!

An older compatible version of i18next was used instead of the latest version, because the RAWGraphs build environment (react-scripts 4.x) does not fully support optional chaining (?.) syntax.

Implementation Steps

1. i18n Initialization

Created src/i18n.js to build the multilingual support foundation.

iiiic}cii}emmmmoo11)xppppnejn8..}8lpoooosnasnui)noorrrrt::tsnrlfi.crtttteienanoatr{{s(tsgltnli{tteai(o:le(Sd1rrsttvn{ubr'te8iaaorreirsaplofnnnnuaadtcacoaraissrnnLRevklnauftllcssaeseLagglrRaaellna,dntuetoettsaagcLgia.maiittuta:ogsicoo=iiaInnee1'tnnoog1g':Ct8iIEJ{nne8uehIn11NA::nan{at88=eg'nennffttxe,egmeerrrrlt,se(xxooaao)cd'ttmmnnca'i'ssap,1}llle8aaSV(nf/tttalerlliiolnxooooorugtmccnnae)LaaEJg:n'llNAe=gree.f>'ess}}ga,a//,el{cejtsltnaIen-//tgitte})1rrm8aa(nnn'essixll1taa8'ttniieooxnnt..Ljjnssgoo'nn)'''ja'

2. Translation File Structure

s├│└r──c──/le└j└on─a─c/─/─altterrsaa/nnssllaattiioonn..jjssoonn

The translation files were organized by section:

{}"}"}a,dp"""""a"""pssssstpus"eeeeeaapu:cccccLslctttttotoc{iiiiiaeaeoooood"dsnnnnne:"s12345r:M"""""""e::::::P"saUs"""""{spa12345tlg.....eoea"LCMCEyd:ohauxoaopspuy"doptoro{sioru{yenmtdrcogi"aoua"ztdur,eaanc""ttdh,,a}aa"}tr,atr""o,,ws({{cells}}cells)havebeensuccessfullyparsed.Chooseachart!"

3. Applying to Components

Each component uses the useTranslation hook:

if}mupncrocoertnt<tisud/otri<<d{nnvhp/i{>2>{}pvuD(>t)>>sat{(cc}ett'oeTa}(dulrL'anlao=dttsnaaa::sdutLlesaoddareLaaat(Todtti{raeaaoadr..ndne.llasrsee}tl.unnaapcggf,tacttrisehhocots,monesl('M'u))ecrm}soen<slas/auchgmt}2en-)>'si,1{8{next'

4. Language Switching UI

Added a language switching button to the header:

if}mupncrocoertnt<tisud/otri<<d{nnvb/b/i{uocEbuocJbvuL(ctnlNutnlAu>sailtCattCaten1aolstolstTg8snisonisorunscNncNnaaNka>ka>ng}a=m=msem{e{elS=e(=(=aw=){){tiu"iiitsl=1=1ocea>8>8nhTnnnergi.i.}rau1l1l(na8a8af)sgnnnnrle.g.go{a-cucumtshahaiwagag'oinenerntgge(ce=e=a)hL=L=cea=a=trnn-"g'g'i>ueuj1anaa8g'g'neee(?(?x''te'j''naaa'c'c)t)t}i}ivvee''::''}}

Translated Sections

The following UI texts were all localized to Japanese:

CategoryContent
NavigationHeader, footer
Data loadingPaste, upload, SPARQL, loading from URL
Chart selectionChart list, filters
Data mappingDimensions, variable descriptions
CustomizationColor, size, artboard settings
ExportDownload buttons
Error messagesParse errors, type mismatches, etc.
TooltipsVarious hint displays

Challenges

1. Library Compatibility

Using the latest version of i18next (v23 and later) caused build errors:

MYooduulmeaypanreseedfaanilaepdp:roUpnreixapteectleodadteorketnohandlethisfiletype.

!

This was because the newer i18next uses optional chaining syntax, which is incompatible with the older Babel configuration. The solution was to specify a compatible older version (v21 series).

2. Translating Dynamic Text

Messages containing dynamic numbers like “7 rows (35 cells) have been successfully parsed” used the interpolation feature of i18next:

"t}s()u'ccTcCdoercoaulaemtnlnspatsssoL::lMnoaeeaddtsndaaistettoaraang...esllf"ueei:cnnlcgge"ett{shh{s,cMoeuscnsotal}gu}em'nr,sow{s({{cells}}cells)havebeensuccessfullyparsed"

3. Pinning Dependency Package Versions

During builds on Vercel, regeneration of yarn.lock caused dependency packages to be updated, resulting in errors where CSS files could not be found:

Error:Can'tresolve'~react-data-grid/dist/react-data-grid.css'

This was resolved by strictly pinning versions in package.json:

-+""rreeaacctt--ddaattaa--ggrriidd""::""^77..00..00--ccaannaarryy..1166""

!

Removing the caret (^) prevents automatic updates via semver.

Deployment

Automatic deployment was configured using Vercel. Simply pushing to the GitHub repository triggers automatic build and deployment.

Summary

By using react-i18next, the Japanese localization of RAWGraphs was achieved.

!

Key Points

  1. Library selection: Verify compatibility and choose appropriate versions
  2. Structured translation files: Organize by section to ensure maintainability
  3. Dynamic content support: Leverage the interpolation feature
  4. User settings persistence: Save language settings with localStorage

Please try the Japanese version of RAWGraphs!

https://rawgraphs-ja.vercel.app/

Repository

https://github.com/nakamura196/rawgraphs-app

References