Skip to content

Commit

Permalink
#1 - support for d3 v4
Browse files Browse the repository at this point in the history
  • Loading branch information
@vabarbosa
vabarbosa committed Jun 30, 2017
1 parent 5c12a5a commit 9d1762d
Show file tree
Hide file tree
Showing 13 changed files with 1,756 additions and 28 deletions.
4 changes: 3 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@
.vscode
manifest.yml
demo/d3.v3.min.js
demo/d3.v4.min.js
demo/topojson.v1.min.js
demo/index.html
demo/test.html
demo/test.js
scripts
lib
node_modules
0 demo/classic.css → demo/demo.css
View file
File renamed without changes.
8 changes: 4 additions & 4 deletions demo/simpledatavis.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@

<title>simpledatavis.js</title>

<link rel="stylesheet" type="text/css" href="classic.css">
<link rel="stylesheet" type="text/css" href="demo.css">

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>

<script type="text/javascript" src="../simpledatavis.js"></script>
<script type="text/javascript" src="../vis/simpledatavis-barchart.js"></script>
Expand All @@ -32,7 +32,7 @@
.rollup(function(l) { return d3.sum(l, function(d) { return d.value; }); })
.entries(languages);

languages.forEach(function(d) { d.value = d.values; });
// languages.forEach(function(d) { d.value = d.values; });
languages.sort(function(a, b) { return a.value < b.value });

return languages.slice(0,5);
Expand All @@ -50,7 +50,7 @@
.rollup(function(l) { return d3.sum(l, function(d) { return d.value; }); })
.entries(specialties);

specialties.forEach(function(d) { d.value = d.values; });
// specialties.forEach(function(d) { d.value = d.values; });
specialties.sort(function(a, b) { return a.value < b.value });

return specialties;
Expand Down
39 changes: 28 additions & 11 deletions simpledatavis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,17 +140,27 @@
var n = 0
var s = selection.select('.simpledatavis')
var e = s.selectAll('*')
var start = function () { n++ }
var end = function () {
this.remove()
if (--n === 0 && callback) {
s.remove()
callback()
}
}

if (!s.empty() && (!exclude || !s.classed(exclude)) && (!e.empty())) {
e.data([]).exit().transition()
var t = e.data([]).exit().transition()
.attr('opacity', 0)
.attr('width', 0)
.each('start', function () { n++ })
.each('end', function () {
this.remove()
if (--n === 0 && callback) {
s.remove()
callback()
} })

if (d3.version.split('.')[0] === '3') {
t.each('start', start)
.each('end', end)
} else {
t.on('start', start)
.on('end', end)
}
} else if (callback) {
callback()
}
Expand Down Expand Up @@ -502,10 +512,17 @@
d3.select('body')
.selectAll('.simpledatavis-tooltip')
.data(['simpledatavis-tooltip'])

if (d3.version.split('.')[0] === '3') {
tooltipselection.enter().append('div')
.attr('class', 'simpledatavis-tooltip')
} else {
tooltipselection = tooltipselection.enter().append('div')
.attr('class', 'simpledatavis-tooltip')
.merge(tooltipselection)
}

tooltipselection
.enter()
.append('div')
.attr('class', 'simpledatavis-tooltip')
.style('background-color', 'rgba(21, 41, 53, 0.9)')
.style('color', '#ffffff')
.style('font-family', 'HelvNeue,Helvetica,sans-serif')
Expand Down
163 changes: 159 additions & 4 deletions vis/simpledatavis-barchart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,14 @@
},

render: function (selection, barchartdata, options, callbacks) {
if (d3.version.split('.')[0] === '3') {
this.renderV3(selection, barchartdata, options, callbacks)
} else {
this.renderV4(selection, barchartdata, options, callbacks)
}
},

renderV3: function (selection, barchartdata, options, callbacks) {
// initTooltip()
var xScale = d3.scale.linear()
var yScale = d3.scale.linear()
Expand Down Expand Up @@ -49,14 +57,12 @@
// setup the svg element
var svg = selection.selectAll('svg').data([data])
svg.enter().append('svg')
svg.attr('width', width)
.attr('height', height)
.attr('xmlns', 'http://www.w3.org/2000/svg')
.style('color', '#264a60')
.style('fill', '#264a60')
.style('font-family', 'HelvNeue,Helvetica,sans-serif')
.style('font-size', '0.8rem')
.style('font-weight', '300')
svg.attr('width', width)
.attr('height', height)

var bars = svg.selectAll('rect.bar').data(data)

Expand Down Expand Up @@ -161,6 +167,155 @@
.attr('opacity', 1)
.text(function (d) { return '(' + d.value + ')' })

// remove old value labels
valueLabels.exit().transition()
.attr('opacity', 0)
.attr('x', 0)
.remove()
},

