Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Notatki do prezentacji D3 Workshop
JavaScript
branch: master
Failed to load latest commit information.
getting-started-with-d3 endline labels
README.md Link: Epoch Converter Functions
area-chart.html pierwsza wrzutka
bar-chart.html więcej przykładów
console.html d3.js na konsoli
d3.v2.min.js d3 v2.9.6
digital-clock-00.html przykład: digital clock 1
digital-clock-01.html digital clock svg
dot-chart.html pierwsza wrzutka
getterGenerator.js dodałem getteGenerator
hello-bar-1.html poprawki w przykładzie hello-bar
hello-chart-css.html więcej przykładów
hello-chart-svg-dynamic.html przykład: dynamic chart
hello-chart-svg-object-constancy.html dynamic charts cont.
hello-chart-svg.html chart w svg
hello-circle.html poprawki
hello-circles-20.html przkład: animowane kółka
hello-d3.html examples from: getting started with d3
hello-drawing-divs.html examples from: getting started with d3
hello-drop-shadow.html d3 plugins
hello-gradient.html przykłady: drop shadow i glow filters
hello-hover.html przykład hover
hello-joins.html więcej przykładów
hello-mouse-timers.html przykłady: drop shadow i glow filters
hello-nested-selections.html więcej przykładów
hello-paragraphs.html przykłady: drop shadow i glow filters
hello-rect.html move stroke styling to css
hello-svg.html pierwsza wrzutka
hello-three-little-circles.html przykład: Three Little Circles
hello.html pierwsza wrzutka
jquery-1.7.2.min.js .html(glow) does not work ?
ns.html namespace: svg
path-transition.html path transitions
static-server.js pierwsza wrzutka
stocks.csv pierwsza wrzutka
svg-viewbox-1.html SVG: viewport
svg-viewbox-2.html literówka

README.md

Notatki do slajdów z „D3 Workshop”

Będę korzystał z serwera serve (NodeJS, NPM):

npm install -g serve
cd d3-notes
serve .

Użyteczne:

Resources

Użyteczne:

SVG

D3

Blog:

Talks:

Misc

Uwagi

Zaczynamy od utworzenia elementu svg i dodania go do strony:

var svg = d3.select("body")
  .append("svg")
    .attr("width", 600)
    .attr("height", 400);

Jeśli będziemy potrzebować jakiś danych to definiujemy je teraz:

var data = [ {"x": 0, "y": 0} ];  // zawsze tablica

Po tych przygotowaniach zaczynamy dodawać różne elementy do strony:

svg.selectAll("circle")
    .data(data)
  .enter().append("circle")
    .attr("cx", data.x)
    .attr("cy", data.y)
    .attr("r", 100);

Data is Messy

This doesn’t scratch the surface of the data cleaning problem. For that, see projects such as Google Refine and Stanford’s Data Wrangler:

  • DataWrangler– an interactive tool for data cleaning and transformation
  • Google Refine – tool for working with messy data, cleaning it up, transforming it from one format into another, extending it with web services, and linking it to databases like Freebase

An example

Converting from decimal to binary + left padding with zeroes:

y = (new Array(6 - Number(5).toString(2).length)).join('0') + Number(5).toString(2)

var fillZeroes = "000000"
input = Number(5).toString(2)
fillZeroes.slice(0, input.length) + input

TL;TR

Something went wrong with that request. Please try again.