D3OG

All examples By author By category About

N0taN3rd

Full window Github gist

Visualization Implementation (VI4)

John Berlin CS725 Information Visualizatoin

Visualization Implementation (VI4)

Data set used is Summer Olympic converted to json

View On bl.ocks.org

Chart 1: Scatter Plot

Chart Title: Number of Men To Women Sized by Participants

Channels:

Magnitude:

Position On Common Scale: The spacing in the x y axis shows relation of the number of men to women per data point. Through is the discriminability is easily maintained as each point is at a different position
Area: The area size per data point shows a third ordered attribute number of participants. The discriminability of this channel is harder due to the simularities in area region

The following R code was used to generate the first image

library(ggplot2)
library(scales)
setwd(getwd())
d <- read.csv("data.csv")
ggplot(d,aes(x=Men,y=Women))+
  geom_point(aes(size=Participants))+
  scale_x_continuous(breaks = pretty_breaks(n=15)) +
  scale_y_continuous(breaks=pretty_breaks(n=15)) + 
  labs(color = "Year") + ggtitle("Number of Men To Women Area by Participants")

Chart1

Chart 2: Bar Chart

Chart Title: Number of Countries Hosted By Year Color By Host

Channels:

Magnitude:

Position On Common Scale: Height of the bars shows the number of attending countries

Identity:

Color Hue: Each color bar represents a host country
Spatial Region: Each bar is spaced apart to show individual year

The discriminability for each of the channels is maintained as each bar is spaced evenily(Spacial Region). Color discriminability is also maintained as each color is unique. Height of each bar is unique thus providing the discriminability for magnitude.

The following R code was used to generate the second image.

library(ggplot2)
library(scales)
setwd(getwd())
d <- read.csv("data.csv")
ggplot(d,aes(x=factor(Year),y=Countries,fill=Country))+
  geom_bar(stat="identity") + 
  labs(x = "Year") + ggtitle("Number of Countries Hosted By Year Color By Host")

Chart2

<!doctype html>
<html>
    <head>
     <script src="https://d3js.org/d3.v3.min.js"></script>
      <style type="text/css">
            .legend {
                font-size: 10px;
            }
            rect {
                stroke-width: 2;
            }

.dot {
                stroke: #000;
            }

body {
                font: 10px sans-serif;
            }

.bar {
                fill: #c07f2b;
            }

.bar text {
                fill: white;
                font: 10px sans-serif;
                text-anchor: end;
            }

.bar:hover {
                fill: brown;
            }

.axis {
                font: 10px sans-serif;
            }

.axis path,
            .axis line {
                fill: none;
                stroke: #000;
                shape-rendering: crispEdges;
            }

.x.axis path {
                display: none;
            }

.tooltip {
                position: absolute;
                width: 200px;
                height: 28px;
                pointer-events: none;
            }
        </style>

</head>

</div>
        <div id="chart2">

</div>
        <script type="text/javascript">

function scatter(data) {
                var margin = {top: 20, right: 20, bottom: 20, left: 50},
                    padding = 45,
                    padding2 = {top: 10, right: 10, bottom: 100, left: 100},
                    outerWidth = 950,
                    outerHeight = 750,
                    innerWidth = outerWidth - margin.left - margin.right,
                    innerHeight = outerHeight - margin.top - margin.bottom,
                    containerDim = {
                        w: innerWidth - padding2.left - padding2.right,
                        h: innerHeight - padding2.top - padding2.bottom
                    };

var xScale = d3.scale.linear()
                    .domain([d3.min(data, function (elem) {
                        return elem.Men
                    }) - 1,
                        d3.max(data, function (elem) {
                            return elem.Men
                        }) + 1])
                    .range([padding2.left, containerDim.w - margin.right * 4]);

var yScale = d3.scale.linear()
                    .domain([d3.min(data, function (elem) {
                        return elem.Women
                    }) - 1,
                        d3.max(data, function (elem) {
                            return elem.Women
                        }) + 1])
                    .range([containerDim.h - padding, padding]);

var rScale = d3.scale.linear()
                    .domain([0, d3.max(data, function (elem) {
                        return elem.Participants
                    })])
                    .range([1, 10]);

var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .orient("bottom")
                    .ticks(15);

var yAxis = d3.svg.axis()
                    .scale(yScale)
                    .orient("left")
                    .ticks(20);

var svg = d3.select("#chart1")
                    .append("svg")
                    .attr("width", containerDim.w)
                    .attr("height", containerDim.h);

svg.append("text")
                    .attr("x", 450)
                    .attr("y", 25)
                    .attr("text-anchor", "middle")
                    .style("font-size", "16px")
                    .style("text-decoration", "underline")
                    .text("Number of Men To Women Area by Participants");

svg.selectAll("circle")
                    .data(data)
                    .enter()
                    .append("circle")
                    .attr("r", function (elem) {
                        return rScale(elem.Participants);
                    })
                    .attr("cx", function (elem) {
                        return xScale(elem.Men);
                    })
                    .attr("cy", function (elem) {
                        return yScale(elem.Women);
                    });

svg.append("g")
                    .attr("class", "axis")
                    .attr("transform", "translate(0," + (containerDim.h - padding) + ")")
                    .call(xAxis)
                    .append("text")
                    .attr("class", "label")
                    .attr("x", containerDim.w / 2)
                    .attr("y", 20)
                    .attr("dy", ".71em")
                    .style("text-anchor", "middle")
                    .text("Number of Men");

svg.append("g")
                    .attr("class", "axis")
                    .attr("transform", "translate(" + padding2.left + ",0)")
                    .call(yAxis)
                    .append("text")
                    .attr("class", "label")
                    .attr("transform", "rotate(-90)")
                    .attr("y", -50)
                    .attr("x", -250)
                    .attr("dy", ".71em")
                    .style("text-anchor", "middle")
                    .text("Number of Women");
            }

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

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

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