renderV4: function (selection, barchartdata, options, callbacks) {
var xScale = d3.scaleLinear()
var yScale = d3.scaleLinear()

var data = barchartdata ? (barchartdata.data || barchartdata) : []

var box = selection.node().getBoundingClientRect()
var width = (box.width || 1024)
var h = (box.height || 600)
var margin = { left: 100, right: 75 }

var height = Math.min(h, data.length * 50)

var cdom = data.map(function (d) { return d.key })
cdom.sort(function (a, b) { return a > b })
var color = d3.scaleOrdinal(d3.schemeCategory10).domain(cdom)

// set the ranges
xScale.range([margin.left, width - margin.left - margin.right])
yScale.range([0, height])

// scale the data
xScale.domain([0, d3.max(data, function (d) { return d.value })])
yScale.domain([0, data.length])

// setup the svg element
var svg = selection.selectAll('svg').data([data])
svg = svg.enter().append('svg')
.attr('xmlns', 'http://www.w3.org/2000/svg')
.style('font-family', 'HelvNeue,Helvetica,sans-serif')
.style('font-size', '0.8rem')
.style('font-weight', '300')
.merge(svg)
svg.attr('width', width)
.attr('height', height)

var bars = svg.selectAll('rect.bar').data(data)

// add new bars
bars = bars.enter().append('rect')
.attr('class', 'bar')
.attr('opacity', 0)
.merge(bars)

// update bars
var barstransition = typeof module === 'undefined' || !module.exports ? bars.transition() : bars

barstransition
.attr('x', xScale(0))
.attr('y', function (d, i) { return yScale(i + 0.1) })
.attr('height', function (d, i) {
return yScale(i + 0.9) - yScale(i + 0.1)
})
.attr('width', function (d) { return xScale(d.value) })
.attr('opacity', 1)
.style('fill', function (d, i) { return color(d.key) })

if (typeof module === 'undefined' || !module.exports) {
bars
.on('mouseover', function (d, i) {
SimpleDataVis.tooltip.mouseover(d, i, options)
})
.on('mousemove', SimpleDataVis.tooltip.mousemove)
.on('mouseout', SimpleDataVis.tooltip.mouseout)
}

if (options.click) {
bars
.style('cursor', 'pointer')
.on('click', function (d, i) {
d3.event.stopPropagation()
options.click(d, i)
})
}

// remove old bars
bars.exit().transition()
.attr('opacity', 0)
.attr('width', 0)
.remove()

// key labels
var keyLabels = svg.selectAll('text.barkey').data(data)

// add new key labels
keyLabels = keyLabels.enter().append('text')
.attr('class', 'barkey')
.merge(keyLabels)
.attr('opacity', 0)
.attr('dx', '-0.3em')
.attr('dy', '0.35em')
.attr('text-anchor', 'end')

if (typeof module === 'undefined' || !module.exports) {
keyLabels
.on('mouseover', function (d, i) {
SimpleDataVis.tooltip.mouseover(d, i, options)
})
.on('mousemove', SimpleDataVis.tooltip.mousemove)
.on('mouseout', SimpleDataVis.tooltip.mouseout)
}

// update key labels
var keylabelstransition = typeof module === 'undefined' || !module.exports ? keyLabels.transition() : keyLabels
keylabelstransition
.attr('x', xScale(0))
.attr('y', function (d, i) { return yScale(i + 0.5) })
.attr('opacity', 1)
.text(function (d) {
var l = margin.left / 10
if (d.key.length > l) {
return d.key.substring(0, l) + '...'
} else {
return d.key
}
})

// remove old key labels
keyLabels.exit().transition()
.attr('opacity', 0)
.attr('x', 0)
.remove()

// value labels
var valueLabels = svg.selectAll('text.barvalue').data(data)

// add new value labels
valueLabels = valueLabels.enter().append('text')
.attr('class', 'barvalue')
.merge(valueLabels)
.attr('opacity', 0)
.attr('dx', '0.3em')
.attr('dy', '0.35em')

// update value labels
var valuelabelstransition = typeof module === 'undefined' || !module.exports ? valueLabels.transition() : valueLabels
valuelabelstransition
.attr('x', function (d) { return xScale(d.value) + margin.left })
.attr('y', function (d, i) { return yScale(i + 0.5) })
.attr('opacity', 1)
.text(function (d) { return '(' + d.value + ')' })

// remove old value labels
valueLabels.exit().transition()
.attr('opacity', 0)
Expand Down
Loading

0 comments on commit 9d1762d

Please sign in to comment.