This is a read only archive of pad.okfn.org. See the
shutdown announcement
for details.
d3js-tampere-workshop
D3.js for beginner learning workshop
// // // // // // // // // // // // // // // // // // // // // // // // // // //
Edition : Friday 04.04.2014 Tampere
Loading data and visualising local council data
///// Links to code I made
Link to open decisionmaking timeline visualisation:
// with an issue focus
http://knapek.org/temp/tampere_d3_workshop/data/tampere_pseudo_data_test_load01.html
- // showing only meetings of policymakename "Kaupunginvaltuusto"
http://knapek.org/temp/tampere_d3_workshop/data/tampere_pseudo_data_test_load03__meetings_of_particular_policymaker.html
// and another version - showing only the meetings with the text 'guggenheim' in them
http://knapek.org/temp/tampere_d3_workshop/data/tampere_pseudo_data_test_load02__guggenheim_focus2.html
Video : Santiago Ortiz talking about visualisation as tools for thinking
http://visualized.com/2014/presents/santiago-ortiz/
- about csv and json data
- examples:
json : javascript object notation
- associative possibilities
http://en.wikipedia.org/wiki/JSON
csv : comma separated values
http://en.wikipedia.org/wiki/Comma-separated_values
- the csv and json data viewers for chrome
- jsonview : https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc
- recline CSV viewer: https://chrome.google.com/webstore/detail/recline-csv-viewer/ibfcfelnbfhlbpelldnngdcklnndhael
// // // // // // // // // // // // // // // // // // // // // // // // // // //
Edition : Friday 21.3.2014 Tampere
(Also intermediate learning workshop 28.3.2014)
NOTE: Friday 28.3. Intermediate workshop will be rescheduled due to teacher's unfortunate sick leave.
/Raimo Muurinen
We'll assemble anyway and have even more unformal session 28.3.
NEW DATE IS FRIDAY 4TH APRIL 2014 AT 10.00
OUTLINE OF WHAT"S HAPPENING ( 2014.03.21 )
- why d3?
- vs. jquery?
-> data embedding
- set up etherpad for collaboration
- people please send their current sketches there
- familiarise with jsfidde
- basic : check where the console output is
- basic : check where the svg area is
- show how to use d3 on html
- basic: basic
- intermediate : with data
- basic: p / div
- intermediate : loop and number
- introduction to using css for styling
- basic : css description
- intermediate : d3 change classes
- set up the svg canvas
- basic
- intermediate : loop and set up several
- basic shapes
- rect
http://jsfiddle.net/miska/C4EU5/4/
- circle
http://jsfiddle.net/miska/C4EU5/2/
- text
http://jsfiddle.net/miska/C4EU5/5/
- line
http://jsfiddle.net/miska/C4EU5/6/
- polygon
http://jsfiddle.net/miska/hytEP/2/
http://jsfiddle.net/miska/hytEP/4/
- movement
- interpolate
- animate using setInterval / setTimeout ?!
- different approaches to generating the coordinates of objects?!
- embed data in them and
- generate coordinates -> make data file -> embed -> use data for coords
- generate coordinates and data, use object order for assigning and modifying coords.
- do basic plot : introduces basic elements
- scale
- axis
- css manipulation
- load data?!
- test loading external data with jsfiddle
- python server
-> python -m SimpleHTTPServer 3333
// general unsorted ideas:
- fetch mouse-coords
http://jsfiddle.net/miska/B6XHU/
- network diagram?
///////// tutorials and reference
// basic tutorials
https://www.dashingd3js.com
// good d3 books (partly free)
- interactive data visualization - Scott Murray
http://chimera.labs.oreilly.com/books/1230000000345/index.html
- D3 Tips and Tricks - Malcolm Maclean
https://leanpub.com/D3-Tips-and-Tricks
/ / / / / / / / / / / / / / / / / / / / / / end of quick outline / / / / / / / / / / / / / / / / / /
/////////// quick basic html template ////////////
/////// download the d3 source from here : https://github.com/mbostock/d3/releases/download/v3.4.3/d3.zip
////// start html page
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title> d3 test zone </title>
<script src="d3/d3.js" charset="utf-8"></script>
<style type="text/css">
svg{Euroopan unioni
border: 1px dashed orange;
}
</style>
</head>
<body>
<script type="text/javascript">
// code here :)
</script>
</body>
</html>
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
DATA SECTION
data for this fiddle : http://jsfiddle.net/miska/8LKgx/2/
// finnish map data openness score for the opendatabarometer.org
var data = [ 95,5,10,15,15,15,15,10,5,5,0,1 ] ;
/ / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / /
Ilmainen ja kaikille avoin D3.js aloittelijoille -oppimispaja. Tuo mukanasi vähintään Javascriptin perustaitosi tai nopea uuden kielen omaksumiskyky ja halu visualisoida dataa!
Opettajana toimii Miska Knapek. (http://knapek.org/) (opetus tapahtuu englanniksi)
Suuntaa-antava mutta tilanteen mukaan elävä ja viitteellinen ohjelmarunko:
10:00 1. sessio D3.js for beginners
-omakustanteinen lounastauko-
12:30 2. sessio D3.js for beginners jatkuu
14:00 Ohjattua harjoittelua
15:30 Päivän aikaansaannosten ihastelua
16:00 Itsenäisen harjoittelun jatko yhdistettynä lisääntyvään vapaamuotoiseen sosiaaliseen kanssakäymiseen
Pajaan voi tulla mukaa myös kesken ohjelman ohjattuun harjoitteluun (johdanto on vain aamulla)!
Ilmoittautumisohje:
Tapahtumaan mahtuu 14 osallistujaa ilmoittautumisjärjestyksessä. Ilmoittautuminen tapahtuu siten, että kerrot osallistuvasi ja mitä haluat oppia, mitä jo osaat ja mahdollisesti jos haluat duunata jotakin omaa juttuasi. Kerro tämä joko tämä Facebook-eventin seinällä tai yhteiskirjoitusmuistiossa!
Yhteiskirjoitusmuistio: http://pad.okfn.org/p/d3js
Facebook-tapahtuma: https://www.facebook.com/events/1464454503771484/
www:
http://jsfiddle.net/
Tapahtuma jatkuu 28.3. D3.js intermediate -oppimispajalla.
Järjestäjiä ovat:
Open Knowledge Finland, Open Data Tampere Region, Tilanne M3 osk ja Kansan Sivistystyö Liitto KSL ry.
Pyrin osallistumaan intermediate-oppimispajaan. Työstän mielelläni omaa väkerrystäni eteenpäin, laitan protoa näkyville jonnekin ennen tapahtumaa.
Perusteet ovat hallussa. Tahtoisin oppia reusable graph -juttujen soveltamista käytäntöön.
Vielä on vähän hakusessa miten dataa kannattaa tallentaa tietorakenteisiin ja valita niistä, kun tekee vuorovaikutteisia visualisointeja, joissa dataa voi valita ja muokata isota massasta.
- Mikael Rinnetmäki
Tavoite: saavuttaa beginners-taso ja soveltaa opittua kokeiluun jossa apinoin jotakin D3.js-esimerkkiä sivulta http://articlemetrics.github.io/examples/ Kerään työkalupakkia tieteellisten artikkelien keräämien metriikoiden visualisointiin. Pääasiallisesti teen töitä muilla kuin JavaScriptillä (R, Perl, SQL) mutta JS-perusteet ovat kyllä hallussa. Kirjastoista on näyttöä jQuery:n käytöstä, JSON on tietorakenteena ymmärrettävä, ja DOM:in käsittely on tuttua XML/XSLT-taustani takia.
- Tuija Sonkkila
Tervehdys Mikael ja Tuija, tervetuloa! /RM
Tässä demo gps-dataa
"date","lat","lon","speed","valid","ign","idle"
"02 Jan 2013 08:12:18","60.9759296","25.6763504","13.0","true","1","0"
"02 Jan 2013 08:12:19","60.9759552","25.6763232","12.0","true","1","0"
"02 Jan 2013 08:12:20","60.9759872","25.6763088","12.0","true","1","0"
"02 Jan 2013 08:12:21","60.9760192","25.6763248","14.0","true","1","0"
"02 Jan 2013 08:12:39","60.9766144","25.6765328","11.0","true","1","0"
"02 Jan 2013 08:12:40","60.9766336","25.676472","15.0","true","1","0"
"02 Jan 2013 08:12:41","60.9766528","25.676384","18.0","true","1","0"
"02 Jan 2013 08:12:45","60.9767104","25.6758784","28.0","true","1","0"
"02 Jan 2013 08:13:30","60.976992","25.6669008","37.0","true","1","0"
"02 Jan 2013 08:13:33","60.9769088","25.6663552","37.0","true","1","0"
"02 Jan 2013 08:13:40","60.9766976","25.6651568","30.0","true","1","0"
"02 Jan 2013 08:13:44","60.9767168","25.6646144","24.0","true","1","0"
"02 Jan 2013 08:13:45","60.9767488","25.664512","23.0","true","1","0"
"02 Jan 2013 08:13:46","60.9768","25.6644352","24.0","true","1","0"
"02 Jan 2013 08:13:47","60.9768576","25.664392","25.0","true","1","0"
"02 Jan 2013 08:13:48","60.976928","25.6643808","27.0","true","1","0"
"02 Jan 2013 08:13:55","60.9773504","25.6643936","22.0","true","1","0"
"02 Jan 2013 08:13:56","60.9773888","25.6642992","24.0","true","1","0"
"02 Jan 2013 08:13:58","60.9774592","25.6638528","33.0","true","1","0"
"02 Jan 2013 08:14:13","60.9776512","25.6610928","26.0","true","1","0"
"02 Jan 2013 08:14:14","60.9777152","25.6610224","28.0","true","1","0"
"02 Jan 2013 08:14:21","60.9782208","25.66052","31.0","true","1","0"
"02 Jan 2013 08:14:23","60.978304","25.6602768","28.0","true","1","0"
"02 Jan 2013 08:15:42","60.9785344","25.6592688","13.0","true","1","0"
"02 Jan 2013 08:15:44","60.978528","25.6591392","12.0","true","1","0"
"02 Jan 2013 08:15:45","60.9785024","25.6590752","14.0","true","1","0"
"02 Jan 2013 08:15:46","60.9784576","25.6590368","17.0","true","1","0"
"02 Jan 2013 08:15:48","60.9783232","25.6589504","30.0","true","1","0"
"02 Jan 2013 08:15:54","60.9777472","25.6588288","40.0","true","1","0"
"02 Jan 2013 08:16:09","60.9759744","25.6586416","48.0","true","1","0"
"02 Jan 2013 08:17:59","60.9670208","25.6557376","45.0","true","1","0"
"02 Jan 2013 08:19:23","60.958848","25.6536992","20.0","true","1","0"
"02 Jan 2013 08:19:24","60.9588096","25.6537648","21.0","true","1","0"
"02 Jan 2013 08:19:25","60.9587776","25.6538672","25.0","true","1","0"
"02 Jan 2013 08:19:27","60.9587264","25.6541664","32.0","true","1","0"
"02 Jan 2013 08:19:37","60.9585792","25.6559696","13.0","true","1","0"
"02 Jan 2013 08:19:38","60.9585344","25.6559776","16.0","true","1","0"
"02 Jan 2013 08:19:54","60.957632","25.6559696","16.0","true","1","0"
"02 Jan 2013 08:19:55","60.9576064","25.6560288","15.0","true","1","0"
"02 Jan 2013 08:19:56","60.9575872","25.656112","20.0","true","1","0"
"02 Jan 2013 08:20:04","60.9575168","25.6566528","6.0","true","1","0"
"02 Jan 2013 08:20:38","60.9574592","25.65712","0.0","true","0","0"
"02 Jan 2013 08:27:30","60.9574592","25.65712","0.0","true","1","0"
"02 Jan 2013 08:27:38","60.957408","25.6572608","7.0","true","1","0"
"02 Jan 2013 08:27:47","60.957472","25.6578944","15.0","true","1","0"
"02 Jan 2013 08:27:48","60.9575168","25.657928","18.0","true","1","0"
"02 Jan 2013 08:27:50","60.9576448","25.6579872","26.0","true","1","0"
"02 Jan 2013 08:27:58","60.9581632","25.6580144","17.0","true","1","0"
"02 Jan 2013 08:27:59","60.9582016","25.6579728","15.0","true","1","0"
"02 Jan 2013 08:28:00","60.9582144","25.657912","13.0","true","1","0"
"02 Jan 2013 08:28:02","60.9582208","25.6577264","18.0","true","1","0"
"02 Jan 2013 08:28:08","60.9582528","25.6574608","0.0","true","0","0"
"02 Jan 2013 08:37:43","60.9582528","25.6574608","0.0","true","1","0"
"02 Jan 2013 08:37:54","60.9585344","25.657264","6.0","true","1","0"
"02 Jan 2013 08:37:55","60.9585536","25.6572576","6.0","true","1","0"
"02 Jan 2013 08:38:01","60.9585472","25.6573008","0.0","true","0","0"
"02 Jan 2013 08:48:02","60.9585472","25.6573008","0.0","true","0","0"
"02 Jan 2013 08:53:16","60.9585472","25.6573008","0.0","true","1","0"
"02 Jan 2013 08:53:55","60.9583808","25.6574608","11.0","true","1","0"
"02 Jan 2013 08:53:56","60.9583808","25.6575408","17.0","true","1","0"
"02 Jan 2013 08:53:58","60.9583552","25.6577488","19.0","true","1","0"
"02 Jan 2013 08:53:59","60.9583232","25.657848","24.0","true","1","0"
"02 Jan 2013 08:54:01","60.9582272","25.6579424","25.0","true","1","0"
"02 Jan 2013 08:54:03","60.9581504","25.6579264","31.0","true","1","0"
"02 Jan 2013 08:54:13","60.957536","25.6578624","11.0","true","1","0"
"02 Jan 2013 08:54:14","60.9575168","25.6579088","12.0","true","1","0"
"02 Jan 2013 08:54:16","60.9574976","25.6580336","7.0","true","1","0"
"02 Jan 2013 08:54:19","60.9574464","25.65816","13.0","true","1","0"
"02 Jan 2013 08:54:21","60.9573696","25.6581904","16.0","true","1","0"
"02 Jan 2013 08:54:24","60.9571712","25.6581168","31.0","true","1","0"
"02 Jan 2013 08:55:10","60.9521408","25.65608","44.0","true","1","0"
"02 Jan 2013 08:55:16","60.9515008","25.6560064","41.0","true","1","0"
"02 Jan 2013 08:55:32","60.949792","25.6546768","45.0","true","1","0"
"02 Jan 2013 08:55:55","60.947168","25.6508","51.0","true","1","0"
"02 Jan 2013 08:56:20","60.945088","25.647192","34.0","true","1","0"
"02 Jan 2013 08:56:22","60.9450752","25.646848","33.0","true","1","0"
"02 Jan 2013 08:56:30","60.9451072","25.6458176","29.0","true","1","0"
"02 Jan 2013 08:56:31","60.9450496","25.6457312","30.0","true","1","0"
"02 Jan 2013 08:56:33","60.9448576","25.6456352","44.0","true","1","0"
"02 Jan 2013 08:56:47","60.943008","25.6444752","62.0","true","1","0"
"02 Jan 2013 08:57:39","60.9409344","25.6414528","11.0","true","1","0"
"02 Jan 2013 08:58:29","60.9361472","25.632808","27.0","true","1","0"
"02 Jan 2013 08:58:30","60.9361344","25.6326624","30.0","true","1","0"
"02 Jan 2013 08:58:32","60.93616","25.6323008","38.0","true","1","0"
"02 Jan 2013 09:00:00","60.93616","25.6323008","38.0","true","1","0"
"02 Jan 2013 09:00:06","60.936352","25.6291408","15.0","true","1","0"
"02 Jan 2013 09:00:07","60.9363392","25.6290624","18.0","true","1","0"
"02 Jan 2013 09:00:08","60.9363008","25.6289904","21.0","true","1","0"
"02 Jan 2013 09:00:09","60.9362496","25.6289424","23.0","true","1","0"
"02 Jan 2013 09:00:11","60.9361024","25.6289024","34.0","true","1","0"
"02 Jan 2013 09:00:24","60.9348992","25.6288896","41.0","true","1","0"Euroopan unioni
"02 Jan 2013 09:00:32","60.9341696","25.6293216","25.0","true","1","0"
"02 Jan 2013 09:00:33","60.9341056","25.6293376","23.0","true","1","0"
"02 Jan 2013 09:00:34","60.9340608","25.6293952","21.0","true","1","0"
"02 Jan 2013 09:00:35","60.9340352","25.6294816","19.0","true","1","0"
"02 Jan 2013 09:00:36","60.9340352","25.6295808","19.0","true","1","0"
"02 Jan 2013 09:00:37","60.9340544","25.6296672","19.0","true","1","0"
"02 Jan 2013 09:00:38","60.9340928","25.6297296","18.0","true","1","0"
"02 Jan 2013 09:00:42","60.934176","25.6299536","13.0","true","1","0"
"02 Jan 2013 09:00:43","60.934176","25.6300272","15.0","true","1","0"
"02 Jan 2013 09:00:44","60.9341568","25.6301136","18.0","true","1","0"
"02 Jan 2013 09:00:45","60.9341248","25.6302032","23.0","true","1","0"
"02 Jan 2013 09:00:46","60.9340736","25.6302736","26.0","true","1","0"
"02 Jan 2013 09:00:47","60.9340032","25.6303024","28.0","true","1","0"
"02 Jan 2013 09:01:03","60.933088","25.6301616","18.0","true","1","0"
"02 Jan 2013 09:01:04","60.9330624","25.6302416","18.0","true","1","0"
"02 Jan 2013 09:01:05","60.9330496","25.6303328","19.0","true","1","0"
"02 Jan 2013 09:01:19","60.9329856","25.6316112","8.0","true","1","0"
"02 Jan 2013 09:01:20","60.9330112","25.631632","12.0","true","1","0"
"02 Jan 2013 09:01:21","60.9330496","25.6316448","14.0","true","1","0"
"02 Jan 2013 09:01:26","60.9331648","25.6317024","8.0","true","1","0"
"02 Jan 2013 09:01:27","60.9331712","25.6317488","10.0","true","1","0"
"02 Jan 2013 09:01:28","60.9331648","25.63184","8.0","true","1","0"
"02 Jan 2013 09:01:34","60.9331584","25.6319296","0.0","true","0","0"
"02 Jan 2013 09:11:34","60.9331584","25.6319296","0.0","true","0","0"
"02 Jan 2013 09:21:34","60.9331584","25.6319296","0.0","true","0","0"
"02 Jan 2013 09:31:34","60.9331584","25.6319296","0.0","true","0","0"
"02 Jan 2013 09:39:15","60.9331584","25.6319296","0.0","true","1","0"
"02 Jan 2013 09:39:34","60.933152","25.632008","7.0","true","1","0"
"02 Jan 2013 09:39:36","60.9331776","25.6320592","6.0","true","1","0"
"02 Jan 2013 09:39:37","60.9331968","25.6320624","7.0","true","1","0"