Notatki do slajdów z „D3 Workshop”

Mike Bostock, „D3 Workshop” (slajdy)
D3 Show Reel

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

npm install -g serve
cd d3-notes
serve .

Użyteczne:

Gabriel Florit, Live coding in D3

Resources

Użyteczne:

Epoch Converter Functions

SVG

Mozilla Developer Network SVG
- SVG Attribute reference
- SVG element reference

D3

Blog:

Talks:

Flexible transitions

Misc

Cube – system for visualizing time series data, built on MongoDB, Node and D3
bl.ocks.org – a simple viewer for code examples hosted on GitHub Gist
- Line Trasition; zob. też Path Transitions
Luke Francl, D3 for Mere Mortals
Jerome Cukier, D3 scales & color

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

wbzyl/d3-notes