Download as PDF, PPTX
![操作は変わらない
const projection = d3.geoMercator()
.fitExtent([[0, 0], [1240, 800]], geojson)
const geoPath = d3.geoPath().projection(projection)
//path要素にデータを束縛する
const path = svg.selectAll("path").data(geojson.features)
//path要素が足りなければ追加する
const enterPath = path.enter().append("path")
//path要素が多すぎるなら削除する
const exitPath = path.exit().remove()
5 . 14](https://image.slidesharecdn.com/random-180216062901/75/Data-Visualization-meetup-2017-31-2048.jpg)
![対応策対応策
頂点の数を揃える
function geo2square(coordinates, width, height) {
var centroid = d3.polygonCentroid(coordinates)
width = (width) ? width : 0 ;
height = (height) ? height : 0 ;
var p = []
var i = 0
var length = coordinates.length
var qtr = ~~(length/4)
var nScale = d3.scaleLinear().domain([0, qtr]).range([0, w
l d3 l i d i 0 idth
6 . 13](https://image.slidesharecdn.com/random-180216062901/75/Data-Visualization-meetup-2017-48-2048.jpg)
![Data Visualizationしてみた [ D3.js編 ]](https://cdn.slidesharecdn.com/ss_thumbnails/wplt0317a-160323052825-thumbnail.jpg?width=640&height=640&fit=bounds)
Data Visualization meetup 2017
- 1. Data Visualization meetup2017 データビジュアライゼーションデータビジュアライゼーション の作り方の作り方 /Masayuki Shimizu @_shimizu
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15. 制作フロー制作フロー 1. 企画発案（記者より） 2. データ収集・分析・整形 3.デザイン案やモックを作って打ち合わせ 4. デザイン決定 5. 実装 6. 宣伝用の素材等 (SNSに流す用のグラフィックスや動画など) 4 . 2
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. Data-Driven Document var data= [{id:0, value:100}, {id:1, value:200}, {id:2, value:300 //選択した要素にデータを束縛する const div = d3.selectAll("div").data(data, (d) => d.id) //要素が足りない時は追加 const enterDiv = div.enter().append("div") //要素が多すぎる時は削除 const exitDiv = div.exit().remove() //アトリビュートの内容をアップデートする div.merge(enterDiv).attr("width", d=> d.value ) 5 . 12
- 30.
- 31. 操作は変わらない const projection =d3.geoMercator() .fitExtent([[0, 0], [1240, 800]], geojson) const geoPath = d3.geoPath().projection(projection) //path要素にデータを束縛する const path = svg.selectAll("path").data(geojson.features) //path要素が足りなければ追加する const enterPath = path.enter().append("path") //path要素が多すぎるなら削除する const exitPath = path.exit().remove() 5 . 14
- 32.
- 33. 可視化 //人口が２万人以上・以下で塗り分ける selector.attr("fill", d =>(d.properties.pop > 20000) ? "green //群馬県に所属する市区町村だけ赤く塗る selecot.filter(d => d.properties.pref === "群馬県").attr("fill" 5 . 16
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40. 対応策対応策 最初にレイヤーを作っておき、手前に出したいエレ メントをコピーして表示する <svg> <g class="axisLayer"></g> <g class="plotLayer"> <circleclass="orgin"> </g> <g class="overlay"> </g> </svg> <svg> <g class="axisLayer"></g> <g class="plotLayer"> <circle class="orgin"> </g> <g class="overlay"> <circle class="copy"> // <!-- 他 </g> </svg> 6 . 5
- 41. copy tipscopy tips 束縛されたデータもコピーしておく varplotLayer = d3.select(".plotLayer") var ovarlay = d3.select(".overlay") plotLayer .selectAll("rect") .on("mouseover", copy(overlay)) function copy(layer){ return function(){ var node = d3.select(this).node() var nodeName = node.nodeName var nodeAttr = node.attributes 6 . 6
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48. 対応策対応策 頂点の数を揃える function geo2square(coordinates, width,height) { var centroid = d3.polygonCentroid(coordinates) width = (width) ? width : 0 ; height = (height) ? height : 0 ; var p = [] var i = 0 var length = coordinates.length var qtr = ~~(length/4) var nScale = d3.scaleLinear().domain([0, qtr]).range([0, w l d3 l i d i 0 idth 6 . 13
- 49.
- 50.
- 51.
- 52. 対応策対応策 tspanで括る var textArray =["1行目、あ","2行目", d3.select("svg").append("text") .datum(textArray) .attr("transform", "translate(10 .each(leftLinebreak) function leftLinebreak(array){ d3.select(this).selectAll("t .data(array) .enter() .append("tspan") .attr("x", "0em") " " f i (d <text> <tspan x="0em" y="0em">1行目、あ</tspa <tspan x="0em" y="1em">2行目</tspan> <tspan x="0em" y="2em">3行目あああああ <tspan x="0em" y="3em">4行目あ</tspan </text> 6 . 17
- 53.
- 54. foreignObjectforeignObject SVGの中にHTMLを埋め込める。折り返しも効く。 ※ IE11未対応 <svg> <foreignObject width="200"height="200"> <html> <div style="width:100px">ああああああああああああああああああああああああ </html> </foreignObject> </svg> 6 . 19
- 55.
- 56.
- 57.
- 58. 資料資料 Visual Data ～データや映像で体感：日本経済新 聞 D3.js- Data-Driven Documents bl.ocks.org/shimizu - 今回使ったサンプルコード 7 . 2