D3 bar chart experiment

Developer
Matthias Dittgen
Size
2,838 Kb
Views
38,456
  1. D3 bar chart experiment Previews
  2. D3 bar chart experiment HTML Codes
  3. D3 bar chart experiment CSS Codes
  4. D3 bar chart experiment JS Codes

How do I make an d3 bar chart experiment?

Making my hands dirty with some d3js stuff, creating a simple bar chart using HTML DOM elements and transition between two data sets.. What is a d3 bar chart experiment? How do you make a d3 bar chart experiment? This script and codes were developed by Matthias Dittgen on 26 August 2022, Friday.

D3 bar chart experiment Previews
IQ Test

D3 bar chart experiment - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>d3 bar chart experiment</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button>update</button>
<div id="vis"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.7/d3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

D3 bar chart experiment - Script Codes CSS Codes

body { padding: 20px; background-color: #f0f0f0;
}
button { margin-bottom: 20px;
}
#vis .bar { padding: 3px; margin: 1px; position: relative; background-color: #ccc; color: #fff; font-family: Helvetica, Arial, sans-serif; text-align: right;
}
#vis .bar i { position: absolute; top: 2px; left: 2px; font-style: normal; font-size: 10px;
}

D3 bar chart experiment - Script Codes JS Codes

var bars;
var maxWidth = 500;
var maxFontSize = 60;
var px = function(i) { return i+"px"; };
var mult = function(a, b) { return a*b; };
var data1 = [ {id: 1, value: 15}, {id: 2, value: 2}, {id: 4, value: 12}, {id: 5, value: 20}, {id: 7, value: 11}, {id: 8, value: 10}];
var data2 = [ {id: 1, value: 15}, {id: 2, value: 11}, {id: 3, value: 5}, {id: 4, value: 19}, {id: 5, value: 18}, {id: 6, value: 3}, {id: 7, value: 11}];
var dataMax = d3.max(d3.merge([data1, data2]), function (d) { return d.value; });
var ls = d3.scale.linear().domain([0, dataMax]);
var lsC = d3.scale.linear().domain([0, dataMax]).range(['#9cf', '#369']);
var lsWidth = function (d, i) { return px(mult(maxWidth, ls(d.value))); };
var lsFontSize = function (d, i) { return px(mult(maxFontSize, ls(d.value))); };
var lsColor = function (d, i) { return lsC(d.value); };
var d3Update = function (data) { bars = d3.select('#vis') .selectAll('.bar') .data(data, function (d, i) { return d.id; }); bars.enter().append('div') .classed({'bar': true}) .style('width', "0") .each(function (d, i) { d3.select(this).append('b').text(d.value); d3.select(this).append('i').text(d.id); }); d3.select('#vis') .selectAll('.bar') .sort(function (d1, d2) { console.log(d1,d2); if (d1.id < d2.id) return -1; if (d1.id > d2.id) return +1; return 0; }); bars.transition().duration(500) .style('width', lsWidth) .style('font-size', lsFontSize) .style('background-color', lsColor) .select('b') .text(function(d, i) { return d.value; }); bars.exit().transition().duration(500) .style('width', function(d) { return "0px"; }) .remove();
}
d3Update(data1);
var i = 0;
d3.select('button').on('click', function () { i++; d3Update(i%2==0?data1:data2);
});
D3 bar chart experiment - Script Codes
D3 bar chart experiment - Script Codes
Home Page Home
Developer Matthias Dittgen
Username matths
Uploaded August 26, 2022
Rating 3
Size 2,838 Kb
Views 38,456
Do you need developer help for D3 bar chart experiment?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matthias Dittgen (matths) Script Codes
Name
Animating non-CSS property
Beautiful canvas stars
Timebox
Smooth font animation
Additive color mix with triangles
Centering something
WIP
D3 pie chart experiment
SVG Button
Draw a line coord
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!