Blog UX – user experience. Psychologia w IT, marketing, testy A/B

Często się zdarza, że potrzebujemy do naszej pracy, projektów czy nawet minimalnych wersji naszego produktu (MVP). Dziś mam dla Was klasycznie i za darmo szablon prostej wizytówki, która posiada podświetlaną wersję danych. Czyli możecie sobie zaciągnąć proste dane wizualizować je i wkleić do Waszych projektów. Jedyny mankament to fakt, że do stworzenia bardziej zaawansowanych wykresów będzie Wam potrzebna wiedza z zakresu D3. Czyli bez znajomości JavaScriptów się nie obejdzie.

Paczka do pobrania (.zip)

prosty wykres

No to jedziemy z kodem:


<!doctype html>

<html lang="en">
<meta charset="utf-8">

<title>Analytics Chart</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">

<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/d3.css">
<link href='' rel='stylesheet' type='text/css'>
<script src=""></script>
<script src=""></script>


<div id="wrapper">

<img id="face_image" src="img/face.jpg">
<div id="box">
<img id="top_image" src="img/statistic.png">
<p id="desc">34%</p>
<div id="box">
<img id="top_image" src="img/calendar.png">
<p id="desc">25 days</p>
<div id="box">
<img id="top_image" src="img/politic.png">
<p id="desc">4 wins</p>
<div id="box">
<img id="top_image" src="img/entertainment.png">
<p id="desc">24 h</p>

<h1>Angela Morgentini</h1>


<div class="main">

<script type="text/javascript">

function render(){
// Golden Snowglobe totals (as of 2/5/15)
var dataset = [
{"city": "Sty", "snow": 75.5},
{"city": "Lut", "snow": 60.1},
{"city": "Mar", "snow": 21},
{"city": "Kwi", "snow": 52},
{"city": "Maj", "snow": 58.7},
{"city": "Cze", "snow": 33},
{"city": "Lip", "snow": 82},
{"city": "Sie", "snow": 54.2},
{"city": "Wrz", "snow": 21},
{"city": "Paź", "snow": 10},
{"city": "Lis", "snow": 24},
{"city": "Gru", "snow": 52.3}

// Dimensions for the chart: height, width, and space b/t the bars
var margins = {top: 0, right: 0, bottom: 10, left: 0}
var height = 170 - margins.left - margins.right,
width = 580 - - margins.bottom,
barPadding = 2

// Create a scale for the y-axis based on data
// >> Domain - min and max values in the dataset
// >> Range - physical range of the scale (reversed)
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d){
return d.snow;
.range([height, 0]);

// Implements the scale as an actual axis
// >> Orient - places the axis on the left of the graph
// >> Ticks - number of points on the axis, automated
var yAxis = d3.svg.axis()

// Creates a scale for the x-axis based on city names
var xScale = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);

// Creates an axis based off the xScale properties
var xAxis = d3.svg.axis()

// Creates the initial space for the chart
// >> Select - grabs the empty <div> above this script
// >> Append - places an <svg> wrapper inside the div
// >> Attr - applies our height & width values from above
var chart ='.main')
.attr('width', width + margins.left + margins.right)
.attr('height', height + + margins.bottom)
.attr('transform', 'translate(' + margins.left + ',' + + ')');

// For each value in our dataset, places and styles a bar on the chart

// Step 1:
// >> Loops through the dataset and appends a rectangle for each value

// Step 2: X & Y
// >> X - Places the bars in horizontal order, based on number of
// points & the width of the chart
// >> Y - Places vertically based on scale
.attr('x', function(d, i){
return xScale(;
.attr('y', function(d){
return yScale(d.snow);

// Step 3: Height & Width
// >> Width - Based on barpadding and number of points in dataset
// >> Height - Scale and height of the chart area
.attr('width', (width / dataset.length) - barPadding)
.attr('height', function(d){
return height - yScale(d.snow);
.attr('fill', '#F0F4F5')

// Step 4: Info for hover interaction
.attr('class', function(d){
.attr('id', function(d){
return d.snow;

// Appends the yAxis
.attr('class', 'axis')
.attr('fill', '#F0F4F5')
.attr('transform', 'translate(0,' + (height + 7) + ')')

// Adds yAxis title
.attr('transform', 'translate(-70, -20)', '#F0F4F5');

// On document load, call the render() function to load the graph


<div id="wynik"><span id="city"></span> - <span id="inches"></span><span>km</span><div>


<p id="footer">All rights reserved. Unless otherwise indicated, all materials on these pages are copyrighted by the National Academy of Sciences.</p>


JavaScript (d3)

var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - - margin.bottom;

var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
.range([height, 0]);

var xAxis = d3.svg.axis()

var yAxis = d3.svg.axis()
.ticks(10, "%");

var svg ="body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + + margin.bottom)
.attr("transform", "translate(" + margin.left + "," + + ")");

d3.csv('weekdays.csv', function(error, dataset) { // NEW
dataset.forEach(function(d) { // NEW
d.count = +d.count; // NEW

x.domain( { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);

.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")

.attr("class", "y axis")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")

.attr("class", "bar")
.attr("x", function(d) { return x(d.letter); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); });

function type(d) {
d.frequency = +d.frequency;
return d;


CSS (reset):

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: 'Roboto Condensed', sans-serif;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
body {
line-height: 1;
ol, ul {
list-style: none;
blockquote, q {
quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
table {
border-collapse: collapse;
border-spacing: 0;

CSS (d3)

button {
margin-bottom: 10px;

.main {
margin: 0px 5px;

svg {
padding: 20px 10px;

.axis path,
.axis line {
fill: none;
shape-rendering: crispEdges;
width: 5px;

.axis text {
font-size: 15px;
color: #969696;

rect:hover {
fill: #53FA11;

CSS (style)

font-size: 180% !important;
color: #969696;
padding-left: 15px !important;
padding-top: 10px !important;
float: left;

body {
background: #FAFAFA;
margin: 10;

div#wrapper {
background: #F0F4F5;
margin: 15px auto;
width: 600px;
border-radius: 20px;
border-style: solid;
border-color: #E8E1E1;
border-width: 1px;

width: 80px;
height: 80px;
border-radius: 40px;
margin: 20px 10px 20px 25px;
border-style: solid;
border-color: #E9E4E5;
border-width: 2px;
float: left;

margin-top: 30px;
float: left;
margin-left: 20px;
margin-right: 20px;
text-align: center;

width: 30px;
height: 30px;
margin-bottom: 10px;
opacity: .2;

font-size: 130%;
color: #969696;

padding-bottom: 15px;
padding-top: 15px;
margin-top: 160px;
background: #8F8F8F; /* For browsers that do not support gradients */

padding: 20px;
font-size: 150%;
text-align: center;
color: #53FA11;
background-color: #696969;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;

Typ od psychologii i IT, czyta w ludziach by wiedzieć więcej o stronach www.

View Comments

There are currently no comments.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Next Post