current position:Home>Learning D3 introduction document: Data

Learning D3 introduction document: Data

2021-08-27 05:43:31 XXHolic


Following Learn D3: By Example Third articles , Only English translation , The modifiable part of the code replaces... With a static picture , For real-time interaction, please read the original text .


stay Observable There are many ways to get data . But because we just started , Let's use the simplest : File attachment .

This notebook has a... That contains daily temperature readings CSV file . I use Shift-Command-U ⇧⌘U Keyboard shortcuts Add it ; You can also attach files by dragging and dropping them into the file attachments pane , The file attachments pane can be accessed from the notebook menu or by clicking the paper clip icon above .


FileAttachment Function returns only one handle , This handle allows you to select the desired representation , for example blobbuffer or (UTF-8 Coded ) Text . about CSV file , We can call file.text Get the contents of the file as the desired string .


Of course , A more useful method is to parse the text into a text with date and temperature Object of property , We can pass the text to d3.csvParse To achieve .(D3 Load... In the appendix below , Each unit in the notebook is available .)

Click on the array below to view the object .


although Observable Wait implicitly for cross cell promises , But we have to wait file.text promise , Because we want to access the return value in the same cell .

By default ,D3 No type inference , therefore date and temperature Properties are strings . This makes them difficult to get along with . for example , If you try to add two temperatures , Connect them . Oh dear !


To convert these strings to dates and numbers , Pass a function as the second argument to d3.csvParse . Each line calls this function , Manipulate the objects of the row as needed . Better yet , adopt d3.autoType Automatically infer types .


If you look at the array above , You will see blue dates and numbers ( Instead of the blue string between double quotes ), This indicates that the type conversion was successful .

Let's take a look at Observable Unit Syntax . up to now , You only see things that can be named or anonymous expression unit . Both types of units can be checked , However, named cells can only be referenced from other cells .

88-6 88-7 88-8

For code that is more complex than simple expressions , Write a block , The block consists of one or more statements enclosed in braces . Block cells are similar to functions , Only if they return or yield The value is generated only when . Just like expression units , Named block cells can be referenced from other cells .


local variable , For example, above s , Not visible to the rest of the notebook ; Other cells can only access the return value of the named cell . In this way ,Observable It's like a spreadsheet : Each cell defines a unique value .


Go back to the task at hand , In a data In the unit of , There is a clearer way to get 、 Parsing and type conversion CSV file . If your data is consistent with d3.autoType Are not compatible , You can use this method ( If you're not sure , Don't rely on automatic type inference or Consult the documentation .)


With convenient data , We can start working now ! for example , We can calculate the range of dates and temperatures , Get the area value .

88-12 88-13

As we saw before , We can do it in Example histogram Inject data into , Easy to intuitively perceive the temperature distribution .

88-14 88-15 88-16

A mild climate ! ah , San Francisco .

stay Observable While processing data , An implicit consideration is whether to put the code in a single unit or separate units . A good rule of thumb is , A unit should define a named value that is referenced by other units ( As above data ), Or it should show readers some useful information ( Such as this article 、 The chart above or check the unit data ).

A key implication of this rule is , You should avoid implicit dependencies between units : Rely only on what you can name .

Why? ? Notebook Data flow Is built from its unit reference . If the unit has no name , The unit cannot be referenced , And units that implicitly depend on their effects may run in front of them .( Cells run in topological order , Not from top to bottom .) Implicit dependencies can lead to uncertain behavior in the development process , And possible errors when the notebook is reloaded !

for example , If a cell defines an array , Another unit modified it , Then other cells may see the array before or after the mutation . To avoid this uncertainty , Need to make dependencies explicit , You can specify a name for the second cell and use array.from or Copy the array . Or merge two units , In this way, other cells can only see the modified array .

Our data is ready , Let's turn to graphics !



88-17 88-18 88-19

Reference material


Play with 《 The wizard 3》 In the process of , We often encounter such events and tasks :

People in conflict , Describing the same thing is a completely different version , But it all makes sense , Finally, you, who have never experienced it, have to make a decision .

After several treatments , I found that sometimes in the game, it is really a torture of human nature , The dilemma , Difficult to decide .

If you encounter such a situation in reality , The alarm is a relatively good way .

copyright notice
author[XXHolic],Please bring the original link to reprint, thank you.

Random recommended