Yash G

@SiddhlodaAyyar·13 public vizzes

Untitled

A smiling face composed of yellow SVG shapes sits at the center of the page, built with D3 v5. Its circular head, two black eyes, and an arc-based mouth are all drawn using D3's `select` and `arc` helpers, positioned via SVG attributes. The visual is embedded within a styled button element, which features a neumorphic design with layered box shadows and a command icon, all styled through CSS. The interaction is minimal, limited to a pressed state effect on the button when clicked.

May 26, 2020

Loading thumbnail…

Let's make a face with D3.js

This example creates a simple smiling face entirely with D3.js vector shapes. It draws a yellow circle for the head, two black circles for the eyes, and a path for the mouth using an arc generator. The SVG canvas is centered, and all elements are positioned relative to a central group. The code uses D3 v5's `select` and `arc` APIs, with the arc defined by inner and outer radii and specified start and end angles.

May 26, 2020

Loading thumbnail…

Let's make a face with d3.js!

A single static face is drawn from SVG primitives: a large circle for the head, centered within an SVG canvas. The code uses D3.js v5 selection and attribute methods to set the circle’s radius and position, and to style the background. The example demonstrates basic D3 shape creation and SVG coordinate mapping, with the face’s center derived from the SVG’s width and height attributes. No additional facial features or data are shown beyond this initial circle.

Apr 7, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes car attributes from the UCI Auto MPG dataset, with a dropdown menu to select which numeric column (such as horsepower, weight, or acceleration) is plotted on the x-axis against miles per gallon. The visualization uses D3 v5 to render SVG circles, with scales and axes from d3.scaleLinear, d3.axisLeft, and d3.axisBottom. A custom dropdown menu module updates the x-axis selection, and the data is loaded as CSV and parsed into numeric values.

Mar 28, 2020

Loading thumbnail…

VizHub User Count Over Time

This line chart shows the growth in cumulative VizHub user accounts from August 2018 to March 2020. The x-axis displays time in days and the y-axis shows the user count, with annotation labels marking events like a medium post, a Kickstarter campaign, and a course launch. Built with D3 v4, it renders as an SVG using `d3.axisBottom`, `d3.axisLeft`, `d3.line` with a monotone curve, and `d3.annotationLabel` to highlight specific growth triggers. The data comes from a CSV file containing dates and user counts.

Mar 28, 2020

Loading thumbnail…

Choropleth Map of County Data

A choropleth map shades U.S. counties by poverty rate, with a color legend and state boundaries overlaid. The visualization loads GeoJSON topology and CSV data via promises, then uses `d3.geoPath` and TopoJSON to render county shapes, while `d3.scaleThreshold` and `d3.schemeGreens` map poverty percentages to fill colors. County paths include tooltips showing the exact rate, and an axis below the map labels the legend’s tick values.

Mar 27, 2020

Loading thumbnail…

Multiple Line plot with Dropdown

This interactive line chart visualizes monthly average PM2.5 and PM10 particulate levels across London from January 2010 to August 2018, using a dropdown menu to compare different air quality measurements. Built with D3 v5, the visualization renders smooth time-series lines using `d3.line()` and `d3.curveBasis`, with axes scaled via `d3.scaleTime()` and `d3.scaleLinear()`. The dropdown, implemented through a custom menu component, triggers smooth transitions (1500ms) as the Y-axis data changes. Color-coded by year, the chart includes a D3 ordinal color legend, while the dataset originates from the Kings College London Air Quality Dataset in the London Datastore.

Mar 27, 2020

Loading thumbnail…

SVG

This example demonstrates basic SVG rendering primitives within an HTML page, composing geometric shapes inside a 960 by 500 canvas. The visualization shows how circles, rectangles, lines, and paths are positioned and styled, with one group translated and separately stroked. It relies on the raw SVG API (no external libraries), using attributes like `transform`, `stroke`, `fill`, and path data (`d`) to control appearance and layout, with CSS setting the overall page margins and overflow.

Mar 26, 2020

Loading thumbnail…

D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays hierarchical data from the Flare dataset, animating radial arcs and labels when clicking to zoom into nodes. Built with D3 v5, it uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render SVG paths, with `d3.interpolate` and `transition.attrTween` for smooth 750ms animations. The color scale uses `d3.scaleOrdinal` with `d3.interpolateRainbow`, and labels rotate and flip based on arc position. Data loads asynchronously via an Observable stdlib `require` call, while a central circle returns to the root view.

Mar 26, 2020

Loading thumbnail…

Modules

This example demonstrates asynchronous data handling in a JavaScript module system. It shows a large text element displaying the value `123` from the first entry of a hardcoded JSON dataset. The visualization uses the JavaScript `Promise` API and `setTimeout` function to simulate a two-second delay before resolving the data. The `getData` function, exported from a separate module, is imported and its `.then` method updates the HTML element's text content, illustrating a decoupled data-fetching pattern without any charting library.

Mar 25, 2020

Loading thumbnail…

A different D3 map

This example creates an interactive orthographic world map in D3 v5 where points from a SPARQL query are plotted as animated circles. The visualization shows a black sphere with goldenrod country outlines, while white circles representing museum locations fade and bounce into place based on their latitude and longitude. The map uses `d3.geoOrthographic` projections, `d3.geoPath` for country features, and `topojson.feature` to load world-atlas data. Users can drag and zoom the globe, with `d3.drag` and `d3.zoom` handlers re-rendering the projection as needed.

Mar 24, 2020

Loading thumbnail…

MAP - CHOROPLETH

This choropleth map displays poverty rates across U.S. counties, with darker blue shades indicating higher percentages and a legend showing the scale from 2% to 18%. The visualization uses d3.geoPath to render TopoJSON county and state boundaries, while d3.scaleThreshold maps poverty values from a CSV dataset to a d3.schemeBlues color range. A linked axis legend with percentage labels is generated using d3.axisBottom.

Mar 24, 2020

Loading thumbnail…

Cars

This example reads a small static dataset from an exported `cars.js` module and displays the value of the first object’s `abc` property in a `<pre>` element. The page uses a plain HTML structure with a bundle script, and the logic is handled in `index.js`, which imports the dataset and writes the numeric value to the page via `document.getElementById`. The visualization is minimal, showing a single text output rather than a chart, and relies on standard JavaScript module imports and DOM text assignment without any external visualization libraries.

Mar 21, 2020