d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3,...
Transcript of d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3,...
![Page 1: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/1.jpg)
D3.jsUC Berkeley Graduate School of Journalism
![Page 2: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/2.jpg)
Review
![Page 3: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/3.jpg)
Review — DataTypes
324230293420 Number
"HelloWorld" String
false_ Boolean
[3,4,3,2,1,0] Array
{hair:"black"} Object Literal
function(){} Function
d3.select("#someid") d3 object
![Page 4: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/4.jpg)
Review — Calling Functions
This is calling a function:somefunction();
This is also calling a function, sending data:somefunction("heythere");
![Page 5: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/5.jpg)
Review — SVG transform
<gtransform=""></g>
<gtransform=""></g>
<gtransform=""></g>
![Page 6: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/6.jpg)
Review — SVG transform
<gtransform="translate(30,50)"></g>
<gtransform=""></g>
<gtransform=""></g>
![Page 7: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/7.jpg)
Review — SVG transform
<gtransform="translate(30,50)"></g>
<gtransform="rotate(-40,10,10)"></g>
<gtransform=""></g>
![Page 8: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/8.jpg)
Review — SVG transform
<gtransform="translate(30,50)"></g>
<gtransform="rotate(-40,10,10)"></g>
<gtransform="scale(1.5)"></g>
![Page 9: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/9.jpg)
Review — SVG transform
<gtransform="translate(30,50)rotate(-40,10,10)scale(1.5)"></g>
or combine them
![Page 10: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/10.jpg)
D3
![Page 11: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/11.jpg)
d3 — Selecting elements on the webpage
<divid="something"></div>
![Page 12: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/12.jpg)
d3 — Selecting elements on the webpage
d3
<divid="something"></div>
![Page 13: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/13.jpg)
d3 — Selecting elements on the webpage
d3.select("#something")
<divid="something"></div>
![Page 14: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/14.jpg)
d3 — Selecting elements on the webpage
d3.select("#something").append("p")
<divid="something"><p></p></div>
![Page 15: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/15.jpg)
d3 — Selecting elements on the webpage
d3.select("#something").append("p").text("HelloWorld")
<divid="something"><p>HelloWorld</p></div>
![Page 16: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/16.jpg)
D3 Select
d3.select("#title")
always start with d3 variable
![Page 17: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/17.jpg)
D3 Select
d3.select("#title")
select is the first command to select the element
![Page 18: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/18.jpg)
D3 Select
d3.select("#title")
a string which contains the CSS selector of the element
![Page 19: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/19.jpg)
D3 Select
d3.select(".headlines")
This will only return the first element with class="headline"
dot means it's a class
![Page 20: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/20.jpg)
D3 Recap
.select("#title")
.selectAll(".headlines")
.append("div")
.text("Hereistext")
selects id="title"
selects everything with class="headlines"
appends an element, like a div
places text within currently selected element
![Page 21: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/21.jpg)
D3 Recap
.attr("width",300)
.style({"fill":"red"})
.html("<p>hey</p>")
.classed("headlines",false)
sets an attribute on the currently selected tag
set some CSS styles on the currently selected tag
just like text, but renders html
adds or removes a class attribute
![Page 22: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/22.jpg)
Using Data with D3
![Page 23: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/23.jpg)
D3 wants an Array of data
[39,239,12,32,42,24]
this is an array of numbers
[ {name:"Apples",value:39}, {name:"Orange",value:23}, {name:"Pears",value:30},{name:"Bananas",value:40}]
or an array of objects
![Page 24: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/24.jpg)
Data in D3
varsvg=d3.select("body").append("svg").attr("width",400).attr("height",300);
this variable now has the SVG
![Page 25: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/25.jpg)
Data in D3
svg.selectAll(".bubbles")
there is NO .bubbles
![Page 26: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/26.jpg)
Data in D3
svg.selectAll(".bubbles").data(data).enter() Magic!
vardata=[32,23,24,45];
![Page 27: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/27.jpg)
Data in D3
svg.selectAll(".bubbles").data([32,43,23,54]).enter()
codehere
![Page 28: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/28.jpg)
Data in D3
svg.selectAll(".bubbles").data([32,43,23,54]).enter().append("circle")
![Page 29: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/29.jpg)
Data in D3
svg.selectAll(".bubbles").data([32,43,23,54]).enter().append("circle").attr("cy",100)
![Page 30: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/30.jpg)
Data in D3
svg.selectAll(".bubbles").data([32,43,23,54]).enter().append("circle").attr("cy",100).attr("cx",function(d,i){ returni*50;})
![Page 31: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/31.jpg)
Data in D3svg.selectAll(".bubbles").data([32,43,23,54]).enter().append("circle").attr("cy",100).attr("cx",function(d,i){ returni*50;}).attr("r",function(d,i){ returnd;})
![Page 32: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/32.jpg)
Data in D3
.attr("r",function(d,i){returnd;})
d is the value of the data array during this iteration of the loop.
i is the index (how many times) this loop has run.
return is what you want to return
![Page 33: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/33.jpg)
Maps
![Page 34: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/34.jpg)
Mapping DatavarmyArray=[ {name:"Bill",age:"45"}, {name:"Joe",age:"37"}, {name:"Jane",age:"25"}, {name:"Jill",age:"9"}]
myArray.map()
![Page 35: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/35.jpg)
Mapping DatavarmyArray=[ {name:"Bill",age:45}, {name:"Joe",age:37}, {name:"Jane",age:25}, {name:"Jill",age:9}]
myArray.map(function(d){})
![Page 36: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/36.jpg)
Mapping DatavarmyArray=[ {name:"Bill",age:45}, {name:"Joe",age:37}, {name:"Jane",age:25}, {name:"Jill",age:9}]
varnewArray=myArray .map(function(d){returnd.name;})
["Bill","Joe","Jane","Jill"]
![Page 37: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/37.jpg)
Mapping DatavarmyArray=[ {name:"Bill",age:45}, {name:"Joe",age:37}, {name:"Jane",age:25}, {name:"Jill",age:9}]
varnewArray=myArray .map(function(d){returnd.age;})
[45,37,25,9]
![Page 38: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/38.jpg)
Scales
![Page 39: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/39.jpg)
Scalesdomain - The span of your data set.range - The range of the chart you want to stuff it into
![Page 40: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/40.jpg)
Scalesdomain - The span of your data set.range - The range of the chart you want to stuff it into
![Page 41: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/41.jpg)
Linear Scalesvary=d3.scaleLinear() .range([0,100]) .domain([0,5])
y(1)//returns20y(4)//returns80y(0)//returns0
![Page 42: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/42.jpg)
Linear Scalesvary=d3.scaleLinear() .range([0,100]) .domain([350,100000])
y(5410)//returns5.077y(20343)//returns20.063y(100000)//returns100
![Page 43: d3 charts · Review — DataTypes 324230293420 Number "Hello World" String false_ Boolean [3, 4, 3, 2, 1, 0] Array { hair:"black" } Object Literal function(){} Function d3.select](https://reader036.fdocuments.in/reader036/viewer/2022071016/5fceeafb85f35f1c652716ae/html5/thumbnails/43.jpg)
Ordinal (Band) Scalesvarx=d3.scaleBand() .range([0,100]) .domain(["apple","orange","pear"]).padding(0.1);
x("apple")//returns0x("orange")//returns33x("pear")//returns66