Skip to content

Site overhaul #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 33 commits into from
May 3, 2015
Merged

Site overhaul #17

Changes from 1 commit
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
4bfba1a
Merge pull request #16 from danswick/master
danswick Mar 18, 2015
bcfc25f
Update inspiration.md
danswick Mar 18, 2015
3d69a8d
Update inspiration.md
danswick Mar 20, 2015
afb7578
Update inspiration.md
danswick Mar 21, 2015
a42057e
d3 tutorials folder
danswick Mar 30, 2015
a822ae5
rat and neighborhood data
danswick Mar 30, 2015
b079cc9
D3 transitions!
danswick Mar 30, 2015
8641afe
updating mah D3 tuts
danswick Apr 1, 2015
54d142f
finishing the aligned left d3 tuts
danswick Apr 4, 2015
d3fbad3
funishing alignedleft d3 tuts
danswick Apr 4, 2015
e76bf56
more D3 tuts - transitions
danswick Apr 8, 2015
5813ca3
landing page initial commit
danswick Apr 16, 2015
eb98cf4
landing page updates
danswick Apr 17, 2015
368c16a
updates to landing page
danswick Apr 17, 2015
251b583
Delete .editorconfig
danswick Apr 17, 2015
e5b8bea
Delete .gitattributes
danswick Apr 17, 2015
b7ac0c2
Delete .gitignore
danswick Apr 17, 2015
372accd
Delete .htaccess
danswick Apr 17, 2015
9c49445
landing page
danswick Apr 17, 2015
2fb7304
Merge remote-tracking branch 'origin/gh-pages' into gh-pages
danswick Apr 17, 2015
7cd1e86
landing page
danswick Apr 17, 2015
0a43405
testing a different index
danswick Apr 17, 2015
df2fcf5
landing page take 2
danswick Apr 17, 2015
70fab90
duplicate image slider
danswick Apr 17, 2015
e8a0608
cleaning up test files
danswick Apr 17, 2015
a74744e
move landing page to its own repo
danswick Apr 17, 2015
b37bad0
remove old site build
danswick Apr 26, 2015
51133b8
rebuild branch tests
danswick May 2, 2015
cfffd18
add, style header 'logo' for re-build
danswick May 3, 2015
c5b31da
wire everything up, fix internal linking
danswick May 3, 2015
16182e2
remove jekyll's dev _site dir
danswick May 3, 2015
a15e0d1
re-build commit
danswick May 3, 2015
f98c32d
conflict resolution
danswick May 3, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
d3 tutorials folder 
starting off with maptime boston d3 rat map
  • Loading branch information
@danswick
danswick committed Mar 30, 2015
commit a42057eb4b707f0dc4d81938318997e84424e831
116 changes: 116 additions & 0 deletions D3-tuts/maptime-boston.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<html>
<head>
<title>A D3 chart</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="neighborhoods.js"></script>

</head>
<body>
<!-- <svg width="100" height="150">
<rect x="0" width="15" fill="#d1c9b8"></rect>
<rect x="25" width="15" fill="#d1c9b8"></rect>
<rect x="50" width="15" fill="#d1c9b8"></rect>
<rect x="75" width="15" fill="#d1c9b8"></rect>
</svg> WE'RE GOING TO CONSTRUCT THIS USING D3 -->

<!-- bar chart! -->
<script>
var ratData = [ 400, 900, 300, 600 ];


var svg = d3.select( "body" )
.append( "svg" )
.attr( "width", 500 )
.attr( "height", 150 );

var newData = [ 800, 200, 400, 500, 100 ];

function drawChart( dataArray ){
// create a selection and bind data
var selection = svg.selectAll( "rect" )
.data( dataArray );

// create new elements wherever needed
selection.enter()
.append( "rect" )
.attr( "x", function(d,i){
return i * 25;
})
.attr( "width", 15)
.attr( "fill", "#d1c9b8" );

// set bar heights based on data
selection
.attr( "height", function(d){
return d/10 * 1.5;
})
.attr( "y", function(d){
return 150 - d/10 * 1.5; // 150 is the height of the SVG container
});

// remove any unused bars
selection.exit()
.remove();
}


drawChart( ratData );

// from the tutorial:
// Now try opening up the console and calling drawChart() with different data arrays.
// The chart will update with the correct number and size of bars.
// drawChart( [200, 300, 400, 500, 600, 700] )
// drawChart( [800, 700, 600] )
// and so on

</script>


<!-- NOW A MAP! -->
<script type="text/javascript">

var width = 700,
height = 580;

var svg2 = d3.select( "body" )
.append( "svg" )
.attr( "width", width )
.attr( "height", height );

var g = svg2.append( "g" );

var albersProjection = d3.geo.albers()
.scale( 190000 )
.rotate( [71.057, 0] )
.center( [0, 42.313] )
.translate( [width/2,height/2] );

var geoPath = d3.geo.path()
.projection( albersProjection );

g.selectAll( "path" )
.data( neighborhoods_json.features )
.enter()
.append( "path" )
.attr( "fill", "#ccc" )
.attr( "d", geoPath );

</script>
</body>
</html>

<!-- from maptime boston's D3 presentation - http://maptimeboston.github.io/d3-maptime/-->