Nilla

@nlrahimi·14 public vizzes

Untitled

A D3.js animation presents a smiley face whose eyebrows move in a looping motion. The visualization demonstrates fundamental DOM manipulation, directly altering the position of SVG elements through JavaScript. Using the D3.js library’s selection and attribute methods, the code updates the `cx` and `cy` coordinates of the eyebrow shapes over time. The rendering occurs within a full-screen canvas defined by the external stylesheet, with the animation driven by a continuous timer that recalculates positions. The project consists of a single HTML page containing the embedded D3 script, illustrating interactive vector graphics without external data sources.

Apr 22, 2019

Loading thumbnail…

Design

A choropleth map colors countries by economy using an ordinal color scale from d3.scaleOrdinal and schemeSpectral, with a clickable color legend to highlight selected regions. The visualization loads world country boundaries from TopoJSON and metadata from TSV, processing them via topojson.feature and Promise.all. The SVG rendering uses d3.select, choroplethMap, and colorLegend custom functions, with hover and selection styling from CSS. Interactions update the map by re-rendering based on clicked legend values.

Apr 14, 2019

Loading thumbnail…

d3 Choropleth Map with Interactive Filtering

This choropleth map displays global economic data, coloring each country according to its economy category. Users can click a color in the legend to filter the map, highlighting matching countries and dimming others, with the sphere and non-matching countries reduced in opacity. The visualization uses the d3.geoPath and d3.geoNaturalEarth1 projections to render geographic shapes, while d3.scaleOrdinal and d3.schemeSpectral drive the color assignments. Geographic and tabular data are loaded from the World Atlas TopoJSON and TSV files via d3.json and d3.tsv.

Apr 14, 2019

Loading thumbnail…

Untitled

This visualization displays Massachusetts household income data by town, overlaid on an interactive Leaflet map. The map uses D3’s `geoPath` with a `geoTransform` to render census tract boundaries, with each town’s fill color mapped via `d3.scaleDiverging` based on the hhinc80k salary bracket. A separate canvas-based color ramp legend is generated using the Canvas API. The data is loaded from external GeoJSON and CSV files, with Leaflet providing the base tile layer and pan/zoom controls.

Mar 29, 2019

Loading thumbnail…

Hello VizHub

This example displays a large, centered "Hello VizHub!" message in white Ubuntu font against a dark gray background. The page loads D3 v5 and a custom ES6 module to set the text content of a div element. It uses the `select` function from D3 to target the `#message` element and applies text from the imported `message` variable. CSS styles define the color scheme, font family, and 12em font size.

Mar 29, 2019

Loading thumbnail…

Massachusetts Towns

This example visualizes the towns of Massachusetts as a choropleth-style map using SVG. It loads GeoJSON town boundaries from a remote gist and renders them as filled paths with black strokes via `d3.geoPath`, projected using `d3.geoConicConformal` with parameters fit to the state. The map is drawn into a dynamically created SVG element sized 800×400, with the projection fitted to the data extent. D3 v5 and TopoJSON are used for data loading and path generation, though the code appears incomplete as only the town polygons are shown without additional styling or interactivity.

Mar 29, 2019

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economic classification using a spectral color scale, with hover highlighting and zoom/pan enabled via d3.zoom. The visualization loads world geometry from TopoJSON and joins it with tab-separated country metadata from the world-atlas dataset. It renders geographic paths with d3.geoPath and a Natural Earth projection, while a custom color legend displays ordinal color domains using SVG circles and text.

Mar 28, 2019

Loading thumbnail…

d3 Choropleth Map

This example displays Massachusetts town boundaries as a choropleth map using two different projections: a U.S.-oriented Albers projection and a Massachusetts-specific conic conformal projection. The code loads TopoJSON geographic data and renders map outlines with `d3.geoPath` and `d3.geoConicConformal`. A color legend module (`colorLegend`) adds a visual key with circles and text, while hover interactions highlight regions via CSS. The visualization uses SVG rendering with D3 v5 and TopoJSON utilities.

Mar 28, 2019

Loading thumbnail…

d3 Choropleth Map

This choropleth map colors countries by economy using a spectral ordinal scale, with hover highlighting and zoom/pan via d3.zoom. It loads TopoJSON geographic data and CSV attributes through Promise.all, then renders paths with d3.geoPath and a Natural Earth projection. A custom color legend displays the ordinal scale’s domain as circles with labels, while the map’s SVG elements are styled with CSS.

Mar 28, 2019

Loading thumbnail…

Cheap map

This example displays a geographic map of Massachusetts towns, colored light green with black borders, that turns red on hover. The visualization is built using D3 version 5 and renders as an SVG element. It loads GeoJSON data from a remote GitHub gist containing town boundaries and projects it using D3’s map projections, specifically `geoConicConformal` and `geoAlbersUsa`. The code defines SVG classes for styling the map’s countries and a hover effect, though the actual rendering of the map geometry is not yet implemented in the provided JavaScript snippet.

Mar 28, 2019

Loading thumbnail…

d3 Choropleth Map

Mar 28, 2019

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, displaying countries as light green shapes with faint black outlines on an SVG canvas. The map uses a conic conformal projection defined through D3's `geoConicConformal` and `geoPath` APIs. It loads geographic boundary data from the world-atlas TopoJSON source, processes it with the `topojson` library’s `feature` function, and renders each country as an SVG path. The visualization also generates a background path, with a commented-out sphere class suggesting an optional ocean fill.

Mar 28, 2019

Loading thumbnail…

Color and Size Legends - Component Experiment

This example demonstrates two reusable legend components that visualize ordinal color scales and quantitative size scales using SVG rendering. The color legend displays fruit categories as colored circles, while the size legend uses d3.scaleSqrt to encode numeric values through varying circle radii. Both components are implemented as functions that receive configuration through property assignment, following the reusable chart pattern. The code uses d3.scaleOrdinal, d3.scaleSqrt, selection.merge, and selection.call to update and render the legends dynamically.

Mar 27, 2019

Loading thumbnail…

Auto MPG Summary

This example displays a text-based summary of the Auto MPG dataset from the UCI Machine Learning Repository. It shows the total row count, column count, and data size in kilobytes, followed by the first ten rows printed as formatted JSON. Using D3’s `select`, `csv`, and `csvFormat` functions, it loads the remote CSV file and appends `<pre>` elements to the DOM. The page applies a black background with green terminal-style text via CSS.

Mar 26, 2019