D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
shimizu
Full window
Github gist
module test
Built with
blockbuilder.org
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <title></title> <style> html, body { width: 100%; height: 100%; padding: 0px; margin: 0px; } #chart { width: 100%; height: 100%; max-width: 1200px; max-height: 676px; min-width: 600px; min-height: 338px; } .bg { fill:white; } .bar { fill:skyblue; } .axisLayer .axis .domain { stroke: #333333; } .axisLayer .tick line { stroke: #333333; stroke-width: 1px; } .axisLayer .tick text { fill: #333333; /*font-family: Oswald, sans-serif;*/ font-size: 14px; letter-spacing: .05em; } .axisLayer .label { font-size: 12px; font-weight: normal; letter-spacing: .05em; } .backgroundLayer .grid line { stroke: #cccccc; stroke-dasharray: 3,3; } .backgroundLayer .grid .domain { stroke: none; } </style> </head> <body> <button id="update">updarte</button> <div id="chart"></div> <script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script> <script src="nChart.js"></script> <script> !(function(){ "use strict" var data = generateData() var BarChart = nChart.createVGroupBarChart() .baseMargin({top:100, left:0, bottom:100, right:0}) .plotMargin({top:20, left:100, bottom:20, right:100}) .x(function(d){ return d["年"] }) .xIn(function(d){ return d["国名"] }) .y(function(d){ return d["値"] }) var Axis = nChart.createAxis() .yAxisGridVisible(true) var selector = d3.selectAll("#chart") .datum(data) .call(BarChart) .call(Axis) d3.select("#update").on("click", function(){ selector.update(generateData()) }) }()) function generateData(){ return Array.prototype.concat.apply([], ["日本", "アメリカ", "フランス"].map(function(country){ var array = [2001,2002,2003,2004].map(function(year){ var value = ~~(Math.random() * 100) return {"国名":country, "年":year, "値":value} }) return array })) } </script> </body> </html>
https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js