shivakuchya

@shivakuchya·5 public vizzes

Let's make a face d3.js!!

This example demonstrates how to create a stylized face using D3.js and SVG, with a simple red background applied to the visualization canvas. The code initializes an SVG element sized at 960 by 500 pixels and uses D3’s selection API to modify its style, specifically setting the background color to red. The HTML page loads D3 v5 from a CDN and includes a basic stylesheet that removes margins and hides overflow. The face itself is implied through the structural setup, though the current code only shows the background styling and SVG container creation without explicit facial features.

Aug 20, 2020

Loading thumbnail…

Untitled

This example visualizes population data for ten countries using a bubble chart. The visualization employs D3.js and its simulation API, `d3.forceSimulation`, to position the circles, with each bubble’s size representing the country’s population in thousands. The data is loaded from `data.csv` using D3’s `d3.csv` function. The chart updates the circle positions and radii based on the force simulation’s tick events, providing a clear spatial comparison of population magnitudes across the listed nations.

Aug 20, 2020

Loading thumbnail…

Makings a Bar chart

This bar chart displays the population of nine countries, using horizontally oriented bars where length encodes the population value for each nation. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. Data is loaded from a CSV file via `d3.csv`, and the population values are multiplied by 1,000 during preprocessing before being passed to the rendering function.

Aug 16, 2020

Loading thumbnail…

Let's make faces using d3js!!

This example draws a simple smiling face in an SVG using D3.js. A yellow circle forms the head, two smaller circles create the eyes, and an arc generated with the `d3.arc` function shapes the mouth. The code uses D3’s `select` and `arc` APIs to append SVG elements, with a centered group transform positioning the face within a 900×500 viewport.

Aug 15, 2020

Loading thumbnail…

Let's make faces using d3js!!

This example uses D3.js to draw a simple, static SVG face on a red background. The code selects the SVG element with `d3.select` and applies a background color via the `style` method, while the face itself is rendered using basic SVG shapes. It demonstrates a minimal setup for creating visual elements with D3 and SVG in a React framework, with the rendering approach visible in the `index.html`.

Aug 15, 2020