Notatki do prezentacji D3 Workshop
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
getting-started-with-d3
README.md
area-chart.html
bar-chart.html
console.html
d3.v2.min.js
digital-clock-00.html
digital-clock-01.html
dot-chart.html
getterGenerator.js
hello-bar-1.html
hello-chart-css.html
hello-chart-svg-dynamic.html
hello-chart-svg-object-constancy.html
hello-chart-svg.html
hello-circle.html
hello-circles-20.html
hello-d3.html
hello-drawing-divs.html
hello-drop-shadow.html
hello-gradient.html
hello-hover.html
hello-joins.html
hello-mouse-timers.html
hello-nested-selections.html
hello-paragraphs.html
hello-rect.html
hello-svg.html
hello-three-little-circles.html
hello.html
jquery-1.7.2.min.js
ns.html
path-transition.html
static-server.js
stocks.csv
svg-viewbox-1.html
svg-viewbox-2.html

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