interactive graphics with D3: HTML, CSS, Javascript

最新推荐文章于 2024-02-14 21:30:31 发布

samantha_wang

最新推荐文章于 2024-02-14 21:30:31 发布

阅读量440

点赞数

分类专栏： web development 文章标签： D3 Web development

web development 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. web server: internet-connected computers running server software, so called because they serve web documents as requested.

2. local: web developers run on the same computer you are working on

server software packages: Apache is the most common one.

3. web clients( browsers): Chrome/firefox/...

4. URL:

commnunication protocol(HTTP/HTTPS):// domain name:port/path

5. when you visit a website such as: alignedleft.com/tutorials/d3/

1) without sepcify a protocol, HTTP is assumed, and http:// is prepended to the URL

2) the browser attempt to connect to the server behind alignedleft.com across the network, via port 80, hte default port for HTTP

3) the server associated with alignedleft.com acknowledges the connection and is taking requests.

4) the browser sends a request for the page that lives at / tutorials/d3

5) the server sends back the HTMLcontent for that page

6) the client browser receives the HTML, it discovers references to other files needed to assemble and display the entire page, including CSS, images. So it contacts the server again, once per file, requesting the additonal information.

7) the server responds, dipatching each file as needed

8) finally, all the web documents have been transferred over. Now the client is to render the content.

parse HTML to understand its structure of the content.--review the CSS selectors, apply properties to matched elements.--plug in images and execute JavaScript code.

6. Classes and ids attributes
they can be assigned to any type of element. CSS ans JavaScript rely heavily on them.

Class and ID names can only begin with alphabetic characters.

7. comments in HTML

8. DOM : Document Object Model refers to the hierarchical structure of HTML

the browser will parse HTML to make sense of a page's content.

As coders building visualizations, we care about the DOM, because our code must navigate its hierarchy to apply styles and actions to its elements.

9. rendering

definition: the process by which browsers, after parsing the HTML and generating the DOM, apply visual rules to the DOM contents and draw those pixels to the screen.

everything is a box!!

CSS

10. CSS

consists of selectors and properties, like the following:

selector {

property: value;

}

the same properties can be applied to multiple selectors at once by separating selectors with a comma, as in the following:

selectorA,

selectorB,

selectorC {

property: value;

}

Collectively, this whole chuck of code (selectors and brackets properties) is called a CSS RULE.

11. selectors:

D3 use CSS-style selectors to identify elements on which to operate.

Selectors identify specific elements to which styles will be applied.

1) type selectors:

match DOM elements with the same name:

2) descendant selectors:

match elements that are contained by ( or"descended from") another element.

h1 em /* select em elements contained in an h1 */

div p /* select p elements contained in a div */

3) class selectors:

these match elements of any type that have been assigned a specific class. class names are preceded with a period

.caption /* selects elements with class "caption" */

. label /* selects elements with class "label" */

target on elements with multiple classes

.bar .highlight /*Could target highlighted bars */

.axis .x /* could target on x-axis */

.axis.y /* could target on y-axis */

.axis */ could be used to apply styles to both axes. */

4) ID Selectors:

match the single element with a given ID

#header

#nav

combine selectors in different ways to target specific elements.

div.sidebar /* selects elements div with class sidebar */

#button.on /* select element with ID "button" , but only when the class "on" is applied */

12. Properties and Values:

groups of property/ value pairs cumulatively form the styles:

margin: 10px;

padding: 25px;

color: pink;

13. comments

/* COMMENTS */

14. Referencing styles

1) embed the CSS in your HTML

embed the css style in the document head, include all the CSS code within a style element

<head>

p {

font-size: 24px;

}

</style>

</head>

2) Reference an external stylesheet from the HTML

<head>

<link rel="stylesheet" href="style.css">

</head>

3) Attach inline styles

add a style attribute to any element

<p style="color: blue; font-size: 48px; font-style: italic; "> Inline styles </p>

15. Inheritance, Cascading, and Specificity

Inheritance is a great feature of CSS, as children adopt styles of their parents.

Cascading: because selectors matches cascade from the top down. when more than one selectors applies to an element, the latest one override the old ones, as in the following:

p {

color: blue;

}

p.highlight {

color: black;

background-color: yellow;

}

Sepecificity:

This is one of the main causes of confusion with CSS. The rules for calculating specificityare inscrutable, and I won’t cover them here. To save yourself headaches later, keep yourselectors clear and easy to read. Start with general selectors on top, and work your waydown to more specific ones, and you’ll be all right.

JavaScript:

Javascript is the scripting language that can make pages dynamic by manipulating DOM after a page has already loaded in the browser.

