D3 Horizontal Histogram drawing

First,Preface

As needed, theBoss lets you draw a horizontal histogram, showing yesterday's data on the left, and today's data. Draw with D3

Second,Counterfeit Data

Today.csv

name,value,unita,2000,%b,1000,tc,1400,￥d,32,de,520,df,10000,dg,5500, Yuan H,740,ti,850,tj,950,tk,1100,tl,1200,t

Yesterday.csv

name,value,unita,1000,%b,800,tc,1200,￥d,30,de,500,df,10000,dg,5000, Yuan H,700,ti,800,tj,900,tk,1000,tl,1100,t

Third,Drawing

Approximate process

3.1 Canvas size, Position

3.2 Mapping relationships of data,ordinal,linear commonly used. Input, output

3.3 Loading data, drawing to the specified location

3.4 Add some adornments.

Var width = 960,height = 500;var svg = d3.select ("Body"). Append ("SVG") . attr ("width", width). attr ("height", height); var margin = {top:50,left:60,right:60,bottom:50};var  xscale = d3.scale.linear (). Range ([0, (Width- margin.left - margin.right)/2]);     //x axis and y-axis var yscale = d3.scale.ordinal (). Rangeroundbands ([0,height -  margin.top - margin.bottom],0.1);    // d3.csv ("Data/today.csv",  function  (data)  {        data.sort (function (b) {  Return d3.descending (parseint (A.value), parseint (B.value))});  //sort the loaded data          xscale.domain ([0,d3.max (data, function  (d)  {             return parsefloat (D.value);         })]);  &NBsp;      yscale.domain (Data.map (function (d) {return d.name}));         bar1 = svg.append ("G")                  .attr ("Class", "Bar1")                  .attr ("Transform", "Translate" ("+ WIDTH/2  + ","  + margin.top + ");         bar1.selectall (" Rect "). Data (data). Enter ()                  .append ("rect")                  .attr ("x", function  (d)  {                     return 0;                 })                  .attr ("Y", function  (d)  {                     return yscale ( D.name);                 })                 .attr ("width",  function  (d)  {                     return xscale (D.value);                 })                  .attr ("height", function  ()  {        &nbsP;            return yscale.rangeband ();                 })                  .attr ("Fill", "#00ff29");         bar1.selectall ("text"). Data (data). Enter ()                  .append ("text")                  .attr ("x",  function   (d)  {                     return xscale (parsefloat (d.value));                 })                   .attr ("Y", function  (d)  {                     return yscale (d.name) +yScale.rangeBand ( );                 })                  .text (function  (d)  {                     return d.name + d.value + d.unit;                 })     });     d3.csv ("Data/yesterday.csv", function  (data)  {         data.sort (function (A, b) { return d3.descending (parseint (A.value), parseint (B.value)) });//        xscale.domain ([0,d3.max (data, function  (d)  {//             return parsefloat (D.value);//         })]);//        yscale.domain (Data.map (function (d) {return d.name}));         bar2 = svg.append ("G")                  .attr ("Class", "Bar1")                  .attr ("Transform", "translate (" +  width/2 + ","  + margin.top + ")");         Bar2.selectall ("rect"). Data (data). Enter ()                  .append ("rect")             &Nbsp;    .attr ("x", function  (d)  {                     return 0-xscale ( Parsefloat (d.value));                 })                  . attr ("Y", function  (d)  {                     return yscale (D.name);                 })                  .attr ("width", function  (d)  {                      return xscale (d.value);                 })                  .attr ("Height",  function  ()  {                     return yscale.rangeband ();                 })                  .attr ("Fill", "#f5ef13");         bar2.selectall ("text"). Data (data). Enter ()                  .append ("text")                  .attr ("x", function  (d)  {                     return  ( -40-xscale (ParseFloat (D.value)));                 })                  .attr ("Y",  function   (d)  {                     return  (parsefloat (Yscale (d.name))  + parsefloat (Yscale.rangeband ( )));                 })                  .text (function  (d)  {                     return d.name + d.value + d.unit;         &nbsp(       })     });     svg.append (" Text ")             .attr (" Class "," title ")              .attr ("x"). attr ("y", +). Text ("a company."); /Add some cosmetic content     d3.select ("SVG"). Append ("rect")              .attr ("x", 740)              .attr ("Y", 354)             .attr ("width", "10" )             .attr ("height", ten)              .attr ("Fill", "#f5ef13");     D3.select ("SVG"). Append ("text")             .attr (" Class "," Mark ")   &nbsP;         .attr ("x", 755)              .attr ("Y", 364)              .text ("Yesterday");     d3.select ("svg"). Append ("rect")              .attr ("x", 740)              .attr ("Y", 369)             .attr ( "width", "ten")             .attr ("height", ten)              .attr ("Fill", "#00ff29")      d3.select ("SVG"). Append ("text")             . attr ("Class", "Mark")             .attr ("X", 755)              .attr ("Y", 379)              .text ("Today");

Four, the effect

650) this.width=650; "src=" Http://www.178linux.com/ueditor/php/upload/image/20160404/1459739190157264.png "title= "1459739190157264.png" alt= "1459739190157264.png"/>

v. Summary

The principle is simple, draw a rectangle at the specified position, write the text at the specified position.

Under the tag here, you can continue to use it after a few changes

This article is from the "Work hard" blog, please be sure to keep this source http://amyhehe.blog.51cto.com/9406021/1760054

D3 Horizontal Histogram drawing