Ankit

@ankit-pm·8 public vizzes

Let's make a map with D3.js!

A world map rendered in SVG uses a blue sphere with green countries outlined in black, built with D3.js v5 and the topojson library. The code loads geographic data from the world-atlas 110m.json file, then applies a geoNaturalEarth1 projection via d3.geoPath to generate country paths. The visualization demonstrates a straightforward choropleth-like base map, with styling handled through CSS classes for the sphere and country boundaries.

Feb 24, 2020

Loading thumbnail…

Multi-line chart

A multi-line chart displays a week of worldwide temperature readings per city, with each city’s time series drawn as a smooth basis curve. The visualization uses React to render SVG elements, while D3 v5 handles scales, axes, and the `d3.nest()` grouping of data by city. Animated color legend circles appear via a custom `colourLegend` component, and the chart applies a categorical color scale with semi-transparent paths for overlapping lines. Temperature data is loaded from a remote CSV file.

Feb 17, 2020

Loading thumbnail…

Barchart in D3.JS

This example displays an empty SVG canvas with dimensions 960 by 500, prepared for a bar chart. The code initializes the chart by selecting the SVG element with `d3.select('svg')` and reads its width and height attributes using `svg.attr('width')` and `svg.attr('height')`. The stylesheet sets the body margin to zero and hides overflow. No data is loaded or rendered; the visualization is purely a scaffold, with commented-out code suggesting potential circle manipulation, but no bars are drawn.

Feb 2, 2020

Loading thumbnail…

Lets make a face in D3.JS

A smiling face made of basic SVG shapes responds to an animated sequence. Drawn in D3.js v5, the visualization builds a yellow circle for the head, black circles for eyes, and a mouth using the `d3.arc` shape generator. The two rectangular eyebrows move vertically through chained `transition().duration()` calls, creating a periodic raised-brow effect over two seconds. All elements are positioned using the viewport's width and height attributes.

Feb 2, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn as an SVG using D3.js v5, with circular eyes, a path-based mouth built via the `d3.arc` API, and rectangular eyebrows. The eyebrows animate upward and back down using chained `transition` and `attr` calls over two 2-second intervals. The code demonstrates fundamental DOM manipulation by selecting the SVG, appending groups and shapes, and setting attributes with transforms, all in an empty HTML body.

Feb 1, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a collection of basic geometric shapes—circles, rectangles, lines, and paths—rendered in an SVG container. The SVG markup defines the shapes, while an external CSS stylesheet controls visual properties like the red stroke and width of line elements within a grouped class, and the blue stroke on a path. Several shapes have explicit fill colors, and one group applies a shared fill and stroke to its children. The visualization showcases how SVG primitives and CSS cascading rules can combine to style vector graphics without any JavaScript libraries.

Feb 1, 2020

Loading thumbnail…

HTML Cars Report

This example shows a simple static report of five used cars, displaying model, year, and price in a bulleted list. One car, the 2012 Nissan Leaf, is highlighted in red to draw attention. The page is built with plain HTML and styled using CSS, setting a monospace font and a large font size. A class called “highlighted” applies the red color, demonstrating basic CSS class-based styling without any JavaScript or external libraries.

Feb 1, 2020

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of car listings, showing how to load data asynchronously and generate a formatted summary. It displays five cars with their year, make, model, and price, filtered to include only those under $5,000. The code uses JavaScript ES6 modules, `Promise` with `setTimeout` to simulate a delayed API call via `getCars`, and maps over filtered data with `formatCar` and `generateReport` to produce the output. The rendered result appears in a `<pre>` element as plain text.

Feb 1, 2020