Note that in JavaScript, statements are concluded with a semicolon.

1. variables

var number=5; // number

var indicates you are declaring a new variable, the name of which is number. The equals sign is an assignment operator because it takes the value on the right
(5) and assigns it to the variable on the left (number).

var thisMakesSenseSoFar = true; //logic

var defaultColor="hot pink"; //string

2. other variable types

1) arrays:

var numbers=[5,10,15,20,25];

var names=["shu","xiao"]

var mishmash = [ 1, 2, 3, 4.5, 5.6, "oh boy", "say it isn't", true ]; //don't recommend

array positions begin counting at 0

2) objects:

var fruit={

kind: "grape",

color:"red",

quantity:12

};

reference each value, using dot notation:

fruit.kind

[ ] means array , { } means objects

var fruits = [

{

kind: "grape",

color: "red",

quantity: 12,

tasty: true

},

{

kind: "kiwi",

color: "brown",

quantity: 98,

tasty: true

}

];

fruits[0].kind

JSON

Specific syntax for organizing data as JavaScript objects, the syntax is optimized for use with Javascript and AJAX requests,

which is why you'll see a lot of web-based application programming interfaces(APIs) that return data formate as JSON

{

"kind": "grape",

"color": "red",

"quantity": 12,

"tasty": true

}

1. the only difference with Javascript object is our property names are string.

json object can be stored in variables like this:

var jsonFruit = {

"kind": "grape",

"color": "red",

"quantity": 12,

"tasty": true,

};

2. Mathmatical operations:

+ //Add

- //Subtract

* //Multiply

/ //Divide

3. comparison Operators:

== //Equal to

!= //Not equal to

< //Less than

> //Greater than

<= //Less than or equal to

>= //Greater than or equal to

4. Control structures

1) if

if (test) {

//code to run if true

};

2) for (initialization; test; update){

//code to run

};

They are so-called because they loop through the code for as many times as specified.
First, the initialization statement is run. Then, the test is evaluated, like a mini if statement. If the test is true, then the bracketed code is run. Finally, the update statement is run, and the test is reevaluated.

5. Functions

parentheses are used to call(execute) a function. If that function requires any arguments ( input values) , then they are passed to the function by including them in the parentheses.

whenever you see something like these, you know it's a function:

calculateGratuity(38);

console.log("Awesome!");

define your own functions:

var caluateGratuity=function(bill) {

return bill*0.2;

};

6. comments

// comments

/* just like CSS*/

7. referencing scripts:

1)　embedded in HTML

<body>

<script type="text/javascript">

alert("Hello, world!");

</script>

</body>

2) stored in a separate file with .js suffix

<head>

<title>Page Title</title>

<script type="text/javascript" src="myscript.js"></script>

</head>

8. Gotchas:

1) dynamic typing: automatically types a variable based on what kind of information you assign to it. (Note that '' or "" indicate string values. I prefer double quotation marks "", but some people like singles ' '.)

2) variable hoisting:

Contrary to what you would expect, JavaScript code is usually, but not always, executedin linear, top-to-bottom order, as in the following:

var numLoops = 100;

for (var i = 0; i < numLoops; i++) {

console.log(i);

};

which is equivalent to

var numLoops = 100;
var i;
for (i = 0; i < numLoops; i++) {
console.log(i);
}

variable declarations are hoisted up to the top of the function context in which they reside. So in our example, i is actually declared before the for loop even begins

3) function level scope

In programming, the concept of variable scope helps us identify which variables are accessible in which contexts.

Many languages use block-level scope, in which variables exist only within the current “block” of code, usually indicated by curly braces. With block-level scope, our i would exist only within the context of the for loop, for example, so any attempts to read the value of i or change i outside of the loop would fail

In JavaScript, however, variables are scoped at the function level, meaning they are accessible anywhere within the function (not block) in which they reside.

Global namespace

window

var zebras="amazing"; // this will add variable zebras into window global namespace

What’s so wrong with adding values to window? As you get started, nothing at all. But as your projects grow in complexity, and especially if you begin to incorporate other non-D3 JavaScript code (such as jQuery, Facebook “Like” buttons, or Google Analytics
tracking code), at some point you’re bound to run into a conflict because you’re using the variable zebras for your project, but zebraTracker.js is also using a variable with the

There are two easy workarounds (and, to clarify, you probably don’t have to worry about this until later):

• Declare variables only within other functions. This is not usually feasible, but the function-level scope will prevent local variables from conflicting with others.

• Declare a single global object, and attach all of your would-be global variables to that object. For example: