Downloaded 20 times
![DATA
vardata=[3,5,1,7,9];
USAGE
barChart(data);](https://image.slidesharecdn.com/d3-workshop-140730085555-phpapp02/75/D3-workshop-11-2048.jpg)
![CREATE HOST PAGE
<!DOCTYPEhtml>
<html>
<head>
<title>Barchart</title>
<styletype="text/css">
div{
height:100px;
background-color:green;
margin-bottom:10px;
color:white;
line-height:100px;
font-size:72px;
text-align:right;
padding-right:10px;
}
</style>
</head>
<body></body>
<scriptsrc="../lib/d3.js"charset="utf-8"></script>
<script>window.data=[3,5,1,7,9]</script>
<scriptsrc="bar.live.js"></script>
</html>](https://image.slidesharecdn.com/d3-workshop-140730085555-phpapp02/75/D3-workshop-13-2048.jpg)
![SCALES
varscale=d3.scale.linear()
.domain([20,80])
.range([0,120]);
scale(50);//return60](https://image.slidesharecdn.com/d3-workshop-140730085555-phpapp02/75/D3-workshop-26-2048.jpg)
![SCALE BAR CHART
varscale=d3.scale.linear()
.domain([0,d3.max(data)])//->inelephants
.range([0,document.body.clientWidth]);//->inpx
...
//UPDATE+ENTER
binding.style('width',function(d){returnscale(d)+'px';})
.text(function(d){returnd;});](https://image.slidesharecdn.com/d3-workshop-140730085555-phpapp02/75/D3-workshop-27-2048.jpg)
![PIE LAYOUT
varpie=d3.layout.pie();
pie([20,50,100]);
/*result->
[
{"data":20,"value":20,"startAngle":5.54,"endAngle":6.28},
{"data":50,"value":50,"startAngle":3.71,"endAngle":5.54},
{"data":100,"value":100,"startAngle":0,"endAngle":3.71}
]
*/](https://image.slidesharecdn.com/d3-workshop-140730085555-phpapp02/75/D3-workshop-43-2048.jpg)
![GEOJSON
{
"type":"FeatureCollection",
"features":[{
"type":"Feature",
"properties":{},
"geometry":{
"type":"Polygon",
"coordinates":[
[
[27.4603271484375,53.92698552779884],
[27.5537109375,53.97870483500941],
[27.740478515625,53.930219863940025],
[27.696533203125,53.81038242731128],
[27.4932861328125,53.80713881129993],
[27.4603271484375,53.92698552779884]
]
]
}
}]
}
Learn more...](https://image.slidesharecdn.com/d3-workshop-140730085555-phpapp02/75/D3-workshop-57-2048.jpg)
![TOPOJSON
{
"type":"Topology",
"objects":{
"collection":{
"type":"GeometryCollection",
"geometries":[{
"type":"Polygon",
"arcs":[
[0]
]
}]
}
},
"arcs":[
[
[0,6985],
[3333,3014],
[6666,-2826],
[-1568,-6984],
[-7255,-189],
[-1176,6985]
]
],
"transform":{
"scale":[0.000028017938512601262,0.00001715831820276837],
"translate":[27.4603271484375,53.80713881129993]
},
"bbox":[27.4603271484375,53.80713881129993,27.740478515625,53.97870483500941]](https://image.slidesharecdn.com/d3-workshop-140730085555-phpapp02/75/D3-workshop-59-2048.jpg)
![PROJECTION
varprojection=d3.geo.mercator()
.translate([400,400])
.rotate([-27.55,0])
.center([0,53.916667])
.scale(2200);](https://image.slidesharecdn.com/d3-workshop-140730085555-phpapp02/75/D3-workshop-74-2048.jpg)
D3 workshop
- 1.
- 2.
- 3. “D3 is nota compatibility layer, so if your browser doesn't support standards, you're out of luck. Sorry!”
- 4. CREATE YOUR OWNVISUALIZATIONS
- 5. D3 IS NOTA CHARTING LIBRARY For basic visualizations like "bar chart"use: highcharts jqPlot nvd3 ...
- 6.
- 7.
- 8.
- 9.
- 10. COOL... BUT I STILLWANNA BAR CHART!
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24. MORE ABOUT SELECTIONSAND JOINS Three Little Circles Thinkingwith Joins How Selections Work
- 25. SCALES Scales are functionsthatmap from an inputdomainto an output range. learn more
- 26.
- 27.
- 28. TRANSITIONS INTERPOLATE VALUES OVERTIME numbers colors geometric transforms strings with embedded numbers (e.g., "96px") learn more
- 29.
- 30.
- 31.
- 32. LET'S APPLY ITTO BAR CHART //ENTER bars.enter().append('div') .style('width',0); //ENTER+UPDATE bars.text(function(d){returnd;}) .transition() .style('width',function(d){returnscale(d)+'px';});
- 33.
- 34.
- 35.
- 36. SVG <G> The gelementis acontainer used to group objects. Transformations applied to the gelementare performed on allof its child elements. <svgwidth="250"height="100"> <circlecx="50"cy="50"r="45"/> <gstroke="green"fill="white"transform="translate(90,0)"> <circlecx="50"cy="50"r="45"/> <circlecx="80"cy="50"r="45"/> </g> </svg>
- 37. D3 LAYOUTS Layouts arereusable algorithms thatgenerate data, notdisplay. see more
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53. Original: LET'S DRAW BELARUS Let’sMake aMap
- 54.
- 55.
- 56. ESRI SHAPEFILE Popular geospatialvectordataformatfor geographic information system software. Binary Bunch of files (*.dbf, *.shp, ...) Notin JSON:)
- 57.
- 58. TOPOJSON Extension of GeoJSONthatencodestopology. Join shared lines into arcs. BENEFITS: smaller size (80%smaller) automatic mesh generation
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69. SVG VS CANVAS D3supportboth of them.
- 70.
- 71. CONVERTING TOPOJSON BACKTO GEOJSON varstates=topojson.feature(data,data.objects.states);
- 72.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.