Aggregating Data

function plot_points(data){
  var nested = d3.nest()
    .key(function(d){
      return d['date'].getUTCFullYear();
    })
    .rollup(function(leaves){
      debugger;
      d3.sum(leaves)
    });
    .entries(data);
};

sketching

EDA:
-insights
-erroneous values
-structure
-yourself

Sketching:
-visual layout
-visual encodings
-others

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <style></style>
  <script type="text/javascript">
  function draw(geo_data){
    "use strict";
    var margin = 75,
      width = 1920 - 75;
      height = 1000 - margin;

    var svg = d3.select("body")
      .append("svg")
      .attr("width",width + margin)
      .attr("height", height + margin)
      .append("g")
      .attr('class', 'map');
  };
  </head>
<body>
  <script type="text/javascript">
  /*
    Use D3 (not dimple.js) to load the TSV file
    and pass the contents of it to the draw function
    */
  d3.tsv("world_cup.tsv", draw);
  </script>
</body>
</html>

dimple.js

Excel, RAW, GNIs
-> dimple.js
-> D3.js
-> canvas, WebGL, SVG

data(data), enter(), append(‘rect’)

Sketching: interactive process of designing a visualization
often not a “right” answer
do not know a priori how data will interact with aesthetic

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
    <script type="text/javascript">
      function draw(data) {
      
      /*
        D3.js setup code
      */

          "use strict";
          var margin = 75,
              width = 1400 - margin,
              height = 600 - margin;

          var svg = d3.select("body")
            .append("svg")
              .attr("width", width + margin)
              .attr("height", height + margin)
            .append('g')
                .attr('class','chart');

      /*
        Dimple.js Chart construction code
      */

          var myChart = new dimple.chart(svg, data);
          var x = myChart.addTimeAxis("x", "year"); 
          myChart.addMeasureAxis("y", "attendance");
          myChart.addSeries(null, dimple.plot.bar);
          myChart.draw();
        };
      </script>
  </head>
<body>
  <script type="text/javascript">
  /*
    Use D3 (not dimple.js) to load the TSV file
    and pass the contents of it to the draw function
    */
  d3.tsv("world_cup.tsv", draw);
  </script>
</body>
</html>

Visual Encoding Recap

Visual Encoding Recap
-noun, verb, adjectives

POS:Sentences::VisualEncoding:charts

A chart is a graphical representation of data, in which the data is represented by symbol

Such as bars in a bar chart, lines in a line chart, or slices in a pie chart.

Box plot, Small Multiple

Server Request and D3

Client-Server Model
d3js.org:80
request <-> response
AJAX
data.json

function draw(data){
	var width = 420;
		barHeight = 20;

	var x = d3.scale.linear()
		.range([0, width]);

	var chart = d3.select(".chart")
		.attr("width", width);

	x.domain([0, d3.max(data, function(d){ return d.value; })]);

	chart.attr("height", barHeight * data.length);

	var bar = chart.selectAll("g")
		.data(data)
		.enter().append("g")
			.attr("transform", function(d, i){ return "translate(0," + i * barHeight + ")"});

	bar.append("rect")
		.attr("width", function(d) { return x(d.value); })
		.attr("height", barHeight - 1);

	bar.append("text")
		.attr("x", function(d) { return x(d.value) - 3;})
		.attr("y", barHeight / 2)
		.attr("dy", ".35em")
		.text(function(d) { return d.value: }):
}

Changing the Title

d3.selectAll(‘h1’)
-> Array[2]

d3.select(‘.main-title’).text(‘Gapminder World: China’);
d3.select(‘.navbar-brand.logo’);

