david-cv2 (@david-cv2), VizHub

Mass School District Boundaries

A choropleth map displays Massachusetts school district boundaries as gray polygons with teal outlines. The visualization uses a topojson data source loaded via `d3.json` and converted to GeoJSON features with `topojson.feature`. React manages the component state while `d3.geoPath` with a `geoIdentity` projection renders the shapes, using `reflectY(true)` to correctly orient the map coordinates. The SVG output is scaled to fit a 960×500 viewport using `projection.fitExtent`.

Nov 18, 2019

Loading thumbnail…

Mass School District Boundaries

A choropleth map displays Massachusetts school district boundaries as gray polygons with teal outlines. The visualization uses a topojson data source loaded via `d3.json` and converted to GeoJSON features with `topojson.feature`. React manages the component state while `d3.geoPath` with a `geoIdentity` projection renders the shapes, using `reflectY(true)` to correctly orient the map coordinates. The SVG output is scaled to fit a 960×500 viewport using `projection.fitExtent`.

Nov 17, 2019

Loading thumbnail…

Mass School District Boundaries

This map shows Massachusetts school district boundaries as a set of geospatial paths. The visualization uses `d3.geoPath` with a `geoIdentity` projection reflected on the Y-axis to render the downloaded TopoJSON data. The React component loads the district features via `useMassGeo`, which converts TopoJSON to GeoJSON using the `feature` function from `topojson`. The SVG paths are drawn with a gray fill and dark teal stroke, scaled to fit a 960 by 500 viewport using `projection.fitExtent`.

Nov 17, 2019

Loading thumbnail…

Mass School District Boundaries

A choropleth map displays Massachusetts school district boundaries as gray polygons with teal outlines. The visualization uses a topojson data source loaded via `d3.json` and converted to GeoJSON features with `topojson.feature`. React manages the component state while `d3.geoPath` with a `geoIdentity` projection renders the shapes, using `reflectY(true)` to correctly orient the map coordinates. The SVG output is scaled to fit a 960×500 viewport using `projection.fitExtent`.

Nov 17, 2019

Loading thumbnail…

Mass School District Boundaries

This map shows Massachusetts school district boundaries as a set of geospatial paths. The visualization uses `d3.geoPath` with a `geoIdentity` projection reflected on the Y-axis to render the downloaded TopoJSON data. The React component loads the district features via `useMassGeo`, which converts TopoJSON to GeoJSON using the `feature` function from `topojson`. The SVG paths are drawn with a gray fill and dark teal stroke, scaled to fit a 960 by 500 viewport using `projection.fitExtent`.

Nov 17, 2019

Loading thumbnail…

Vega-Lite API Template

A scatterplot uses the Vega-Lite API to map time on the x-axis, location on the y-axis, and a quantitative color scale for data values. Circles are sized and colored from the dataset, with tooltips showing each point’s name. The visualization loads tab-separated data via `d3.tsv` from a GitHub gist and renders with an SVG view, using `vl.markCircle` and `vl.encode` to build the chart. Axis labels and titles are customized through a shared `config` object.

Nov 17, 2019

Loading thumbnail…

Vega-Lite API Template

This example visualizes automobile data from a CSV file, plotting engine displacement against horsepower with point color encoding model year and point size encoding weight. Tooltips expose the vehicle name. It uses the Vega-Lite API to construct the specification, registering Vega, Vega-Lite, and Vega-Tooltip within a D3-based application, rendering to SVG. Data is loaded asynchronously via d3.csv, and the visualization is sized to fit the browser window.

Nov 17, 2019

Loading thumbnail…

Vega-Lite API Template

This example shows a scatter plot of automobile data, with engine displacement on the x-axis, horsepower on the y-axis, and points colored by model year and sized by vehicle weight. Tooltips display the car name on hover. Built with the Vega-Lite API, it registers Vega and Vega-Lite libraries, and uses vega-tooltip for interaction. The data is loaded via D3’s `csv` function from a remote URL, with custom axis and label styling applied through a configuration object.

Nov 17, 2019