D3: "Let's make a map" clarification and bubble map typo.

[ClashTheBunny]

On Let's make a map, it's not entirely clear where path.pointRadius should be added. I ended up finding it in the step-6.html, but I couldn't figure it out from the linked documentation. Just starting out though, so it may be that I'm just doing things in the wrong order. I first tried doing it with CSS, and then I tried adding it various places near the creation of the points. Either way, great tutorial. It's so wonderful to have such a powerful library as d3.

There is also a typo on http://bost.ocks.org/mike/bubble-map/.

The Makefile has a space between -- and countries:

        -- counties=$<

it should be

        --counties=$<

Once again, thanks so much for making the web a better place, a place where it is easier to tell the truth and harder to deceive. It's easy for me to mis missing justification in text, but it's harder when it's in a picture.

[ClashTheBunny]

I was wrong about "-- countries". I finally got it working. I was having problems with JavaScript and some sort of bad character. When I copy the code off the howto, I get:
[SyntaxError: Unexpected token ILLEGAL].

When I delete all of the newlines within the JavaScript portion of the "projection" option, it works.

I'm copying it through quite a few different systems which, could be the problem. Firefox on linux displaying on XQuartz on a Mac, pasting into iTerm2 through ssh onto the linux machine where Firefox is running.

Here's a hexdump of the Makefile:

 make build/counties.json                                                                                                                           ⏎ ◼
node_modules/.bin/topojson \
        -o build/counties.json \
        --projection='width = 960, height = 600, d3.geo.albersUsa() \
                .scale(1280) \
                .translate([width / 2, height / 2])' \
        --simplify=.5 \
        --filter=none \
        -- counties=build/gz_2010_us_050_00_20m.shp
Usage: topojson [options] [file …]

Version: 1.6.18

Converts the specified input shapefile, GeoJSON or TopoJSON objects to
TopoJSON, outputting a single TopoJSON topology object. The `objects`
property of the output topology is a map from input file name to geometry
object.

Options:
  -o, --out                      output TopoJSON file name                                                    [default: "/dev/stdout"]
  -q, --quantization             convenience option for setting pre- and post-quantization
  --q0, --pre-quantization       maximum number of differentiable points along either dimension               [default: 1000000]
  --q1, --post-quantization      maximum number of differentiable points along either dimension               [default: 10000]
  -s, --simplify                 area threshold for simplification (steradians for spherical coordinates)     [default: 0]
  --simplify-proportion          proportion of points to retain for simplification                            [default: 0]
  --cartesian                    assume Cartesian input coordinates                                           [boolean]  [default: false]
  --spherical                    assume spherical input coordinates                                           [boolean]  [default: false]
  --force-clockwise              force clockwise exterior rings and counterclockwise interior rings           [boolean]  [default: true]
  --stitch-poles                 splice antimeridian cuts for polygons that encompass a pole                  [boolean]  [default: true]
  --filter                       which rings to remove after simplifying; one of {none,small,small-detached}  [string]  [default: "small-detached"]
  --allow-empty                  deprecated; use --filter=none intead                                         [boolean]  [default: false]
  --id-property                  name of feature property to promote to geometry id                           [default: null]
  -p, --properties               feature properties to preserve; no name preserves all properties             [default: false]
  -e, --external-properties      CSV or TSV file to join properties (by id) to output features
  --shapefile-encoding           character encoding for reading shapefile properties                          [default: null]
  --ignore-shapefile-properties  skip reading shapefile properties (.dbf) for faster performance              [boolean]  [default: false]
  -x, --longitude                name of the x (longitude) property for CSV or TSV geometry input             [default: "longitude"]
  -y, --latitude                 name of the y (latitude) property for CSV or TSV geometry input              [default: "latitude"]
  --projection                   name of a projection to apply (implies spherical input)                      [default: null]
  --width                        scale and translate to fit a viewport of the specified width                 [default: null]
  --height                       scale and translate to fit a viewport of the specified height                [default: null]
  --margin                       pixels of margin to reserve when scaling to fit a viewport                   [default: 0]
  --invert                       in conjunction with --width or --height, whether to invert y                 [boolean]  [default: "auto"]
  --bbox                         include bbox property in generated topology                                  [boolean]  [default: false]
  --help                         display this helpful message                                                 [boolean]  [default: false]
  --version                      print the version number and exit                                            [boolean]  [default: false]