var xAxis = d3.svg.axis()
                    .scale(x)
                    .orient("bottom");

var yAxis = d3.svg.axis()
                    .scale(y)
                    .ticks(15)
                    .orient("left");

d3.select('body').append("svg")
                    .attr("class", "chart");

var barChart = d3.select(".chart")
                    .attr("width", width + margin.left + margin.right + 55)
                    .attr("height", height + margin.top + margin.bottom)
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var tooltip = d3.select("#chart2").append("div")
                    .attr("class", "tooltip")
                    .style("opacity", 0);

var div = d3.select("body").append("div")
                    .classed("tooltip", true)
                    .style("opacity", 0);
                var cValue = function (d) {
                        return d.Country;
                    },
                    color = d3.scale.category20();

div.append('div')
                    .attr('class', 'label');
                y.domain([0, d3.max(data, function (d) {

return d.Countries;
                })]);

x.domain(data.map(function (d) {
                    return d.Year;
                }));

barChart.append('g').classed('x axis', true)
                    .attr('transform', "translate(0," + height + ")").call(xAxis);

barChart.append("g")
	        .attr("class", "y axis")
	        .call(yAxis);
	    barChart.append("text")
	        .attr("x", 450)
	        .attr("y", 6)
	        .attr("text-anchor", "middle")
	        .style("font-size", "16px")
	        .style("text-decoration", "underline")
	        .text("Number of Countries Hosted By Year Color By Host");

barChart.selectAll(".bar")
                    .data(data)
                    .enter().append("rect")
                    .attr("class", "bar")
                    .style("fill", function (elem) {
                        return color(cValue(elem));
                    })
                    .attr("x", function (d) {
                        console.log(d);
                        return x(d.Year);
                    })
                    .attr("width", x.rangeBand())
                    .attr("y", function (d) {
                        return y(d.Countries);
                    })
                    .attr("height", function (d) {
                        return height - y(d.Countries);
                    }).on("mouseover", function (d) {
                        tooltip.transition()
                            .duration(200)
                            .style("opacity", .9);
                        tooltip.html("Host: " + d.Country + " hosting: " + d.Countries + " contries")
                            .style("left", (d3.event.pageX + 5) + "px")
                            .style("top", (d3.event.pageY - 28) + "px");
                    })
                    .on("mouseout", function (d) {
                        tooltip.transition()
                            .duration(500)
                            .style("opacity", 0);
                    });

var legend = barChart.selectAll(".legend")
                    .data(color.domain())
                    .enter().append("g")
                    .attr("class", "legend")
                    .attr("transform", function (d, i) {
                        return "translate(0," + i * 20 + ")";
                    });

// draw legend colored rectangles
                legend.append("rect")
                    .attr("x", width + 48)
                    .attr("width", 18)
                    .attr("height", 18)
                    .style("fill", color);

// draw legend text
                legend.append("text")
                    .attr("x", width + 45)
                    .attr("y", 9)
                    .attr("dy", ".35em")
                    .style("text-anchor", "end")
                    .text(function (d) {
                        return d;
                    });

}

d3.json("olympics.json",function(error,data){
            	data = data.reverse();
                scatter(data);
                bar(data);
                d3.select(self.frameElement).style("height", "1300px").style("width","1200px");
            });
					
        </script>
    </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js