- CSS súbor - Triedy (znamienko .) -

- .cervena { background-color: red } - ID (znamienko #) -

- #cerveny-box {background-color: blue} - http://codepen.io/adammertel/pen/EggqRx 1. CSS - XML based - - cx, cy, r - - x1, x2, y1, y2 - blablab - x, y - styling (https://www.w3.org/TR/SVG/styling.html#SVGStylingProperties) - http://codepen.io/adammertel/pen/QKKJZO 1. SVG - Všeobecná knižnica na ulahčenie práce s html/css/js - znamienko $ - $(document).ready(function(){...}) - DOM je načítaný - $("p"), $(".my-class"), $("#id123") - výber elm z DOMu - text(), html(), val() - práca s hodnotami - append(), prepend(), before(), after() - vkladanie - addClass(), removeClass(), css() - práca s css - $.getJSON( "test.json", function( data ) { console.log( data ); }); - http://codepen.io/adammertel/pen/JRbdjR 1. JQuery - d3.select("body") — Finds the body in the DOM and hands a reference off to the next step in the chain. - .selectAll("p") — Selects all paragraphs in the DOM. Since none exist yet, this returns an empty selection. Think of this empty selection as representing the paragraphs that will soon exist. - .data(dataset) — Counts and parses our data values. There are five values in our data set, so everything past this point is executed five times, once for each value. - .enter() — To create new, data-bound elements, you must use enter(). This method looks at the DOM, and then at the data being handed to it. If there are more data values than corresponding DOM elements, then enter()creates a new placeholder element on which you may work your magic. It then hands off a reference to this new placeholder to the next step in the chain. - .append("p") — Takes the placeholder selection created by enter() and inserts a p element into the DOM. Hooray! Then it hands off a reference to the element it just created to the next step in the chain. - .text("New paragraph!") — Takes the reference to the newly created pand inserts a text value. - http://codepen.io/adammertel/pen/amBkXQ 2. STATICKÁ GRAFIKA - DOM - var svg = d3.select("body") .append("svg") .attr("width", 500) .attr("height", 50); - Svg geometries - circle - cx, cy, r - rect - x, y, width, height - text - x, y, text - ellipse - cx, cy, rx, ry - line - x1, x2, y1, y2 - path - d - … - + štýlovanie - http://codepen.io/adammertel/pen/yaVrXx 2. STATICKÁ GRAFIKA - SVG - var scale = d3.scale.linear().domain([0, 10]).range(["white","red"]); -> scale(5) vráti ružovú - .on("mouseover", function(d, i) {... - mousemove, mouseout - d3.event.pageX, d3.event.pageY - vracia pozíciu kurzoru - remove() - odstráni vybraný element - filter(function(d, i){return d == 1}) - berie iba dáta o zvolenej hodnote - http://codepen.io/adammertel/pen/XjNRBN 3. INTERAKTÍVNA GRAFIKA - Layouts - https://github.com/d3/d3-3.x-api-reference/blob/master/Layouts.md - Pie chart - The pie layout simply makes it easier to convert an array of data into an array of objects with startAngle and endAngle attributes that range from 0 to 2π, which you can then pass to the arc shape generator - d3.svg.arc() - http://codepen.io/adammertel/pen/qaqorQ - SVG Shapes - https://github.com/d3/d3-3.x-api-reference/blob/master/SVG-Shapes.md - Line chart - http://codepen.io/adammertel/pen/ORbkaO 4. ZÁKLADNÉ FORMY PREZENTÁCIE DÁT - var projection = d3.geo.gnomonic() + scale, center, translate … - d3.geo.path() -> vyrába path z geojsonu () - https://developer.mozilla.org/en/docs/Web/SVG/Tutorial/Paths - http://jxnblk.com/paths/ - scale - choropletova mapa,... - http://codepen.io/adammertel/pen/NRbyrm 5. MAPA - https://www.reddit.com/r/dataisbeautiful/comments/3k3if4/hi_im_mike_bostock_creator_of_d3js_and_a_forme r/ - http://benschmidt.org/D3-trail/minard.html - https://plot.ly/javascript/ - http://bl.ocks.org/ - https://www.reddit.com/r/dataisbeautiful/comments/3k3if4/hi_im_mike_bostock_creator_of_d3js_and_a_forme r/ - http://alignedleft.com/tutorials/d3/ - https://www.dashingd3js.com - https://www.jasondavies.com/ Zdroje