D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
EgorBrus
Full window
Github gist
Registered crime cases in Belarus vs. population by region (2013)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Registered crime cases in Belarus vs. population by region (2013)</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body {background-color: white; font-family: segoe ui; font-size: 10px;color: lightslategray} .axis path {display: none;} .axis line {fill: none; stroke: rgb(200, 200, 200);shape-rendering: crispEdges; opacity: 0.5;} .axis g:first-child line {stroke: rgba (10,20,50,0.75);} .axis text {font-family: segoe ui;font-size: 8px;} svg {background-color: white;} circle:hover {fill: lightcoral;} </style> </head> <body> </style> </head> <body> <h1>Registered crime cases in Belarus vs. population by region (2013)</h1> <script type="text/javascript"> var padding = [ 20, 10, 50, 50 ]; //Top, right, bottom, left var w = 800; var h = 600; var xScale = d3.scale.linear().range([ padding[3], w - padding[1] - padding[3] ]); var yScale = d3.scale.linear().range([ padding[0], h - padding[2] ]); var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(10).tickSize(-(h - padding[0] +11 - padding[2])); var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(12).tickSize(-(w - padding[3] - padding[1])); var svg = d3.select("body").append("svg").attr("width", w).attr("height", h); d3.csv("Belarus-population-xlsx.csv", function(data) { xScale.domain([0, d3.max(data, function(d) {return +d.population;})]); yScale.domain([d3.max(data, function(d) {return +d.registered_crime_cases+1000;}), 0]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (h - padding[2] + 5) + ")") .call(xAxis) .append("text") .attr("text-anchor", "start") .attr({class: "xlabel", y: 9, x: w-80,}) .text("population, 000") .style({"font-size": 10,"font-family": "segoe ui"}); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + (padding[3] - 5) + ",0)") .call(yAxis) .append("text") .attr("text-anchor", "start") .attr({class: "ylabel", y: 7, x: -30,}) .text("registered crime cases") .style({"font-size": 10,"font-family": "segoe ui"}); var circles = svg.selectAll("circle").data(data).enter().append("circle"); circles.attr("cx", function(d) {return xScale(d.population);}) .attr("cy", function(d) {return yScale(d.registered_crime_cases);}) .attr("r", 0.1) .attr("fill", "lightslategray") .append("title") .text(function(d) {return d.registered_crime_cases + " registered crime cases in " + d.region + " (population: " + d.population + "K) in 2013";}); circles.transition().duration(2000).attr("r", 8);}); </script> <p> <em><b>Source: </b>National statistics committee of the Republic of Belarus - <a href="https://belstat.gov.by/ssrd-mvf/ssrd-mvf_2/natsionalnaya-stranitsa-svodnyh-dannyh/chislennost-naseleniya-na-1-yanvarya-po-oblastyam-respubliki-belarus/"><b> Population</b></a> , </em> <em><a href="https://belstat.gov.by/ofitsialnaya-statistika/otrasli-statistiki/naselenie/pravonarusheniya/godovye-dannye_7/chislo-zaregistrirovannyh-prestuplenii-po-oblastyam-i-g-minsku/"><b>Registered crime cases</b></a> </em></p> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js