[SyntaxError: Unexpected token ILLEGAL]
Makefile:8: recipe for target 'build/counties.json' failed
make: *** [build/counties.json] Error 1
~/D/m/usPopMap git:master ❯❯❯ hd Makefile                                                                                                                                        ⏎ ◼
00000000  62 75 69 6c 64 2f 67 7a  5f 32 30 31 30 5f 75 73  |build/gz_2010_us|
00000010  5f 30 35 30 5f 30 30 5f  32 30 6d 2e 7a 69 70 3a  |_050_00_20m.zip:|
00000020  0a 09 6d 6b 64 69 72 20  2d 70 20 24 28 64 69 72  |..mkdir -p $(dir|
00000030  20 24 40 29 0a 09 63 75  72 6c 20 2d 6f 20 24 40  | $@)..curl -o $@|
00000040  20 68 74 74 70 3a 2f 2f  77 77 77 32 2e 63 65 6e  | http://www2.cen|
00000050  73 75 73 2e 67 6f 76 2f  67 65 6f 2f 74 69 67 65  |sus.gov/geo/tige|
00000060  72 2f 47 45 4e 5a 32 30  31 30 2f 24 28 6e 6f 74  |r/GENZ2010/$(not|
00000070  64 69 72 20 24 40 29 0a  62 75 69 6c 64 2f 67 7a  |dir $@).build/gz|
00000080  5f 32 30 31 30 5f 75 73  5f 30 35 30 5f 30 30 5f  |_2010_us_050_00_|
00000090  32 30 6d 2e 73 68 70 3a  20 62 75 69 6c 64 2f 67  |20m.shp: build/g|
000000a0  7a 5f 32 30 31 30 5f 75  73 5f 30 35 30 5f 30 30  |z_2010_us_050_00|
000000b0  5f 32 30 6d 2e 7a 69 70  0a 09 75 6e 7a 69 70 20  |_20m.zip..unzip |
000000c0  2d 6f 64 20 24 28 64 69  72 20 24 40 29 20 24 3c  |-od $(dir $@) $<|
000000d0  0a 09 74 6f 75 63 68 20  24 40 0a 62 75 69 6c 64  |..touch [email protected]|
000000e0  2f 63 6f 75 6e 74 69 65  73 2e 6a 73 6f 6e 3a 20  |/counties.json: |
000000f0  62 75 69 6c 64 2f 67 7a  5f 32 30 31 30 5f 75 73  |build/gz_2010_us|
00000100  5f 30 35 30 5f 30 30 5f  32 30 6d 2e 73 68 70 0a  |_050_00_20m.shp.|
00000110  09 6e 6f 64 65 5f 6d 6f  64 75 6c 65 73 2f 2e 62  |.node_modules/.b|
00000120  69 6e 2f 74 6f 70 6f 6a  73 6f 6e 20 5c 0a 09 09  |in/topojson \...|
00000130  2d 6f 20 24 40 20 5c 0a  09 09 2d 2d 70 72 6f 6a  |-o $@ \...--proj|
00000140  65 63 74 69 6f 6e 3d 27  77 69 64 74 68 20 3d 20  |ection='width = |
00000150  39 36 30 2c 20 68 65 69  67 68 74 20 3d 20 36 30  |960, height = 60|
00000160  30 2c 20 64 33 2e 67 65  6f 2e 61 6c 62 65 72 73  |0, d3.geo.albers|
00000170  55 73 61 28 29 20 5c 0a  09 09 09 2e 73 63 61 6c  |Usa() \.....scal|
00000180  65 28 31 32 38 30 29 20  5c 0a 09 09 09 2e 74 72  |e(1280) \.....tr|
00000190  61 6e 73 6c 61 74 65 28  5b 77 69 64 74 68 20 2f  |anslate([width /|
000001a0  20 32 2c 20 68 65 69 67  68 74 20 2f 20 32 5d 29  | 2, height / 2])|
000001b0  27 20 5c 0a 09 09 2d 2d  73 69 6d 70 6c 69 66 79  |' \...--simplify|
000001c0  3d 2e 35 20 5c 0a 09 09  2d 2d 66 69 6c 74 65 72  |=.5 \...--filter|
000001d0  3d 6e 6f 6e 65 20 5c 0a  09 09 2d 2d 20 63 6f 75  |=none \...--.cou|
000001e0  6e 74 69 65 73 3d 24 3c 0a                         |nties=$<.|
000001e8

[mbostock]

Hi. Thanks for the feedback. My guess regarding SyntaxError: Unexpected token ILLEGAL is that you copy-and-pasted d3.js with the wrong character encoding, and so it’s crashing when trying to initialize the projection.

This is covered on the installing section of the wiki, but the easiest way to download D3 is to click on the d3.zip link on http://d3js.org. (Here’s a direct link to 3.5.3, but I recommend going to the website for the latest release.)

[roderickm]

I ran across this same problem in the "Converting Boundaries" section of Let's Make a Bubble Map. Topojson is perturbed by backslash-newlines in the projection options that get passed literally because they're within a single-quoted string. To resolve the trouble, join the projection options into a long single-quoted line:

    --projection='width = 960, height = 600, d3.geo.albersUsa() .scale(1280) .translate([width / 2, height / 2])' \

or wrap it in double quotes instead to the escaped newlines are interpreted properly:

    --projection="width = 960, height = 600, d3.geo.albersUsa() \
            .scale(1280) \
            .translate([width / 2, height / 2])" \

or put the single-quoted, multi-line projection string into a make variable and then eval the variable in the recipe as discussed in Splitting Recipe Lines with GNU Make.

[atonb117]

Thanks for that @roderickm!