d3.select(‘#header-log img’).attr(‘alt’, ‘logo’);

d3.select(‘#header-logo img’).attr(‘src’,’./assets/***.white.png’);
d3.select(‘.main’).html(null);

.domain([15, 90])
.range([250 0])
y = mx + b
d3.scale.linear().domain([15, 90]).range([250, 0]);

var x = d3.scale.log().domain([250, 100000]).range([0, 600]);
var r = d3.scale.sqrt().domain([52070, 1380000000]).range([10, 50]);

mdn svg element
https://developer.mozilla.org/ja/docs/Web/SVG/Element

svg.append(‘circle’).attr(‘fill’,’red’).attr(‘r’,r(13800000000)).attr(‘cx’, x(13330)).attr(‘cy’,y(77));

Document Selectors

document
#document​​…​​​…​​​
window
Window {stop: function, open: function, alert: function, confirm: function, prompt: function…}GoogleAnalyticsObject: “ga”alert: function alert()anchor: _tapplicationCache: ApplicationCacheatob: function atob()blur: function ()btoa: function btoa()caches: CacheStoragecancelAnimationFrame: function cancelAnimationFrame()cancelIdleCallback: function cancelIdleCallback()canvas: _tcaptureEvents: function captureEvents()chrome: ObjectclearInterval: function clearInterval()clearTimeout: function clearTimeout()clientInformation: Navigatorclose: function ()closed: falseconfirm: function confirm()console: Objectcontext: CanvasRenderingContext2DcreateImageBitmap: function createImageBitmap()crypto: CryptocurrentFocus: Array(2)customElements: CustomElementRegistryd3: Objectdata: Array(100)deep: _tdefaultStatus: “”defaultstatus: “”depth: 4desiredFocus: Array(2)devicePixelRatio: 3document: documentdrawImage: function drawImage(d)external: Externalfetch: function fetch()find: function find()focus: function ()frameElement: nullframes: Windowga: function (a)gaData: ObjectgaGlobal: Objectgaplugins: ObjectgetComputedStyle: function getComputedStyle()getMatchedCSSRules: function getMatchedCSSRules()getSelection: function getSelection()graphic: _theight: 460hexbin: function u(n)history: Historyhljs: Objectidle: trueimage: imgimageHeight: 152imageWidth: 132indexedDB: IDBFactoryinnerHeight: 1849innerWidth: 1040isSecureContext: truelength: 0localStorage: Storagelocation: Locationlocationbar: BarPropmatchMedia: function matchMedia()menubar: BarPropmesh: _tmousemoved: function mousemoved()moveBy: function moveBy()moveTo: function moveTo()moved: function moved()name: “”navigator: Navigatoronabort: nullonanimationend: nullonanimationiteration: nullonanimationstart: nullonauxclick: nullonbeforeunload: nullonblur: nulloncancel: nulloncanplay: nulloncanplaythrough: nullonchange: nullonclick: nullonclose: nulloncontextmenu: nulloncuechange: nullondblclick: nullondevicemotion: nullondeviceorientation: nullondeviceorientationabsolute: nullondrag: nullondragend: nullondragenter: nullondragleave: nullondragover: nullondragstart: nullondrop: nullondurationchange: nullonemptied: nullonended: nullonerror: nullonfocus: nullongotpointercapture: nullonhashchange: nulloninput: nulloninvalid: nullonkeydown: nullonkeypress: nullonkeyup: nullonlanguagechange: nullonload: nullonloadeddata: nullonloadedmetadata: nullonloadstart: nullonlostpointercapture: nullonmessage: nullonmousedown: nullonmouseenter: nullonmouseleave: nullonmousemove: nullonmouseout: nullonmouseover: nullonmouseup: nullonmousewheel: nullonoffline: nullononline: nullonpagehide: nullonpageshow: nullonpause: nullonplay: nullonplaying: nullonpointercancel: nullonpointerdown: nullonpointerenter: nullonpointerleave: nullonpointermove: nullonpointerout: nullonpointerover: nullonpointerup: nullonpopstate: nullonprogress: nullonratechange: nullonrejectionhandled: nullonreset: nullonresize: nullonscroll: nullonsearch: nullonseeked: nullonseeking: nullonselect: nullonshow: nullonstalled: nullonstorage: nullonsubmit: nullonsuspend: nullontimeupdate: nullontoggle: nullontransitionend: nullonunhandledrejection: nullonunload: nullonvolumechange: nullonwaiting: nullonwebkitanimationend: nullonwebkitanimationiteration: nullonwebkitanimationstart: nullonwebkittransitionend: nullonwheel: nullopen: function open()openDatabase: function openDatabase()opener: nullouterHeight: 736outerWidth: 414pageXOffset: 0pageYOffset: 0parent: Windowperformance: Performancepersonalbar: BarProppostMessage: function ()print: function print()prompt: function prompt()radius: 75releaseEvents: function releaseEvents()requestAnimationFrame: function requestAnimationFrame()requestIdleCallback: function requestIdleCallback()resizeBy: function resizeBy()resizeTo: function resizeTo()resized: function resized()say_hello: function say_hello()screen: ScreenscreenLeft: 0screenTop: 0screenX: 0screenY: 0scroll: function scroll()scrollBy: function scrollBy()scrollTo: function scrollTo()scrollX: 0scrollY: 0scrollbars: BarPropself: WindowsessionStorage: StoragesetInterval: function setInterval()setTimeout: function setTimeout()speechSynthesis: SpeechSynthesisstatus: “”statusbar: BarPropstop: function stop()style: CSSStyleDeclarationstyleMedia: StyleMediasvg: _ttoolbar: BarProptop: Windowtransform: “-webkit-transform”webkitCancelAnimationFrame: function webkitCancelAnimationFrame()webkitRequestAnimationFrame: function webkitRequestAnimationFrame()webkitRequestFileSystem: function webkitRequestFileSystem()webkitResolveLocalFileSystemURL: function webkitResolveLocalFileSystemURL()webkitStorageInfo: DeprecatedStorageInfowindow: Window__on: Array(1)Infinity: InfinityAnalyserNode: function AnalyserNode()AnimationEvent: function AnimationEvent()AppBannerPromptResult: function AppBannerPromptResult()ApplicationCache: function ApplicationCache()ApplicationCacheErrorEvent: function ApplicationCacheErrorEvent()Array: function Array()ArrayBuffer: function ArrayBuffer()Attr: function Attr()Audio: function HTMLAudioElement()AudioBuffer: function AudioBuffer()AudioBufferSourceNode: function AudioBufferSourceNode()AudioContext: function AudioContext()AudioDestinationNode: function AudioDestinationNode()AudioListener: function AudioListener()AudioNode: function AudioNode()AudioParam: function AudioParam()AudioProcessingEvent: function AudioProcessingEvent()AudioScheduledSourceNode: function AudioScheduledSourceNode()BarProp: function BarProp()BaseAudioContext: function BaseAudioContext()BatteryManager: function BatteryManager()BeforeInstallPromptEvent: function BeforeInstallPromptEvent()BeforeUnloadEvent: function BeforeUnloadEvent()BiquadFilterNode: function BiquadFilterNode()Blob: function Blob()BlobEvent: function BlobEvent()Boolean: function Boolean()BroadcastChannel: function BroadcastChannel()ByteLengthQueuingStrategy: function ByteLengthQueuingStrategy()CDATASection: function CDATASection()CSS: function CSS()CSSConditionRule: function CSSConditionRule()CSSFontFaceRule: function CSSFontFaceRule()CSSGroupingRule: function CSSGroupingRule()CSSImportRule: function CSSImportRule()CSSKeyframeRule: function CSSKeyframeRule()CSSKeyframesRule: function CSSKeyframesRule()CSSMediaRule: function CSSMediaRule()CSSNamespaceRule: function CSSNamespaceRule()CSSPageRule: function CSSPageRule()CSSRule: function CSSRule()CSSRuleList: function CSSRuleList()CSSStyleDeclaration: function CSSStyleDeclaration()CSSStyleRule: function CSSStyleRule()CSSStyleSheet: function CSSStyleSheet()CSSSupportsRule: function CSSSupportsRule()CSSViewportRule: function CSSViewportRule()Cache: function Cache()CacheStorage: function CacheStorage()CanvasCaptureMediaStreamTrack: function CanvasCaptureMediaStreamTrack()CanvasGradient: function CanvasGradient()CanvasPattern: function CanvasPattern()CanvasRenderingContext2D: function CanvasRenderingContext2D()ChannelMergerNode: function ChannelMergerNode()ChannelSplitterNode: function ChannelSplitterNode()CharacterData: function CharacterData()ClientRect: function ClientRect()ClientRectList: function ClientRectList()ClipboardEvent: function ClipboardEvent()CloseEvent: function CloseEvent()Comment: function Comment()CompositionEvent: function CompositionEvent()ConstantSourceNode: function ConstantSourceNode()ConvolverNode: function ConvolverNode()CountQueuingStrategy: function CountQueuingStrategy()Credential: function Credential()CredentialsContainer: function CredentialsContainer()Crypto: function Crypto()CryptoKey: function CryptoKey()CustomElementRegistry: function CustomElementRegistry()CustomEvent: function CustomEvent()DOMError: function DOMError()DOMException: function DOMException()DOMImplementation: function DOMImplementation()DOMParser: function DOMParser()DOMStringList: function DOMStringList()DOMStringMap: function DOMStringMap()DOMTokenList: function DOMTokenList()DataTransfer: function DataTransfer()DataTransferItem: function DataTransferItem()DataTransferItemList: function DataTransferItemList()DataView: function DataView()Date: function Date()DelayNode: function DelayNode()DeviceMotionEvent: function DeviceMotionEvent()DeviceOrientationEvent: function DeviceOrientationEvent()Document: function Document()DocumentFragment: function DocumentFragment()DocumentType: function DocumentType()DragEvent: function DragEvent()DynamicsCompressorNode: function DynamicsCompressorNode()Element: function Element()Error: function Error()ErrorEvent: function ErrorEvent()EvalError: function EvalError()Event: function Event()EventSource: function EventSource()EventTarget: function EventTarget()FederatedCredential: function FederatedCredential()File: function File()FileList: function FileList()FileReader: function FileReader()Float32Array: function Float32Array()Float64Array: function Float64Array()FocusEvent: function FocusEvent()FontFace: function FontFace()FontFaceSetLoadEvent: function FontFaceSetLoadEvent()FormData: function FormData()Function: function Function()GainNode: function GainNode()Gamepad: function Gamepad()GamepadButton: function GamepadButton()GamepadEvent: function GamepadEvent()HTMLAllCollection: function HTMLAllCollection()HTMLAnchorElement: function HTMLAnchorElement()HTMLAreaElement: function HTMLAreaElement()HTMLAudioElement: function HTMLAudioElement()HTMLBRElement: function HTMLBRElement()HTMLBaseElement: function HTMLBaseElement()HTMLBodyElement: function HTMLBodyElement()HTMLButtonElement: function HTMLButtonElement()HTMLCanvasElement: function HTMLCanvasElement()HTMLCollection: function HTMLCollection()HTMLContentElement: function HTMLContentElement()HTMLDListElement: function HTMLDListElement()HTMLDataListElement: function HTMLDataListElement()HTMLDetailsElement: function HTMLDetailsElement()HTMLDialogElement: function HTMLDialogElement()HTMLDirectoryElement: function HTMLDirectoryElement()HTMLDivElement: function HTMLDivElement()HTMLDocument: function HTMLDocument()HTMLElement: function HTMLElement()HTMLEmbedElement: function HTMLEmbedElement()HTMLFieldSetElement: function HTMLFieldSetElement()HTMLFontElement: function HTMLFontElement()HTMLFormControlsCollection: function HTMLFormControlsCollection()HTMLFormElement: function HTMLFormElement()HTMLFrameElement: function HTMLFrameElement()HTMLFrameSetElement: function HTMLFrameSetElement()HTMLHRElement: function HTMLHRElement()HTMLHeadElement: function HTMLHeadElement()HTMLHeadingElement: function HTMLHeadingElement()HTMLHtmlElement: function HTMLHtmlElement()HTMLIFrameElement: function HTMLIFrameElement()HTMLImageElement: function HTMLImageElement()HTMLInputElement: function HTMLInputElement()HTMLLIElement: function HTMLLIElement()HTMLLabelElement: function HTMLLabelElement()HTMLLegendElement: function HTMLLegendElement()HTMLLinkElement: function HTMLLinkElement()HTMLMapElement: function HTMLMapElement()HTMLMarqueeElement: function HTMLMarqueeElement()HTMLMediaElement: function HTMLMediaElement()HTMLMenuElement: function HTMLMenuElement()HTMLMetaElement: function HTMLMetaElement()HTMLMeterElement: function HTMLMeterElement()HTMLModElement: function HTMLModElement()HTMLOListElement: function HTMLOListElement()HTMLObjectElement: function HTMLObjectElement()HTMLOptGroupElement: function HTMLOptGroupElement()HTMLOptionElement: function HTMLOptionElement()HTMLOptionsCollection: function HTMLOptionsCollection()HTMLOutputElement: function HTMLOutputElement()HTMLParagraphElement: function HTMLParagraphElement()HTMLParamElement: function HTMLParamElement()HTMLPictureElement: function HTMLPictureElement()HTMLPreElement: function HTMLPreElement()HTMLProgressElement: function HTMLProgressElement()HTMLQuoteElement: function HTMLQuoteElement()HTMLScriptElement: function HTMLScriptElement()HTMLSelectElement: function HTMLSelectElement()HTMLShadowElement: function HTMLShadowElement()HTMLSlotElement: function HTMLSlotElement()HTMLSourceElement: function HTMLSourceElement()HTMLSpanElement: function HTMLSpanElement()HTMLStyleElement: function HTMLStyleElement()HTMLTableCaptionElement: function HTMLTableCaptionElement()HTMLTableCellElement: function HTMLTableCellElement()HTMLTableColElement: function HTMLTableColElement()HTMLTableElement: function HTMLTableElement()HTMLTableRowElement: function HTMLTableRowElement()HTMLTableSectionElement: function HTMLTableSectionElement()HTMLTemplateElement: function HTMLTemplateElement()HTMLTextAreaElement: function HTMLTextAreaElement()HTMLTitleElement: function HTMLTitleElement()HTMLTrackElement: function HTMLTrackElement()HTMLUListElement: function HTMLUListElement()HTMLUnknownElement: function HTMLUnknownElement()HTMLVideoElement: function HTMLVideoElement()HashChangeEvent: function HashChangeEvent()Headers: function Headers()History: function History()IDBCursor: function IDBCursor()IDBCursorWithValue: function IDBCursorWithValue()IDBDatabase: function IDBDatabase()IDBFactory: function IDBFactory()IDBIndex: function IDBIndex()IDBKeyRange: function IDBKeyRange()IDBObjectStore: function IDBObjectStore()IDBOpenDBRequest: function IDBOpenDBRequest()IDBRequest: function IDBRequest()IDBTransaction: function IDBTransaction()IDBVersionChangeEvent: function IDBVersionChangeEvent()IIRFilterNode: function IIRFilterNode()IdleDeadline: function IdleDeadline()Image: function HTMLImageElement()ImageBitmap: function ImageBitmap()ImageBitmapRenderingContext: function ImageBitmapRenderingContext()ImageData: function ImageData()InputDeviceCapabilities: function InputDeviceCapabilities()Int8Array: function Int8Array()Int16Array: function Int16Array()Int32Array: function Int32Array()IntersectionObserver: function IntersectionObserver()IntersectionObserverEntry: function IntersectionObserverEntry()Intl: IntlJSON: JSONKeyboardEvent: function KeyboardEvent()Location: function Location()MIDIAccess: function MIDIAccess()MIDIConnectionEvent: function MIDIConnectionEvent()MIDIInput: function MIDIInput()MIDIInputMap: function MIDIInputMap()MIDIMessageEvent: function MIDIMessageEvent()MIDIOutput: function MIDIOutput()MIDIOutputMap: function MIDIOutputMap()MIDIPort: function MIDIPort()Map: function Map()Math: MathMediaDeviceInfo: function MediaDeviceInfo()MediaDevices: function MediaDevices()MediaElementAudioSourceNode: function MediaElementAudioSourceNode()MediaEncryptedEvent: function MediaEncryptedEvent()MediaError: function MediaError()MediaKeyMessageEvent: function MediaKeyMessageEvent()MediaKeySession: function MediaKeySession()MediaKeyStatusMap: function MediaKeyStatusMap()MediaKeySystemAccess: function MediaKeySystemAccess()MediaKeys: function MediaKeys()MediaList: function MediaList()MediaQueryList: function MediaQueryList()MediaQueryListEvent: function MediaQueryListEvent()MediaRecorder: function MediaRecorder()MediaSource: function MediaSource()MediaStream: function MediaStream()MediaStreamAudioDestinationNode: function MediaStreamAudioDestinationNode()MediaStreamAudioSourceNode: function MediaStreamAudioSourceNode()MediaStreamEvent: function MediaStreamEvent()MediaStreamTrack: function MediaStreamTrack()MediaStreamTrackEvent: function MediaStreamTrackEvent()MessageChannel: function MessageChannel()MessageEvent: function MessageEvent()MessagePort: function MessagePort()MimeType: function MimeType()MimeTypeArray: function MimeTypeArray()MouseEvent: function MouseEvent()MutationEvent: function MutationEvent()MutationObserver: function MutationObserver()MutationRecord: function MutationRecord()NaN: NaNNamedNodeMap: function NamedNodeMap()Navigator: function Navigator()Node: function Node()NodeFilter: function NodeFilter()NodeIterator: function NodeIterator()NodeList: function NodeList()Notification: function Notification()Number: function Number()Object: function Object()OfflineAudioCompletionEvent: function OfflineAudioCompletionEvent()OfflineAudioContext: function OfflineAudioContext()Option: function HTMLOptionElement()OscillatorNode: function OscillatorNode()PageTransitionEvent: function PageTransitionEvent()PannerNode: function PannerNode()PasswordCredential: function PasswordCredential()Path2D: function Path2D()Performance: function Performance()PerformanceEntry: function PerformanceEntry()PerformanceLongTaskTiming: function PerformanceLongTaskTiming()PerformanceMark: function PerformanceMark()PerformanceMeasure: function PerformanceMeasure()PerformanceNavigation: function PerformanceNavigation()PerformanceNavigationTiming: function PerformanceNavigationTiming()PerformanceObserver: function PerformanceObserver()PerformanceObserverEntryList: function PerformanceObserverEntryList()PerformanceResourceTiming: function PerformanceResourceTiming()PerformanceTiming: function PerformanceTiming()PeriodicWave: function PeriodicWave()PermissionStatus: function PermissionStatus()Permissions: function Permissions()Plugin: function Plugin()PluginArray: function PluginArray()PointerEvent: function PointerEvent()PopStateEvent: function PopStateEvent()Presentation: function Presentation()PresentationAvailability: function PresentationAvailability()PresentationConnection: function PresentationConnection()PresentationConnectionAvailableEvent: function PresentationConnectionAvailableEvent()PresentationConnectionCloseEvent: function PresentationConnectionCloseEvent()PresentationRequest: function PresentationRequest()ProcessingInstruction: function ProcessingInstruction()ProgressEvent: function ProgressEvent()Promise: function Promise()PromiseRejectionEvent: function PromiseRejectionEvent()Proxy: function Proxy()PushManager: function PushManager()PushSubscription: function PushSubscription()PushSubscriptionOptions: function PushSubscriptionOptions()RTCCertificate: function RTCCertificate()RTCDataChannel: function RTCDataChannel()RTCDataChannelEvent: function RTCDataChannelEvent()RTCIceCandidate: function RTCIceCandidate()RTCPeerConnection: function RTCPeerConnection()RTCPeerConnectionIceEvent: function RTCPeerConnectionIceEvent()RTCSessionDescription: function RTCSessionDescription()RTCStatsReport: function RTCStatsReport()RadioNodeList: function RadioNodeList()Range: function Range()RangeError: function RangeError()ReadableStream: function ReadableStream()ReferenceError: function ReferenceError()Reflect: ObjectRegExp: function RegExp()RemotePlayback: function RemotePlayback()Request: function Request()Response: function Response()SVGAElement: function SVGAElement()SVGAngle: function SVGAngle()SVGAnimateElement: function SVGAnimateElement()SVGAnimateMotionElement: function SVGAnimateMotionElement()SVGAnimateTransformElement: function SVGAnimateTransformElement()SVGAnimatedAngle: function SVGAnimatedAngle()SVGAnimatedBoolean: function SVGAnimatedBoolean()SVGAnimatedEnumeration: function SVGAnimatedEnumeration()SVGAnimatedInteger: function SVGAnimatedInteger()SVGAnimatedLength: function SVGAnimatedLength()SVGAnimatedLengthList: function SVGAnimatedLengthList()SVGAnimatedNumber: function SVGAnimatedNumber()SVGAnimatedNumberList: function SVGAnimatedNumberList()SVGAnimatedPreserveAspectRatio: function SVGAnimatedPreserveAspectRatio()SVGAnimatedRect: function SVGAnimatedRect()SVGAnimatedString: function SVGAnimatedString()SVGAnimatedTransformList: function SVGAnimatedTransformList()SVGAnimationElement: function SVGAnimationElement()SVGCircleElement: function SVGCircleElement()SVGClipPathElement: function SVGClipPathElement()SVGComponentTransferFunctionElement: function SVGComponentTransferFunctionElement()SVGDefsElement: function SVGDefsElement()SVGDescElement: function SVGDescElement()SVGDiscardElement: function SVGDiscardElement()SVGElement: function SVGElement()SVGEllipseElement: function SVGEllipseElement()SVGFEBlendElement: function SVGFEBlendElement()SVGFEColorMatrixElement: function SVGFEColorMatrixElement()SVGFEComponentTransferElement: function SVGFEComponentTransferElement()SVGFECompositeElement: function SVGFECompositeElement()SVGFEConvolveMatrixElement: function SVGFEConvolveMatrixElement()SVGFEDiffuseLightingElement: function SVGFEDiffuseLightingElement()SVGFEDisplacementMapElement: function SVGFEDisplacementMapElement()SVGFEDistantLightElement: function SVGFEDistantLightElement()SVGFEDropShadowElement: function SVGFEDropShadowElement()SVGFEFloodElement: function SVGFEFloodElement()SVGFEFuncAElement: function SVGFEFuncAElement()SVGFEFuncBElement: function SVGFEFuncBElement()SVGFEFuncGElement: function SVGFEFuncGElement()SVGFEFuncRElement: function SVGFEFuncRElement()SVGFEGaussianBlurElement: function SVGFEGaussianBlurElement()SVGFEImageElement: function SVGFEImageElement()SVGFEMergeElement: function SVGFEMergeElement()SVGFEMergeNodeElement: function SVGFEMergeNodeElement()SVGFEMorphologyElement: function SVGFEMorphologyElement()SVGFEOffsetElement: function SVGFEOffsetElement()SVGFEPointLightElement: function SVGFEPointLightElement()SVGFESpecularLightingElement: function SVGFESpecularLightingElement()SVGFESpotLightElement: function SVGFESpotLightElement()SVGFETileElement: function SVGFETileElement()SVGFETurbulenceElement: function SVGFETurbulenceElement()SVGFilterElement: function SVGFilterElement()SVGForeignObjectElement: function SVGForeignObjectElement()SVGGElement: function SVGGElement()SVGGeometryElement: function SVGGeometryElement()SVGGradientElement: function SVGGradientElement()SVGGraphicsElement: function SVGGraphicsElement()SVGImageElement: function SVGImageElement()SVGLength: function SVGLength()SVGLengthList: function SVGLengthList()SVGLineElement: function SVGLineElement()SVGLinearGradientElement: function SVGLinearGradientElement()SVGMPathElement: function SVGMPathElement()SVGMarkerElement: function SVGMarkerElement()SVGMaskElement: function SVGMaskElement()SVGMatrix: function SVGMatrix()SVGMetadataElement: function SVGMetadataElement()SVGNumber: function SVGNumber()SVGNumberList: function SVGNumberList()SVGPathElement: function SVGPathElement()SVGPatternElement: function SVGPatternElement()SVGPoint: function SVGPoint()SVGPointList: function SVGPointList()SVGPolygonElement: function SVGPolygonElement()SVGPolylineElement: function SVGPolylineElement()SVGPreserveAspectRatio: function SVGPreserveAspectRatio()SVGRadialGradientElement: function SVGRadialGradientElement()SVGRect: function SVGRect()SVGRectElement: function SVGRectElement()SVGSVGElement: function SVGSVGElement()SVGScriptElement: function SVGScriptElement()SVGSetElement: function SVGSetElement()SVGStopElement: function SVGStopElement()SVGStringList: function SVGStringList()SVGStyleElement: function SVGStyleElement()SVGSwitchElement: function SVGSwitchElement()SVGSymbolElement: function SVGSymbolElement()SVGTSpanElement: function SVGTSpanElement()SVGTextContentElement: function SVGTextContentElement()SVGTextElement: function SVGTextElement()SVGTextPathElement: function SVGTextPathElement()SVGTextPositioningElement: function SVGTextPositioningElement()SVGTitleElement: function SVGTitleElement()SVGTransform: function SVGTransform()SVGTransformList: function SVGTransformList()SVGUnitTypes: function SVGUnitTypes()SVGUseElement: function SVGUseElement()SVGViewElement: function SVGViewElement()Screen: function Screen()ScreenOrientation: function ScreenOrientation()ScriptProcessorNode: function ScriptProcessorNode()SecurityPolicyViolationEvent: function SecurityPolicyViolationEvent()Selection: function Selection()ServiceWorker: function ServiceWorker()ServiceWorkerContainer: function ServiceWorkerContainer()ServiceWorkerRegistration: function ServiceWorkerRegistration()Set: function Set()ShadowRoot: function ShadowRoot()SharedWorker: function SharedWorker()SiteBoundCredential: function SiteBoundCredential()SourceBuffer: function SourceBuffer()SourceBufferList: function SourceBufferList()SpeechSynthesisEvent: function SpeechSynthesisEvent()SpeechSynthesisUtterance: function SpeechSynthesisUtterance()StereoPannerNode: function StereoPannerNode()Storage: function Storage()StorageEvent: function StorageEvent()StorageManager: function StorageManager()String: function String()StyleSheet: function StyleSheet()StyleSheetList: function StyleSheetList()SubtleCrypto: function SubtleCrypto()Symbol: function Symbol()SyncManager: function SyncManager()SyntaxError: function SyntaxError()TaskAttributionTiming: function TaskAttributionTiming()Text: function Text()TextDecoder: function TextDecoder()TextEncoder: function TextEncoder()TextEvent: function TextEvent()TextMetrics: function TextMetrics()TextTrack: function TextTrack()TextTrackCue: function TextTrackCue()TextTrackCueList: function TextTrackCueList()TextTrackList: function TextTrackList()TimeRanges: function TimeRanges()Touch: function Touch()TouchEvent: function TouchEvent()TouchList: function TouchList()TrackEvent: function TrackEvent()TransitionEvent: function TransitionEvent()TreeWalker: function TreeWalker()TypeError: function TypeError()UIEvent: function UIEvent()URIError: function URIError()URL: function URL()URLSearchParams: function URLSearchParams()Uint8Array: function Uint8Array()Uint8ClampedArray: function Uint8ClampedArray()Uint16Array: function Uint16Array()Uint32Array: function Uint32Array()VTTCue: function VTTCue()ValidityState: function ValidityState()WaveShaperNode: function WaveShaperNode()WeakMap: function WeakMap()WeakSet: function WeakSet()WebAssembly: WebAssemblyWebGL2RenderingContext: function WebGL2RenderingContext()WebGLActiveInfo: function WebGLActiveInfo()WebGLBuffer: function WebGLBuffer()WebGLContextEvent: function WebGLContextEvent()WebGLFramebuffer: function WebGLFramebuffer()WebGLProgram: function WebGLProgram()WebGLQuery: function WebGLQuery()WebGLRenderbuffer: function WebGLRenderbuffer()WebGLRenderingContext: function WebGLRenderingContext()WebGLSampler: function WebGLSampler()WebGLShader: function WebGLShader()WebGLShaderPrecisionFormat: function WebGLShaderPrecisionFormat()WebGLSync: function WebGLSync()WebGLTexture: function WebGLTexture()WebGLTransformFeedback: function WebGLTransformFeedback()WebGLUniformLocation: function WebGLUniformLocation()WebGLVertexArrayObject: function WebGLVertexArrayObject()WebKitAnimationEvent: function AnimationEvent()WebKitCSSMatrix: function WebKitCSSMatrix()WebKitMutationObserver: function MutationObserver()WebKitTransitionEvent: function TransitionEvent()WebSocket: function WebSocket()WheelEvent: function WheelEvent()Window: function Window()Worker: function Worker()XMLDocument: function XMLDocument()XMLHttpRequest: function XMLHttpRequest()XMLHttpRequestEventTarget: function XMLHttpRequestEventTarget()XMLHttpRequestUpload: function XMLHttpRequestUpload()XMLSerializer: function XMLSerializer()XPathEvaluator: function XPathEvaluator()XPathExpression: function XPathExpression()XPathResult: function XPathResult()XSLTProcessor: function XSLTProcessor()decodeURI: function decodeURI()decodeURIComponent: function decodeURIComponent()encodeURI: function encodeURI()encodeURIComponent: function encodeURIComponent()escape: function escape()eval: function eval()event: undefinedisFinite: function isFinite()isNaN: function isNaN()offscreenBuffering: trueparseFloat: function parseFloat()parseInt: function parseInt()undefined: undefinedunescape: function unescape()webkitMediaStream: function MediaStream()webkitRTCPeerConnection: function RTCPeerConnection()webkitSpeechGrammar: function SpeechGrammar()webkitSpeechGrammarList: function SpeechGrammarList()webkitSpeechRecognition: function SpeechRecognition()webkitSpeechRecognitionError: function SpeechRecognitionError()webkitSpeechRecognitionEvent: function SpeechRecognitionEvent()webkitURL: function URL()__proto__: Window

D3 leverage?

core tochnology
css, html, javascript, svg

data driven documents

Arrays(d3-array)

var data = [
	{name: "Alice", value: 2},
	{name: "Bob", value: 3},
	{name: "Carol", value: 1},
	{name: "Dwayne", value: 5},
];

d3: html, css, javascript, svg

5+7;
12
function say_hello(){
    return "Hello World!";
}
undefined
say_hello
function say_hello(){
    return "Hello World!";
}
say_hello();
"Hello World!"

3d.jsで遊ぼう

appendとremove

<script src="https://d3js.org/d3.v4.min.js"></script>
      <script>
          d3.select("body").append("p").text("hello 4").remove();
      </script>

値の代入

          var dataset = [12, 24, 36];
          var p = d3.select("body").selectAll("p");

          p.data(dataset).text(function(d, i){
              return i + 1 + "番目は" + d + "です!";
          });

update, enter

          var dataset = [12, 24, 36, 48];
          var p = d3.select("body").selectAll("p");

          var update = p.data(dataset);
          var enter = update.enter();

          update.text(function(d){
              return "update: " + d;
          });

          enter.append("p").text(function(d){
            return "enter:" + d;
          });

棒グラフ

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
      <script>
         var dataset = [11, 25, 45, 30, 33];

         var w = 500;
         var h = 200;

         var svg = d3.select("body").append("svg").attr({width:w, height:h});

         svg.selectAll("rect")
         .data(dataset)
         .enter()
         .append("rect")
         .attr({
          x:0,
          y: function(d, i){ return i * 25; },
          width: function(d){ return d;},
          height: 20,
          fill: "red"
         });

      </script>

%e7%84%a1%e9%a1%8c

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>D3.js</title>
    <style>
        .axis path, .axis line{
          fill: none;
          stroke: black;
        }
        .axis text {
          font-size: 11px;
        }
    </style>
  </head>
  <body>
      <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
      <script>
         var dataset = [11, 25, 45, 30, 33];

         var w = 500;
         var h = 200;
         var padding = 20;

         var xScale = d3.scale.linear()
            .domain([0, d3.max(dataset)])
            .range([padding, w - padding])
            .nice();

         var svg = d3.select("body").append("svg").attr({width:w, height:h});

         var xAxis = d3.svg.axis()
            .scale(xScale)
            .orient("bottom");

          svg.append("g")
              .attr({
                class: "axis",
                transform: "translate(0, 180)"
              })
              .call(xAxis);

         svg.selectAll("rect")
         .data(dataset)
         .enter()
         .append("rect")
         .attr({
          x:padding,
          y: function(d, i){ return i * 25; },
          width: function(d){ return xScale(d) - padding;},
          height: 20,
          fill: "red"
         });

      </script>
  </body>
</html>