I am trying to create a choropleth using d3 for New Jersey state. I have geojson file created as nj.json. You can see it here:
http://mntest.elasticbeanstalk.com/nj.json
When I try to use it to display on web page, it shows a very small New Jersey map, so small it is easy to miss. See it here:
http://mntest.elasticbeanstalk.com/choropleth_test.html
It shows as a small dot a couple of inches below the text.
Can somebody take a look at the source code and guide me how to increase the map size.
Thanks,
D3 newbie
To change the size of the displayed map, set the scale factor of your projection. You might also want to reset the center of the projection to center what you want to show.
This question might be helpful as well.
Related
I am building a version of this parallel coordinate view in d3.js v4.
https://bl.ocks.org/syntagmatic/05a5b0897a48890133beb59c815bd953
In my example I have a predefined selection (in the form of a [min,max] array that I would like to set programatically as a brush in one or more of the axes, after the plot has loaded. But I cannot seem to find a way to do it. Most examples I found on setting a brush from code are using d3 v3 and use setting extent but that does not work anymore in v4 it seems.
can someone give me some tips and a simple example hot to do this in this case (so with multiple axes and brushes active) ?
thanks
Select your brush group and call brush.move, then also pass an array with the start and end coordinates. Your brush move event will then take care of the rest.
d3.select(".brush").call(brush.move, [[startX, endX], [startY, endY]]);
I would like to recreate bent country labels according to the area of the country.
In d3 (or SVG) I can construct a polyline and then use a textpath to have text along it. Example: https://www.w3.org/TR/SVG2/images/text/text-path-startoffset.svg
Is it possible in Cesium to do something similar?
In Leaflet it is implemented like that: http://makinacorpus.github.io/Leaflet.TextPath/
There's no native support for that in the current version of Cesium. It may be mentioned on a wishlist or on a roadmap somewhere, but there are no short-term plans that I know of to add it to Cesium.
Even so, you may be able to find a workaround. For example, SVGs can be used as texturemap image sources in Cesium, so you could possibly use D3 to produce curved text on-the-fly and load the results into a Cesium billboard image or even a Cesium Globe inlay image. It would probably take some experimenting to figure out how to actually wire this up and how well it would work.
I'm working on a dashboard (in Ruby) with rotating views where each set of data includes a D3 visualization.
For the final visualization, I want to pull the circles into a heart shape. I can use a force layout to pull them into a circle (similar to the Obama Budget example), but I haven't had success modifying that into other shapes.
I've read through all the d3 force layout Q&As on Stack Overflow as well as going through related D3 tutorials online.
Does anyone have suggestions for how to do this with D3 (or another tool/library)?
Potential options I'm currently researching:
1) Custom svg "canvass" shape
2) Append to heart-shaped div (found one made with :before/:after pseudo selectors but it currently will only display nodes in the before section)
(apologies for my lack of knowledge upfront)
Horizon Charts seem to be handled differently than area charts in D3. I've seen previous answers on non-continuous data in area charts, using line.defined. However, I'm not seeing how to accomplish that same effect in a horizon chart.
End goal: Where data is missing, skip or otherwise mask later, that point. As in this line.defined example (http://bl.ocks.org/mbostock/3035090), it shouldn't affect the curve of the path.
Ideally, the data in the json would just be a missing value, but I can add a type signifier if needed.
Is there a better approach - like adding a filled rectangle after the path was created in those spots to mask it?
I've updated the d3.horizon plugin to support setting area.defined for the area instance used internally.
For example, you can say:
var horizon = d3.horizon()
.width(…)
.height(…)
.defined(function(d) { return !isNaN(d[1]); });
I'm setting up an experimental html5 website using canvas.
I am drawing 3 circles all next to each other and all I want to know is how to be able to select them.
I'd like them to become links, in a way. Not tags, since everything's gonna be created using javascript.
Something like kinetic JS : http://www.kineticjs.com/, but without the extra library.
I have found some scripts that are using ghost canvas and contexts, but the examples are for dragging and stuff. I only want to be able to select my shape and execute some code.
Thank you!
I am thinking you might want to look into the IsPointInPath() method. It will help you figure out whether or not the mouse clicked on your canvas object.
See Detect mouseover of certain points within an HTML canvas?
if you are talented in xml i suggest you to use canvas + SVG (http://www.w3schools.com/svg/)
And follow this simple example.
http://jsvectoreditor.googlecode.com/svn/trunk/index.html
regarding to SVG and Canvas , the differences are obvious, as you can load bitmaps in SVG, and you can draw lines using the canvas API. However, creating the image may be easier using one technology over the other, depending on whether your graphic is mainly line-based or more image-like.