Her motives made far better sense in my new story than if I stayed with my original idea.
”For me, and I am not a specialist, any Universe that wants to relate to our reality needs to represent the different people and cultures to become consistent.
Creating a diverse fictional universe is to be inclusive and more close to our reality, specially when its audience is the entire world.
2.
Querying the Comic DataTo create a plot that shows how many characters have each ability (stacked bar size) and how those numbers are distributed among genders (colors, bars), I queried a table from the Comics Database containing the following information:CharacterAbilitiesGenderTo use this database, you just need to download some .
js and .
json files and import, then you can query using SQL commands.
If you want to learn how to query data from Wikidata and create a Javascript database, check the first article.
Here is my SELEC command:After some data manipulation, my data is formed by:labels vector: the genders labelsdata: one vector for each ability containing a vector of total of characters per gender, indexed according to labelsExample:I defined that the stacked bar chart component receives as input a Data Model.
It contains the data and helper functions to get the labels and totals:You find the skillsDistributionByGender() complete code here.
3.
Creating React ComponentsAfter defining my data set, I started creating a simple Bar Chart based on this post and code by Kacper Goliński.
If you did not create any chart using React and D3, you may find it easier to start with a simpler bar chart and then come back to check how I did the stacked one and how I added tooltips.
Kacper also implemented the ResponsiveWrapper that controls the width of the chart based on the width of the visible window.
At this point I consider that you know the create-react-app.
If you don’t, search about it or check the course I mentioned at the beginning.
Our final SVG will have two main React components responsible to show the y-axis and the abilities’ labels (<Axes/>) and the stacked bars ( <StackedBars/> ).
I set an extra Component to control the tooltips, shown on m ouse over each bar ( <ReactTooltip/>):There are different approaches to integrate D3 and React.
The first approach is to modularise the App using React and use D3 to control the SVG elements with enter(), update() and exit().
A second approach is to control all the SVG elements using React, which makes more sense to a React application.
Therefore, instead of calling .
attr('width', 200) we will set it directly to the component or SVG element like in this example:This code returns the <rect> elements, which we will put inside a <g> to group rectangles of each bar/ability.
Thus, we can add it to a function and call it for each ability, as coded here:This code will create a <g> for each ability and a final <g> with all the bars that form the chart.
We can code all this in a React component, like I did in my <StackedBars /> (see here).
Initially, I created both x and y axes, but I realized the actual axes are unnecessary information in my chart.
Removing what is not important for your audience reduces clutter!therefore, I let the y-axis as it was, only omitting the path and line elements using CSS style stroke-opacity: 0 (you may try display:none).
The x-axis I omitted by removing the React component call.
This is the second important case of React & D3 integration because the d3.
axis function needs the SVG element to draw in.
It means that we cannot call d3.
axis and get an SVG element that we will return in our React component, as we did in the last example.
In this case, we need to give D3 temporary control over the DOM.
For that, we select the element that refers to our current component and tell D3 to work on it.
Here is an example:We set our Axis node with ref={(el) => { this.
axisElement = el; }} (see above), then we select it with D3 and call the D3 axis function like in here d3.
select(this.
axisElement).
call(axis), which will append the axis elements.
The above example will draw the axis inside the <g> element, and we are returning it all to the parent component after rendered.
“ref updates happen before componentDidMount or componentDidUpdate lifecycle methods” — documentationtherefore, first our code executes this.
axisElement = el and then renderAxis().
In conclusion, we defined the 2 main approaches to creating SVG visualizations using React and D3:declaratively: you control the SVG elements;refs: giving D3 the control over a specific referenced node.
The 1st is preferred and the 2nd should be avoided as much as you can, according to the React documentation.
If a function in D3 returns the SVG elements, you can just use the result declaratively (not using ref), if not, ref seems to be the only way to avoid the enter, exit and update functions.
4.
Setting up TooltipsOne way to create the tooltips is to build a singular component for each bar or stacked bars; the other, is to build a component that controls all the tooltips.
This is what ReactTooltip does.
You only need to set some attributes where your tooltips should appear and the props of one component <ReactTooltip/> that goes outside the SVG.
In the element where the tooltip will appear you set 2 props: data-tip and data-for.
The first is the text, and the second is the ReactTooltip component id as shown below:ReactTooltip website: https://www.
npmjs.
com/package/react-tooltip5.
References to learn D3 & React integrationSo far I had contact with content of three main active authors that use D3 and React, create tutorials and share their codes:Shirley Wu: https://twitter.
com/sxywuNadieh Bremer: https://twitter.
com/NadiehBremerSwizec Teller: https://twitter.
com/Swizec6.
Behind the scenesThese are some screen shots that I took while coding the chart.
As you can see, I started showing the Axes and ended up removing them.
See all these lines and axes?.I don’t need them here.
Adjusting the bar sizes and placement.
Please leave your comments or private notes about any of the topics.
Thank you for reading my article!.