Skip to content

Instantly share code, notes, and snippets.

@Max-Makhrov

Max-Makhrov/.block

Last active June 25, 2019 14:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Max-Makhrov/e4e5cc360c739b9608f2ab3769fb89a1 to your computer and use it in GitHub Desktop.
Save Max-Makhrov/e4e5cc360c739b9608f2ab3769fb89a1 to your computer and use it in GitHub Desktop.
Download ZIP
d3.js v5. Bar Charts + Hello, world!
Raw
.block
height: 800
scrolling: no
border: no
Raw
data1.csv
name value
Locke 4
Reyes 8
Ford 15
Jarrah 16
Shephard 23
Kwon 42
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>d3 v5 samples</title>
<script src="https://d3js.org/d3.v5.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main">
</div>
<section></section>
<section></section>
<section></section>
<section></section>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Raw
script.js
var d3 = d3; // delete this line =)
var data = [40, 80, 150, 161, 231, 142];
var main = d3.select("#main");
var width = 880; // max width of a chart
var barHeight = 20; // basic bar height
/*
______ _ _
| ____| | | (_)
| |__ _ _ _ __ ___| |_ _ ___ _ __ ___
| __| | | | '_ \ / __| __| |/ _ \| '_ \/ __|
| | | |_| | | | | (__| |_| | (_) | | | \__ \
|_| \__,_|_| |_|\___|\__|_|\___/|_| |_|___/
*/
function createHeaderInMain_(text)
{
main.append("div")
.attr("class", "divHeader")
.text(text);
return 0; // allright!
}
/*
_ _ _ _ __ __ _ _ _
| | | | | | | \ \ / / | | | | | |
| |__| | ___| | | ___ \ \ /\ / /__ _ __| | __| | | |
| __ |/ _ \ | |/ _ \ \ \/ \/ / _ \| '__| |/ _` | | |
| | | | __/ | | (_) | \ /\ / (_) | | | | (_| | |_|
|_| |_|\___|_|_|\___/ \/ \/ \___/|_| |_|\__,_| (_)
*/
// create new div and append html =)
// vanilla JavaScript
var div = document.createElement("div");
div.innerHTML = "Hello, world! (vanilla JavaScript)";
document.body.appendChild(div);
// d3
var body = d3.select("body");
var div = body.append("div");
div.html("Hello, world! (d3)");
// d3 multiple
var section = d3.selectAll("section");
var div = section.append("div");
div.html("Hello, world! (d3 multiple)");
// apply styles
d3.select("body")
.style("color", "black")
.style("background-color", "lightgrey");
// selection append
// The recommended indentation pattern for method chaining is
// four spaces for methods that preserve the current selection
// and two spaces for methods that change the selection.
d3.selectAll("section")
.attr("class", "special") // adds class to selection
.append("div")
.html("Hello, world! (multiple-chain)");
/*
_____ _ _ ____
/ ____(_) | | | _ \
| (___ _ _ __ ___ _ __ | | ___ | |_) | __ _ _ __ ___
\___ \| | '_ ` _ \| '_ \| |/ _ \ | _ < / _` | '__/ __|
____) | | | | | | | |_) | | __/ | |_) | (_| | | \__ \
|_____/|_|_| |_| |_| .__/|_|\___| |____/ \__,_|_| |___/
| |
|_|
*/
// create chart from div
// header
createHeaderInMain_("<div> bar-chart");
// scale
var x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, width]);
// chart with scale
main.append("div")
.attr("class", "chart0")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return x(d) + "px"; })
.text(function(d) { return d; });
// create bar chart from svg
// header
createHeaderInMain_("SVG bar-chart");
// var barHeight = 20;
// var x = d3.scaleLinear()
// .domain([0, d3.max(data)])
// .range([0, width]);
var chart = main.append("svg")
.attr("class", "chart1")
.attr("width", width)
.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", x)
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { return x(d) - 3; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
// bar-chart with loaded data
// First, we initialize as much as we can when the page loads and
// before the data is available. https://bost.ocks.org/mike/bar/2/#data
// header
createHeaderInMain_("Bar-chart with loaded csv-data");
// 1. Code here runs first, before the download starts.
var x = d3.scaleLinear()
.range([0, width]);
var chart = main.append("svg")
.attr("class", "chart1")
.attr("width", width);
// 3. Code here runs last, after the download finishes.
d3.csv('data1.csv', conversor)
.then(function(data) {
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; });
})
.catch(function(error){
// handle error
});
// 2. Code here runs second, while the file is downloading.
function conversor(d) {
d.value = +d.value; // coerce to number
return d;
}
Raw
style.css
#main
{
margin: 10px;
padding: 10px;
width: 900px;
}
.divHeader {
font-size: 200%;
position: relative;
top: 0;
margin: 20px 5px 5px 0px;
}
.chart0 div {
font: 10px sans-serif;
background-color: steelblue;
text-align: right;
padding: 3px;
margin: 1px;
color: white;
}
.chart1 rect {
fill: steelblue;
}
.chart1 text {
fill: white;
font: 10px sans-serif;
text-anchor: end;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment