D3 workshop

download D3 workshop

of 82

  • date post

    27-Aug-2014
  • Category

    Software

  • view

    211
  • download

    4

Embed Size (px)

description

D3 workshop conducted by Kiryl Verkhovin on Rolling Scopes meet up series.

Transcript of D3 workshop

  • D3 WORKSHOP

  • DATADRIVEN

    DOCUMENTS

  • D3 is not a compatibility layer,so if your browser doesn't support

    standards, you're out of luck.Sorry!

  • CREATE YOUR OWN VISUALIZATIONS

  • D3 IS NOT A CHARTING LIBRARYFor basic visualizations like "bar chart" use:

    highchartsjqPlotnvd3...

  • SOURCE OF INSPIRATION

    bl.ock.org

    http://bl.ocks.org/
  • COLLISION DETECTION

    see details

    http://bl.ocks.org/mbostock/3231307/
  • CHORD DIAGRAM

    0k

    5k

    10k

    15k

    20k

    25k

    0k

    5k

    10k

    15k20k

    0k

    5k

    10k

    15k

    20k

    25k

    30k

    35k

    40k0k

    5k

    see details

    http://bl.ocks.org/mbostock/4062006/
  • FLEXIBLE TRANSITIONSAAPL

    AMZN

    IBM

    MSFT

    see details

    http://bl.ocks.org/mbostock/1256572
  • COOL... BUTI STILL WANNA BAR CHART!

  • DATA

    var data = [3, 5, 1, 7, 9];

    USAGE

    barChart(data);

  • SIMPLE BAR CHART

  • CREATE HOST PAGE

    Bar chart div { height: 100px; background-color: green; margin-bottom: 10px;

    color: white; line-height: 100px; font-size: 72px; text-align: right; padding-right: 10px; } window.data = [3, 5, 1, 7, 9]

  • NO D3

    data.forEach(function (d) { var bar = document.createElement('div'); document.body.appendChild(bar); bar.style.setProperty('width', d * 100 + 'px'); bar.innerText = d;});

  • MIN D3

    data.forEach(function (d) { d3.select('body').append('div') .style('width', d * 100 + 'px') .text(d);});

  • MAX D3

  • CREATE 3 DIVS

    var body = d3.select('body');

    body.append('div');body.append('div');body.append('div');

  • MODIFY DIVSfunction barChart() { body.selectAll('div') .style( 'background-color', 'blue') .text( 'Hello');}

  • DATA JOIN

    //JOINvar binding = body.selectAll('div') .data(data);

    binding.style('background-color', 'blue') .style('width', function (d) { return d * 50 + 'px'; }) .text(function (d) { return d; });

  • ENTER

    //JOINvar binding = body.selectAll('div') .data(data);

    //ENTERbinding.enter().append('div');

  • UPDATE + ENTER

    //JOINvar binding = body.selectAll('div') .data(data);

    //UPDATEbinding.style('background-color', 'blue')

    //ENTERbinding.enter().append('div');

    //ENTER + UPDATEbinding.style('width', function (d) { return d * 50 + 'px'; }) .text(function (d) { return d; });

  • EXIT

    //JOINvar binding = body.selectAll('div') .data(data);

    ...

    //EXITbinding.exit().remove();

  • GENERAL UPDATE PATTERNfunction barChart(data) { //JOIN var binding = body.selectAll('div') .data(data);

    //UPDATE binding.style('background-color', 'blue');

    //ENTER binding.enter().append('div');

    //UPDATE + ENTER binding.style('width', function (d) { return d * 50 + 'px'; }) .text(function (d) { return d; });

    //EXIT binding.exit().style('background-color', 'red').remove();}

  • MORE ABOUT SELECTIONS AND JOINSThree Little CirclesThinking with JoinsHow Selections Work

    http://bost.ocks.org/mike/circles/http://bost.ocks.org/mike/join/http://bost.ocks.org/mike/selection/
  • SCALESScales are functions that map from an input domain to an output

    range.

    learn more

    https://github.com/mbostock/d3/wiki/Scales
  • SCALES

    var scale = d3.scale.linear() .domain([20, 80]) .range([0, 120]);

    scale(50); // return 60

  • SCALE BAR CHART

    var scale = d3.scale.linear() .domain([0, d3.max(data)]) // -> in elephants .range([0, document.body.clientWidth]); // -> in px

    ...

    //UPDATE + ENTERbinding.style('width', function (d) { return scale(d) + 'px'; }) .text(function (d) { return d; });

  • TRANSITIONSINTERPOLATE VALUES OVER TIME

    numberscolorsgeometric transformsstrings with embedded numbers (e.g., "96px")

    learn more

    http://bost.ocks.org/mike/transition/
  • SVG

  • MAKE CIRCLE ALIVE

    var state1 = { r: 100, fill: 'red', cx: 200, cy: 200, opacity: 0.5 };var state2 = { r: 300, fill: 'blue', cx: 400, cy: 400, opacity: 1 };var circle = d3.select('circle');

    function applyState(state) { circle.transition() .duration(2500) .ease('elastic') .attr('r', state.r) .attr('fill', state.fill) .attr('cx', state.cx) .attr('cy', state.cy) .style('opacity', state.opacity);}

  • TRANSITION DEMO

  • LET'S APPLY IT TO BAR CHART

    //ENTERbars.enter().append('div') .style('width', 0);

    //ENTER + UPDATEbars.text(function (d) { return d; }) .transition() .style('width', function (d) { return scale(d) + 'px'; });

  • BREAK

  • DONUT CHART

  • SVG

  • SVG The g element is a container used to group objects.

    Transformations applied to the g element are performed on all ofits child elements.

  • D3 LAYOUTSLayouts are reusable algorithms that generate data, not display.

    see more

    https://github.com/mbostock/d3/wiki/Layouts
  • FORCE LAYOUT

    https://github.com/mbostock/d3/wiki/Force-Layout
  • TREE LAYOUT

    https://github.com/mbostock/d3/wiki/Tree-Layout
  • TREEMAP LAYOUT

    https://github.com/mbostock/d3/wiki/Treemap-Layout
  • CHORD LAYOUT

    https://github.com/mbostock/d3/wiki/Chord-Layout
  • AND SOME MORE...

  • PIE LAYOUT

    var pie = 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}]*/

  • ARC GENERATORvar arc = d3.svg.arc().innerRadius(r / 2).outerRadius(r);

    arc({"startAngle":0,"endAngle":3.71});//-> "M0,-20A20,20 0 1,1 -10.76581016580034,16.85518707917385L-5.38290508290017,8.427593539586924A10,10 0 1,0 0,-10Z"

  • DEMO DONUT CHART V.1

  • ADD COLORSvar color = d3.scale.category10();

    color(0);//-> "#1f77b4"

  • DEMO DONUT CHART V.2

  • ADD LABELS//translate to arc's centertext.attr('transform', function (d) { return 'translate(' + arc.centroid(d) + ')';})//center horizontally.attr('text-anchor', 'middle')//center vertically.attr('dy', '.35em')

  • DEMO DONUT CHART V.3

  • ARC TWEEN

    see details

    http://bl.ocks.org/mbostock/5100636/
  • DEMO DONUT CHART V.4

  • BREAK

  • Original:

    LET'S DRAW BELARUS

    Lets Make a Map

    http://bost.ocks.org/mike/map/
  • FINDING DATA SOURCESGovernment ;)GeoCommonsNaturalEarthData

    http://google.com/http://geocommons.com/http://naturalearthdata.com/
  • States, Provinces

    Populated Places

    NATURAL EARTH

    http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_admin_1_states_provinces.ziphttp://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_populated_places.zip
  • ESRI SHAPEFILEPopular geospatial vector data format for geographic

    information system software.

    BinaryBunch of files (*.dbf, *.shp, ...)Not in JSON :)

  • 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...

    http://geojson.org/geojson-spec.html
  • TOPOJSONExtension of GeoJSON that encodes topology.

    Join shared lines into arcs.

    BENEFITS:

    smaller size (80% smaller)automatic mesh generation

  • 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]

  • INSTALLING TOOLSGDAL/OGR2OGR

    TOPOJSON

    HTTP SERVER

  • GDAL/OGR2OGRUBUNTU

    add-apt-repository ppa:ubuntugis/ppaapt-get updateapt-get install gdal-bin

  • GDAL/OGR2OGRMAC

    brew install gdal

  • GDAL/OGR2OGRWIN

    gdal.msi

  • TOPOJSONnpm install g topojson

  • HTTP SERVERnpm install g http-server

  • CONVERTING TO GEOJSONogr2ogr \ -f GeoJSON \ -where "iso_a2 = 'BY'" \ states.geojson \ ne_10m_admin_1_states_provinces.shp

    ogr2ogr \ -f GeoJSON \ -where "iso_a2 = 'BY'" \ places.geojson \ ne_10m_populated_places.shp

    ISO 3166-1 alpha-2

    http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2
  • CONVERTING TO TOPOJSONtopojson \ --id-property iso_3166_2 \ -p name=NAME \ -p name \ -o belarus.topojson