With a data frame dft below I'm plotting the data using R's ggplot. I need to recreate this plot in D3 for using in a Angular (2+) web app.
Data
text <- " MODEL,ENGINE,var,value,label,var2 ABCD A1601 F1S - QU1234,QUOINOK,varA_XX_Xxxx,11989,11989,varA_XX_Xxxx ABCD A1601 F1S - QU1234,QUOINOK,varB_XX_xxxXx,1.87,1.87,varB_XX_xxxXx ABCD A1601 F1S - QU1234,QUOINOK,varC,1.61,1.61,varC ABCD A1601 F1S - QU1234,QUOINOK,varD_XXX_YYYYYYY_Zzz,0,0,VAR DEFH Xxxxxxx (%) ABCD A1601 F1S - QU1234,QUOINOK,varE_XXX_YYYYYYY_Zzz,42.4,42.4,VAR DEFH Xxxxxxx (%) ABCD A1601 F1S - QU1234,QUOINOK,varF_XXX_YYYYYYY_Zzz,26.6,26.6,VAR DEFH Xxxxxxx (%) ABCD A1601 F1S - QU1234,QUOINOK,varH_XXX_YYYY_Zzz,31,31,VAR DEFH Xxxxxxx (%) ABCD A1601 F1S - QU1234,QUOINOK,varG_XXX_YY_ZZZZ,3.4,3.4,VAR GIJK Xxxx (%) ABCD A1601 F1S - QU1234,QUOINOK,varI_XXXX_YY_ZZZZZ,9.3,9.3,VAR GIJK Xxxx (%) ABCD A1601 F1S - QU1234,QUOINOK,varJ_XXXX_Yyyy_ZZ_ZZZZZ,12.5,12.5,VAR GIJK Xxxx (%) ABCD A1601 F1S - QU1234,QUOINOK,varK_Xxxx_YY_ZZZZZ,0,0,VAR GIJK Xxxx (%) ABCD CPH1609 F3 - QU1234T,QUOINOK,varA_XX_Xxxx,10357,10357,varA_XX_Xxxx ABCD CPH1609 F3 - QU1234T,QUOINOK,varB_XX_xxxXx,1.71,1.71,varB_XX_xxxXx ABCD CPH1609 F3 - QU1234T,QUOINOK,varC,1.62,1.62,varC ABCD CPH1609 F3 - QU1234T,QUOINOK,varD_XXX_YYYYYYY_Zzz,0,0,VAR DEFH Xxxxxxx (%) ABCD CPH1609 F3 - QU1234T,QUOINOK,varE_XXX_YYYYYYY_Zzz,36.3,36.3,VAR DEFH Xxxxxxx (%) ABCD CPH1609 F3 - QU1234T,QUOINOK,varF_XXX_YYYYYYY_Zzz,34,34,VAR DEFH Xxxxxxx (%) ABCD CPH1609 F3 - QU1234T,QUOINOK,varH_XXX_YYYY_Zzz,29.7,29.7,VAR DEFH Xxxxxxx (%) ABCD CPH1609 F3 - QU1234T,QUOINOK,varG_XXX_YY_ZZZZ,3.4,3.4,VAR GIJK Xxxx (%) ABCD CPH1609 F3 - QU1234T,QUOINOK,varI_XXXX_YY_ZZZZZ,9.3,9.3,VAR GIJK Xxxx (%) ABCD CPH1609 F3 - QU1234T,QUOINOK,varJ_XXXX_Yyyy_ZZ_ZZZZZ,13.6,13.6,VAR GIJK Xxxx (%) ABCD CPH1609 F3 - QU1234T,QUOINOK,varK_Xxxx_YY_ZZZZZ,0,0,VAR GIJK Xxxx (%) ABCD CPH1613 F3 - MOL2345,MOLTOVAST,varA_XX_Xxxx,12688.5,12688,varA_XX_Xxxx ABCD CPH1613 F3 - MOL2345,MOLTOVAST,varB_XX_xxxXx,1.87,1.87,varB_XX_xxxXx ABCD CPH1613 F3 - MOL2345,MOLTOVAST,varC,1.7,1.7,varC ABCD CPH1613 F3 - MOL2345,MOLTOVAST,varD_XXX_YYYYYYY_Zzz,0,0,VAR DEFH Xxxxxxx (%) ABCD CPH1613 F3 - MOL2345,MOLTOVAST,varE_XXX_YYYYYYY_Zzz,32.3,32.3,VAR DEFH Xxxxxxx (%) ABCD CPH1613 F3 - MOL2345,MOLTOVAST,varF_XXX_YYYYYYY_Zzz,29.8,29.8,VAR DEFH Xxxxxxx (%) ABCD CPH1613 F3 - MOL2345,MOLTOVAST,varH_XXX_YYYY_Zzz,37.9,37.9,VAR DEFH Xxxxxxx (%) ABCD CPH1613 F3 - MOL2345,MOLTOVAST,varG_XXX_YY_ZZZZ,3.4,3.4,VAR GIJK Xxxx (%) ABCD CPH1613 F3 - MOL2345,MOLTOVAST,varI_XXXX_YY_ZZZZZ,9.7,9.7,VAR GIJK Xxxx (%) ABCD CPH1613 F3 - MOL2345,MOLTOVAST,varJ_XXXX_Yyyy_ZZ_ZZZZZ,11,11,VAR GIJK Xxxx (%) ABCD CPH1613 F3 - MOL2345,MOLTOVAST,varK_Xxxx_YY_ZZZZZ,0,0,VAR GIJK Xxxx (%) " dft <- read.table(textConnection(text), sep=",", header = T) Set order of attributes in the plot
varOrder <- c("varA_XX_Xxxx", "varB_XX_xxxXx","varC", "varG_XXX_YY_ZZZZ", "varI_XXXX_YY_ZZZZZ", "varJ_XXXX_Yyyy_ZZ_ZZZZZ", "varK_Xxxx_YY_ZZZZZ", "varD_XXX_YYYYYYY_Zzz", "varE_XXX_YYYYYYY_Zzz", "varF_XXX_YYYYYYY_Zzz", "varH_XXX_YYYY_Zzz") var2Order <- c("varA_XX_Xxxx", "varB_XX_xxxXx", "varC", "VAR GIJK Xxxx (%)", "VAR DEFH Xxxxxxx (%)" ) dft$var <- factor(dft$var, levels=varOrder) dft$var2 <- factor(dft$var2, levels=var2Order) Plot
library(ggplot2) library(ggthemes) library(RColorBrewer) library(scales) p <- ggplot(dft, aes(x=MODEL, y=value, fill=var, label=label)) + geom_col(aes(col = ENGINE), position=position_dodge(width = 0.9), size=1.2) + geom_text(position = position_dodge(width = 1), show.legend = FALSE, size = 3.5, vjust=1 ) + facet_wrap( ~ var2, scales = "free_y", ncol = 1, drop = T) + theme_custom_col + scale_fill_brewer(palette = "Set3") + scale_color_brewer(palette = "Paired") + theme( text = element_text(size=ggplotAxesLabelSize), legend.position="top", axis.text.x=element_text(angle = 20), axis.text.y=element_blank() ) + labs(y = "") p Output 
How should I go about recreating this in D3 using the same data ?
1 Answers
Answers 1
In short, ggplot is more like a chart library in R and D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS.(definition from d3 document).
In order to implement your ggplot result using d3.js, there will be some knowledge gap and things you need to think. Because ggplot create plot directly on device concept in R, and d3.js create visualization by binding the data to the html element.
There will be two rough suggestions to reach your goals under different considerations.
One: You want to leverage the ggplot2 power and your effect on crafting R codes. and you will directly use it on your web app without adding new interactive effect or other modification. Besides, the data used to plot is static.
you should consider to use the Rshiny or Rmarkdown along to wrap your plot into html element and bind to your web app. You only have to workout how to integrate the html element to your web app and the view or size show on the web.
Second: You just use ggplot2 to prototype the viz effect and there still lots of improvements you want to add-on.
You can consider use d3.js to craft the viz effect, which mean you need to get some basic html knowledge to begin with. Then, you have to recreate all vis effect on binding the html element to data with d3.js . After that, you have to workout the way to integrate your d3.js code into web app such as Angular. Since all web framework have some design to bind the html element on its own way, which also may be a issue during intergration the d3.js code into your web app.
Hope these suggestions work for you. Your question is big and need a development decision first under your own consideration. I'm also R user and learn d3.js after ggplot/grid cannot satisfy my viz goal. So, I can understand your situation. And taking second approach you may spend much more time than you think.
0 comments:
Post a Comment