CN109144504A - Data visualization image generation method and storage medium based on D3 - Google Patents
Data visualization image generation method and storage medium based on D3 Download PDFInfo
- Publication number
- CN109144504A CN109144504A CN201710495637.6A CN201710495637A CN109144504A CN 109144504 A CN109144504 A CN 109144504A CN 201710495637 A CN201710495637 A CN 201710495637A CN 109144504 A CN109144504 A CN 109144504A
- Authority
- CN
- China
- Prior art keywords
- topic
- keyword
- chart
- word
- axis
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/203—Drawing of straight lines or curves
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The present invention provides a kind of data visualization image generation method and storage medium based on D3, wherein method includes obtaining the data packet of visualized graphs to be generated；According to multiple topics and the attribute value of corresponding multiple dimensions, figure of drawing a diagram；Transfer d3.layout.cloud.js word cloud packet；Each keyword is navigated to the available filling position in chart figure.The present invention integrates the technologies such as D3.js, chart, word cloud and Reading text, generate the chart figure of word cloud and topic, and the chart figure of word cloud and topic is combined, the word cloud that will be shown navigates to corresponding position in chart figure respectively, word cloud is more clearly shown in the chart figure of topic；The case where topic changes with the time may further be preferably shown, is combined by picture and text using time and word frequency as two dimensions of the chart figure of topic, preferably help user obtains relevant useful information.
Description
Technical field
The present invention relates to technical field of data processing more particularly to a kind of topic and keyword are generated into Visual Chart figure
The data visualization image generation method and storage medium based on D3 of shape.
Background technique
Currently, the amount of data is constantly increased sharply with the arrival of big data era.At home and abroad such as along with data visualization
The development of the fire such as bitter edible plant, for example, Tableau, Domo they it is intended that company provides better data analysis service, allow company to make
Better decision (Business Intelligence).Quite a few company develops to the service in this direction at home.
Visualization (visualization) is defined as follows in Webster dictionary: 1.Formation of mental
visual images.2.The act or process of interpreting in visual terms or of
Putting into visible form. is briefly, it will be understood that visualization: by abstract science or business number
According to, showed with image, help understand data meaning process.It would generally carry out data analysis (data
Analysis it is largely used during).
And the importance following points about data visualization: first point is that we utilize the information content of vision acquisition,
It is much more more than other sense organ.It recalls, normal person has simple five to feel: vision, the sense of hearing, smell, tactile and the sense of taste.
Then by largely counting, show each sense organ to information content the case where receiving, it is final the result is that vision to letter
The reception amount of breath is more than the summation of the reception amount of remaining four kinds of sensory informations.Second point is that it can help the people analyzed
Have to data and more fully recognizes.F.J.Anscombe was in a paper " the Graphs in Statistical at him in 1973
It is mentioned inside the relationship of analysis scatter plot (scatter plot) and linear regression (linear regression) in Analysis "
The importance analyzed data is indicated to image.The example enumerated in paper just do not elaborate specifically herein, but very well
Ground explains the importance of image displaying.It is thirdly limitation of the human brain in memory capability.Many researchs closely show
Understood and learn task when, picture and text can help reader to be better understood by the content to be learnt, image together
It is easier to understand, it is more interesting, it is also easier to that people is allowed to remember.
Data visualization developing history is very long, for example, the coordinate system that Descartes proposes is exactly a data visualization
Good example, although showing numerical value.Develop to big data era, the growth of data explosion formula, to data visualization
Demand be it is high singularly, therefore, the tool of all kinds of data visualizations comes into being, and representative has echart, highchart
Deng this kind of tool provides the Common graphicals such as traditional pie chart, histogram, curve graph, and there are also bubble diagram, area-graph, provinces
Figure, word cloud, Waterfall plot, crater blasting etc. extremely dazzle chart.These miscellaneous figures can only meet the needs of basic, but for
Bigger demand and more complicated situation, such tool can not be met the requirements well.
Topic extraction is research direction very popular in recent years, and the topic extracted is to need to show certainly
, it otherwise can not will be apparent that the tendency for illustrating topic.Existing common practices is with various tools, and the data that will be shown copy to work
Interface in tool clicks the lower button generated, and then tool can automatically generate word cloud figure of various shapes.Such way is can
With, the size of each word is straggly orderly, however can not see topic clearly and change as the time changes.Although in echart,
Highchart etc. has various visual models and various charts, but can not find the model put word into chart, i.e.,
Want to find word cloud figure and chart figure, then the two is stitched together, is still unable to complete by the prior art.
Summary of the invention
For the problems of the prior art, the purpose of the present invention is to provide a kind of, and the data visualization figure based on D3 is raw
At method and storage medium, the technologies such as comprehensive D3.js, chart, word cloud and Reading text combine word cloud figure and chart figure
Come, word cloud is more clearly shown in the chart figure of topic.
The embodiment of the present invention provides a kind of data visualization image generation method based on D3, includes the following steps:
It obtains the data packet of visualized graphs to be generated, includes multiple topics in the data packet, in each topic includes
Multiple keywords and each topic multiple dimensional attribute values；
According to the attribute value of multiple dimensions corresponding to topics multiple in the data packet and each topic, figure of drawing a diagram
Shape；
D3.layout.cloud.js word cloud packet is transferred, includes multiple keywords, the multiple key in the word cloud packet
Word respectively corresponds the multiple topic；
According to the corresponding relationship of the keyword and the topic, each keyword is navigated to corresponding topic
Available filling position in the chart figure.
Optionally, the figure of drawing a diagram, includes the following steps:
Two-dimensional coordinates are drawn on svg painting canvas, the x-axis of the two-dimensional coordinates corresponds to preset first dimension, described
The y-axis of two-dimensional coordinate system corresponds to preset second dimension, and multiple dimensional attribute values of each topic include each topic
The the second dimensional attribute value of at least one the first dimensional attribute value and the topic under each first dimensional attribute value；
The second dimension using the first dimensional attribute value of each topic as x-axis variable, under each first dimensional attribute value
Attribute value is spent as corresponding y-axis variable, and the change curve of the topic is drawn on the svg painting canvas.
Optionally, first dimension and the second dimension are respectively time dimension and word frequency dimension, and the chart figure is
Each topic with each time word frequency change curve.
Optionally, the drafting two-dimensional coordinates, include the following steps:
The boundary line of four direction up and down is defined on the svg painting canvas, formation is drawn by what four edges boundary line surrounded
Graph region, the width and height of the drawing area are respectively as follows:
W2=W1-P1-P2；
H2=H1-P3-P4；
Wherein, W1 and H1 is respectively the overall width and total height of the svg painting canvas；P1, P2, P3, P4 be respectively left margin,
Distance values between the left edge of right margin, coboundary and lower boundary and the svg painting canvas, right hand edge, top edge and lower edge；
W2 and H2 is respectively the width and height of the drawing area；
The height of the width and y-axis that define x-axis is respectively the width and height of the drawing area；
Using the time value of selection as on discrete point Mean mapping to the x-axis；
The maximum word frequency value Fremax in the data packet is calculated, by the data of (0, Fremax*k) range as consecutive numbers
According on Mean mapping to the y-axis, wherein k value is default spreading coefficient.
Optionally, the figure of drawing a diagram, further includes following steps:
By the region and multiple color foundation one-to-one correspondence pass between change curve corresponding to each topic and the x-axis
System, and corresponding color is coated into the region between each change curve and the x-axis；
Change curve corresponding to each topic and multiple color are established into one-to-one color, and each variation is bent
Line coats corresponding color.
Optionally, when corresponding color is coated in the region between each change curve and the x-axis, each variation is calculated
Average distance value between curve and the x-axis is ranked up, according to average departure according to the average distance value of each change curve
From descending sequence is worth, corresponding color is coated in corresponding region.
Optionally, the figure of drawing a diagram, further includes following steps:
Care label is added for change curve corresponding to each topic, includes corresponding topic in the care label
Illustrate information；
Verbal description is added to the x-axis and the y-axis, and adds descriptive matter in which there to entire chart figure.
Optionally, described to transfer d3.layout.cloud.js word cloud packet, include the following steps:
Using d3.layout.cloud () function call d3.layout.cloud.js word cloud packet；
The display properties of each keyword is added in the d3.layout.cloud.js word cloud packet；
Each keyword is navigated into corresponding topic in the chart according to the display properties of each keyword
Available filling position in figure.
Optionally, the display properties of each keyword include each keyword display area range, rotation angle,
Data bind at least one of instruction, display font, the instruction of addition keyword and END instruction.
Optionally, the display properties of each keyword includes display font, includes each described in the word cloud packet
The word frequency of keyword, the word frequency of the keyword and the size of display font are directly proportional.
Optionally, first dimension and the second dimension are respectively time dimension and word frequency dimension, and the chart figure is
Be drawn in two-dimensional coordinates, each topic with each time word frequency change curve；
It is described can to use filling position described in each keyword positioning, include the following steps:
Determine topic corresponding to each keyword；
Each keyword is filled into the area between the word frequency change curve and time reference axis of corresponding topic
In domain.
Optionally, in the chart figure, the number of word placed in the size of each region and each region is directly proportional.
The embodiment of the present invention also provides a kind of storage medium, and for storing program, wherein described program is performed progress
Following operation:
It obtains the data packet of visualized graphs to be generated, includes multiple topics in the data packet, in each topic includes
Multiple keywords and each topic multiple dimensional attribute values；
According to the attribute value of multiple dimensions corresponding to topics multiple in the data packet and each topic, figure of drawing a diagram
Shape；
D3.layout.cloud.js word cloud packet is transferred, includes multiple keywords, the multiple key in the word cloud packet
Word respectively corresponds the multiple topic；
According to the corresponding relationship of the keyword and the topic, each keyword is navigated to corresponding topic
Available filling position in the chart figure.
Data visualization image generation method and storage medium provided by the present invention based on D3 has the advantage that
The present invention integrates the technologies such as D3.js, chart, word cloud and Reading text, generates the chart figure of word cloud and topic, and
And combine the chart figure of word cloud and topic, the word cloud that will be shown navigates to corresponding position in chart figure respectively
It sets, word cloud is more clearly shown in the chart figure of topic；It may further be using time and word frequency as the chart of topic
Two dimensions of figure, preferably show the case where topic changes with the time, are combined by picture and text, and preferably help user obtains
Take relevant useful information.
Detailed description of the invention
Upon reading the detailed description of non-limiting embodiments with reference to the following drawings, other feature of the invention,
Objects and advantages will become more apparent upon.
Fig. 1 is the structural schematic diagram of the data visualization image generation method based on D3 of one embodiment of the invention；
Fig. 2 is the flow chart of the figure of drawing a diagram of one embodiment of the invention；
Fig. 3 is the schematic diagram of the change curve of each topic of one embodiment of the invention；
Fig. 4 is the flow chart for transferring d3.layout.cloud.js word cloud packet of one embodiment of the invention；
Fig. 5 is the schematic diagram after the figure being filled into word cloud packet in Fig. 3 of one embodiment of the invention.
Specific embodiment
Example embodiment is described more fully with reference to the drawings.However, example embodiment can be with a variety of shapes
Formula is implemented, and is not understood as limited to embodiment set forth herein；On the contrary, thesing embodiments are provided so that the present invention will
Fully and completely, and by the design of example embodiment comprehensively it is communicated to those skilled in the art.It is identical attached in figure
Icon note indicates same or similar structure, thus will omit repetition thereof.
In order to achieve the above-mentioned object of the invention, the embodiment of the present invention provides a kind of data visualization graphic hotsopt side based on D3
Method.D3 (Data-driven document, the document being data driven more easily), i.e. D3.js.D3.js is the library JavaScript,
It can operate document by data.D3.js can visually be shown by using HTML, SVG and CSS data are fresh and alive
Come.D3.js follows strictly Web standard, thus the program of user can be allowed easily to be compatible with modern major browsers and avoided to spy
Determine the dependence of frame.Meanwhile it provides powerful visualization component, and user can be allowed to go to operate in a manner of data-driven
DOM。
As shown in Figure 1, the data visualization image generation method based on D3 includes the following steps:
S100: obtaining the data packet of visualized graphs to be generated, includes multiple topics in the data packet, in each topic
Including multiple keywords and each topic multiple dimensional attribute values；
S200: it according to the attribute value of multiple dimensions corresponding to topics multiple in the data packet and each topic, draws
Chart figure；
Chart figure may include bar chart, column diagram, curve graph and pie chart etc., wherein each topic can respectively correspond
One bar shaped, a cylindricality, a change curve or a circle, for indicate each topic multiple dimensions variation feelings
Condition, so that the chart graphical representation of the variable condition of topic data visualization be come out.
S300: transferring d3.layout.cloud.js word cloud packet, includes multiple keywords in the word cloud packet, the multiple
Keyword respectively corresponds the multiple topic；
S400: according to the corresponding relationship of the keyword and the topic, each keyword is navigated to corresponding
Available filling position of the topic in the chart figure.
By the way that keyword is navigated to the available filling position in chart figure, realize word cloud and the combination of chart figure
The purpose got up can provide the information of more visions to realize the visualization of word cloud, and user is helped more effectively to obtain
Related content.
As shown in figures 2-3, one embodiment of the invention preferably uses curve graph as chart figure and illustrates of the invention one
Kind embodiment.However in practical applications, however it is not limited to use curve graph, other use bar chart, column diagram etc. chart
The embodiment of figure also belongs within protection scope of the present invention, for no other reason than that chart graph style is different, the effect of displaying
Also it is not quite similar, the filling mode of keyword is also not quite similar, but can be realized the purpose of data visualization of the invention.
As shown in Fig. 2, in this embodiment, the figure of drawing a diagram includes the following steps:
S201: drawing two-dimensional coordinates on svg painting canvas, and the x-axis of the two-dimensional coordinates corresponds to preset first dimension,
The y-axis of the two-dimensional coordinate system corresponds to preset second dimension, and multiple dimensional attribute values of each topic include each words
Second dimensional attribute value of at least one the first dimensional attribute value and the topic of topic under each first dimensional attribute value；
S202: using the first dimensional attribute value of each topic as x-axis variable, under each first dimensional attribute value
Two-dimensions attribute value draws the change curve of the topic as corresponding y-axis variable on the svg painting canvas.
As shown in figure 3, further, first dimension and the second dimension are respectively time dimension and word frequency dimension, institute
Stating chart figure is word frequency change curve of each topic with each time.Each topic " film " shown in i.e. Fig. 3,
The word frequency change curve of " books and periodicals " and " TV play " at any time.In the different time, the word frequency of each topic may be sent out
Thus changing generates the dipping and heaving of change curve.For curve chart, x, the input of y-axis data is with .json format
Storage, and the format of its data is that all there are two element, name and data, name to represent the type of topic for every group of data, member
Every group of data represent time and word frequency in plain data.
On this basis, the drafting two-dimensional coordinates, include the following steps:
(1) length and width of svg painting canvas are defined first, long width values can be specifically arranged according to the size for the data to be shown,
There is no specific requirement, in addition, increasing the definition on boundary again to painting canvas in order to enable figure seems more attractive.
The boundary line of four direction up and down is defined on the svg painting canvas, what formation was surrounded by four edges boundary line
Drawing area, the width and height of the drawing area are respectively as follows:
W2=W1-P1-P2；
H2=H1-P3-P4；
Wherein, W1 and H1 is respectively the overall width and total height of the svg painting canvas；P1, P2, P3, P4 be respectively left margin,
Distance values between the left edge of right margin, coboundary and lower boundary and the svg painting canvas, right hand edge, top edge and lower edge；
W2 and H2 is respectively the width and height of the drawing area；
(2) height of the width and y-axis that define x-axis is respectively the width and height of the drawing area；
(3) scale bar conversion first is carried out to x-axis, because being the relationship in time, it is believed that its value is discrete value, so using
D3.scale.ordinal () function, such as the section between 1998 to 2014 is chosen, the value of (1998-2014) is flat
It both maps in x-axis；
(4) D3.js is developed on the basis of .js, come the data preferably to be showed, so syntax rule, built-in
Package in the environment of D3.js, be still that can be used.Therefore a for circulation can have been used, every group of number is found out
According to the maximum value of middle word frequency.Finding out this maximum value can be transformed into true size on painting canvas more by the function of scale bar
Add ground rationally.
The maximum word frequency value Fremax in the data packet is calculated, by the data of (0, Fremax*k) range as continuous
On data Mean mapping to the y-axis, wherein k value is default spreading coefficient, can suitably choose a coefficient greater than 1, make
Obtaining y-axis has certain redundancy value relative to maximum word frequency value.
For y-axis, it is believed that word frequency be it is continuously distributed, then use distance scale conversion, due to painting canvas svg define
Put coordinate is to calculate relative to the point in the painting canvas svg upper left corner, such as k value can be chosen for 1.05, so the definition of y-axis
Domain is set as domain [0, Fremax*1.05], codomain range[height-padding.top-padding.bottom, and 0].
Further, in order to more clearly show the change curve of each topic, the region between curve is applied and is spread
Color, each piece is distinguished by different colors.Therefore drawn on the svg painting canvas topic change curve it
Afterwards, can also include the following steps:
S203: the region between change curve corresponding to each topic and the x-axis is established one by one with multiple color
Corresponding relationship, and corresponding color is coated into the region between each change curve and the x-axis；
First 20 kinds of colors can be generated with d3.scale.category20 () function herein to be not limited in practical applications
Using 20 kinds of colors, use other quantity can also be with.
For the smearing of field color, usually operation in this way uses d3.svg.area () function, defines .x in function
(), three parameters of .y0 () .y1 () .x (), y0 () represent a paths of curve, the position for the x-axis that .y1 () is indicated.
For the field color slightly brocken spectrum to be arranged, being arranged here is 0.4.
S204: change curve corresponding to each topic and multiple color are established into one-to-one color, and will be each
Change curve coats corresponding color.
In this embodiment, the color of definition region first, then defines the color of change curve, can be to avoid curve
Profile is blocked by graph color, influences display effect.It, come defined function, can be added below with d3.svg.line () function
Attribute .x (), what .y () was represented is point above curve, and definition is over after curve, binding data, and adds curve face
Color, the attributes such as transparency.
Further, since there are more intersections for the region between each change curve and x-axis, in order to preferably
It is differently shown, successively tints according to the sequence of each region from high to low.It i.e. will be between each change curve and the x-axis
Region when coating corresponding color, the average distance value between each change curve and the x-axis is calculated, according to each variation
The average distance value of curve is ranked up, and according to the sequence that average distance value is descending, coats correspondence in corresponding region
Color.
Further, it after the completion of graphic plotting, in order to illustrate more clearly of the meaning of each curve representation, can also wrap
Include following steps:
S205: care label is added for change curve corresponding to each topic, includes corresponding in the care label
Topic illustrates information；And the element that can identify the rectangle of size to people can be added, is dimensioned to 12 herein, color
With the color of curve.Then explanatory note is added behind rectangle.
Such as the example in Fig. 3, increase accordingly behind every curve " film ", " books and periodicals ", " TV play " topic mark
Label, to illustrate the meaning of topic representative.
S206: verbal description is added to the x-axis and the y-axis, and adds descriptive matter in which there to entire chart figure.
The explanation of title and x-axis for whole figure, it is only necessary to add svg.append (" text "), then add text
Position attribution, by calculate, be correctly placed on text should position.For the explanation of the text of y-axis, should be is to hold up
It places, therefore an attribute attr (" transform ", " rotate (- 90) ") more than title and x-axis.
Chart figure shown in the method and Fig. 3 of figure shown in Figure 2 of drawing a diagram is only one kind of the invention can
Embodiment is selected, in practical applications, other modes can be selected, without being limited with shown herein.For example, for chart
Figure is succinct, can not increase Fill Color or not increase comment, and Fill Color can also in different ways etc.；
Three example topics are illustrated only in Fig. 3, in practical applications, the topic of extraction changes therewith because of practical application difference, number
Amount is also not necessarily limited to three, can also be not provided with the boundary inside painting canvas, and x-axis and y-axis are filled up entire painting canvas；In addition, default
Spreading coefficient is also not necessarily limited to using 1.05, other coefficients greater than 1 can be with, such as 1.2, and 1.3 etc., but the mistake that should not be taken
Greatly, value crosses conference and makes have a large amount of blank above chart, causes the waste of painting canvas.Therefore, in central scope range of the present invention
Within the various changes that are carried out, all belong to the scope of protection of the present invention within.
For D3.js read file function have it is several, for d3.json () function of json file, for csv file
D3.csv () function, for d3.text () function of txt file.In this embodiment, provide data source is txt text
This, thus be d3.text () function, then by read data be stored in filename variable.For what is read
Data first step is that the data of reading are now divided into a few cluster words, and the treating method of every cluster word is first located on painting canvas
A radius is arranged then centered on this position in one position, adds a random number, each position meeting in the word of this cluster
Appear in any one position in this circle.Although having reached display effect in this way, there is a defect, word is put less word occurs
Overlapped situation is seldom, but this cluster word more than one, and the probability of that overlapping greatly becomes larger, and many times largely effects on vision
Effect, although can be made the size of word straggly orderly according to the weight of word, the case where overlapping, some words are not easy to see clearly really
Chu.
In view of such problems, the embodiment of the present invention introduces d3.layout.cloud.js word cloud packet, can be well
It solves the problems, such as to be overlapped between word.
As shown in figure 4, described transfer d3.layout.cloud.js word cloud packet, include the following steps:
S301: d3.layout.cloud () function call d3.layout.cloud.js word cloud packet is used；
S302: the display properties of each keyword is added in the d3.layout.cloud.js word cloud packet；
S303: each keyword is navigated to described by corresponding topic according to the display properties of each keyword
Available filling position in chart figure.
Optionally, the display properties of each keyword include each keyword display area range, rotation angle,
Data bind at least one of instruction, display font, the instruction of addition keyword and END instruction.
For example, adding the attribute size () of keyword first, expression is position that keyword occupies in chart figure
Size 0；Then attribute .word () is added, the data of reading is put into inside this function, i.e. binding data, addition
.rotate () attribute, expression be word rotation angle, demand here can be set to 0 or other desired angle, such as
Fruit omits this attribute, it is possible that some problems, overlapping cases occur because saving and still having certain probability；Then
Add .font () and two attributes of .fontSize (), the font and font size of expression；It adds attribute .start (), indicates
Start the function of the layout；.on (" end ", draw) this attribute is finally added, in word cloud packet, what .on () was indicated is note
The specified detectaphone of volume is to receive the event of specified type from layout, currently, only supporting " word " and " end " event.Table herein
What is shown is, by scheduling " end " event, to call draw function when layout is completed to attempt to place all words.In draw function according to
It is so to be carried out on the painting canvas, it otherwise can not be displayed along.The position of this word cloud can be positioned in this function simultaneously
It sets.Then the case where being directed to each keyword, is arranged other attributes, reaches the display effect of needs.
It is possible to further adjust display effect according to the importance of each keyword, that is, highlight more important
Keyword.Such as including the word frequency of each keyword, the word frequency and display font of the keyword in the word cloud packet
Size it is directly proportional.It is shown alternatively, it is also possible to which the word frequency of different keywords is arranged using different colours, such as important pass
Keyword uses red font, can achieve eye-catching effect etc..
The word frequency of keyword and the directly proportional font size value that can be word frequency value and display font of the size of display font herein
It is directly proportional.For example, font size is No. 8, when word frequency is between 10 times and 40 times when setting word frequency is less than 10 times, font size is No. 10,
When word frequency is greater than 40 times, font size is No. 12.It is only for example herein, can actually use different settings, be divided into multiple grades,
It is correspondingly arranged different font sizes etc..
As described above, first dimension and the second dimension can be respectively time dimension and word frequency dimension, the chart
Figure be drawn in two-dimensional coordinates, each topic with each time word frequency change curve；
It is described can to use filling position described in each keyword positioning, include the following steps:
(1) topic corresponding to each keyword is determined；
(2) each keyword is filled between the word frequency change curve and time reference axis of corresponding topic
In region.
The schematic diagram after word cloud is further increased in the chart figure in Fig. 3 as shown in figure 5, showing.Such as
For topic " film ", have keyword " swordsman ", " plot ", " literature and art " and " movement ", and the word frequency highest of " plot ", therefore
" plot " is highlighted using larger font.Keyword corresponding below each topic is only for example herein.
In practical applications, there can be multiple keywords below each topic, the discharge of keyword can be uniform discharge,
Can be distributed with filling region size according to empty between curve, region it is big can put a little keywords more, region it is small can
To put a little keywords less, so that whole display figure is beautiful.I.e. optionally, in the chart figure, the size of each region
It is directly proportional to the number for the word placed in each region.
The embodiment of the present invention also provides a kind of storage medium, and for storing program, wherein described program is performed progress
Following operation:
It obtains the data packet of visualized graphs to be generated, includes multiple topics in the data packet, in each topic includes
Multiple keywords and each topic multiple dimensional attribute values；
According to the attribute value of multiple dimensions corresponding to topics multiple in the data packet and each topic, figure of drawing a diagram
Shape；
D3.layout.cloud.js word cloud packet is transferred, includes multiple keywords, the multiple key in the word cloud packet
Word respectively corresponds the multiple topic；
According to the corresponding relationship of the keyword and the topic, each keyword is navigated to corresponding topic
Available filling position in the chart figure.
The storage medium can be set in various hardware devices, such as be set to computer, mobile terminal etc. with processing
It in the equipment of device, also can be set in simple memory, such as mobile hard disk, USB flash disk, CD etc., thus including realizing
It sets or when external processor executes, executes above procedure.
Data visualization image generation method and storage medium provided by the present invention based on D3 has the advantage that
The present invention integrates the technologies such as D3.js, chart, word cloud and Reading text, generates the chart figure of word cloud and topic, and
And combine the chart figure of word cloud and topic, the word cloud that will be shown navigates to corresponding position in chart figure respectively
It sets, word cloud is more clearly shown in the chart figure of topic；It may further be using time and word frequency as the chart of topic
Two dimensions of figure, preferably show the case where topic changes with the time, are combined by picture and text, and preferably help user obtains
Take relevant useful information.
The above content is a further detailed description of the present invention in conjunction with specific preferred embodiments, and it cannot be said that
Specific implementation of the invention is only limited to these instructions.For those of ordinary skill in the art to which the present invention belongs, exist
Under the premise of not departing from present inventive concept, a number of simple deductions or replacements can also be made, all shall be regarded as belonging to of the invention
Protection scope.
Claims (13)
1. a kind of data visualization image generation method based on D3, which comprises the steps of:
Obtain the data packet of visualized graphs to be generated, include in the data packet multiple topics, include in each topic it is more
Multiple dimensional attribute values of a keyword and each topic；
According to the attribute value of multiple dimensions corresponding to topics multiple in the data packet and each topic, figure of drawing a diagram；
D3.layout.cloud.js word cloud packet is transferred, includes multiple keywords, the multiple keyword point in the word cloud packet
The multiple topic is not corresponded to；
According to the corresponding relationship of the keyword and the topic, each keyword is navigated into corresponding topic in institute
State the available filling position in chart figure.
2. the data visualization image generation method according to claim 1 based on D3, which is characterized in that the drafting figure
Table figure, includes the following steps:
Two-dimensional coordinates are drawn on svg painting canvas, the x-axis of the two-dimensional coordinates corresponds to preset first dimension, the two dimension
The y-axis of coordinate system corresponds to preset second dimension, multiple dimensional attribute values of each topic include each topic at least
The the second dimensional attribute value of one the first dimensional attribute value and the topic under each first dimensional attribute value；
The second dimension category using the first dimensional attribute value of each topic as x-axis variable, under each first dimensional attribute value
Property value draws the change curve of the topic as corresponding y-axis variable on the svg painting canvas.
3. the data visualization image generation method according to claim 2 based on D3, which is characterized in that first dimension
Degree and the second dimension are respectively time dimension and word frequency dimension, and the chart figure is that each topic becomes with the word frequency in each time
Change curve graph.
4. the data visualization image generation method according to claim 3 based on D3, which is characterized in that described to draw two
Reference axis is tieed up, is included the following steps:
The boundary line of four direction up and down is defined on the svg painting canvas, forms the Drawing zone surrounded by four edges boundary line
Domain, the width and height of the drawing area are respectively as follows:
W2=W1-P1-P2；
H2=H1-P3-P4；
Wherein, W1 and H1 is respectively the overall width and total height of the svg painting canvas；P1, P2, P3, P4 are respectively left margin, the right
Distance values between the left edge of boundary, coboundary and lower boundary and the svg painting canvas, right hand edge, top edge and lower edge；W2 and
H2 is respectively the width and height of the drawing area；
The height of the width and y-axis that define x-axis is respectively the width and height of the drawing area；
Using the time value of selection as on discrete point Mean mapping to the x-axis；
The maximum word frequency value Fremax in the data packet is calculated, the data of (0, Fremax*k) range are flat as continuous data
It both maps in the y-axis, wherein k value is default spreading coefficient.
5. the data visualization image generation method according to claim 2 based on D3, which is characterized in that the drafting figure
Table figure, further includes following steps:
One-to-one relationship is established into multiple color in region between change curve corresponding to each topic and the x-axis,
And corresponding color is coated into the region between each change curve and the x-axis；
Change curve corresponding to each topic and multiple color are established into one-to-one color, and each change curve is applied
Upper corresponding color.
6. the data visualization image generation method according to claim 5 based on D3, which is characterized in that by each variation
When corresponding color is coated in region between curve and the x-axis, the average departure between each change curve and the x-axis is calculated
From value, be ranked up according to the average distance value of each change curve, according to the sequence that average distance value is descending, pair
Coat corresponding color in the region answered.
7. the data visualization image generation method according to claim 2 based on D3, which is characterized in that the drafting figure
Table figure, further includes following steps:
Care label is added for change curve corresponding to each topic, includes the explanation of corresponding topic in the care label
Information；
Verbal description is added to the x-axis and the y-axis, and adds descriptive matter in which there to entire chart figure.
8. the data visualization image generation method according to claim 1 based on D3, which is characterized in that described to transfer
D3.layout.cloud.js word cloud packet, includes the following steps:
Using d3.layout.cloud () function call d3.layout.cloud.js word cloud packet；
The display properties of each keyword is added in the d3.layout.cloud.js word cloud packet；
Each keyword is navigated into corresponding topic in the chart figure according to the display properties of each keyword
In available filling position.
9. the data visualization image generation method according to claim 8 based on D3, which is characterized in that each pass
The display properties of keyword includes the display area range of each keyword, rotation angle, data binding instruction, display font, adds
Add at least one of keyword instruction and END instruction.
10. the data visualization image generation method according to claim 9 based on D3, which is characterized in that described each
The display properties of keyword includes display font, includes the word frequency of each keyword, the keyword in the word cloud packet
Word frequency it is directly proportional to the size of display font.
11. the data visualization image generation method according to claim 8 based on D3, which is characterized in that described first
Dimension and the second dimension are respectively time dimension and word frequency dimension, and the chart figure is to be drawn in two-dimensional coordinates, each
Topic with each time word frequency change curve；
It is described can to use filling position described in each keyword positioning, include the following steps:
Determine topic corresponding to each keyword；
Each keyword is filled into the region between the word frequency change curve and time reference axis of corresponding topic.
12. the data visualization image generation method according to claim 10 based on D3, which is characterized in that the chart
In figure, the number of word placed in the size of each region and each region is directly proportional.
13. a kind of storage medium, for storing program, which is characterized in that wherein described program, which is performed, proceeds as follows:
Obtain the data packet of visualized graphs to be generated, include in the data packet multiple topics, include in each topic it is more
Multiple dimensional attribute values of a keyword and each topic；
According to the attribute value of multiple dimensions corresponding to topics multiple in the data packet and each topic, figure of drawing a diagram；
D3.layout.cloud.js word cloud packet is transferred, includes multiple keywords, the multiple keyword point in the word cloud packet
The multiple topic is not corresponded to；
According to the corresponding relationship of the keyword and the topic, each keyword is navigated into corresponding topic in institute
State the available filling position in chart figure.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710495637.6A CN109144504A (en) | 2017-06-26 | 2017-06-26 | Data visualization image generation method and storage medium based on D3 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710495637.6A CN109144504A (en) | 2017-06-26 | 2017-06-26 | Data visualization image generation method and storage medium based on D3 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109144504A true CN109144504A (en) | 2019-01-04 |
Family
ID=64804816
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710495637.6A Pending CN109144504A (en) | 2017-06-26 | 2017-06-26 | Data visualization image generation method and storage medium based on D3 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109144504A (en) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109994171A (en) * | 2019-01-24 | 2019-07-09 | 西安交通大学 | A kind of manifold method for visualizing and system for clinical path comparison |
| CN110109989A (en) * | 2019-03-14 | 2019-08-09 | 四川九洲电器集团有限责任公司 | A kind of big data visible processing method and readable storage medium storing program for executing |
| CN110442849A (en) * | 2019-06-14 | 2019-11-12 | 平安科技（深圳）有限公司 | Method for exhibiting data, device, computer equipment and storage medium |
| CN110516221A (en) * | 2019-08-29 | 2019-11-29 | 苏州朗动网络科技有限公司 | Extract method, equipment and the storage medium of chart data in PDF document |
| CN112579829A (en) * | 2019-09-27 | 2021-03-30 | 北京国双科技有限公司 | Chart visualization method and device |
| CN112819917A (en) * | 2021-01-21 | 2021-05-18 | 北京秒针人工智能科技有限公司 | Word cloud drawing method and system based on canvas |
| WO2021098579A1 (en) * | 2019-11-20 | 2021-05-27 | 深圳前海微众银行股份有限公司 | Chart drawing method, device, apparatus and storage medium |
| CN113781604A (en) * | 2021-09-26 | 2021-12-10 | 杭州安恒信息技术股份有限公司 | Method and system for generating multidimensional dot chart and related device |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103065344A (en) * | 2012-11-30 | 2013-04-24 | 贵州电网公司六盘水供电局 | Drawing method of two dimensional graph |
| CN103631856A (en) * | 2013-10-17 | 2014-03-12 | 四川大学 | Subject visualization method for Chinese document set |
-
2017
- 2017-06-26 CN CN201710495637.6A patent/CN109144504A/en active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103065344A (en) * | 2012-11-30 | 2013-04-24 | 贵州电网公司六盘水供电局 | Drawing method of two dimensional graph |
| CN103631856A (en) * | 2013-10-17 | 2014-03-12 | 四川大学 | Subject visualization method for Chinese document set |
Non-Patent Citations (1)
| Title |
|---|
| 佚名: "html中使用d3-cloud词", 《HTTPS://BLOG.CSDN.NET/GY_GRACE/ARTICLE/DETAILS/72863646》 * |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109994171A (en) * | 2019-01-24 | 2019-07-09 | 西安交通大学 | A kind of manifold method for visualizing and system for clinical path comparison |
| CN109994171B (en) * | 2019-01-24 | 2021-05-28 | 西安交通大学 | Manifold visualization method and system for clinical path comparison |
| CN110109989A (en) * | 2019-03-14 | 2019-08-09 | 四川九洲电器集团有限责任公司 | A kind of big data visible processing method and readable storage medium storing program for executing |
| CN110442849A (en) * | 2019-06-14 | 2019-11-12 | 平安科技（深圳）有限公司 | Method for exhibiting data, device, computer equipment and storage medium |
| CN110516221A (en) * | 2019-08-29 | 2019-11-29 | 苏州朗动网络科技有限公司 | Extract method, equipment and the storage medium of chart data in PDF document |
| CN110516221B (en) * | 2019-08-29 | 2021-07-30 | 企查查科技有限公司 | Method, equipment and storage medium for extracting chart data in PDF document |
| CN112579829A (en) * | 2019-09-27 | 2021-03-30 | 北京国双科技有限公司 | Chart visualization method and device |
| WO2021098579A1 (en) * | 2019-11-20 | 2021-05-27 | 深圳前海微众银行股份有限公司 | Chart drawing method, device, apparatus and storage medium |
| CN112819917A (en) * | 2021-01-21 | 2021-05-18 | 北京秒针人工智能科技有限公司 | Word cloud drawing method and system based on canvas |
| CN112819917B (en) * | 2021-01-21 | 2024-04-02 | 北京秒针人工智能科技有限公司 | Word cloud drawing method and system based on canvas |
| CN113781604A (en) * | 2021-09-26 | 2021-12-10 | 杭州安恒信息技术股份有限公司 | Method and system for generating multidimensional dot chart and related device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109144504A (en) | Data visualization image generation method and storage medium based on D3 | |
| Tversky | Spatial schemas in depictions | |
| Lohmann et al. | Concentri cloud: Word cloud visualization for multiple text documents | |
| Manovich | What is visualisation? | |
| Manovich | What is visualization? | |
| Mazza | Introduction to information visualization | |
| Malamed | Visual design solutions: Principles and creative inspiration for learning professionals | |
| TW455802B (en) | Computer system, method and user interface components for abstracting and accessing a body of knowledge | |
| US8606775B2 (en) | Graphically representing associations between referents and stories | |
| US8479092B1 (en) | Content layout for an electronic document | |
| US9786072B2 (en) | Techniques for visualization of data | |
| Marriott et al. | Memorability of visual features in network diagrams | |
| US20150347371A1 (en) | User interfaces for displaying relationships between cells in a grid | |
| US20140282163A1 (en) | Tree Map | |
| US20060242349A1 (en) | Rendering highlighting strokes | |
| Davis | History on the line: time as dimension | |
| Jin et al. | Designing in virtual reality: a comparison of problem-solving styles between desktop and VR environments | |
| Tversky | Cognitive principles of graphic displays | |
| US20200097536A1 (en) | Automatic generation of document layouts | |
| Kim et al. | Embodied lenses for collaborative visual queries on tabletop displays | |
| Blackwell | Visual representation | |
| IES20070382A2 (en) | A method and apparatus for providing an on-line directory service | |
| Lin et al. | Virtual geographic environments | |
| WO2019019534A1 (en) | Formula display method and apparatus, terminal, and computer-readable storage medium | |
| Boulos et al. | Web GIS in practice II: interactive SVG maps of diagnoses of sexually transmitted diseases by Primary Care Trust in London, 1997–2003 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WD01 | Invention patent application deemed withdrawn after publication | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20190104 |